Burger Queen

Índice

• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Consideraciones generales
• 5. Criterios de aceptación mínimos del proyecto
• 6. Pistas, tips y lecturas complementarias

---

1. Preámbulo

React y Angular son algunos de los frameworks y librerías de JavaScript más utilizados por lxs desarrolladorxs alrededor del mundo, y hay una razón para eso. En el contexto del navegador, mantener la interfaz sincronizada con el estado es difícil. Al elegir un framework o librería para nuestra interfaz, nos apoyamos en una serie de convenciones e implementaciones probadas y documentadas para resolver un problema común a toda interfaz web. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las caractrísticas específicas de nuestra aplicación.

Cuando elegimos una de estas tecnologías no solo importamos un pedacito de código para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una arquitectura, una serie de principios de diseño, un paradigma, unas abstracciones, un vocabulario, una comunidad, etc...

Como desarrolladora Front-end, estos kits de desarrollo pueden resultarte de gran ayuda para implementar rápidamente características de los proyectos en los que trabajes.

2. Resumen del proyecto

Esta vez tenemos un proyecto 100% por encargo. Si bien siempre puedes (y debes) hacer sugerencias de mejoras y/o cambios, muchas veces trabajarás en proyectos en los que primero hay que asegurarse de cumplir con lo requerido.

Un pequeño restaurante de hamburguesas, que está creciendo, necesita una interfaz en la que puedan tomar pedidos usando una tablet, y enviarlos a la cocina para que se preparen ordenada y eficientemente (a través de un backend del que nos darán detalles más adelante).

Esta es la información que tenemos del cliente:

Somos Burguer Queen, una cadena de comida 24hrs.

Nuestra propuesta de servicio 24hrs ha tenido muy buena acogida y, para seguir creciendo, necesitamos un sistema que nos ayude a tomar los pedidos de nuestros clientes.

Tenemos 2 menús: uno muy sencillo para el desayuno:

Ítem	Precio $
Café americano	5
Café con leche	7
Sandwich de jamón y queso	10
Jugo de frutas natural	7

Y otro menú para el resto del día:

Ítem	Precio
Hamburguesas	$
Hamburguesa simple	10
Hamburguesa doble	15
Acompañamientos	$
Papas fritas	5
Aros de cebolla	5
Para tomar	$
Agua 500ml	5
Agua 750ml	7
Bebida/gaseosa 500ml	7
Bebida/gaseosa 750ml	10

Importante: Los clientes pueden escoger entre hamburguesas de res, de pollo, o vegetariana. Además, por $ 1 adicional, pueden agregarle queso o huevo.

Nuestros clientes son bastante indecisos, por lo que es muy común que cambien el su pedido varias veces antes de finalizarlo.

La 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 qué productos agregar y la interfaz debe ir mostrando el resumen del pedido con el costo total.

3. Objetivos de aprendizaje

El objetivo principal de este proyecto es aprender a construir una interfaz web usando el framework elegido (React 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 familiarizarte 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).

A continuación puedes ver los objetivos de aprendizaje de este proyecto:

HTML y CSS

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Uso de flexbox en CSS.
• Uso de Media Queries.

JavaScript

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules (import | export)
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos atómicos y estructurados.
• Uso de callbacks.
• Consumo de Promesas.

Testing

• Testeo unitario.

Estructura del código y guía de estilo

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

Git y Github

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)
• Colaboración en Github (branches | pull requests | |tags)
• Organización en Github (projects | issues | labels | milestones)

Firebase

• Firestore.
• Firebase Auth.
• Firebase security rules.
• Observadores. (onAuthStateChanged | onSnapshot)

Angular

• Components & templates.
• Directivas estructurales (ngIf / ngFor)
• @Input | @Ouput
• Creación y uso de servicios.
• Manejos de rutas.
• Creación y uso Observables.
• Uso de HttpClient.
• Estilos de componentes (ngStyle / ngClass)

React

• JSX
• Componentes class y componentes function
• props
• Eventos en React.
• Listas y keys.
• Renderizado condicional.
• Elevación de estados.
• hooks
• CSS modules.
• React Router.

UX

• Diseñar la aplicación pensando y entendiendo al usuario.
• Crear prototipos para obtener feedback e iterar.
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
• Planear y ejecutar tests de usabilidad.

4. Consideraciones generales

Este proyecto se debe "resolver" en forma grupal (tríos).

Trabaja en una historia hasta terminarla antes de pasar a la siguiente. Trabaja hasta la historia que puedas en el tiempo especificado.

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS y empaquetada de manera automatizada. En este proyecto Sí está permitido usar librerías o frameworks (debes elegir entre React 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.

Necesitamos pensar bien en el aspecto UX de de quienes van a tomar los pedidos, el tamaño y aspecto de los botones, la visibilidad del estado actual del pedido, etc.

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 y firestore):

.
├── .editorconfig
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── README.md
└── README.pt-BR.md

Por otro lado, la parte de la interfaz no está incluida, por lo que, deberás 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 hechos por ti.

Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio.

5. Criterios de aceptación mínimos del proyecto

Definición del producto

El Product Owner nos presenta este backlog que es el resultado de su trabajo con el cliente hasta hoy.

---

[Historia de usuario 1] 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

Lo que debe ocurrir para que se satisfagan las necesidades del usuario)

• 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

Definición de terminado

Lo acordado que debe ocurrir para decir que la historia está terminada.

• Debes haber recibido code review de al menos una compañera.
• Haces test unitarios y, además, has testeado tu producto manualmente.
• Hiciste tests de usabilidad e incorporaste el feedback del usuario.
• Desplegaste tu aplicación y has etiquetado tu versión (git tag).

---

[Historia de usuario 2] Jefe de cocina debe ver los pedidos

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 y avisar a lxs meserxs que un pedido está listo para servirlo a un cliente.

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.

Definición de terminado

• Debes haber recibido code review de al menos una compañera.
• Haces test unitarios y, además, has testeado tu producto manualmente.
• Hiciste tests de usabilidad e incorporaste el feedback del usuario.
• Desplegaste tu aplicación y has etiquetado tu versión (git tag).

---

[Historia de usuario 3] Meserx debe ver pedidos listos para servir

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 listado de pedido listos para servir.
• Marcar pedidos que han sido entregados.

Definición de terminado

• Debes haber recibido code review de al menos una compañera.
• Haces test unitarios y, además, has testeado tu producto manualmente.
• Hiciste tests de usabilidad e incorporaste el feedback del usuario.
• Desplegaste tu aplicación y has etiquetado tu versión (git tag).
• Los datos se deben mantener íntegros, incluso después de que un pedido ha terminado. Todo esto para poder tener estadísticas en el futuro.

---

6. Pistas, tips y lecturas complementarias

Primeros pasos

NOTA: Si estás haciendo el proyecto en equipo, estos pasos solo los necesita hacer una persona por equipo. El resto de las integrantes del equipo después podrán hacer sus propios forks a partir del fork principal de su equipo.

1. Haz un fork de este repo (en GitHub).

2. Clona tu fork en tu computadora:

   git clone git@github.com:<tu-usuario-de-github>/<cohortid>-burger-queen.git
   cd <cohortid>-burger-queen

3. Crea una rama a partir de main para empezar a trabajar. Por ejemplo:

   git checkout -b develop

4. Crea un proyecto en Firebase

5. Habilita Firestore (comenzar en modo bloqueado) en sección de "Bases de Datos" de Firebase console.

6. Instala la utilidad de línea de comando de Firebase. Esta utilidad nos permitirá usar el comando firebase desde nuestra terminal. Ten en cuenta que el comando de instalación incluye la opción -g, lo cual significa que estamos instalando firebase-tools de forma global, con lo cual quedará disponible desde cualquier lugar (es independiente de un proyecto en particular, no queda instalado en la carpeta node_modules de tu proyecto, si no globalmente, por lo tanto no importa desde qué carpeta ejecutes el siguiente comando de instalación).

   npm i -g firebase-tools

7. Iniciamos sesión con Firebase y agregamos entorno que usaremos para desplegar:

   firebase login
   firebase use --add
   
   # Una vez agregado el entorno (proyecto de firebase) puedes agregar otros y
   # listar los entornos configurados para esta carpeta con este comando
   firebase use

8. Llegado a este punto, ya puedes comenzar con la problemática del proyecto en sí. Te recomendamos como siguiente paso convertir el menú descrito por el cliente en una estructura que podamos poner en un archivo JSON para después pintar en la pantalla.

Despliegue

Cada framework incluye su propio pipeline de construcción o build. Con esto nos referimos a que para construir nuestro proyecto y producir un artefacto que podamos desplegar vamos a usar usar un script que normalmente configuramos como una tarea de npm-scrips con el nombre build e invocamos así:

npm run build

Una vez hayamos construido la aplicación, tendremos un directorio que contiene la app lista para desplegar. Dependiendo del framework que uses y tu configuración en particular, esa carpeta puede tener un nombre distinto; normalmente build o dist.

La herramienta de línea de comando de Firebase (firebase-tools) incluye un comando que nos permite desplegar nuestro proyecto a Firebase: firebase deploy. A la hora de ejecutar este comando, se usará la configuración que tenemos en el archivo firebase.json. En ese archivo asegúrate de que la propiedad public del objeto hosting tenga la ruta correcta a la carpeta donde hemos construido la aplicación. En este ejemplo es implemente build, asumiendo que la carpeta build es una subcarpeta del directorio donde se encuentra nuestro firebase.json.

  ...
  "hosting": {
    "public": "build",
    ...
  },
  ...

Finalmente, estás lista para desplegar tu proyecto a Firebase 🚀🔥!

firebase deploy

---

ℹ️ Nota para estudiantes que elijan React y 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 estabas en la carpeta del proyecto, salimos a la carpeta de más arriba
cd ..

# Creamos una nueva aplicación con `create-react-app` en la carpeta
# `burger-queen-tmp`
npx create-react-app burger-queen-tmp

# Copiamos el _boilerplate_ del proyecto _encima_ de la aplicación creada con
# `create-react-app`
cp -r <cohort-id>-burger-queen/* burger-queen-tmp/

# Copiamos el contenido de la aplicación creada con `create-react-app` de vuelta
# al repo del proyecto (teniendo en cuenta el archivo _oculto_ `.gitignore`).
cp -r burger-queen-tmp/.gitignore burger-queen-tmp/* <cohort-id>-burger-queen/

# Ya podemos borrar la instalación _temporal_ y quedarnos solo con el repo del
# proyecto, con el que partimos.
rm -rf burger-queen-tmp

# Volvemos a entrar en el directorio del proyecto y ya deberíamos estar listas
# para comenzar.
cd <cohort-id>-burger-queen

# Para confirmar que todo fue bien arranca la aplicación con el siguinte comando
# y verifica que la interfaz se abre en el navegador.
yarn start

Otros recursos

Frameworks / libraries

• React
• Angular

Herramientas

• npm-scripts
• Babel
• webpack

PWA

• 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

Serverless

• Qué es eso de serverless? - @PamRucinque en Medium
• Qué es Serverless? | FooBar - YouTube
• Firebase
• Serverless Architectures - Martin Fowler