Burger Queen

Índice

• 1. Definición de la necesidad
• 2. Historia de usuarios
• 3. Prototipos
• 4. Solución final
• 5. Tecnologías Usadas

1. Definición de la necesidad

Mejorar la interfaz que genera los pedidos del restaurante Burger Queen por una que le facilite a sus empleados tomar sus pedidos usando una tablet, y enviarlos a la cocina para que se preparen ordenada y eficientemente.

Menú

Í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

La interfaz muestra dos menús (desayuno y resto del día), cada uno con todos sus productos. Los usuarios tienen la oportunidad de ir eligiendo qué productos agregar y la interfaz va mostrando el resumen del pedido con el costo total.

2. Historia de usuarios

HU1 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).

---

HU2 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).

---

HU3 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.

3. Prototipos

Protipo de baja

Protipo de alta

4. Solución final

5. Tecnologías Usadas

HTML y CSS

• 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.

JavaScript

• 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.

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica) // Pau y Ani sí, Aleja sigue usando Algo en todo.
• Uso de linter (ESLINT) 💔

Git y Github

• 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)

Firebase

• Firestore.
• Firebase security rules.
• Observadores. (onSnapshot)

React

• JSX
• Componentes class y componentes function
• props
• Eventos en React.
• Listas y keys.
• Renderizado condicional.
• Elevación de estados.
• hooks
• React Router.

UX

• 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.