/LIM017-burger-queen

Aplicación web SPA para restaurante BURGER QUEEN 🍔. Puedes acceder con las siguientes cuentas: user1@waiter.bq.com, user2@chef.bq.com, user3@admin.bq.com (contraseña: proyectobq)

Primary LanguageTypeScript

🍔Burger Queen

Índice

1. 📎Introducción

Este proyecto consiste en la creación de una interfaz web para un restaurante, el cual hemos llamado: "Burger Queen". El objetivo de este proyecto es el uso del framework Angular que permita mantener la interfaz y el estado sincronizados, es decir 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. 📎Resumen del proyecto

Un pequeño restaurante de Burguers, 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.

burger-queen

🖋️Requerimientos de la empresa

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
Burguers $
Burguer simple 10
Burguer 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 Burguers 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 su 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.

3. Desarrollo del proyecto

3.1 📝Historias de usuario

📍[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.

3.2 Prototipo de alta fidelidad

Se desarrolló un prototipo considerando las siguientes vistas: waiter,chef y admin. Puede visualizar el proyecto en el siguiente enlace.

4. 📝Resultado final

4.1 Vista waiter

waiter

Vista chef

chef

4.3 Vista admin

admin

5. 🔧Tecnologías utilizadas:

  • Angular
  • TypeScript
  • JavaScript
  • HTML
  • CSS / SCSS
  • Bootstrap
  • Jasmine
  • Karma
  • Firebase
  • Git and GitHub

6. Creadoras