- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Historias de usuario
- 4. Consideraciones de la Api
- 5. Prototipo de alta
- 6. Interfaces
- 7. Pruebas Unitarias
- 8. Despliegue
- 9. Modo de uso
- 10. Referencias
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.
Como desarrolladora Front-end, estos kits de desarrollo pueden resultar de gran ayuda para implementar rápidamente características de los proyectos en los que trabajes.
En este proyecto se construyo 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.
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.
El framework utilizado fue React, para el desarrollo de la interfaz, mediante peticiones HTTP a la api mocks.
Para la planificación del proyecto, se ocupo Trello, donde se fue derarrollando de acuerdo a las historias de usuario planteadas y que con las siguientes.
[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.
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.
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.
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
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.
- 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 meserx quiero ver los pedidos que están preparados para entregarlos rápidamente a lxs clientxs que las hicieron.
- Ver listado de pedido listos para servir.
- Marcar pedidos que han sido entregados.
Yo como administrador(a) de tienda quiero gestionar a los usuarios de la plataforma para mantener actualizado la informacion de mis trabajadorxs.
- Ver listado de trabajadorxs.
- Agregar trabajadorxs.
- Eliminar trabajadoxs.
- Actualizar datos de trabajadorxs.
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.
En el proyecto se utilizo la api mock, la cual fue desplegada...... y esta disponible en......
Para probar inicilamente las rutas se relizaron algunas peticiones de prueba que se ejecutaron con REST Client, una extensión de Visual Studio Code.
Se fueron consumiendo las rutas de acuerdo a la documentación entregada. Documentación
- Ejemplo cuando se realiza Petición Post a la api mock, en login.
- Ejemplo lista de usuarios y productos en la api.
Para el desarrollo de la interfaz inicialmente se realizaron prototipos de alta fidelidad, para vista responsive en tablet. Se diseño el logo y cada una de las páginas correspondientes a las vistas Waiter, Chef y Admin.
- Vista para tomar pedidos
- Vista pedidos para entregar
- Vista pedidos pendientes
- Vista pedidos listos
- Vista pedidos listos
- Vista Agregar trabajador
Se utilizo Jest para testear los componentes de React, testiando el comportamiento de la aplicación. Se realizaron 16 test para los componentes Login, Waiter, Chef y Workers List, con un coverage sobre el 80%.
Para el despliegue de la aplicación y Api Mock, se ocupo Vercel que es una plataforma de despliegue que nos permite desplegar nuestra aplicación web estática (HTML, CSS y JavaScript) y también nos permite desplegar aplicaciones web que se ejecutan en el servidor (Node.js).
-
Aplicación ya desplegada. Burger-Queen Api Client
-
Api Mock ya desplegada. Api Mock
Para la utilización de la aplicación debe ser mediante Node.js.
Primero se clona el proyecto:
$ git clone https://github.com/GloVillagran/DEV004-burger-queen-api-client.git
Instalación de dependencias:
$ npm install
Correr la aplicación:
$ npm run dev
Testeo de la aplicación:
$ npm test
Usuarios registrados para probar aplicación:
admin: hugo@gmail.com
waiter: lucas@gmail.com
chef: gloria@gmail.com
contraseña utilizada para todos los usuarios: 123456