UNIVERSIDAD AUTONÓMA GABRIEL RENÉ
MORENO
Facultad De Ingeniería De Ciencias De La Computación y
Telecomunicaciones
Investigación U4
“Jet Stream en Laravel”
Alumno: Liz Yesenia Caceres Cabezas
Registro: 217059031
Docente: Ing. Evans Balcázar Veizaga
Materia: Tecnología Web
Grupo: SC
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
ÍNDICE
I. INTRODUCCIÓN .......................................................................................................... 4
II. ANTECEDENTES Y JUSTIFICACIÓN........................................................................ 4
III. SITUACIÓN PROBLEMÁTICA................................................................................ 4
IV. OBJETIVOS ................................................................................................................ 5
V. METODOLOGÍA ........................................................................................................... 5
VI. MARCO TEÓRICO .................................................................................................... 5
1. Laravel Jetstream ......................................................................................................... 5
2. Autenticación ............................................................................................................... 6
3. Perfiles ......................................................................................................................... 7
4. Seguridad ..................................................................................................................... 8
5. Equipos ...................................................................................................................... 10
VII. DESARROLLO ......................................................................................................... 12
1. Implemente con Tailwind CSS: CRUD (Persona) .................................................... 12
VIII. RESULTADOS ......................................................................................................... 20
IX. CONCLUSIONES ..................................................................................................... 20
X. RECOMENDACIONES ............................................................................................... 20
XI. REFERENCIAS ........................................................................................................ 21
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
ÍNDICE DE ILUTRACIONES
Ilustración 1. Formulario de autenticación en Laravel JetStream. ......................................... 7
Ilustración 2. Gestión de perfiles de Laravel JetStream. ........................................................ 8
Ilustración 3. Autenticación de dos factores de Laravel JetStream. ..................................... 10
Ilustración 4. Configuración de equipos de Laravel JetStream. ........................................... 11
Ilustración 5. Creación de nuevo proyecto. .......................................................................... 12
Ilustración 6. Creación de archivo Tailwind. ....................................................................... 13
Ilustración 7. Página principal. ............................................................................................. 14
Ilustración 8. Formulario para registro de nuevo usuario. .................................................... 14
Ilustración 9. Cambio de apariencia de página principal...................................................... 14
Ilustración 10. Adición del CRUD persona. ......................................................................... 15
Ilustración 11. Lista de amigos. ............................................................................................ 17
Ilustración 12. Implementación de Registrar persona. ......................................................... 18
Ilustración 13. Implementación de eliminar persona............................................................ 19
Ilustración 14. Implementación modificar persona. ............................................................. 20
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
I. INTRODUCCIÓN
Laravel Jetstream es un kit de inicio de aplicación bellamente diseñado para Laravel y
proporciona el punto de partida perfecto para su próxima aplicación de Laravel. Jetstream
proporciona la implementación para el inicio de sesión, registro, verificación de correo
electrónico, autenticación de dos factores, administración de sesiones, API a través de
Laravel Sanctum y funciones opcionales de administración de equipos.
Laravel Jetstream ofrece su elección de dos pilas de frontend: Livewire e [Link] . Cada
pila proporciona un potente y productivo punto de partida para crear su aplicación; sin
embargo, la pila que se elija dependerá de su idioma de plantillas preferido.
II. ANTECEDENTES Y JUSTIFICACIÓN
Uno de los motivos que más sobresalen de los frameworks es que suelen basarse en el
patrón de diseño MVC (Model-View-Controller). Este patrón de diseño dice que nuestra
aplicación, debería tener, al menos, estas tres capas: modelo, vista y controlador. Alguien se
me podría echar encima con el argumento: es que ese patrón de diseño lo puedes implementar
sin usar ningún framework. Pues no le falta razón, es cierto, se podría implementar sin usar
ningún framework. Pero la diferencia radica en que el framework te guía/obliga a
implementar este patrón, lo cual hará que tu aplicación sea más robusta. Por otro lado, si
decides implementar el patrón sin usar framework corres el riesgo de que un mal día metas
código en la capa que no debes, y todo pueda acabar en el archiconocido spaghetti code, lo
cual hará, con el paso del tiempo, que nuestra aplicación se vaya volviendo día tras día más
difícil de mantener.
III. SITUACIÓN PROBLEMÁTICA
De acuerdo a los requerimientos de la investigación se deben cumplir los siguientes
puntos:
Describir la funcionalidad y conceptos siguientes:
1. Autenticación.
2. Perfiles.
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
3. Seguridad.
4. Equipos.
5. Implemente con Tailwind CSS: CRUD (Persona)
IV. OBJETIVOS
- OBJETIVO GENERAL
o Desarrollar una aplicación web haciendo uso de JetStream de Laravel, además
de utilizar Tailwinds Css.
- OBJETIVOS ESPECÍFICOS
o Comprender la utilización del modelo de desarrollo MVC.
o Desarrollar las plantillas .[Link] para la implementación del CRUD
(persona).
o Realizar el código para visualizar las modificaciones.
o Conectar la aplicación con la base de datos.
V. METODOLOGÍA
El desarrollo de esta investigación se realizará en los siguientes pasos:
1. Instalación y configuración.
2. Implementación del CRUD (persona).
VI. MARCO TEÓRICO
1. Laravel Jetstream
Laravel Jetstream es un kit de inicio de aplicación bellamente diseñado para Laravel y
proporciona el punto de partida perfecto para su próxima aplicación de Laravel. Jetstream
proporciona la implementación para el inicio de sesión, registro, verificación de correo
electrónico, autenticación de dos factores, administración de sesiones, API a través de
Laravel Sanctum y funciones opcionales de administración de equipos. (Laravel, 2021)
1.1 Tailwindcss
Tailwind CSS es un framework CSS que permite un desarrollo ágil, basado en clases de
utilidad que se pueden aplicar con facilidad en el código HTML y unos flujos de desarrollo
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
que permiten optimizar mucho el peso del código CSS. Tailwind CSS es una potente
herramienta para el desarrollo frontend. Está dentro de la clasificación de los frameworks
CSS o también llamados frameworks de diseño. Permite a los desarrolladores y diseñadores
aplicar estilos a los sitios web de una manera ágil y optimizada. (desarrolloweb, 2021)
1.2 Livewire
Livewire es un marco de pila completo para el marco de Laravel que simplifica la
construcción de interfaces dinámicas, sin dejar la comodidad de Laravel. Si está usando
Livewire con Laravel, entonces despreocúpese por escribir código jquery ajax, Livewire le
ayudará a escribir código jquery ajax de forma muy simple usando PHP. Sin actualización
de página, la validación de laravel funcionará, el formulario se enviará, etc. (diegoo, 2021)
2. Autenticación
- Concepto
Controlar el acceso es la base de toda la seguridad. Se debe permitir el ingreso de las
personas correctas y evitar el ingreso de las personas equivocadas. Esto se hace confirmando,
o autenticando, la identidad de la persona que busca acceso, y luego verificando que la
persona esté autorizada para ingresar. La autenticación normalmente se logra mediante la
presentación de una identificación de usuario (generalmente la dirección de correo
electrónico del usuario) para identificar a la persona y una contraseña secreta conocida solo
por esa persona para confirmar la identidad. (Avast, 2021)
También hay opciones similares disponibles para verificar a los usuarios online. El
conjunto de estos tres métodos básicos se denomina “factores de autenticación”.
Individualmente, estos factores se conocen como:
- Factor de conocimiento: lo que sabes
Involucra un dato que (idealmente) solo conoces tú (la persona cuya identidad se está
tratando de verificar) y la persona o proceso que está verificando tu identidad.
- Factor de posesión o propiedad: lo que tienes
Involucra un objeto entregado por la persona u organización que te está verificando, que
puedes mostrar para verificar tu identidad.
- Factor de inherencia o existencia: lo que eres
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Involucra las cosas que forman parte de lo que eres; por lo general son cosas que nunca
cambiarán.
- Funcionalidad en Laravel Jetstream
Laravel Jetstream integra automáticamente las funciones de inicio de sesión, inicio de
sesión de dos factores, registro, restablecimiento de contraseña y verificación de correo
electrónico para su proyecto, lo que le permite comenzar a crear las funciones que le interesan
en lugar de preocuparse por los detalles esenciales de la autenticación del usuario. ([Link],
2021)
Ilustración 1. Formulario de autenticación en Laravel
JetStream.
3. Perfiles
- Concepto
Consiste en la creación de un perfil en alguna de las redes aplicación o sitio web existente
y su mantenimiento para conseguir que se convierta en un canal de comunicación con los
clientes y otras personas interesadas en la empresa. La decisión de crear un perfil en
cualquiera de las redes sociales implica que destinaremos un cierto tiempo a su
mantenimiento. Si no generamos información interesante desde nuestro perfil, no servirá para
nada tenerlo. (economipedia, 2021)
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
- Funcionalidad en Laravel Jetstream
El usuario accede a las funciones de gestión de perfiles de Laravel Jetstream utilizando el
menú desplegable de navegación de perfil de usuario superior derecho. Jetstream crea vistas
y acciones que permiten al usuario actualizar su nombre, dirección de correo electrónico y,
opcionalmente, su foto de perfil. (Laravel, 2021)
Ilustración 2. Gestión de perfiles de Laravel JetStream.
Como es típico de la mayoría de las funciones de Jetstream, la lógica ejecutada para
satisfacer las solicitudes de actualización de perfil se puede encontrar en una clase de acción
dentro de su aplicación. Específicamente, la
App\Actions\Fortify\UpdateUserProfileInformationclase se invocará cuando el usuario
actualice su perfil. Esta acción es responsable de validar la entrada y actualizar la información
del perfil del usuario. (Laravel, 2021)
4. Seguridad
- Concepto
Es el conjunto de medidas preventivas que permitan prever riesgos y medidas reactivas
de las organizaciones y de los sistemas basados en tecnología que permiten resguardar y
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
proteger la información buscando siempre mantener la confidencialidad, la disponibilidad e
integridad de la misma. La seguridad de la información está basada en la tecnología y
promueve la confidencialidad de la misma: la información está centralizada y puede tener un
alto valor, pero también puede ser divulgada, mal utilizada, robada, borrada o saboteada, lo
que afecta su integridad, confidencialidad y disponibilidad. (M. Cornejo Velázquez, 2021)
- Funcionalidad en Laravel Jetstream
Laravel Jetstream incorpora automáticamente el soporte de autenticación de dos factores
para todas las aplicaciones Jetstream. El usuario accede a las funciones de seguridad de
Laravel Jetstream mediante el menú desplegable de navegación del perfil de usuario superior
derecho. Dentro de este tablero, Jetstream diseña vistas que permiten al usuario habilitar y
administrar la autenticación de dos factores para su cuenta.
Cuando un usuario habilita la autenticación de dos factores para su cuenta, debe escanear
el código QR proporcionado utilizando una aplicación de autenticación TOTP gratuita como
Google Authenticator. Además, deben almacenar los códigos de recuperación enumerados
en un administrador de contraseñas seguro como Password. Si el usuario pierde el acceso a
su dispositivo móvil, la página de inicio de sesión de Jetstream le permitirá autenticarse
utilizando uno de sus códigos de recuperación en lugar del token temporal proporcionado por
la aplicación de autenticación de su dispositivo móvil. (Laravel, 2021)
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Ilustración 3. Autenticación de dos factores de Laravel JetStream.
La mayoría de las funciones de Jetstream se pueden personalizar mediante clases de
acción. Sin embargo, por motivos de seguridad, los servicios de autenticación de dos factores
de Jetstream están encapsulados dentro de Jetstream y no deberían requerir personalización.
5. Equipos
- Concepto
La gestión de equipos es un conjunto de técnicas, procesos y herramientas que emplea el
jefe de equipo (a menudo denominado team manager) con el fin de organizar y coordinar a
un grupo de individuos para un objetivo común. (Amezua, 2021)
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
- Funcionalidad en Laravel Jetstream
Las características del equipo de Jetstream permiten que cada usuario registrado cree y
pertenezca a varios equipos. Por defecto, cada usuario registrado pertenecerá a un equipo
"Personal". Por ejemplo, si un usuario llamado "Sally Jones" crea una nueva cuenta, será
asignado a un equipo llamado "Equipo de Sally". Después del registro, el usuario puede
cambiar el nombre de este equipo o crear equipos adicionales. (Laravel, 2021)
Ilustración 4. Configuración de equipos de Laravel JetStream.
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Como muchas otras funciones de Jetstream, la lógica de creación y eliminación de equipos
se puede personalizar modificando las clases de acción relevantes dentro de su
app/Actions/Jetstreamdirectorio. Estas acciones incluyen CreateTeam, UpdateTeamNamey
DeleteTeam. Cada una de estas acciones se invoca cuando el usuario realiza su tarea
correspondiente en la interfaz de usuario de la aplicación. Puede modificar estas acciones
según sea necesario en función de las necesidades de su aplicación. (Laravel, 2021)
VII. DESARROLLO
1. Implemente con Tailwind CSS: CRUD (Persona)
1. Instalar Laravel 8
Primeramente, se instala el comando composer para instalar la aplicación Laravel 8.
Ilustración 5. Creación de nuevo proyecto.
El siguiente desarrollo se debe realizar dentro del directorio del proyecto creado para
ello cambiamos de directorio con el siguiente comando: cd crudpersona
2. Crear autenticación con JetStream Livewire
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Ahora, en este paso, necesitamos usar el comando composer para instalar jetstream, así
que ejecutemos el comando de abajo e instalemos la biblioteca: composer require
laravel/jetstream
Para crear la autenticación usando el siguiente comando. puede crear inicio de sesión
básico, registro y verificación de correo electrónico. si desea crear una gestión de equipo,
debe pasar el parámetro de adición: php artisan jetstream:install livewire
Ahora, vamos al paquete node js y lo ejecutamos: npm install && npm run dev
Ahora, necesitamos ejecutar el comando de migración para crear la tabla de la base de
datos: php artisan migrate
Ilustración 6. Creación de
archivo Tailwind.
De esta manera ya podemos entrar a nuestro proyecto por medio del navegador:
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Ilustración 7. Página principal.
De igual manera ya podemos registrarnos, esto hará que se registre en la base de datos un
nuevo usuario y una vez iniciada la sesión se dirige a su Dashboard:
3. Cambio de vista de la página principal de bienvenida
Debemos hacer la respectiva modificación para que debamos iniciar sesión antes de
ingresar a nuestra aplicación web. Para ello debemos realizar la modificación de la vista
[Link]:
Ilustración 8. Formulario para registro de nuevo usuario.
Ilustración 9. Cambio de apariencia de página principal.
4. Visualización del CRUP persona en el Dashboard
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Se debe hacer visible en el menú de navegación la opción persona para que se pueda
realizar el uso del CRUD persona, para ello debemos editar el archivo: navigation-
[Link] en la línea 19.
Ilustración 10. Adición del CRUD persona.
5. Implementación de listar-persona.
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Debemos hacer la conexión a la base de datos para sacar todos los elementos de la tabla
User para ello se genera código php [Link]:
6. Visualización de listar-persona
Debemos hacer la conexión a la base de datos para sacar todos los elementos de la tabla
User para ello se genera código php [Link]:
<div class="p-2 sm:px-20 bg-white border-b border-gray-200">
<div class="mt-4 text-2xl">
<div>Amigos</div>
</div>
<div class="mt-3">
<table class="table-auto w-full">
<thead>
<tr>
<th class="px-4 py-2">
<div class="flex items-center">Id</div>
</th>
<th class="px-4 py-2">
<div class="flex items-center">Nombre</div>
</th>
<th class="px-4 py-2">
<div class="flex items-center">email</div>
</th>
<th class="px-4 py-2">
<div class="flex items-center">Accion</div>
</th>
</tr>
</thead>
<tbody>
@foreach($persona as $persona)
<tr>
<td class="rounded border px-4 py-2">{{$persona->id}}</td>
<td class="rounded border px-4 py-2">{{$persona->name}}</td>
<td class="rounded border px-4 py-2">{{$persona->email}}</td>
<td class="rounded border px-4 py-2"> Modificar/Eliminar
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
</div>
7. Construcción de la ruta persona
Debemos hacer la ruta para hacer el uso de la vista [Link] para ello se añade
el siguiente código en [Link]:
Route::middleware(['auth:sanctum', 'verified'])->get('/persona', function () {
return view('persona');
})->name('persona');
Ahora podemos hacer uso de la ruta para su respectiva visualización.
Ilustración 11. Lista de amigos.
8. Implementar registrar persona
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Podemos hacer el uso de los métodos ya predefinidos de Laravel Jetstream para hacer uso de ellos código
en [Link]:
Ilustración 12. Implementación de Registrar persona.
9. Implementar Eliminar persona
Podemos hacer el uso de los métodos ya predefinidos de Laravel Jetstream para hacer uso de ellos código
en [Link]:
<x-jet-danger-button wire:click="confirmUserDeletion({{$persona-
>id}})" wire:[Link]="disabled">
{{ __('Eliminar') }}
</x-jet-danger-button>
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Debemos hacer la conexión a la base de datos para eliminar los elementos de la tabla User para ello se genera
código php [Link]:
Ilustración 13. Implementación de eliminar persona.
10. Implementar modificar persona
Podemos hacer el uso de los métodos ya predefinidos de Laravel Jetstream para hacer uso de ellos código
en [Link]:
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
Ilustración 14. Implementación modificar persona.
VIII. RESULTADOS
Con el desarrollo de la tarea, se conoció los conceptos importantes de seguridad dentro de
las aplicaciones webs, y q la implementación de estas se puede realizar de manera fácil a
través del framework Jetstream de Laravel. Esto nos deja el primer paso para el desarrollo de
páginas web, y servirá para el desarrollo de las demás prácticas, así como de proyectos.
IX. CONCLUSIONES
Con el desarrollo de la investigación se pudo comprender cómo se realiza una aplicación web mediante el
uso de frameworks usando el modelo MVC, separando la lógica del negocio de la base de datos y de la
visualización del cliente.
X. RECOMENDACIONES
Se recomienda aprender el uso de los distintos frameworks que existen en el medio para poder trabajar de
mejor manera haciendo uso de los recursos q estos nos proporcionan.
LIZ YESENIA CACERES CABEZAS
Jet Stream en Laravel
FACULTAD DE INGENIERIA DE CIENCIAS DE LA COMPUTACION Y TELECOMUNICACIONES
XI. REFERENCIAS
Amezua, E. C. (2021). UOC. Recuperado el 19 de diciembre de 2021, de
[Link]
Avast. (2021). Recuperado el 19 de diciembre de 2021, de [Link]
importancia-de-la-autenticaci%C3%B3n-avast
desarrolloweb. (2021). Recuperado el 19 de diciembre de 2021, de
[Link]
diegoo. (2021). Recuperado el 19 de diciembre de 2021, de [Link]
livewire-tutorial-de-carga-de-archivos/
economipedia. (2021). Recuperado el 19 de diciembre de 2021, de
[Link]
Laravel. (2021). Recuperado el 19 de diciembre de 2021, de
[Link]
M. Cornejo Velázquez, M. G. (2021). Recuperado el 19 de diciembre de 2021, de
[Link]
[Link]. (2021). Recuperado el 19 de diciembre de 2021, de [Link]
personalizado-en-laravel/
LIZ YESENIA CACERES CABEZAS
