🍟 Burgerland 🍔

Index

• 1. Sobre el proyecto
• 2. Prototipado
• 3. Historias de usuario
• 4. Vista final
• 5. Tecnologias implementadas

1. Sobre el proyecto

Burgerland es una interfaz en la que el/la mesero/a puede tomar pedidos usando una tablet, y enviarlos a la cocina para que se preparen ordenada y eficientemente consumiendo una API REST proporcionada previamente por el backend junto con su documentación que especifica el comportamiento esperado. El usuario puede ir eligiendo qué productos agregar/eliminar. La interfaz a su vez muestra el resumen del pedido con el costo total de la orden y de cada producto según la cantidad. La aplicación es una Single Page App, se puede usar como una PWA y de manera offline.

Si deseas explorar la página, aquí están las claves: CHEF: chef@burgerland.com/password: 123_Laboratoria WAITER: chef@burgerland.com/password: changeme

2. Prototipado

Login

• Horizontal

• Vertical

Interfaz Mesero

• Vista donde puede elegir/eliminar/aumentar/disminuir productos a la orden

• Vista donde puede visualizar las ordenes enviadas

Interfaz Chef

• Vista donde visualizar las ordenes

3. Historias de usuario

La organización del proyecto se llevo por sprints con martes como la fecha de la deadline.

HU 1 Meserx y chef pueden ver las tres secciones

Yo como usuario puedo visualizar las tres vistas de Home(Quote, Log in y About us) para posteriormente logearme a la plataforma.

Criterios de aceptación

• Hacer el prototipado para Home de manera horizontal y vertical para iPad.
• Ver la primera parte de Home, que es el lema del restaurante.
• Ver la sección de About us.
• Ver la sección de Login.

HU 2 Meserx debe logearse y filtrar el menú

Yo como meserx quiero logearme y filtrar los productos para tomar la orden de una manera más eficiente y rápida.

Criterios de aceptación

• Logearse haciendo la validación con la base de datos de users de la API.
• Se puede ver los productos ya diseñados.
• Botones que indiquen qué tipo de producto son.
• Filtrar productos usando pipes.

HU 3 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

• Anotar nombre de cliente.
• Agregar productos al pedido.
• Eliminar productos.
• Ver resumen y el total de la compra.
• Enviar pedido a cocina guardandolo en la base de datos de orders de la API.
• Se ve y funciona bien en una tablet.

HU 4 Chef y meserx debe ver pedidos listos para preparar y servir

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. 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 los pedidos ordenados según se van haciendo.
• Marcar los pedidos que se han preparado y están listos para prepararse y servirse.
• Ver listado de pedido listos para servir.
• Marcar pedidos que han sido entregados.

4. Vista final

• Home

• Waiter

• Chef

5. Tecnologias implementadas

Este proyecto fue generado con Angular CLI version 13.2.5.

Objetivos de aprendizaje

HTML

• [✔️] Uso de HTML semántico

CSS

• [✔️] Uso de selectores de CSS
• [✔️] Modelo de caja (box model): borde, margen, padding
• [✔️] Uso de flexbox en CSS
• [✔️] Uso de media queries

JavaScript

• [✔️] Arrays (arreglos)
• [✔️] Objetos (key, value)
• [✔️] Diferenciar entre tipos de datos primitivos y no primitivos
• [✔️] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
• [✔️] Funciones (params, args, return)
• [✔️] Pruebas unitarias (unit tests)
• [✔️] Pruebas asíncronas
• [✔️] Uso de mocks y espías
• [✔️] Módulos de ECMAScript (ES Modules)
• [✔️] Diferenciar entre expresiones (expressions) y sentencias (statements)
• [✔️] Callbacks
• [✔️] Promesas

Control de Versiones (Git y GitHub)

• [✔️] Git: Instalación y configuración
• [✔️] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
• [✔️] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
• [✔️] GitHub: Creación de cuenta y repos, configuración de llaves SSH
• [✔️] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
• [✔️] GitHub: Organización en Github (projects | issues | labels | milestones | releases)

user-centricity

• [✔️] Diseñar un producto o servicio poniendo a la usuaria en el centro

product-design

• [✔️] Crear prototipos de alta fidelidad que incluyan interacciones
• [✔️] Seguir los principios básicos de diseño visual

research

• [✔️] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

Angular

• [✔️] Components & templates
• [✔️] Directivas estructurales (ngIf / ngFor)
• [✔️] Creación y uso de servicios
• [✔️] Manejo de rutas
• [✔️] Creación y uso Observables.
• [✔️] Uso de HttpClient
• [✔️] Estilos de componentes (ngStyle / ngClass)

HTTP

• [✔️] Consulta o petición (request) y respuesta (response).
• [✔️] Cabeceras (headers)
• [✔️] Cuerpo (body)
• [✔️] Verbos HTTP
• [✔️] Codigos de status de HTTP
• [✔️] Encodings y JSON