entarwen7/bog003-burger-queen

Aplicación web para restaurante.

Aquelarre-BurgerQuen

---

Índice

• 1. Preámbulo
• 2. Prototipo
• 3. Requerimientos del proyecto
• 4. Producto final
• 5. Lenguajes,framework y herramientas

---

1. Preámbulo

Aquelarre es una aplicación web SPA, desarrollada con el framework Angular, que se actualiza a tiempo real gracias a su integración con Firebase, lo cual le permite a un restaurante tomar ordenes desde una tablet y comunicar a los meseros con la cocina de forma ágil y sencilla.

Permitiendole al usuario escoger el rol que le corresponda entre mesero o chef. Al ingresar a vista del rol seleccionado, en este caso mesero, podra digitar el nombre del ciente, la mesa y tomar el pedido según el menú de desayuno o almuerzo, para enviarlo a cocina e iniciar el proceso de preparación.

En el caso de la vista del chef, este podra observar los pedidos por orden de llegada y seleccionar con el botón preparar para indicar en la barra de estado el progreso al mesero; y cuando ya este preparada la orden, con ayuda del botón entregar pasara a estar culminada, indicando que el proceso en cocina finalizó.

Por último el mesero recibe el pedido y al entregarlo al comensal, debe oprimir el botón de entregar, con el cual se para el cronometro, que ayuda a observar cuanto tiempo toma en prepararse una orden desde que se toma; así logrando optimizar el proceso y para ello cada pedido queda consiganado en la vista de historial de ordenes.

2. Prototipos

Prototipo:Baja Fidelidad

A continuación se visualizan las pantallas correspondientes a los prototipos de baja fidelidad, estos fueron hechos con ayuda de la herramienta Balsamiq

Pantalla de bienvenida

Decidimos crear prototipos sencillos y amigables basandonos en los requerimientos del cliente, esto con el fin de facilitar su uso por parte del usuario final.

Vista del mesero: menú desayuno Diseño de las tarjetas y resumen del pedido

Vista del mesero: menú almuerzo.

Modal de adicionales para hamburguesas

Barra de estado mesero

Vista Jefe de cocina - ordenes pendientes

Y

Jefe de cocina - Ordenes terminadas

Prototipo: Alta Fidelidad

Paleta de colores

Primeras vistas

Vista inicial de la página y sección de desayuno para primera vista de mesero

vista de mesero

Sección de almurzo y modal para eleccion de tipo de hamburguesa y adicionales.

Vista de ordenes en proceso Mesero,chef

Historial de ordenes

3. Requerimientos del proyecto

Historia de usuario 1

Criterios de aceptación

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

Historia de usuario 2

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.

Historia de usuario 3

Criterios de aceptación

• Ver listado de pedido listos para servir.
• Marcar pedidos que han sido entregados.

4. Producto final

La aplicación Aquelarre es una SPA desarrollada con el fin de dar respuesta a la necesidad del restaurante Burger Queen.

A continuación se muestra el producto final según los criterios de aceptación del cliente:

Vista principal o pantalla de inicio

Sección del mesero

Sección de Ordenes por entregar

Sección Historial de ordenes

Sección Chef ordenes

Sección ordenes listas

5. Lenguajes,framework y herramientas

• Para el desarrollo de este proyecto se utilizó el framework angular el cual nos permitió crear una SPA. De este framework aprendimos a usar los componentes y la comunicación entre componentes, input y output, directivas, ngIf, ngFor, ngClass etc, clases, servicios, observables entre otros.

• Para los estilos de la aplicación se utilizó el framework de diseño materialize el cual permite integrar diferentes formas de Css como tablas, tarjetas, navbar con sus estilos ya incluidos.

• Para realizar el prototipo de baja fidelidad utilizamos la herramienta balsamiq y para los prototipos de alta fidelidad usamos figma

• Se uso firestore como herramienta para guardar los datos de los pedidos, esto ademas nos permitio realizar la actualización de las ordenes en tiempo real y mostrarlos en la aplicación mediante el método onSnapShot y los observables de angular.