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 implementado en firebase).
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: Los 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 su pedido varias veces antes de finalizarlo.
La interfaz muestra los dos menús (desayuno y resto del día), cada uno con todos sus productos. El usuario puede ir eligiendo qué productos agregar y la interfaz muestra el resumen del pedido con el costo total.
El Product Owner nos presenta este backlog que es el resultado de su trabajo con el cliente hasta hoy.
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.
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
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).
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.
- 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.
- 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).
Yo como meserx quiero ver los pedidos que están preparados para entregarlos rápidamente a los clientes que las hicieron.
- Ver listado de pedido listos para servir.
- Marcar pedidos que han sido entregados.
- 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.
El objetivo principal de este proyecto es aprender a construir una interfaz web usando el framework elegido React. Este framework de Front-end ataca el problema: cómo mantener la interfaz y el estado sincronizados. Así que esta experiencia nos familiarizo 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 actualiza la lista del pedido y el total).
A continuación puedes ver los objetivos de aprendizaje de este proyecto:
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de Media Queries.
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (
import|export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Uso de callbacks.
- Consumo de Promesas.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | |tags)
- Organización en Github (projects | issues | labels | milestones)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (onAuthStateChanged | onSnapshot)
-
JSX - Componentes
function -
props - Eventos en React.
- Listas y keys.
- Renderizado condicional.
- Elevación de estados.
-
hooks -
CSSmodules. - React Router.
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- Planear y ejecutar tests de usabilidad.
La aplicación desplegada tiene un 80% o más el las puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.
La aplicación hace uso de npm-scripts y cuenta con scripts start,
test, build y deploy, que se encargan 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.