- 1. Karma Burger
- 2. Estudio de Usuario
- 3. Realización del Diseño
- 4. Tecnologías empleadas
- 5. Fuentes
- 6. Autores
🍔 🍟 Karma Burger es una hamburguesería cuyo diferenciador es ofrecer platillos de mini hamburguesas. 🍔🍔🍔
Es una plataforma de gestión de pedidos, enfocada para los empleados con los siguientes roles: Administrador, 🤵 Mesero y 👩🍳Jefe de Cocina; con la finalidad de brindarles una herramienta que facilite sus actividades.
Constará con una vista inicial que ofrece información general de la empresa; y desde la cual se puede acceder a la sección de 'login', donde podrá visualizar el flujo de actividades correspondientes al rol.
| ROLES | DESCRIPCIÓN |
|---|---|
| 🤵 Administrador | Personal encargado en el flujo de actividades con los empleados |
| 🤵 Mesero | Personal encargado en la atención directa con los comensales |
| 👩🍳 Jefe de Cocina | Personal encargado en la realización gastronómica de los platillos descritos en el menú |
| VISTA | SUB VISTAS |
|---|---|
| Página Bienvenida | - Sobre Nosotros - Informción - La Carta - Reconocimientos - Contáctanos |
| Inicio de Sesión | -Formulario 'Login' - Recuperación de Contraseña |
| N° | SUB VISTAS | DESCRIPCIÓN |
|---|---|---|
| 1 | Página Inicio | Contiene mensaje motivacional para el personal |
| 2 | Registrar Personal | Formulario de registro para nuevos usuarios |
| 3 | Historial de Ventas | Contiene datos básicos de la empresa y una tabla descargable en formato excel que contiene un resumen de los pedidos terminados |
| 4 | Pedidos Preparados | Muestra los pedidos concluidos por el cocinero pero que no han sido entregados al comensal |
| 5 | Pedidos Para Entregar | Muestra los pedidos listos para entregar al comensal |
| 6 | Pedidos Cancelados | Muestra los pedidos cancelados por el cocinero |
| N° | SUB VISTAS | DESCRIPCIÓN |
|---|---|---|
| 1 | Página Inicio | Contiene mensaje motivacional para el personal |
| 2 | Realizar Pedido | Vista que permite al mesero seleccionar los productos o items solicitados por el cliente, para así crear un resumen de la compra y enviarlo a cocina |
| 3 | Pedidos por Entregar | Muestra los pedidos concluidos por el cocinero pero que no han sido entregados al comensal |
| 4 | Historial de Pedidos | Contiene datos básicos de la empresa y una tabla descargable en formato excel que contiene un resumen de los pedidos terminados |
| N° | SUB VISTAS | DESCRIPCIÓN |
|---|---|---|
| 1 | Página Inicio | Contiene mensaje motivacional para el personal |
| 2 | Nuevos Pedidos | Muestra los pedidos pendientes para peparar |
| 3 | Pedidos Preparados | Muestra los pedidos concluidos por el cocinero pero que no han sido entregados al comensal |
| 4 | Historial de Pedidos | Contiene datos básicos de la empresa y una tabla descargable en formato excel que contiene un resumen de los pedidos terminados |
Se puede acceder a la página mediante el siguiente link, y además se adjunta la tabla que contiene los respectivos usuarios y contraseñas para cada rol. Con el fin de interactuar con todas las vistas y funcionalidades de la interfaz.
| ROL | USUARIO | CONTRASEÑA |
|---|---|---|
| 🤵 Administrador | rous97 | 123456 |
| 🤵 Mesero | mari | 123456 |
| 👩🍳 Jefe de Cocina | clau45 | 123456 |
Se plantearon como usuarios al Administrador, 🤵al Mesero y 👩🍳al Jefe de Cocina de la empresa Karma.
-
🤵Administrador: Visualizar el flujo de la página en general, registro de usuarios, historiales de ventas, historial de empleados; con la finalidad de llevar una mejor gestión.
-
🤵 Mesero: Poder realizar los pedidos, visualizar los productos con su respectiva descripción(Nombre, precio, detalle, mesa, cliente, fecha y hora), poder enviar el pedido al jefe de cocina, visualizar los pedidos que faltan por entregar, cambiar el estado de los pedidos a entregado y visualizar el Historial de Pedidos concluidos.
-
👩🍳Jefe de Cocina: Visualizar los nuevos pedidos por preparar, Poder cambiar el estado de los pedidos a preparado o cancelado y cuenta con un historial de Pedidos concluidos.
En el siguiente diagrama podrán observar el flujo de los cambios de estado del pedido una vez creado.
A continuación, mostraremos algunas de las historias de Usuario según el rol:
Para el diseño, usamos la definición de Atomic Design donde divide las páginas por átomos, moléculas y *organismos. Para ello, utilizamos la plataforma Figma para realizar el Wireframe y prototipado de Alta Fidelidad.
En esta fase se busca realizar un esquema virtual de los componentes y las vistas.
Teniendo como base el Wireframe, se realiza el diseño de la web considerando estilos, paleta de colores, otros recursos.
A continuación, le mostraremos el proceso y algunas imágenes de referencia para la sección "Realizar Pedido"" del rol "mesero".
A continuación, se adjuntará una breve videodemostración del resultado final tanto en diseño como en funcionalidad.
-
SASS: Usada para definir el estilo visual del proyecto.
-
Jest: Framework para realizar los testing unitarios.
-
Eslint: Herramienta de linting para analizar el código en busca de errores.
-
React.js: Librería implementada para crear una interfaz de usuario interactiva de manera sencilla.
-
Javascript: Para dar la funcionalidad a la plataforma.
-
Firebase: Se trata de una plataforma móvil creada por Google, cuya principal función es desarrollar y facilitar la creación de apps de elevada calidad de una forma rápida. Para este proyecto se uso lo siguiente:
- Cloud Firestore: Es una base de datos NoSQL orientada a los documentos. A diferencia de una base de datos SQL, no hay tablas ni filas; En su lugar, almacenas los datos en documentos, que se organizan en colecciones. Cada documento contiene un conjunto de pares clave-valor.
- Cloud Storage: Cloud Storage se diseñó para ayudarte a almacenar y procesar con rapidez y facilidad el contenido generado por usuarios, como fotos y videos.
- Realtime Database: Sincronización en tiempo real para datos JSON. Firebase Realtime Database es una base de datos NoSQL alojada en la nube que te permite almacenar y sincronizar datos entre tus usuarios en tiempo real.
-
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 repositorio.
-
PWA: Progressive web apps (PWA) o aplicación web progresiva es una solución basada en la web tradicional que todos conocemos. La aplicación desplegada tiene más del 80% en puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.
A continuación se muestran las estadísticas del performance:
- Repositorio de Laboratoria: Se encuentran todas las condiciones y herramientas a trabajar para el proyecto.
- Marielena Aizaga
- Rosamaria Rodriguez
- Equipo de Laboratoria LIM016
