- 1. Presentación del Producto
- 2. Producto
- 3. Diseño de la Interfaz de Usuario
- 4. Testeos de Usabilidad con Maze
- 5. Imagen Final del Producto
- 6. Boilerplate
- 7. Organización y planificación
- 8. Objetivos de aprendizaje
La tecnología cambia y avanza casi de manera diaria, contribuyendo a mejorar a alargar el tiempo de vida y aumentando la calidad de vida de las personas, aportando herramientas que optimicen tiempos y permitan organizar la información. Este proyecto nace de la necesidad de un orden y comunicación eficaz entre el equipo de meserxs y los encargados de cocina en el restaurante Itadakimasu, por lo que se ha creado una aplicación web que respondiera a esta necesidad.
Es una aplicación web para tablets del restaurante Itadakimasu, para la toma de pedidos personalizados y coordinación ágil con la cocina. Es una web intuitiva que optimiza la toma de pedidos personalizados según nombre del meserx, el nombre del cliente y la mesa en la que se encuentra. Los pedidos llegan a cocina según los garzones los vayan enviando para su preparación, los chefs pueden marcar las órdenes terminadas, para que el meserx las entregue según corresponda y puedan ser marcadas como entregadas.
Meserxs del restaurant de comida japonesa Itadakimasu, que usan cotidianamente productos móviles (celulares, tablets) y que desean una interfaz digital moderna para realizar su trabajo de forma fácil y rápida.
Esta aplicación web será utilizada principalmente por meserxs y cocinerxs del restaurante Itadakimasu. Donde podrán ingresar los pedidos de los clientes que serán posteriormente elaborados por el personal de cocina. Esta apliacación permite calcular el precio de cada producto consumido por los clientes, facilitando la comunicación tanto con los comensales como con todo el equipo de trabajo. Finalmente la usabilidad de esta aplicación web facilita la toma de los pedidos y facturación de los productos por parte de los meserxs, además de la lectura y aviso de realización del pedido por parte del personal de cocina.
Historia 1 | Meserx debe poder tomar pedido de cliente
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:
- 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
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 2 | Jefe de cocina debe ver los pedidos
Yo como jefx 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 lxs meserxs que un pedido está listo para servirlo a un cliente.
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).
El proceso de diseño fue acorde a la estética del restaurant, incluyendo su logo y su paleta de colores representativos, asociando así el aspecto visual de la aplicación con este. También, se definió una guia de estilos en donde se agruparon los componentes de nuestra aplicación, facilitando su uso en distintas pantallas.
Guía de estilos:
El testeo de usuarios fue aplicado a 14 usuarios, teniendo así un puntaje de 83 en usabilidad donde se midió duración, click fallidos y feedback, este último siendo utilizado para iterar en nuestra app y cambiando algunas vistas para mayor accesibilidad.
Visita aquí la aplicación Itadakimasu
La Planificación de nuestro equipo se basó en metodologías agiles, tomando cada integrante del equipo un rol del equipo Scrum. Para lograr lo anterior ocupamos herramientas como Miró y Trello.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de Media Queries.
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (
import|export) - Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados.
- Uso de callbacks.
- Consumo de Promesas.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | |tags)
- Organización en Github (projects | issues | labels | milestones)
- Firestore.
- Firebase Auth.
- Firebase security rules.
- Observadores. (onAuthStateChanged | onSnapshot)
- Components & templates.
- Directivas estructurales (ngIf / ngFor)
- @Input | @Ouput
- Creación y uso de servicios.
- Manejos de rutas.
- Creación y uso Observables.
- Uso de HttpClient.
- Estilos de componentes (ngStyle / ngClass)
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- Planear y ejecutar tests de usabilidad.