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.
La aplicación desplegada debe tener 80% o más el las puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.
La aplicación debe hacer uso de npm-scripts y contar con scripts start,
test, build y deploy, que se encarguen de arrancar, correr las pruebas,
empaquetar y desplegar la aplicación respectivamente.
Los tests unitarios deben cubrir un mínimo del 70% de statements, functions, lines y branches.
Este proyecto incluye un boilerplate con el código necesario para arrancar con la parte de backend ya resuelta. El boilerplate incluye los siguientes archivos/carpetas con la configuración de Fierbase (hosting, firestore y functions):
./04-burger-queen/
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
│ ├── index.js
│ ├── package.json
└── README.md
Por otro lado, la parte de la interfaz no está incluida, por lo cual, deberás de definir la estructura de carpetas y archivos que consideres necesaria, puedes guiarte de las convenciones del framework elegido. Por ende, los tests y el setup necesario para ejecutarlos serán realizados por ti.
Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio.
En el README.md cuéntanos qué decisiones de diseño tomaste, incluye bocetos
tipo story board, info de despliegue e instrucciones para developers
(dependencias, instalación, tests, ...).
- Ingresar nombre del cliente.
- Filtrar menú por desayuno y resto del día.
- Agregar ítem al pedido.
- Eliminar ítem del pedido.
- Mostrar resumen de pedido con todos los items y el total.
- Enviar a cocina (esto debe guardar el pedido).
- Vista de pedidos pendientes
- Marcar pedido como listo
- Ver historial de pedidos
- Inicio de sesión
- Restaurar contraseña
- Debe verse bien y funcionar bien en tablets.
- No queremos una app nativa, sino una web app que se pueda agregar a la pantalla de inicio como PWA.
- Queremos botones grandes para fácil uso en pantallas táctiles (touch screens).
- Queremos el estado actual del pedido siempre visible mientras tomamos un pedido.
- Queremos que sea accesible y que funcione bien en tablets iOS y Android.
Una vez que tengamos el sistema básico implementado, nos gustaría explorar nuevas posibilidades, y estamos abiertos a cualquier sugerencia que tengan. Algunas de las ideas que nos ha sugerido nuestros clientes son:
- agregar combos al menú
- cupones de descuento
- programa de fidelidad, etc.
- agregar mesas, de forma que los pedidos se puedan tomar en mesa en vez de dando el nombre del cliente al cajero.
- crear/editar/borrar usuarios
- ver estadísticas de pedidos
El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
interfaz será desplegada usando GitHub pages u otro servicio de hosting que
puedas haber encontrado en el camino.
| Habilidad | Nivel esperado |
|---|---|
| JavaScript | |
| Estilo | 4 |
| Nomenclatura/semántica | 3 |
| Funciones/modularidad | 3 |
| Estructuras de datos | 3 |
| Tests | 3 |
| HTML | |
| Validación | 3 |
| Estilo | 3 |
| Semántica | 3 |
| SEO | n/a |
| CSS | |
| DRY | 3 |
| Responsive | 3 |
| SCM | |
| Git | 3 |
| GitHub | 3 |
| CS | |
| Lógica | 3 |
| Arquitectura | 2 |
| Patrones/paradigmas | n/a |
| Habilidad | Nivel esperado |
|---|---|
| User Centricity | 3 |
| Entrevistas | n/a |
| Testing | 3 |
| User Flow | 3 |
| Jerarquía | 3 |
| Alineación | 3 |
| Contraste | 3 |
| Color | 3 |
| Tipografía | 3 |
Para este proyecto esperamos que ya hayas alcanzado el nivel 4 en todas tus habilidades blandas. Te aconsejamos revisar la rúbrica:
| Habilidad | Nivel esperado |
|---|---|
| Planificación y organización | 4 |
| Autoaprendizaje | 4 |
| Solución de Problemas | 4 |
| Dar y recibir feedback | 4 |
| Adaptabilidad | 4 |
| Trabajo en equipo (trabajo colaborativo y responsabilidad) | n/a |
| Comunicación eficaz | 4 |
| Presentaciones | 4 |
-
Haz un fork de este repo (en GitHub).
-
Clona tu fork en tu computadora:
git clone git@github.com:<tu-usuario-de-github>/<cohortid>-burger-queen.git cd <cohortid>-burger-queen
-
Crea una rama a partir de
masterpara empezar a trabajar. Por ejemplo:git checkout -b develop
-
Crear proyecto en Firebase
-
Habilitar Firestore (comenzar en modo bloqueado) en sección de "Bases de Datos" de Firebase console.
-
Instalar utilidad de línea de comando de Firebase:
npm i -g firebase-tools
-
Agregamos entorno de producción para desplegar:
firebase use --add
-
Instalar dependencias de cloud functions:
# usando yarn cd functions && yarn && cd .. # alternativamente, usando npm cd functions && npm install && cd ..
-
Desplegar:
firebase deploy
-
Llegado a este punto ya puedes comenzar con el front-end 😉
Nota para estudiantes que elijan React y quieran usar create-react-app:
Si tratas de usar create-react-app en el directorio del proyecto recibirás un
error diciendo que hay archivos que podrían presentar un conflicto. Para evitar
este problema puedes crear una nueva app usando create-react-app y de ahí
mezclarla con la carpeta del proyecto:
# si estabase en la carpeta del proyecto, salimos a la carpeta de más arriba
cd ..
create-react-app burger-queen-tmp
cp -r burger-queen/* burger-queen-tmp/
cp -r burger-queen-tmp/.gitignore burger-queen-tmp/* burger-queen/
rm -rf burger-queen-tmp
cd burger-queen- Tu primera Progressive Web App - Google developers
- Progressive Web Apps - codigofacilito.com
- offlinefirst.org
- Usando Service Workers - MDN
- Cómo habilitar datos sin conexión - Firebase Docs
- Qué es eso de serverless? - @PamRucinque en Medium
- Qué es Serverless? | FooBar - YouTube
- Firebase
- Serverless Architectures - Martin Fowler
- Producto final sigue los lineamientos del diseño.
- Documenta proceso de diseño.
- Incluye info para developers (deps, instalación, uso, despliegue, testing, ...).
- 80% o más en sección Performance.
- 80% o más en sección Progressive Web App.
- 80% o más en sección Accessibility.
- 80% o más en sección Best Practices.
- 70% o más en cobertura de statements.
- 70% o más en cobertura de functions.
- 70% o más en cobertura de lines.
- 70% o más en cobertura de branches.
- Ingresar nombre del cliente.
- Filtrar menú por desayuno y resto del día.
- Agregar ítem al pedido.
- Eliminar ítem del pedido.
- Mostrar resumen de pedido con todos los items y el total.
- Enviar a cocina (esto debe guardar el pedido).
- Vista de pedidos pendientes.
- Marcar pedido como listo.
- Ver historial de pedidos.
- Inicio de sesión.
- Restaurar contraseña.
- Se ve bien y funciona bien en tablets.
- Se puede agregar a la pantalla de inicio como web app (tiene manifest, íconos, ...) en iOS y Android.
- Uso fácil en pantallas táctiles (touch screens).
- Estado actual del pedido siempre visible mientras tomamos un pedido.