Este proyecto busca ser una solución a la recepción de pedidos en un restaurante de comida rápida, con internet intermitente y con un personal limitado.
Como punto de partida, se tiene la siguiente historia de usuario que nos comparten de un correo recibido del cliente:
Somos Queen Burger, una cadena de comida rápida 24hrs.
Nuestra propuesta de servicio 24hrs ha tenido muy buena acogida, y para expandirnos necesitamos un sistema que nos ayude a tomar los pedidos de los clientes.
Tenemos 2 menús: uno para el desayuno, que es muy sencillo:
Item Precio Cafe americano 5 Cafe con leche 7 Sandwich de jamón y queso 10 Jugo natural 7 Y un menú para el resto del dia:
Hamburguesas Acompañamientos ($5) Bebidas Simple 10 Papas fritas 500ml 750ml Doble 15 Onion Rings Agua 5 8 refresco 7 10 Los clientes pueden escoger entre hamburguesas de res, de pollo, o vegetariana. Y por $1 pueden agregarle queso.
Nuestros clientes son bastante indecisos, por lo que es muy común que cambien el pedido varias veces antes de finalizarlo.
Partiendo de los requerimientos de negocio detallados en el correo del cliente, nos piden construir una interfaz que permita a lxs cajerxs tomar los pedidos en una tablet, y desde ahí se puedan enviar a cocina a través de un backend del que nos darán detalles más adelante.
El primer paso de este proyecto debe ser convertir el menú descrito por el cliente en una estructura que podamos poner en un archivo JSON para después pintar en la pantalla.
Nuestra 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 que productos agregar y la interfaz debe ir mostrando el resumen del pedido con el total.
El objetivo principal de aprendizaje de este proyecto es construir una interfaz web usando React para mantener la interfaz y el estado sincronizados, 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).
Como objetivo secundario, la implementación debe además seguir las recomendaciones para PWAs (Progressive Web Apps), lo cual incluye conceptos como offline.
Finalmente, la interfaz debe estar diseñada específicamente para correr en tablets.
La lógica del proyecto está implementada completamente en JavaScript (ES6+), HTML y CSS y empaquetada de manera automatizada. Se ocupó la librería React JS.
La aplicación es 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 aplicación desplegada debe tener 80% o más el las puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.
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 70% de statements, functions, lines y branches.
Este proyecto incluye un boilerplate con el código necesario para arrancar con la parte de backend ya resuelta. El boilerplate incluye los siguientes archivos/carpetas con la configuración de Fierbase (hosting, firestore y functions):
./04-burger-queen/
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
│ ├── index.js
│ ├── package.json
└── README.md
- Ingresar nombre del cliente.
- Filtrar menú por desayuno y resto del día.
- Agregar ítem al pedido.
- Eliminar ítem del pedido.
- Mostrar resumen de pedido con todos los items y el total.
- Enviar a cocina (esto debe guardar el pedido).
- Vista de pedidos pendientes
- Marcar pedido como listo
- Ver historial de pedidos
- Inicio de sesión
- Restaurar contraseña
- Debe verse bien y funcionar bien en tablets.
- No queremos una app nativa, sino una web app que se pueda agregar a la pantalla de inicio como PWA.
- Queremos botones grandes para fácil uso en pantallas táctiles (touch screens).
- Queremos el estado actual del pedido siempre visible mientras tomamos un pedido.
- Queremos que sea accesible y que funcione bien en tablets iOS y Android.
Una vez que tengamos el sistema básico implementado, nos gustaría explorar nuevas posibilidades, y estamos abiertos a cualquier sugerencia que tengan. Algunas de las ideas que nos ha sugerido nuestros clientes son:
- agregar combos al menú
- cupones de descuento
- programa de fidelidad, etc.
- agregar mesas, de forma que los pedidos se puedan tomar en mesa en vez de dando el nombre del cliente al cajero.
- crear/editar/borrar usuarios
- ver estadísticas de pedidos
El proyecto será entregado subiendo el código a GitHub (commit/push) y la
interfaz será desplegada usando GitHub pages u otro servicio de hosting.
|
- Producto final sigue los lineamientos del diseño.
- 80% o más en sección Performance.
- 80% o más en sección Progressive Web App.
- 80% o más en sección Accessibility.
- 80% o más en sección Best Practices.
- 70% o más en cobertura de statements.
- 70% o más en cobertura de functions.
- 70% o más en cobertura de lines.
- 70% o más en cobertura de branches.
- Ingresar nombre del cliente.
- Filtrar menú por desayuno y resto del día.
- Agregar ítem al pedido.
- Eliminar ítem del pedido.
- Mostrar resumen de pedido con todos los items y el total.
- Enviar a cocina (esto debe guardar el pedido).
- Vista de pedidos pendientes.
- Marcar pedido como listo.
- Ver historial de pedidos.
- Inicio de sesión.
- Restaurar contraseña.
- Se ve bien y funciona bien en tablets.
- Se puede agregar a la pantalla de inicio como web app (tiene manifest, íconos, ...) en iOS y Android.
- Uso fácil en pantallas táctiles (touch screens).
- Estado actual del pedido siempre visible mientras tomamos un pedido.
ReactJS Firebase Firestore DataBase React-router React-materialize