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 parejas o equipos de tres personas
Deben escoger nuevamente un tema de interés (pueden reutilizar el tema y el modelo del Taller #1)
para desarrollar un Proyecto de Astro desplegado sobre la
arquitectura híbrida de Cloudflare 👇
Arquitectura Híbrida
En el mismo proyecto de Astro se deben mezclar:
⚡ SSR (Dinámico)
- Listado público de los elementos
- Paginación y búsqueda por nombre
- Generado en el servidor por request
🏗️ SSG (Estático)
- Página pública "Acerca de"
- CRUD del modelo detrás de autenticación
- Pre-renderizado en build time
Taller #2
Sección #1 de requerimientos
Listado público con SSR:
- Listar los elementos consultando Supabase desde el servidor en cada request
- Implementar la búsqueda por nombre y la paginación con query params
(
?q=...&page=2) resueltos en el servidor
- Los elementos deben estar siempre visibles en el HTML: nada de cargarlos con
fetch desde el cliente
Taller #2
Sección #2 de requerimientos
CRUD del modelo con SSG y autenticación:
- Páginas de registro, login y administración pre-renderizadas con
export const prerender = true
- Operaciones Supabase desde el cliente
- Proteger la escritura con políticas RLS y redirigir al login si no hay sesión activa
Taller #2
Sección #3 de requerimientos
Página pública y navegación con View Transitions:
- Página pública "Acerca de" pre-renderizada
- Un
Layout común con <ClientRouter /> y <title>
por página
Taller #2
Sección #4 de requerimientos
🚀 Desplegar en Cloudflare Worker 🚀
Tip
Abrir el sitio desplegado y presionar Ctrl + U (ver código fuente):
- En el listado público los nombres de los elementos deben aparecer en el
HTML, incluso con JavaScript deshabilitado
- En el CRUD el HTML es el mismo para todos los usuarios: los datos
llegan desde el cliente después de autenticarse
Taller #2
Entregables:
- Repositorio público en GitHub con el proyecto de Astro
- Archivo
.env.example y un README con los pasos para levantarlo y la URL
pública en Cloudflare
- Demostración en clase del listado SSR, el CRUD autenticado y las View Transitions
-
Pregunta individual
Criterios de evaluación
- (10%) Asistencia a clase
- (25%) Listado público SSR con búsqueda y paginación
- (25%) CRUD SSG con Supabase Auth y RLS
- (15%) View Transitions y página "Acerca de"
- (20%) Despliegue en Cloudflare Worker
- (5%) Repositorio y estructura del proyecto