🌟BURGER QUEEN 

🍔
Índice
 1. Definición del proyecto
 2. Historias de usuario
 3. Objetivos de aprendizaje
 4. Prototipo
 5. Plan de acción
 6. Recursos
 7. Autores

1. Definición del proyecto 📝

Un pequeño restaurante de hamburguesas, que está creciendo, necesita una
interfaz en la que puedan tomar pedidos usando una tablet, y enviarlos a la
cocina para que se preparen ordenada y eficientemente.

En la vista del mesero se muestra dos menús (desayuno y resto del día), cada
uno con todos sus productos. El mesero debe poder ir eligiendo qué productos
agregar y estos se reflejan en el resumen del pedido con el costo total.

Los pedidos se trasladan a la vista del cocinero quien indica con tan solo un
botón cuando este ya ha sido preperado y asi el mesero pueda pasar a retirarlo
y entregarlo de forma rápida a los clientes.

Este proyecto fue realizado usando la librería React Js y con Firebase para el
manejo de la base de datos.

2. Historias de usuarios 👩 👨
Usuario: Mesero.

Criterios minimos de Definición de

Historias de usuario
aceptación terminado

Historia 1: Yo como Notificar al mesero Cuando el mesero

mesero quiero mediante alertas en caso logre crear su
 Criterios minimos de Definición de
Historias de usuario
aceptación terminado

de cometer un error al cuenta con éxito la

registrarme en la
registrarse, fallas de información queda
app: con mi correo y
internet, correo almacenada en
contraseña y mi perfil
registrado y/o registro firebase y se le envia
de trabajador para
exitoso y almacenar los un alerta de
acceder a la app.
datos en firestore. información.

Validar las credenciales

ingresadas por el El mesero logra
Historia 2: Yo como
mesero para el inico de cambiar la
mesero registrado
sesión, en caso de olvido contraseña en caso
quiero ingresar a la
permitir recuperar la de olvido y puede
app: mediante mi
contraseña y redireccionar
correo electrónico para
redireccionarlo al home correctamente a la
loguearme de una
de acuerdo a su rol en vistas de acuerdo a
manera fácil.
caso de inicio de sesión su rol.
exitoso.

Historia 3: Yo como

Visualizar en modo de
mesero quiero saber
lista cada productos con Notificar al mesero
cuánto cobrar: y enviar
su cantidad y precio y que el pedido se ha
la orden a la cocina
agregar cada pedido en enviado a la cocina
para evitar errores y
una orden para enviar a de manera exitosa.
que se puedan ir
la cocina.
preparando en orden.

Historia 4: Yo como

Solo el mesero
mesero quiero ver los Mostrar sección de
puede tener acceso
pedidos que están platos listos ordenados
a la sección de
preparados: para de acuerdo al tiempo de
productos listos
entregarlos espera con un botón
para llevar el control
rápidamente a los para indicar que ya fue
de los productos
clientes que las entregado.
entregados.
hicieron.

Historia 5: Yo como Mostrar un botón para El mesero logra salir

mesero registrado salir y al hacer click el de su cuenta
quiero cerrar sesión de mesero debe salir de su exitosamente y es
 Criterios minimos de Definición de
Historias de usuario
aceptación terminado

la app: cuando finalice
redirigido a la
mi turno para relevar al cuenta exitosamente.
página de inicio.
siguiente.

Usuario: Jefe de cocina.

Criterios minimos de Definición de

Historias de usuario
aceptación terminado

Historia 1: Yo como Notificar al Jefe de cocina Cuando el Jefe de

Jefe de cocina quiero mediante alertas en caso cocina logre crear su
registrarme en la de cometer un error al cuenta con éxito la
app: con mi correo y registrarse, fallas de información queda
contraseña y mi internet, correo almacenada en
perfil de trabajador registrado y/o registro firebase y se le envia
para acceder a la exitoso y almacenar los un alerta de
app. datos en firestore. información.

Validar las credenciales

Historia 2: Yo como ingresadas por el Jefe de
Jefe de cocina cocina para el inico de
registrado quiero sesión, en caso de olvido
ingresar a la permitir recuperar la
app: mediante mi contraseña y
correo electrónico redireccionarlo al home
para loguearme de de acuerdo a su rol en
una manera fácil. caso de inicio de sesión
exitoso.
El Jefe de cocina
logra cambiar la
contraseña en caso
de olvido y puede
redireccionar
correctamente a la
vistas de acuerdo a
su rol.

Historia 3: Yo como Solo el Jefe de cocina

Jefe de cocina quiero Mostrar sección de las puede tener acceso a
ver los nuevos ordenes con los datos del la sección de
pedidos en cliente y pedido, productos en
orden: para saber ordenados de manera preparación para
cuáles debo preparar ascendente. llevar el control de
primero. los productos listos.

Historia 5: Yo como Mostrar un botón para El Jefe de cocina

 Criterios minimos de Definición de
Historias de usuario
aceptación terminado

Jefe de cocina
registrado quiero logra salir de su
salir y al hacer click el Jefe
cerrar sesión de la cuenta exitosamente
de cocina debe salir de su
app: cuando finalice y es redirigido a la
cuenta exitosamente.
mi turno para relevar página de inicio.
al siguiente.

3. Objetivos de aprendizaje

  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

  Arrays (arreglos)

  Objetos (key, value)

  Diferenciar entre tipos de datos primitivos y no primitivos

  Uso de condicionales (if-else, switch, operador ternario, lógica

booleana)

  Funciones (params, args, return)

  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)

  Diferenciar entre expresiones (expressions) y sentencias

(statements)

  Callbacks

  Promesas

  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)

  Diseñar la aplicación pensando en 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

  Firebase Auth

  Firestore

  JSX

  Componentes y propiedades (props)

  Manejo de eventos

  Listas y keys

  Renderizado condicional

  Elevación de estado

  Hooks

  CSS modules

  React Router

4. Prototipo
PROTOTIPO DE BAJA FIDELIDAD
 LOGIN

REGISTER
PROFILE

MENU
PREPARING

DONE
 DELIVERED

PROTOTIPO DE ALTA FIDELIDAD

MOBILE TABLET LAPTOP
MOBILE TABLET LAPTOP
MOBILE TABLET LAPTOP
MOBILE TABLET LAPTOP
MOBILE TABLET LAPTOP
MOBILE TABLET LAPTOP
MOBILE TABLET LAPTOP
MOBILE TABLET LAPTOP
5. Plan de acción ✍️
El plan de acción lo manejamos desde la plataforma Trello, en donde
desarrollamos todas las historias de usuario y las actividades necesarias para
definirla como terminado, en este link se puede ver a detalle la ejecución del
mismo.

De igual forma manejamos la plataforma de Github projects para la asignación

de milestones por cada sprint y la asignación de issues a cada miembro del
equipo.

6. Recursos 📚

 Rutas
 Manejo de rutas en react
 Documentación oficial Firebase
 Crud en Firebase
 Ant Design
 Sweet Alert

7. Autores 💻
Trabajo colaborativo: 💪

Este proyecto fue hecho posible gracias a:

 👩‍💻 Margarita Zambrano - margaZM
 👩‍💻 Andrea Blanco - Andu15

<
1. Definición del producto
Burger Queen es un software diseñado para un restaurante de hamburguesas,
que está creciendo, necesita una interfaz en la que puedan tomar pedidos
usando una tablet, y enviarlos a la cocina para que se preparen ordenada y
eficientemente a través del backend.

El objetivo de este software es facilitar la organización del trabajo dentro del

restaurante automatizando los procesos de pedidos que reciben los garzones
por parte de los comensales.

2. Principales usuarios del producto

Garzones y cocineros que trabajen en el restaurante que cuenten con un usuario
válido para poder ingresar correctamente a la interfaz.

Historia de usuario 1: Mesero/a 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:

 1- Anotar nombre de cliente.

 2- Agregar productos al pedido.
 3- Eliminar productos.
 4- Ver resumen y el total de la compra.
 5- Enviar pedido a cocina (guardar en alguna base de datos).
 6- Se ve y funciona bien en una tablet
 7- Definición de terminado
 8- Lo acordado que debe ocurrir para decir que la historia está
terminada.

Definición de Terminado (DOD):

 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 de usuario 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:

 1- Ver los pedidos ordenados según se van haciendo.

 2- Marcar los pedidos que se han preparado y están listos para servirse.
 3- Ver el tiempo que tomó prepara el pedido desde que llegó hasta que
se marcó como completado.

Definición de Terminado (DOD):

 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 de usuario 3: Meserx debe ver pedidos

listos para servir
Yo como meserx quiero ver los pedidos que están preparados para entregarlos
rápidamente a los clientes que las hicieron.

Criterios de aceptación:

 1- Ver listado de pedido listos para servir.

 2- Marcar pedidos que han sido entregados.

Definición de Terminado (DOD):

 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).
  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.

Proceso de Prototipado

Prototipo de baja fidelidad

(Invision)

Prototipo de alta fidelidad

(Figma)
Iteraciones de prototipo según feedback recibido
(Figma)

Logo
La inspiración del logo para este proyecto surgió del mismo nombre. Decidimos
colocarle a la imagen de hamburguesa una corona para hacerlo aún mas
representativo usando colores fríos en tono blanco para se destacara y no
generara distracción alguna con respecto a los demás elementos (para efectos
de visualización en este archivo se anexa el logo en tonos grises).

Background
Nos inclinamos por una paleta de colores fríos que le otorgaron sobriedad y
elegancia a nuestro diseño.

Recursos (enlaces)
 Prototipo baja fidelidad (Invision)
 Prototipo alta fidelidad (Figma)
 Prototipo navegable (Navegable)
 Organización (Trello)

Desarrolladoras
 Yndira Natera
 Lady Pino
 Daniela Blanco
BURGER QUEEN
Interface where they can take orders using a tablet, and send them to the
kitchen to be prepared neatly and efficiently.

🔨 Technologies
 

 
  

📝 Prototype
The high fidelity prototype was made in Figma.

📈 Lighthouse report
Objetivos de aprendizaje
A continuación puedes ver los objetivos de aprendizaje de este proyecto:

HTML y CSS

  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.

JavaScript

  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.

Testing
   Testeo unitario.

Estructura del código y guía de estilo

  Organizar y dividir el código en módulos (Modularización)

  Uso de identificadores descriptivos (Nomenclatura | Semántica)

  Uso de linter (ESLINT)

Git y Github

  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)

Firebase

  Firestore.

  Firebase Auth.

  Firebase security rules.

  Observadores. (onAuthStateChanged | onSnapshot)

React

  JSX

  Componentes class y componentes function
   props

  Eventos en React.

  Listas y keys.

  Renderizado condicional.

  Elevación de estados.

  hooks

  CSS modules.

  React Router.

UX

  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.

Authors
Carolina Suarez Laura López