Skip to content

Latest commit

 

History

History
794 lines (534 loc) · 28.5 KB

README.md

File metadata and controls

794 lines (534 loc) · 28.5 KB
Raw

Burger Queen (API Client)

Índice

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 caracterí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

Un pequeño restaurante de hamburguesas, que está creciendo, necesita un sistema a través del cual puedan tomar pedidos usando una tablet, y enviarlos a la cocina para que se preparen ordenada y eficientemente.

burger-queen

Este proyecto tiene dos áreas: interfaz (cliente) y API (servidor). Nuestra clienta nos ha solicitado desarrollar la interfaz que se integre con la API que otro equipo de desarrolladoras está trabajando simultáneamente

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.

Esta es la información que tenemos dxl clientx:

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 nuestrxs clientxs.

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

Nuestrxs clientxs son bastante indecisos, por lo que es muy común que cambien el 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. La usuaria debe poder ir eligiendo qué productos agregar y la interfaz debe ir mostrando el resumen del pedido con el costo total.

out

Además la clienta nos ha dado un link a la documentación que especifica el comportamiento esperado de la API HTTP que deberás consumir. Ahí puedes encontrar todos los detalles de los endpoints, como por ejemplo qué parámetros esperan, qué deben responder, etc.

El objetivo principal de es aprender a construir una interfaz web usando el framework elegido (React o Angular). Estos frameworks de Front-end tratan de solucionar 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 como 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).

3. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

CSS

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descriptivos (Nomenclatura y Semántica)

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: Despliegue con GitHub Pages

    Links

  • GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

  • GitHub: Organización en Github (projects | issues | labels | milestones | releases)

HTTP

Angular

React

Centrado en el usuario

  • Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

  • Crear prototipos de alta fidelidad que incluyan interacciones

  • Seguir los principios básicos de diseño visual

Investigación

4. Consideraciones

Este proyecto se debe "resolver" de a pares. Recuerda que deberas de consumir una API que desarrollaran tus compañeras, sin embargo no debes esperar a que esta API este terminada para empezar a codear, puedes utilizar herramientas como nock, json-server o mockoon para mockear la API.

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 mobile-first.

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.

Por otro lado, 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.

5. Criterios de aceptación del proyecto

Definición del producto

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

[Historia de usuario 1] Mesero/a debe poder ingresar al sistema, si el admin ya le ha asignado credenciales

Yo como meserx quiero poder ingresar al sistema de pedidos.

Criterios de aceptación

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

  • Acceder a una pantalla de login.
  • Ingresar email y contraseña.
  • Recibir mensajes de error comprensibles, dependiendo de cuál es el error con la información ingresada.
  • Ingresar al sistema de pedidos si las crendenciales son correctas.
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] Mesero/a debe poder tomar pedido de cliente/a

Yo como meserx quiero tomar el pedido de unx clientx 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 clientx.
  • 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 3] Jefe de cocina debe ver los pedidos

Yo como jefx de cocina quiero ver los pedidos de lxs clientxs 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 clientx.

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 4] Meserx debe ver pedidos listos para servir

Yo como meserx quiero ver los pedidos que están preparados para entregarlos rápidamente a lxs clientxs 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.

[Historia de usuario 5] Administrador(a) de tienda debe administrar a sus trabajadorxs

Yo como administrador(a) de tienda quiero gestionar a los usuarios de la plataforma para mantener actualizado la informacion de mis trabajadorxs.

Criterios de aceptación
  • Ver listado de trabajadorxs.
  • Agregar trabajadorxs.
  • Eliminar trabajadoxs.
  • Actualizar datos de trabajadorxs.
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 6] Administrador(a) de tienda debe administrar a sus productos

Yo como administrador(a) de tienda quiero gestionar los productos para mantener actualizado el menú.

Criterios de aceptación
  • Ver listado de productos.
  • Agregar productos.
  • Eliminar productos.
  • Actualizar datos de productos.
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).

6. Pistas / Tips

Despliegue

En esta sección revisamos algunas opciones para desplegar el backend y frontend de tu app. Si usas firebase con reglas de firestore, índices, cloud functions, necesitas desplegar el backend con firebase-cli.

Puedes desplegar el frontend con Firebase hosting. Hay otras opciones como Github Pages (que ya estan familiarizadas), Netlify, Vercel, entre otras.

Netlify es un servicio para desplegar tu web app - backend y frontend - y no esta limitado a usar solamente Firebase. Por ejemplo, puedes desplegar un app MySQL/Express/React.

Build para production

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 un script que normalmente configuramos como una tarea de npm-scripts 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.

Firebase

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
Netlify

Netlify es un servicio de hosting para sitios web estáticos. Para usarlo primero necesitas crear una cuenta en Netlify y después puedes conectar tu repo.

Para desplegar tu aplicación en netlify seleccionas acceder con GitHub y luego concedes los permisos para que Netlify acceda a tus repositorios y generar la clave para poder realizar el despliegue continuo.

Una vez terminado el registro bastará con compilar tu aplicación para producción y arrastrar tu carpeta (dist, build) a la parte de sites dentro de netlify.

netlify-sites

Al terminar de cargar los archivos podras ver el nombre de la aplicación dentro de Netlify junto al link del app ya hosteada.

netlify cli

Hay un netlify-cli si prefieres hacer el despliegue por linea de comando. Para usarlo, hay que instalar el cli en tu proyecto y authorizarlo.

Puedes checar la documentación o seguir con los siguentes comandos:

npm install netlify-cli --save-dev
netlify login

Esto va a crear un config.json en tu proyecto.

Puedes usar netlify con continuous deployment (despliegue continuo) y así cada vez que agregues un commit se va a compilar y desplegar tu app con los nuevos cambios. Alternativamente, también puedes hacer depliegue manual.

Para continuous deployment corre netlify init y sigue las instrucciones para conectar un repo de tu github. Puedes configurar deploy settings (comando para el build, directorio de la carpeta y la rama para producción) en "deploy settings" de tu site en netlify.

Para desplegar manualmente puedes usar netlify deploy. También por defecto busca un directorio build en tu proyecto para desplegarlo. Si tu proyecto tiene un directorio de otro nombre puedes usar la opción --dir.

netlify deploy --dir=dist`

GitHub Pages

ℹ️ 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

Frameworks / libraries

Herramientas

PWA

7. Para considerar Project Feedback

  • Cumplir con 4 historias de backlog que agrega el Product Owner.
  • La aplicación debe adaptarse y estar optimizada para usarse en una tablet, no debe ser una app nativa, sino una web app que sea mobile-first.
  • Pruebas unitarias cubren un mínimo del 70% de statements, functions, lines, y branches.
  • Pasa tests (y linters) (npm test).
  • La aplicación esta desplegada en una plataforma de hosting tal como: GitHub Pages, Firebase Hosting, Netlify, Vercel, etc.
  • La aplicación desplegada debe tener 80% o más de las puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.