Presentando AdonisJS - Tu Puerta de Entrada a Aplicaciones Full-stack con TypeScript

Muy bien, hoy vamos a hablar sobre Adonis.js, que es un framework full-stack que puedes usar para crear aplicaciones web o APIs JSON escritas en TypeScript y Node.js. Primero, permíteme comenzar presentándome. Mi nombre es Harmendar Virk. Soy el creador de Adonis.js, y actualmente estoy trabajando con Medusa, que es una plataforma de comercio electrónico slash framework para desarrolladores. Soy de India y soy padre de una hija de cuatro años, y puedes encontrarme en Twitter con este handle, at the rate Amanvirk1.

Ahora, esta charla va a ser muy intensiva en código, donde compartiré muchos fragmentos de código contigo. Pero antes de hacer eso, tomemos un momento y hablemos sobre Adonis.js desde un punto de vista más fundamental y filosófico. Entonces, Adonis.js es un framework MVC, lo que significa que cuando estás escribiendo tus aplicaciones, estarás lidiando con el flujo clásico de MVC, donde usarás modelos para interactuar con la base de datos, escribirás controladores para manejar la solicitud HTTP, y luego usarás vistas para básicamente mostrar HTML a los usuarios.

Adonis.js no es un meta framework, así que muchos frameworks populares en el ecosistema de JavaScript nacen del ecosistema de front-end, donde generalmente están ligados a una biblioteca de front-end, como Vue o React, y luego van hacia el back-end, tratando de resolver algunos de los problemas en el espacio de back-end. Mientras que Adonis.js es completamente opuesto. Somos un framework orientado al back-end, y tienes la libertad de elegir cualquier stack de front-end que desees. Así que puedes usarlo con Vue, React, o como un motor de plantillas clásico, como te mostraré en esta charla. Somos un framework TypeScript primero, lo que básicamente significa que la seguridad de tipos juega un papel importante cuando estamos diseñando las APIs y características del framework. Así que, cada vez que estamos trabajando en cualquier nueva API, queremos asegurarnos de que sea completamente segura en cuanto a tipos y no optar por las opciones, que básicamente rompen esa seguridad de tipos. También abrazamos la plataforma, que en nuestro caso es Node.js, al máximo, lo que significa que cada vez que Node.js lanza algo, tratamos de usarlo en lugar de otras bibliotecas npm o tener nuestras propias soluciones para ello. Por ejemplo, para implementar los alias de importación, usamos subpart imports, que es compatible con Node. Usamos almacenamiento local asíncrono o contexto asíncrono durante la solicitud HTTP, para que en cualquier parte de tu aplicación puedas obtener la información relacionada con la solicitud. Y muy recientemente, comenzamos a integrar todo el trazado del framework con los canales de diagnóstico, que es, nuevamente, como una API de primera clase de Node. Y finalmente, Adonis.js es un framework, que es para equipos e individuos que aprecian frameworks con opiniones o como frameworks con baterías incluidas.

Muy bien, eso fue todo sobre Adonis.js. Ahora podemos empezar a sumergirnos en algo de código. Así que vamos a jugar un escenario aquí en el que estamos tratando de construir una versión simplificada de Product Hunt para mostrar todos los increíbles proyectos de código abierto en internet, y vamos a llamarlo OS Hunt. Ahora, por supuesto, no vamos a construir toda la aplicación, pero cubriremos todos los puntos de contacto para ver qué se necesita para construir una aplicación como esta en Adonis.js.

Así que lo primero es lo primero, tenemos que crear un nuevo proyecto, y podemos hacerlo ejecutando este comando, npm init adonis y el nombre del proyecto. Y después de ejecutar este comando, obtendremos una nueva aplicación de Adonis.js, que viene con un ORM SQL, soporte para autenticación, carga de archivos, hash de contraseñas, básicamente todas las cosas que necesitamos para iniciar nuestro desarrollo. Además, así es como se ve la estructura de carpetas de una aplicación nueva de Adonis.js, donde todo tiene su propio lugar donde vive, y no tienes que averiguarlo por tu cuenta.

Bien, así que lo primero que queremos hacer justo después de crear nuestra aplicación es ver qué tan rápido podemos realizar las operaciones CRUD de nuestra aplicación. Y en nuestro caso, básicamente será crear, leer, actualizar y eliminar proyectos. Muy bien, todo comienza con el enrutamiento, donde las rutas son esencialmente los puntos de entrada HTTP de tu aplicación. Y así es como puedes definirlas. Así que en nuestro caso, necesitamos aproximadamente estos siete endpoints para gestionar nuestros proyectos. Primero, tendremos un endpoint para listar todos los proyectos. Y luego tenemos nuestros dos endpoints para mostrar el formulario para crear un nuevo proyecto y luego manejar el envío para básicamente guardar ese proyecto en la base de datos. Y luego queremos mostrar un proyecto por su slug, luego un par de endpoints más para gestionar la actualización de un proyecto, y finalmente un endpoint para eliminar el proyecto. Una vez que hayamos definido nuestras rutas, podemos crear un controlador para ello para que no tengamos que escribir toda la lógica en este archivo masivo de rutas.

Y podemos, esencialmente, organizar todo usando controladores. Y podemos crear un controlador usando este comando llamado node ace make controller, y luego el nombre del controlador que queremos crear. Y una vez que hayamos creado nuestro controlador, podemos volver a nuestro archivo de rutas y podemos reemplazar todos estos callbacks en línea con las referencias del controlador. Así que aquí estamos diciendo, queremos usar el controlador de proyectos para todos estos endpoints, pero queremos usar diferentes métodos para manejar diferentes rutas. Y así es como esencialmente se ve un controlador donde es una clase de JavaScript estándar con todos los métodos que queremos crear para manejar diferentes solicitudes HTTP. Ahora, antes de empezar a poner cualquier lógica dentro de nuestros controladores, necesitamos una forma de interactuar con nuestra base de datos para que podamos obtener proyectos de allí y también podamos guardar nuestros proyectos dentro de la base de datos.

Y aquí es donde nos moveremos a nuestra siguiente capa de MVC llamada modelos. Así que los modelos son básicamente una forma para que interactúes con la base de datos y las migraciones son una forma de crear y alterar tablas de la base de datos o como crear índices y eliminar índices y todo eso. Así que puedes crear un nuevo modelo junto con una migración usando este comando, que es node ace make model, el nombre del modelo y la bandera dash M para básicamente decir que también quieres una migración junto con el modelo. Una vez que tengas el archivo de migración, puedes esencialmente escribir las instrucciones que quieres para crear una nueva tabla. En nuestro caso, necesitamos una tabla con una clave primaria. Ese es el ID, el nombre del proyecto, su slug único, descripción del proyecto y la URL que alguien puede hacer clic e ir al sitio web del proyecto. Y así es como se ve un modelo, donde estaremos usando la migración para simplemente crear la tabla.

Pero en nuestra aplicación para interactuar con esa tabla, usaremos un modelo y los modelos se representan nuevamente como clases de JavaScript. Muy bien. Ahora que tenemos nuestra tabla de base de datos y tenemos un modelo, podemos pasar a la parte final de nuestra capa MVC, que son las vistas.

Y en este ejemplo, usaré un motor de plantillas interno llamado Edge para renderizar páginas HTML. Pero puedes reemplazar muy fácilmente la capa de vista con cualquier otro motor de plantillas o incluso un framework de front-end como Vue o React. Así que para usar nuestras vistas, tendremos que volver a nuestro controlador, que está completamente vacío ahora mismo aparte de estos métodos, y podemos empezar a poner algo de código dentro de él. Así que aquí estamos diciendo que importaremos nuestro modelo de proyecto y luego crearemos una nueva consulta y paginaremos los resultados.

Y una vez que tengamos todos esos proyectos, llamaremos a vue.render, le daremos la ruta de la plantilla y pasaremos los proyectos por referencia para que podamos acceder a estos proyectos dentro de nuestra plantilla y podamos renderizarlos. Esencialmente, así es como se ve una versión simplificada de una vista o una plantilla donde estamos usando un diseño y luego estamos iterando a través de nuestros proyectos y los estamos renderizando. Así que creo que es un gran comienzo hasta ahora. Hemos definido nuestras rutas. Hemos creado un controlador. Tenemos nuestra base de datos en su lugar.

Y finalmente, podemos renderizar una plantilla HTML obteniendo datos de la base de datos. Así que ahora avancemos y veamos cómo podemos manejar el envío de formularios y validar la entrada del usuario.

Ahora, cada aplicación de Adonis JS viene con un analizador de cuerpo preconfigurado, que es capaz de analizar cargas útiles JSON, cuerpos multipartes, esencialmente, que contienen cargas de archivos y también formularios codificados en URL. Y para validar la entrada del usuario, usaremos Wine.js, que es, nuevamente, una biblioteca de validación interna. Es seguro para tipos. Es súper rápido. Y se integra muy estrechamente con el resto del framework. Y te mostraré cómo.

Así que lo que vamos a hacer es vamos a crear un nuevo validador ejecutando este comando, make validator, y luego el nombre del validador que queremos crear. Dentro de ese archivo, definiremos nuestro esquema. Es esencialmente una lista de propiedades que queremos aceptar en nuestro formulario, y queremos validarlo. Una vez que hayamos definido nuestro esquema de validación, podemos volver a nuestro controlador y escribir la lógica para validar la entrada del usuario usando este esquema de validación. Así que actualizaremos la implementación del método store. Obtendremos la solicitud y la respuesta de nuestro contexto HTTP. Y aquí, diremos que queremos validar el cuerpo de la solicitud usando este create project validator. Y una vez que la validación esté hecha, obtendremos un objeto de carga útil, y es esencialmente seguro para tipos, por lo que puedes ver todas las propiedades allí y cuáles son sus tipos. Finalmente, damos esta carga útil a nuestro modelo de proyecto, y creamos una nueva entrada dentro de la base de datos. Y finalmente, redirigimos al usuario de vuelta a la página de proyecto slash productos para que puedan ver un proyecto individual.

Así es como esencialmente funciona CRUD dentro de una aplicación de Adonis JS. Comienzas definiendo rutas. Luego defines un controlador. Dentro del controlador, escribes toda la lógica para manejar la solicitud. Puedes usar modelos y validadores para esencialmente validar la entrada del usuario frente a los datos en la base de datos y obtener datos de la base de datos. No implementaré todos los métodos restantes porque son, básicamente, lo mismo. Tienes que usar el modelo y obtener o persistir la información necesaria dentro de la base de datos. Pero avanzaremos, y veremos cómo podemos hacer cosas más allá de lo básico, esencialmente cosas como implementar autenticación, enviar correos electrónicos a usuarios recién registrados, y tal vez escribir un par de pruebas para esta aplicación. Así que comencemos con auth. Adonis JS viene con un paquete de primera parte preconfigurado para autenticar a tus usuarios. Y puedes usar diferentes tarjetas de autenticación para realizar la autenticación. Puedes usar sesiones.

Puedes usar tokens de API. O incluso puedes usar, como, autenticación HTTP básica. Así que para implementar auth, nuevamente, vamos a definir dos rutas. Crearemos un nuevo controlador. Y dentro de nuestro controlador, escribiremos la lógica para realizar la autenticación. Así que una vez más, usaremos nuestro objeto de solicitud para obtener el correo electrónico y la contraseña del cuerpo de la solicitud. Daremos este correo electrónico y contraseña al modelo de usuario, que ya existe cuando creas una nueva aplicación de Adonis JS. Y llamaremos a este método llamado verify credentials. Una vez que las credenciales han sido verificadas, obtendremos un objeto de usuario. Y luego podemos usar este objeto auth, que existe dentro de este contexto HTTP, para iniciar sesión al usuario. Y una vez que el usuario ha iniciado sesión, podemos redirigirlo de vuelta al endpoint del proyecto para que pueda ver todos los proyectos.

Bien, así es como se ve la autenticación simple en Adonis JS. No tienes que incluir ningún paquete de terceros o hacer algo especial. Todo está integrado. Ahora veamos cómo podemos manejar el registro de usuarios y cómo podemos enviar correos electrónicos cada vez que un usuario se registra. Una vez más, vamos a usar un paquete de primera parte para eso. Y tiene soporte para enviar correos electrónicos usando SMTP, Mailgun, Amazon SES, SparkPost, Resend, y muchos más servicios de correo. Así que una vez más, volvemos a nuestro archivo de rutas. Definimos los endpoints para el registro de usuarios. Creamos un nuevo controlador. Y dentro de ese controlador, escribiremos la lógica para crear un nuevo usuario. Así que usamos nuestro objeto de solicitud. Extraemos el nombre completo del usuario, correo electrónico, contraseña, damos esa carga útil a nuestro modelo, y creamos un nuevo usuario. Una vez hecho eso, nuevamente usaremos nuestro objeto auth, e iniciaremos sesión al usuario y lo redirigiremos a la página del proyecto. Pero si vuelves, notarás aquí cuando estamos leyendo la entrada del usuario, no la estamos validando, lo cual idealmente no es una buena decisión, al menos cuando estamos creando nuevos usuarios, siempre deberíamos validar los datos antes de escribirlos en la base de datos. Así que por eso vamos a crear otro validador, y aquí definiremos el esquema. Así que decimos que necesitamos el nombre completo, necesitamos el correo electrónico, y necesitamos la contraseña. Y aquí, si notas, tenemos una regla llamada unique, y le estamos diciendo a esta regla unique que queremos asegurarnos de que este correo electrónico sea único dentro de la tabla de usuarios, y deberíamos buscar en la columna de correo electrónico. Y aquí es donde puedes ver qué tan estrechamente la biblioteca de validación, que es wine, se integra con el resto del framework. No tienes que hacer una primera pasada de validaciones y luego escribir una consulta tú mismo para verificar si el correo electrónico es único o no.

Puedes simplemente usar el validador y confiar en estas reglas específicas de la base de datos para verificar los valores dentro de la base de datos. Y luego también tenemos una regla confirmada, que esencialmente significa que el usuario tendrá que escribir la contraseña dos veces para que confirmen su contraseña cuando envíen el formulario. Y luego podemos volver a nuestro controlador, y podemos reemplazar nuestro método request.only con request.validateUsing para validar la entrada del usuario y luego persistir el usuario en la base de datos.

Muy bien, pero ¿qué hay de enviar un correo electrónico? Hemos creado un nuevo usuario. Los hemos registrado, los hemos redirigido, pero no hemos enviado ningún correo electrónico para que verifiquen su dirección de correo electrónico. Bueno, podemos hacer eso bastante fácilmente al incorporar el servicio de correo del paquete AdonisJS slash mail. Y aquí podemos decir mail.sendLater, y luego podemos componer nuestro mensaje que queremos enviar. Y este método mail.sendLater esencialmente pondrá en cola el correo electrónico dentro de una cola en memoria, pero también puedes reemplazar esta cola en memoria con una cola más persistente como BulMQ o Amazon SQS. Puedes hacer eso bastante fácilmente.