Usuario: [email protected] , Contraseña: 1234567890
Nos acaban de enviar un correo con una solicitud para un nuevo proyecto. Hay un restaurante que nos ha contactado porque quieren que alguien les construya una interfaz donde puedan tomar pedidos usando una tablet.
Como punto de partida, nos comparten el siguiente correo recibido del cliente:
Somos Burguer Queen, una cadena de comida rápida 24hrs.
Nuestra propuesta de servicio 24hrs ha tenido muy buena acogida, y para expandirnos necesitamos un sistema que nos ayude a tomar los pedidos de los clientes.
Tenemos 2 menús: uno para el desayuno, que es muy sencillo:
Item Precio Cafe americano 5 Cafe con leche 7 Sandwich de jamón y queso 10 Jugo natural 7 Y un menú para el resto del dia:
Hamburguesas Acompañamientos ($5) Bebidas Simple 10 Papas fritas 500ml 750ml Doble 15 Onion Rings Agua 5 8 refresco 7 10 Los clientes pueden escoger entre hamburguesas de res, de pollo, o vegetariana. Y por $1 pueden agregarle queso o huevo.
Nuestros clientes son bastante indecisos, por lo que es muy común que cambien el pedido varias veces antes de finalizarlo.
Partiendo de los requerimientos de negocio detallados en el correo del cliente, nos piden construir una interfaz que permita a lxs cajerxs tomar los pedidos en una tablet, y desde ahí se puedan enviar a cocina a través de un backend del que nos darán detalles más adelante.
El primer paso de este proyecto debe ser convertir el menú descrito por el cliente en una estructura que podamos poner en un archivo JSON para después pintar en la pantalla.
Nuestra 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 que productos agregar y la interfaz debe ir mostrando el resumen del pedido con el total.
El objetivo principal de aprendizaje de este proyecto es construir una interfaz web usando el framework elegido (React, Vue o Angular). Todos estos frameworks de front-end atacan el mismo problema: cómo mantener la interfaz y el estado sincronizados. Así que esta experiencia espera familiarizarse 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 debe actualizar la lista del pedido y el total).
Como objetivo secundario, la implementación debe además seguir las recomendaciones para PWAs (Progressive Web Apps), lo cual incluye conceptos como offline. Para guiarte con respecto a este tema te recomendamos usar Lighthouse, que es una herramienta de Google que nos ayuda a asegurar que nuestras web apps sigan buenas prácticas. De hecho, usaremos Lighthouse a la hora de evaluar el proyecto.
Finalmente, la interfaz debe estar diseñada específicamente para correr en tablets.
Tópicos: react, angular, vue, pwa, offline-first, service-worker.
Este proyecto se debe "resolver" de forma individual.
La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS y empaquetada de manera automatizada. En este proyecto SI está permitido usar librerías o frameworks (debes elegir entre React, Vue o Angular).
La aplicación debe ser un Single Page App. Los pedidos los tomaremos desde una tablet, pero no queremos una app nativa, sino una web app que sea responsive y pueda funcionar offline. También necesitamos botones grandes para escoger los productos, y el estado actual del pedido siempre visible para poder confirmar con el cliente.