Ironhack — Semana 6| Proyecto Back-End con MongoDB, implementación API Google Maps, dailies con el equipo y nuevos retos.
¡Construcción de un back-end con MongoDB, sistema de vistas con Handlebars, la importancia de una buena comunicación con el equipo y mucho más!
Por el momento, la web no está optimizada para pantallas móviles, así que recomiendo visualizarla desde el ordenador :)
Link del proyecto: https://colorful-twill-deer.cyclic.app/
Planteamiento
Empezamos semana 6 del bootcamp. Al igual que en la del primer proyecto, la destinamos exclusivamente al desarrollo de la aplicación elegida.
Al ser una aula con pocos alumnos, hicimos la elección de equipos de forma aleatoria, y en mi caso, tuve la suerte de ir con Josep Turró y Andrea Alarcón, dos grandes compañeros de curso, cada uno con unas habilidades increíbles y, lo más importante, con mucha motivación.
Al ser módulo 2, la aplicación en cuestión se basaba en montar un sistema back-end, con una base de datos en MongoDB, usando NodeJS y para visualizar nuestras páginas, Handlebars.
Durante el primer día, en las primeras horas, decidimos qué aplicación hacer. Debíamos de tener en cuenta el poco tiempo que teníamos para realizar tal proyecto, pues tenía que ser algo realista de hacer, que nos comportase cierto nivel de reto y sobre todo, que nos sirviera para aprender.
Así pues, poniendo sobre la mesa las cosas que habíamos aprendido a hacer en MongoDB, Express y Mongoose, no se nos ocurrió otro tema más interesante que hacer un Foro de Cocktails.
Manos a la obra con nuestro Foro de Cocktails
Al iniciar el proyecto, pasamos unas cuantas horas pensando y estructurando las tareas para cada uno. El MVP tenía que tener:
- Mínimo 2 modelos de BBDD.
- Tener varios roles de usuarios.
- Sistema de registro y login, con mensajes de error personalizados por si el usuario se equivoca.
- Un CRUD completo.
- Diseño responsive.
- Usar una API externa.
Conjuntamente, acordamos la estructura de los modelos. Por una parte, teníamos el modelo del Usuario, este modelo consta de:
- Nombre
- Contraseña
Y, por otra parte, tenemos el modelo de Cocktail, el cual consta de:
- Nombre
- Alcoholes
- Ingredientes
- Procedimiento y descripción
- Origen
- Imagen (la almacenamos en Cloudinary)
- Creador (es un ID de un Usuario)
Con todo esto sobre la mesa, hicimos reparticiones de tareas.
En mi caso, hice el sistema de registro y login.
Para el registro, usamos el paquete de BCRYPT. Este paquete de NPM lo usamos para encriptar las contraseñas de los usuarios, y de ese modo guardarlas en nuestras BBDD protegidas.
También cuenta con un método de comparación de contraseñas, para que el login, pueda reconocer si la contraseña usada en el formulario de entrada, coincide con la contraseña encriptada guardada en MongoDB.
Mientras yo hacía todo el círculo de registro — login — logout, mis compañeros se ocuparon de las páginas principales y la de perfil.
Otra cosa muy importante que ocurre cuando un usuario hace Login, es guardar la sesión con su información, de ese modo, desde cualquier punto del código, podemos acceder a su información sin tener que llamar a la BBDD.
Eso se hace posible con el paquete de Express-Session, a la que un usuario hace Login, guardamos su información en una variable, de modo que podamos usarla durante todo su paso por nuestra página. Por seguridad, establecimos un tiempo de 24h de expiración de la sesión.
De ese modo, cuando el usuario hace Logout, eliminamos la información de la variable currentUser.
Git
¡Qué quebradero de cabeza! Era la primera vez que trabajábamos con Git y menudo lío el primer día.
Mi compañera Andrea hizo el repositorio en GitHub, nos añadió a mí y al Josep como colaboradores, y acto seguido protegimos la rama Master para que requiriese de 2 aprobaciones a la hora de hacer un push en ella.
Estuvimos unas cuantas horas para entender el sistema de ramas, que cada uno de nosotros trabajase en una rama con su nombre, y que a la hora de juntar código, lo hiciéramos en la dev. ¡Hay tantas cosas a tener en cuenta a la hora de hacer un merge, lo que nos funcionó a nosotros era, juntarnos y revisar el código de cada uno para que, al unirlo con el código de los demás, no hubiera conflictos y todo funcione perfecto, aun así recomiendo las primeras veces, avisar a la TA para que supervise el proceso y en caso de no hacer lo correcto, poder recuperar el código anterior!
CRUD para los Cocktails
La pieza fundamental de nuestro proyecto, el contenido principal, los cocktails.
Para ese componente teníamos que crear el CRUD, para que el usuario pudiera:
1- Crear cocktails
2- Editar una vez creados
3- Eliminar cocktails
4- Ver todos los cocktails.
Siguiendo la lógica de toda página web, hicimos que el usuario creador del cocktail, fuese el único que pudiera editarlo y también eliminarlo.
No solo mostrando el botón de editar cocktail y eliminar cocktail cuando eres tu el creador del cocktail, desde la vista de la página, sino también desde el back-end, comprobando desde la ruta que el usuario que quería editar o eliminar el cocktail fuera su creador.
En caso de no coincidir, no deja ejecutar esas opciones del CRUD.
El sistema de rutas de crear / editar y eliminar lo hicimos entre los 3. Aportando cada uno nuestros conocimientos, lo conseguimos de una forma muy rápida y entendible para todos.
Sistema de vistas con Handlebars
Para generar nuestras vistas, usamos ficheros .hbs .
Este modelo de vistas nos permite renderizar información proveniente del back-end. Usando forEach’s / if’s / else … y todo lo necesario para mostrar lo que queramos en la página.
API Google Maps
Implementamos la API de Google Maps para visualizar y marcar la ciudad de Barcelona con unas cuantas coctelerías donde poder probar los cocktails que los usuarios publican en nuestro foro.
Siguiendo la web de Google: https://mapsplatform.google.com/ y con algún tutorial, pudimos añadir un mapa, señalar la localización de bares / coctelerías de Barcelona y de ese modo, implementar una nueva funcionalidad a nuestra web.
Deployment
Para subir nuestra web de forma online, accesible para todo el mundo, hicimos el deploy en Heroku.
Hay que conectar bien la BBDD, ya que está en MongoAtlas, y las variables de entorno (.env) deben contener las credenciales y direcciones correctas.
¡Si cualquier cosa no está bien, el deployment falla y no se hace satisfactoriamente!
Adjunto deploy: https://cocteleria.herokuapp.com/
A todo esto, en estos 5 días también debíamos de preparar la presentación junto con un Slides / Prezi o la herramienta que sea, para que el viernes pudiéramos salir a exponer nuestro proyecto delante de la clase y las profesoras.
Así pues, quedaría lista nuestra web.
¿Qué puedes hacer en nuestro foro?
- Conocer y saber todos los cocktails de todos los usuarios, consultar información sobre como preparar el cocktail, los ingredientes, saber un poco más sobre su origen / descripción.
- Visitar otros perfiles de otros usuarios, pudiendo ver sus aportaciones al foro, saber más sobre ese usuario, con una pequeña descripción.
- Crear tus cocktails. Aportar al foro tus experimentos cocteleros, compartirlos con tus amigos y con toda la comunidad.
- Editar y eliminar tus creaciones. Si no son de tu agrado una vez creados, puedes editar la información o simplemente eliminarlo y crear otro nuevo.
- Buscar por tipo de alcohol los cocktails. La pantalla principal cuenta con un pequeño buscador donde puedes filtrar por alcohol y te aparecerán los cocktails que lo contengan.
- Consultar el MAPA de Barcelona, con pines en bares y coctelerías, los cuales puedes probar los cocktails que te llamen la atención del foro.
Futuras implementaciones
Primero y fundamental, hacer la web responsive.
Hasta el último día no le dimos importancia a la maquetación y diseño de la web y tuvimos que hacerlo de una forma rápida, y en nuestro caso, sin tener en cuenta que debía ser responsive.
Así que, maquetar de forma correcta la web es un MUST.
Por otra parte, para añadir interactividad a los usuarios, tenemos pensado montar un sistema de comentarios en cada cocktail. Donde se pueda comentar las creaciones, qué tal te parece el cocktail si lo has probado y mucho más.
En todo caso, ¡estamos abiertos a escuchar vuestras peticiones!
Con todo esto dicho, gracias por vuestro tiempo y espero que mis blogs semanales os ayuden a que si queréis dar el paso, lo hagáis con menos dudas :)
Puedes contactar conmigo a través de LinkedIn o enviándome un correo a eloipampliega@gmail.com.
Link Anterior Blog Semanal: Ironhack — Semana 5| Entramos en acción con ExpressJS, Mongoose y Node.
