Antes de comenzar...
Agrega un sistema funcional de inicio de sesión y registro de usuarios con Laravel Jetstream
Laravel Jetstream es una navaja suiza para la autenticación de usuarios. Con solo instalarlo, y ejecutar un par de comandos, tendrán un proyecto capaz de registrar usuarios, iniciar y cerrar sesión, cambiar contraseña, recuperar la contraseña, modificar la imagen de perfil, incluso, con ciertas configuraciones más, tener un sistema de autenticación en dos pasos (2FA) y verificación de contraseña. Hay varias cosas más como manejo de equipos y relacionados, pero no vamos a tratarlas en este artículo. Nos centraremos en lo esencial y más requerido en los proyectos actuales.
Como puedes ver, esencialmente tendrás todo lo que requieres (y más) para que tus usuarios interactúen con tu sistema y los datos en el mismo. Eso sí, el "costo" a pagar para utilizar Jetstream, es que deberás adaptarte a alguno de esos stacks TALL (Tailwind CSS, Alpine.js, Laravel y Livewire) o VILT(Vue.js, Inertia.js, Laravel y Tailwind CSS). Sea cual sea el que elijas, el funcionamiento será el mismo, pero el código y la manera de implementación no lo será. De hecho, en el artículo nos centraremos en la implementación con el stack TALL.
Instalando Laravel Jetstream en el proyecto, usando Composer
Jetstream es un paquete independiente (aunque es mantenido directamente por el equipo de Laravel) que puede ser instalado con composer, ejecutando composer require laravel/jetstream en tu consola.
Una vez terminado el proceso anterior, tendrás a Jetstream como parte de las dependencias de tu proyecto. Sin embargo, aún debemos llevar a cabo unos pasos más para generar y compilar todos los componentes, veamos:
Generando los componentes de Jetstream en el proyecto, usando artisan
Una vez que tienes Jetstream disponible en el proyecto, podrás descubrir una serie de comandos nuevos relacionados con Jetstream, al ejecutar php artisan. Busca directamente en el conjunto de comandos de Jetstream en toda la lista que aparece. Entre esos comandos, está el comando install jetstream:install, el cual recibe como parámetro el complemento a utilizar, ya sea Livewire (nuestra elección) o Inertia.
Eligiendo entre Laravel Livewire e Inertia.js al usar Jetstream
Respecto a cuál elegir, es cuestión de gustos, pues Laravel Jetstream se adaptará y funcionará de manera idéntica con ambos. Sin embargo, las diferencias estarán a nivel de código, pues Livewire usará plenamente componentes de PHP, mientras que Inertia dependerá fuertemente de Vue.js y de JavaScript. Así, si prefieres mantener todo en PHP y los componentes habituales, recomiendo usar Livewire, de lo contrario, Inertia.js será adecuado. En nuestro caso, para este artículo usaremos Laravel Livewire (debo admitir que procuro evitar JavaScript cada que me es posible).
Procedamos entonces ejecutando el comando php artisan jetstream:install livewire. Esto generará una increíble cantidad de acciones, vistas, controladores y demás componentes que se harán cargo de todo el proceso de inicio de sesión, registro de usuario y todo lo relacionado por ti. Solo con ejecutar un comando. Alternativamente, puedes usar php artisan jetstream:install livewire --teams y así Jetstream también agregará todo lo relacionado con el manejo de equipos en tu aplicación. Sin embargo, para el artículo nos centraremos en el uso regular, sin el manejo de equipos, pero eres libre de explorar esta opción.
Instalando los componentes del frontend y compilando para terminar
En este punto, ya tienes todos los componentes necesarios para que funcione Jetstream. De hecho, ya todo funciona, pero lucirá bastante mal en el navegador, pues los assets (CSS y JS) no han sido compilados, ni tampoco los paquetes necesarios para que todo se vea y funcione bien. Recuerda que Jetstream hace uso de TailwindCSS, entre varios más (como Alpine.js en el caso de elegir Livewire).
Independiebntemente, de haber elegido Inertia.js o Livewire, deberás instalar las dependencies del frontend, usando npm, al ejecutar npm install. Una vez se han instalado todas las dependencias del frontend, podrás compilar los assets ejecutando npm run dev. Si ya vas a producción, puedes ejecutar npm run prod (lo cual copilará los assets optimizando su tamaño y funcionalidades).
Creando la estructura de datos para probar Jetstream
En este punto, sin escribir una sola línea de código, ya tienes un sistema de autenticación de usuario que luce bastante bien en tu navegador. Puedes probarlo ahora ejecutando php artisan serve y yendo a localhost:8000.
Sin embargo, falta un último detalle. Todo luce muy bien, pero para que funcione por completo Jetstream necesita un punto donde almacenar los datos relacionados con los usuarios, así que deberás ejecutar php artisan migrate lo cual creará todas las tablas que servirán para reconocer los usuarios con sus correos y contraseñas, además de permitir recuperar sus contraseñas cuando sea requerido.
Ahora bien, eres libre de usar el tipo de base de datos que quieras de las soportadas por Laravel (SQLite, MySQL, PosgreSQL, SQLServer). Por facilidad, recomendaría usar SQLite, para hacer una prueba rápida, poniendo DB_CONNECTION=sqlite en tu archivo .env.
Terminando
En este punto tu proyecto debe tener un sistema perfectamente funcional que permitirá iniciar sesión, registrar usuarios, recuperar sus contraseñas, gestionar sus perfiles y varias cosas más, solo ejecutando una serie de comandos. Eres completamente libre de explorar, jugar y aprender tanto como quieras del uso de Jetstream a partir de ahora. Déjame tus comentarios o preguntas por acá.
Feliz aprendizaje 😊
La última actualización de este artículo fue hace 2 años
