En este laboratorio repasaremos los conceptos principales del módulo 2:
- Creación de un proyecto Express desde 0
- Plantillas de HBS
- Modelos de Mongoose
- CRUDs
- Formularios
El laboratorio consistirá en crear un mini Eventbrite! Los conceptos básicos; listar, borrar, publicar y ver el detalle de los eventos.
Lo primero de todo es inicializar el proyecto de Node con npm init
, instalar Express con npm i Express
y crear la estructura básica del proyecto:
configs/
controllers/
models/
views/
app.js
Da forma al app.js
con lo básico para poder arrancar la aplicación de Express escuchando en el puerto 3000.
Configuración de hbs
:
- En
app.js
configura el motor de renderización y la ruta carpeta de vistas - Crea un
views/layout.hbs
(mete bootstrap, pero no te preocupes por los estilos por ahora!) - Crea un
configs/hbs.config.js
para configurar las vistas parciales.
Configura la conexión contra la base de datos en configs/db.config.js
y añádelo al app.js
. Lo ideal es usar una base de datos de Atlas.
Definición del modelo de evento:
{
"title": "How To Navigate A Quarter Life Crisis",
"description": "Learn how to navigate yourself out of a QLC and be equipped with an internal compass that will navigate you out of any future crisis. A Quarter Life Crisis (QLC) can sneak up on you anytime between ages 24 - 35. You’ve done everything ‘right’ - studied, moved out, got a job, got a relationship - but you don’t feel ‘right’. You thought you were going to be successful, happy and fulfilled by this point. Instead you feel lost, stuck, insecure, disappointed about your career, and confused. You want to run away but don’t know where. You want to change but don’t know where to even start. Worst of all, you feel like you’re the only one going through this.",
"capacity": 30,
"start": "05-17-2023 09:00:00",
"end": "05-17-2023 10:00:00",
"image": "https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F125685779%2F31424710869%2F1%2Foriginal.20210209-233636?w=800&auto=format%2Ccompress&q=75&sharp=10&rect=0%2C0%2C2466%2C1233&s=de63ea93f293308a9f07ad5cb502b1b4",
"tags": [
"Online Events",
"#career",
"free"
]
}
- title:
- String
- Obligatorio
- Mínimo 3 chars
- description:
- String
- Obligatorio
- Mínimo 10 chars
- capacity:
- Number
-
0
- start:
- Date
- end:
- Date
- No puede ser anterior a
start
(deja esta validación sin completar, lo veremos en clase todos juntos)
- image:
- String
- Tiene que ser una URL (deja esta validación sin completar, lo veremos en clase todos juntos)
- tags:
- Array de Strings
Pasos a seguir:
- Modelo: Crea el modelo de Evento
models/event.model.js
- Seeds: Implementa
bin/seeds.js
para que cargue todos los eventos dedata/events.json
- Comprueba usando Compás que los eventos se han añadido a la base de datos
Listado de eventos:
- ruta:
/events
- controlador:
controllers/events.controller.js
- vista:
views/events/list.hbs
El listado de los eventos incluirá información mínima del mismo, diseñaremos un grid en el que se verán las fotos de los eventos.
- título, imagen y fecha del evento
- implementa un helper de hbs
configs/hbs.config.js
que permita pintar la fecha en formato 'YYYY-MM-DD' (2024-02-17), para ello necesitarás instalar la librería dayjs. El helper se usará de la siguiente forma{{dateFormat event.start 'YYYY-MM-DD'}}
No te preocupes mucho por los estilos por ahora, better done than perfect!
Detalle de un evento:
-
ruta:
/events/:id
-
controlador:
controllers/events.controller.js
-
vista:
views/events/detail.hbs
-
Información completa del evento
-
Si el identificador no existiese en la base de datos, hay que devolver un error 404, usa la librería http-errors para dar paso a ese error!
No implementes aún el middleware de errores general, simplemente veremos un pantalla un error feo de no encontrado en el caso de no existir el evento.
Formulario de Eventos:
-
ruta:
/create-event
-
controlador:
controllers/events.controller.js
-
vista:
views/events/create.hbs
-
Implementa un formulario para crear los eventos
-
Muestra los errores de validación en cada imput (400 status code)
-
En el caso de que la reacción sea correcta redirige al usuario al listado de eventos
Borrado de un evento
- ruta:
/events/:id/delete
- controlador:
controllers/events.controller.js
- vista:
views/events/list.hbs
Desde el listado de eventos añade un botón para poder borrar ese evento si pinchas en él!
Añade los middlewares de errores
- 404 si ninguna ruta hace match
- Handler general para mostrar las distintas vistas de error
- No te olvides de mostrar el error por consola!
Dale cariño al CSS, barra de navegación, footer, formularios, listados, etc...
- Seguid las iteraciones para llevar el proyecto de una manera ordenada. Sin embargo, si veis que necesitáis seguir otro orden o preferís organizaros de otra manera, adelante. Estas iteraciones son para seguir unas pautas y asegurarnos que se cumplen los requisitos del proyecto.
- Usad Bootstrap o similares para la maquetación si queréis avanzar de forma rápida.
- Vais a ser muchas personas solucionando el mismo problema. Os animamos a que os ayudéis y os deis ideas entre vosotros. Surgirán features interesantes para vuestros proyectos, incluso podéis intercambiar conocimientos de cómo lo habéis hecho.
Este lab no es necesario entregarlo, es para trabajarlo en clase!