REPOSITORY OVERVIEW

Live repository statistics

★ 14Stars

⑂ 14Forks

◯ 0Open issues

◉ 14Watchers

README preview

Burger Queen

Sistema para tomar pedidos en una cadena de comida rápida.

Desarrollado para Laboratoria

Preámbulo

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.

burger-queen

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:

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.

Item	Precio
Cafe americano	5
Cafe con leche	7
Sandwich de jamón y queso	10
Jugo natural	7

Introducción

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.

out

Objetivos

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.

Consideraciones generales

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.

Parte obligatoria

Definición del producto

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, ...).

UI

Hito 1: Tomar pedidos

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

Hito 2: Ver/atender pedidos

Vista de pedidos pendientes
Marcar pedido como listo
Ver historial de pedidos

Hito 3: Autenticación

Inicio de sesión
Restaurar contraseña

UX

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.

Hacker edition

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

Entregables

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.

Evaluación

Tech

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

UX

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

Habilidades Blandas

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

Primeros pasos

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 master para 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 :wink:

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

proyecto-10-burger-queen