- 1. Sobre el proyecto
- 2. Historias de Usuario
- 3. Prototipos
- 4. Tecnologías y Herramientas
- 5. Objetivos de Aprendizaje
- 6. Despliegue
- 7. Autoras
La Burguesa es una interfaz diseñada para la gestión de pedidos de un restaurante, con vistas orientadas para los siguientes roles: mesero y chef. Inicia con una vista para el ingreso a la plataforma, la cual se redirecciona a una segunda vista según el respectivo rol ingresado. En el caso de nuestra plataforma se usaron los siguientes correos:
Ambos con la contraseña: laboratoria
Para el caso del mesero, una vez que se encuentra en su vista correspondiente; puede ir eligiendo qué productos agregar y/o eliminar, asimismo la interfaz muestra el resumen del pedido con el costo total de la orden y de cada producto según la cantidad. Y para el caso del cocinero, una vez que se encuentra en su vista correspondiente; puede visualizar todas las órdenes que el mesero le ha proporcionado con el fin de atenderlas.
La aplicación es una Single Page Application, pudiéndose usar como una PWA con el objetivo que se similar a una aplicación nativa.
HU 01: Yo como trabajadorx quiero acceder a la interfaz del usuario con mi email y password para que me redirija a la página que me corresponda segun mi cargo.
Criterios de aceptación
Lo que debe ocurrir para que se satisfagan las necesidades del usuario
- Validar email y contraseña y redirigir a la página de tomar orden o ver pedido según el cargo mesero o chef.
- Que se vea y funcione 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.
- Testear funciones y/ componentes.
HU 02: 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
- Mostrar la data de productos en la pantalla de forma ordenada.
- Agregar productos al pedido.
- Agregar, disminuir, eliminar producto (CRUD) y observar resumen del pedido y monto a pagar.
- Enviar pedido a cocina (guardar en alguna base de datos) y actualizar la pestaña de ver pedidos todos, pendientes y listos del mesero.
- Que el mesero pueda acceder a la pestaña de ver pedidos, navegar entre las opciones de todos, pendientes, listos y eliminar los perdidos (solo pendientes).
- Que se vea y funcione 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.
- Testar componentes y funciones realizadas.
HU 03: Yo como jefx de cocina quiero ver los pedidos de los clientes en orden para 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
Lo que debe ocurrir para que se satisfagan las necesidades del usuario
- Pintar los pedidos en la vista del cocinero
- El cocinero debe ver el timer desde que se envía el pedido hasta que se actualiza a listo.
- La navBar del chef debe filtrar y jalar actualizaciones de pedidos según su status.
- Los pedidos de la sección done tienen que tener el color verde.
- Que el botón de 'actulizar pedido' cambie el status del pedido y lo envie a la sección de 'done'.
- Que se vea y funcione 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.
- Testar componentes y funciones realizadas.
Se trabajó con un editor de gráficos vectorial y una herramienta de generación de prototipos (Figma) para tener un diseño más profesional y reflejar lo que la interfaz debería mostrar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello world!</title>
</head>
<body>
<main>
<header>
<h1>Hello world!</h1>
</header>
</main>
<footer></footer>
<script></script>
</body>
</html>EventTarget.addEventListener()-MDN
Funciones(Parámetros y argumentos)-MDN
Introducción a componentes y plantillas
ECMAScript (ES Modules-Import)
ECMAScript (ES Modules-Export)
Cómo escribir una promesa de JavaScript
Documentación oficial Firebase
Primeros pasos con Firebase-Autenticación
Administra usuarios en Firebase
Agregar datos a Cloud Firebase
Obtén actualizaciones en tiempo real-Firebase
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent