- 1. Resumen del proyecto
- 2. Requerimientos del cliente
- 3. Organización
- 4. Diseño de la interfaz de usuario
- 5. Historias de usuario
- 6. Despliegue
- 7. Uso
- 8. Consideraciones
- 9. Objetivos de aprendizaje
Burger Queen API Client es una aplicación desarrollada con React, que cuenta con una interfaz para un restaurante de hamburgesas, a través de la cual los usuarios pueden tomar pedidos (mesero), enviarlos al área de preparación (chef) y hacer el manejo de usuarios y productos (administrador), todo esto conectado a una API.
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.
Este proyecto tiene dos áreas: interfaz (cliente) y API (servidor). Nuestra clienta nos ha solicitado desarrollar la interfaz que se integre con una API.
Esta es la información proporcionada por la clienta:
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 Nuestros clientes 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. El usuario debe poder ir eligiendo qué productos agregar y la interfaz debe ir mostrando el resumen del pedido con el costo total.
Además la clienta nos ha dado un link a la documentación que especifica el comportamiento esperado de la API HTTP a consumir. Ahí se encuentran todos los detalles de los endpoints, como por ejemplo qué parámetros esperan, qué deben responder, etc.
Como herramienta de organización utilizamos Trello, en donde hicimos toda la planeación de trabajo de cada sprint que duró este proyecto (4):
El prototipo fue elaborado en Figma.
Historia de usuario 1: Mesero/a debe poder ingresar al sistema, si el admin ya le ha asignado credenciales
Yo como mesero quiero poder ingresar al sistema de pedidos.
- 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.
Yo como mesero 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.
- 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
Yo como jefe 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 los meseros que un pedido está listo para servirlo a un cliente.
- 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.
Yo como mesero quiero ver los pedidos que están preparados para entregarlos rápidamente a los clientes que las hicieron.
- Ver listado de pedido listos para servir.
- Marcar pedidos que han sido entregados.
- 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.
Yo como administrador(a) de tienda quiero gestionar a los usuarios de la plataforma para mantener actualizado la informacion de mis trabajadores.
- Ver listado de trabajadores.
- Agregar trabajadores.
- Eliminar trabajadores.
- Actualizar datos de trabajadores.
Yo como administrador(a) de tienda quiero gestionar los productos para mantener actualizado el menú.
- Ver listado de productos.
- Agregar productos.
- Eliminar productos.
- Actualizar datos de productos.
Se realizó el despliegue con Vercel.
https://dev-007-burger-queen-api-client.vercel.app/
https://burger-queen-api-zvby-dev.fl0.io/
Para poder ingresar a la aplicación se puede utilizar los siguients usuarios:
Este proyecto se hizo en dupla y fue una propuesta para que trabajar con el backend consumiendo esta API.
El tiempo estimado para completar el proyecto fue de 3 a 5 Sprints y se realizó en 4 Sprints.
La lógica del proyecto debía estar implementada completamente en JavaScript (ES6+), HTML y CSS y empaquetada de manera automatizada.
La aplicación debía ser un Single Page App. Los pedidos debían tomarse desde una tablet, pero no se requirió una app nativa, sino una web app que sea mobile-first.
La aplicación desplegada tiene 92-100% de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.
La aplicación hace uso de npm-scripts y cuenta con scripts dev,
test, build y deploy, que se encargan de arrancar, correr las pruebas,
empaquetar y desplegar la aplicación respectivamente.
Por otro lado, la estructura de carpetas y archivos es:
.
├──
├── README.md
├── package.json
├── index.html
├── src
| ├── main.jsx
| ├── App.jsx
| ├── App.css
| ├── index.css
| ├── components
| | ├──button
| | | ├──button.css
| | | └──button.jsx
| | ├──chefButton
| | | ├──chefButton.css
| | | └──chefButton.jsx
| | ├──input
| | | ├──input.css
| | | └──input.jsx
| | ├──logoutButton
| | | ├──logoutButton.css
| | | └──logoutButton.jsx
| | ├──modal
| | | ├──modal.css
| | | └──modal.jsx
| | ├──pages
| | | ├──Error
| | | | ├──error-page.css
| | | | └──error-page.jsx
| | | ├──Home
| | | | ├──home.css
| | | | └──home.jsx
| | | ├──Kitchen
| | | | ├──kitchen.css
| | | | ├──kitchen.jsx
| | | | ├──kitchen.spec.js
| | | | └──renderKitchen.spec.js
| | | ├──Login
| | | | ├──login.css
| | | | ├──login.jsx
| | | | └──login.spec.js
| | | ├──Menu
| | | | ├──menu.css
| | | | ├──menu.jsx
| | | | ├──menu.spec.js
| | | | └──renderMenu.spec.js
| | | ├──Orders
| | | | ├──orders.css
| | | | ├──orders.jsx
| | | | └──orders.spec.js
| | | ├──Products
| | | | ├──products.css
| | | | ├──products.jsx
| | | | ├──products.spec.js
| | | | └──renderProducts.spec.js
| | | └──Users
| | | | ├──renderUsers.spec.js
| | | | ├──users.css
| | | | ├──users.jsx
| | | | └──users.spec.js
| | ├──stopwatch
| | | ├──stopwatch.css
| | | └──stopwatch.jsx
| | └──waiterButton
| | | ├──waiterButton.css
| | | └──waiterButton.jsx
| ├── services
| | ├── apiRequest.jsx
| | └── apiRequest.spec.js
| ├── utils
| | ├── kitchen.jsx
| | ├── login.jsx
| | ├── menu.jsx
| | ├── orders.jsx
| | ├── products.jsx
| | └── users.jsx
| └── assets
| └── Images
| ├──add.png
| ├──admin.png
| ├──agua.png
| ├──borrar.png
| ├──cafe.png
| ├──cafeLeche.png
| ├──ceboll.png
| ├──chef.png
| ├──close.png
| ├──cocin.png
| ├──dobl.png
| ├──editar.png
| ├──fondo.png
| ├──hamb.gif
| ├──hide.png
| ├──jug.png
| ├──listo.png
| ├──logo.png
| ├──logo2.png
| ├──meser.png
| ├──out.png
| ├──pago.png
| ├──paps.png
| ├──refr.png
| ├──remove.png
| ├──sandw.png
| ├──sencill.png
| ├──show.png
| └──waiter.png
├── mock-assets.js
├── mock-css.js
├── package-lock.json
├── babel.config.cjs
├── vite.config.js
├── .eslintrc.cjs
├── .gitignore
├── LighthouseReport.pdf
└──thumb.png
El objetivo principal es aprender a construir una interfaz web usando React. Tratando de solucionar el problema: cómo mantener la interfaz y el estado sincronizados. Así que en este proyecto nos familiarizamos con el concepto de estado de pantalla, y cómo cada cambio sobre el estado se va reflejando en la interfaz (por ejemplo, cada vez que agregamos un producto a un pedido, la interfaz actualiza la lista del pedido y el total).
-
[✓] Uso de HTML semántico
-
[✓] Uso de selectores de CSS
-
[✓] Modelo de caja (box model): borde, margen, padding
-
[✓] Uso de flexbox en CSS
-
[✓] Uso de CSS Grid Layout
-
Uso de media queries
-
[✓] Pruebas unitarias (unit tests)
-
[✓] Pruebas asíncronas
-
[✓] Uso de mocks y espías
-
[✓] Módulos de ECMAScript (ES Modules)
-
[✓] Uso de linter (ESLINT)
-
[✓] Uso de identificadores descriptivos (Nomenclatura y Semántica)
-
[✓] 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
-
[✓] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
-
[✓] GitHub: Organización en Github (projects | issues | labels | milestones | releases)
-
[✓] Consulta o petición (request) y respuesta (response).
-
[✓] Cabeceras (headers)
-
[✓] Cuerpo (body)
-
[✓] Verbos HTTP
-
[✓] Códigos de status de HTTP
-
[✓] Encodings y JSON
-
CORS (Cross-Origin Resource Sharing)
-
[✓] JSX
-
[✓] Componentes y propiedades (props)
-
[✓] Manejo de eventos
-
[✓] Listas y keys
-
[✓] Renderizado condicional
-
[✓] Elevación de estado
-
[✓] Hooks
-
[✓] CSS modules
-
[✓] React Router
- Modelado de datos
- [✓] Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
-
[✓] Crear prototipos de alta fidelidad que incluyan interacciones
-
[✓] Seguir los principios básicos de diseño visual
-
[✓] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad