Skip to content

Laboratoria/CDMX009-BurgerQueen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 

Repository files navigation

Burger Queen

Preámbulo

React, Vue y Angular son algunos de los frameworks y librerías de JavaScript más utilizados por lxs desarrolladorxs alrededor del mundo, y hay una razón para eso. En el contexto del navegador, mantener la interfaz sincronizada con el estado es difícil. Al elegir un framework o librería para nuestra interfaz, nos apoyamos en una serie de convenciones e implementaciones probadas y documentadas para resolver un problema común a toda interfaz web. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las características específicas de nuestra aplicación.

Cuando elegimos una de estas tecnologías no solo importamos un pedacito de código para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una arquitectura, una serie de principios de diseño, un paradigma, unas abstracciones, un vocabulario, una comunidad, etc...

Como desarrolladora Front-end, estos kits de desarrollo pueden resultarte de gran ayuda para implementar rápidamente características de los proyectos en los que trabajes.

Resumen del proyecto

Esta vez tenemos un proyecto 100% por encargo. Si bien siempre puedes (y debes) hacer sugerencias de mejoras y/o cambios, muchas veces trabajarás en proyectos en los que primero hay que asegurarse de cumplir con lo requerido.

Un pequeño restaurante de hamburguesas, que está creciendo, necesita una interfaz en la que puedan tomar pedidos usando una tablet, y enviarlos a la cocina para que se preparen ordenada y eficientemente (a través de un backend del que nos darán detalles más adelante).

burger-queen

Esta es la información que tenemos del cliente:

Somos Burguer Queen, una cadena de comida 24hrs.

Nuestra propuesta de servicio 24hrs ha tenido muy buena acogida y, para seguir creciendo, necesitamos un sistema que nos ayude a tomar los pedidos de nuestros clientes.

Tenemos 2 menús: uno muy sencillo para el desayuno:

Ítem Precio $
Café americano 5
Café con leche 7
Sandwich de jamón y queso 10
Jugo de frutas natural 7

Y otro menú para el resto del día:

Ítem Precio
Hamburguesas $
Hamburguesa simple 10
Hamburguesa doble 15
Acompañamientos $
Papas fritas 5
Aros de cebolla 5
Para tomar $
Agua 500ml 5
Agua 750ml 7
Bebida/gaseosa 500ml 7
Bebida/gaseosa 750ml 10

Importante: Lxs clientes pueden escoger entre hamburguesas de res, de pollo, o vegetariana. Además, por $ 1 adicional, pueden agregarle queso o huevo.

Nuestros clientes son bastante indecisos, por lo que es muy común que cambien el pedido varias veces antes de finalizarlo.

La interfaz debe mostrar los dos menús (desayuno y resto del día), cada uno con todos sus productos. El usuario debe poder ir eligiendo qué productos agregar y la interfaz debe ir mostrando el resumen del pedido con el costo total.

out

Objetivos de aprendizaje

  1. El objetivo principal de es aprender a construir una interfaz web usando el framework elegido (React, Vue o Angular) o vanilla JS. Todos estos frameworks de Front-end atacan el mismo problema: cómo mantener la interfaz y el estado sincronizados. Así que esta experiencia espera familiarizarte con el concepto de estado de pantalla, y cómo cada cambio sobre el estado se va a ir reflejando en la interfaz (por ejemplo, cada vez que agregamos un producto a un pedido, la interfaz debe actualizar la lista del pedido y el total).

  2. Como objetivo secundario, deberás seguir las recomendaciones para PWAs (Progressive Web Apps), lo cual incluye conceptos como offline. Para guiarte con respecto a este tema te recomendamos usar Lighthouse, que es una herramienta de Google que nos ayuda a asegurar que nuestras web apps sigan "buenas prácticas". De hecho, usaremos Lighthouse a la hora de evaluar el proyecto.

Recuerda colocar en esta seccion los objetivos de aprendizaje que quedaron pendientes de tu proyecto anterior.

HTML y CSS

  • HTML semántico
  • CSS flexbox
  • Sass
  • Maquetación

Frontend Development

  • Componentes
  • Manejo del estado

PWA

  • Concepto
  • Utilidad
  • Que es Workbox
  • Qué es un serviceWorker

Angular

React

Vue

Firebase

  • Firestore
  • Firebase security rules
  • Observables

Testing

  • Testeo de tus interfaces
  • Testeo de componentes
  • Testeo asíncrono
  • Mocking

Colaboración en Github

  • Branches
  • Pull Requests
  • Tags

Organización en Github

  • Projects
  • Issues
  • Labels
  • Milestones

Buenas prácticas de desarrollo

  • Modularización
  • Nomenclatura / Semántica
  • Linting

Consideraciones

  • Este proyecto se debe "resolver" de a pares.

  • La duración propuesta del proyecto es 5 sprints, con una duración de una semana cada uno.

  • Trabaja en una historia hasta terminarla antes de pasar a la siguiente.

  • Trabaja hasta la historia que puedas en el tiempo especificado.

  • La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS y empaquetada de manera automatizada.

  • En este proyecto Sí está permitido usar librerías o frameworks (debes elegir entre React, Vue, Angular o Vanilla Js).

  • La aplicación debe ser un Single Page App. Los pedidos los tomaremos desde una tablet, pero no queremos una app nativa, sino una web app que sea responsive y pueda funcionar offline.

  • La interfaz debe estar diseñada específicamente para correr en tablets.

  • Necesitamos pensar bien en el aspecto UX de quienes van a tomar los pedidos, el tamaño y aspecto de los botones, la visibilidad del estado actual del pedido, etc.

  • La aplicación desplegada debe tener 80% o más el las puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.

  • Deberas de guardar la información de los pedidos realizados por lo cual te recomendamos utilizar Firebase.

  • La aplicación debe hacer uso de npm-scripts y contar con scripts start, test, build y deploy, que se encarguen de arrancar, correr las pruebas, empaquetar y desplegar la aplicación respectivamente.

  • Los tests unitarios deben cubrir un mínimo del 90% de statements, functions, lines y branches.

  • Por otro lado, deberás definir la estructura de carpetas y archivos que consideres necesaria. Puedes guiarte de las convenciones del framework elegido. Por ende, los tests y el setup necesario para ejecutarlos, serán hechos por ti.

Criterios de aceptación del proyecto

Definición del producto

El Product Owner nos presenta este backlog que es el resultado de su trabajo con el cliente hasta hoy.


[Historia de usuario 1] Mesero/a debe poder tomar pedido de cliente

Yo como meserx quiero tomar el pedido de un cliente para no depender de mi mala memoria, para saber cuánto cobrar, y enviarlo a la cocina para evitar errores y que se puedan ir preparando en orden.

Criterios de aceptación

Lo que debe ocurrir para que se satisfagan las necesidades del usuario

  • Anotar nombre de cliente.
  • Agregar productos al pedido.
  • Eliminar productos.
  • Ver resumen y el total de la compra.
  • Enviar pedido a cocina (guardar en alguna base de datos).
  • Se ve y funciona bien en una tablet
Definición de terminado

Lo acordado que debe ocurrir para decir que la historia está terminada.

  • Debes haber recibido code review de al menos una compañera.
  • Haces test unitarios y, además, has testeado tu producto manualmente.
  • Hiciste tests de usabilidad e incorporaste el feedback del usuario.
  • Desplegaste tu aplicación y has etiquetado tu versión (git tag).

[Historia de usuario 2] Jefe de cocina debe ver los pedidos

Yo como jefx de cocina quiero ver los pedidos de los clientes en orden y marcar cuáles están listos para saber qué se debe cocinar y avisar a lxs meserxs que un pedido está listo para servirlo a un cliente.

Criterios de aceptación
  • Ver los pedidos ordenados según se van haciendo.
  • Marcar los pedidos que se han preparado y están listos para servirse.
  • Ver el tiempo que tomó prepara el pedido desde que llegó hasta que se marcó como completado.
Definición de terminado
  • Debes haber recibido code review de al menos una compañera.
  • Haces test unitarios y, además, has testeado tu producto manualmente.
  • Hiciste tests de usabilidad e incorporaste el feedback del usuario.
  • Desplegaste tu aplicación y has etiquetado tu versión (git tag).

[Historia de usuario 3] Meserx debe ver pedidos listos para servir

Yo como meserx quiero ver los pedidos que están preparados para entregarlos rápidamente a los clientes que las hicieron.

Criterios de aceptación
  • Ver listado de pedido listos para servir.
  • Marcar pedidos que han sido entregados.
Definición de terminado
  • Debes haber recibido code review de al menos una compañera.
  • Haces test unitarios y, además, has testeado tu producto manualmente.
  • Hiciste tests de usabilidad e incorporaste el feedback del usuario.
  • Desplegaste tu aplicación y has etiquetado tu versión (git tag).
  • Los datos se deben mantener íntegros, incluso después de que un pedido ha terminado. Todo esto para poder tener estadísticas en el futuro.

Pistas / Tips

Frameworks / libraries

Herramientas

PWA

Serverless

Cloud functions

About

CDMX009-BurgerQueen

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published