Taller #1
En parejas o equipos de tres personas
Deben escoger un tema de interes, como por ejemplo:
- Videojuegos
- Series
- Peliculas
- Culinaria
- Viajes
- Deportes
O cualquier otro tema de interés, para desarrollar el CRUD de un modelo con un
Proyecto de Vue y un Proyecto de NestJS 👇
Taller #1
Sección #1 de requerimientos
En el proyecto de NestJS:
- Definir el modelo del tema escogido con id, nombre e imagen como mínimo
-
Implementar el CRUD completo del módulo con
Prisma 7
y SQLite
- Generar el módulo completo (
module, controller, service y DTOs)
con el comando nest g resource
Taller #1
Sección #2 de requerimientos
En el proyecto de Vue:
- Listar los elementos consumiendo la API de NestJS
- Implementar una barra de búsqueda por nombre
- Implementar la paginación del listado
- Implementar la creación, edición y eliminación de elementos desde la interfaz
Taller #1
Sección #3 de requerimientos
Autenticación y sesión con JWT en
NestJS:
- Implementar el registro de usuarios guardando la contraseña hasheada
- Implementar el login y emitir un JWT firmado
- Proteger con un
Guard los endpoints de escritura (crear, editar y eliminar)
Taller #1
Sección #4 de requerimientos
Manejo de la sesión en Vue:
- Formularios de registro e inicio de sesión
- Persistir el token y enviarlo en el header
Authorization: Bearer <token>
- Proteger las rutas privadas con un navigation guard del router
- Implementar el cierre de sesión
Taller #1
Entregables:
- Repositorio público en GitHub con ambos proyectos
- Archivo
.env.example y un README con los pasos para levantarlos
- Demostración en clase de las 4 operaciones del CRUD y del flujo de autenticación
-
Pregunta individual
Criterios de evaluación
- (10%) Asistencia a clase
- (30%) API REST del CRUD en NestJS
- (30%) CRUD funcionando desde la interfaz en Vue
- (20%) Autenticación y sesión JWT
- (10%) Repositorio y estructura de los proyectos
Taller #2
En los mismos equipos del Taller #1
Sobre el mismo tema y reutilizando la
API de NestJS ya construida, deben desarrollar un
nuevo cliente móvil con un
Proyecto de Ionic 👇
El objetivo es replicar en el móvil las funcionalidades de la aplicación web de
Vue, sin reescribir el backend.
Taller #2
Sección #1 de requerimientos
Montaje del proyecto de Ionic:
- Definir la navegación con Ionic Vue Router y los componentes base
(
ion-page, ion-header, ion-content)
Taller #2
Sección #2 de requerimientos
CRUD del modelo desde el cliente móvil:
- Listar los elementos consumiendo la misma API
- Implementar la búsqueda por nombre con
ion-searchbar
- Implementar la paginación con scroll infinito (
ion-infinite-scroll)
- Implementar la creación, edición y eliminación pueden usar
ion-modal y
ion-alert
Taller #2
Sección #3 de requerimientos
Sesión con JWT en el
cliente móvil:
- Formularios de registro e inicio de sesión contra los mismos endpoints del Taller #1
- Persistir el token con Capacitor Preferences
- Enviar el header
Authorization: Bearer <token> de forma centralizada
Taller #2
Sección #4 de requerimientos
Empaquetado nativo con Capacitor:
- Agregar la plataforma Android con
npx cap add android
- Ejecutar la aplicación en un emulador o en un dispositivo físico
Taller #2
Entregables:
- Repositorio público en GitHub con el cliente de Ionic (nuevo repo o carpeta del repo del Taller #1)
- Un
README con los pasos para levantarlo y apuntarlo a
la API
- Demostración en clase de la app corriendo en emulador o dispositivo
-
Pregunta individual
Criterios de evaluación
- (10%) Asistencia a clase
- (30%) CRUD completo funcionando desde el cliente Ionic
- (20%) Autenticación y sesión JWT en el móvil
- (20%) Uso correcto de los componentes y la navegación de Ionic
- (20%) App compilada y ejecutándose en emulador o dispositivo