Nos acaban de enviar un correo con una solicitud para un nuevo proyecto. Hay un restaurante que nos ha contactado porque quieren que alguien les construya una interfaz donde puedan tomar pedidos usando una tablet.
Como punto de partida, nos comparten el siguiente correo recibido del cliente:
Somos Burguer Queen, una cadena de comida rápida 24hrs.
Nuestra propuesta de servicio 24hrs ha tenido muy buena acogida, y para expandirnos necesitamos un sistema que nos ayude a tomar los pedidos de los clientes.
Tenemos 2 menús: uno para el desayuno, que es muy sencillo:
Item Precio Cafe americano 5 Cafe con leche 7 Sandwich de jamón y queso 10 Jugo natural 7 Y un menú para el resto del dia:
Los clientes pueden escoger entre hamburguesas de res, de pollo, o vegetariana. Y por $1 pueden agregarle queso o huevo.
Nuestros clientes son bastante indecisos, por lo que es muy común que cambien el pedido varias veces antes de finalizarlo.
Partiendo de los requerimientos de negocio detallados en el correo del cliente, nos piden construir una interfaz que permita a lxs cajerxs tomar los pedidos en una tablet, y desde ahí se puedan enviar a cocina a través de un backend del que nos darán detalles más adelante.
El primer paso de este proyecto debe ser convertir el menú descrito por el cliente en una estructura que podamos poner en un archivo JSON para después pintar en la pantalla.
Nuestra interfaz debe mostrar los dos menús (desayuno y resto del día), cada uno con todos sus productos. El usuario debe poder ir eligiendo que productos agregar y la interfaz debe ir mostrando el resumen del pedido con el total.
El objetivo principal de aprendizaje de este proyecto es construir una interfaz web usando el framework elegido (React, Vue o Angular). Todos estos frameworks de front-end atacan el mismo problema: cómo mantener la interfaz y el estado sincronizados. Así que esta experiencia espera familiarizarse con el concepto de estado de pantalla, y cómo cada cambio sobre el estado se va a ir reflejando en la interfaz (por ejemplo, cada vez que agregamos un producto a un pedido, la interfaz debe actualizar la lista del pedido y el total).
Como objetivo secundario, la implementación debe además seguir las recomendaciones para PWAs (Progressive Web Apps), lo cual incluye conceptos como offline. Para guiarte con respecto a este tema te recomendamos usar Lighthouse, que es una herramienta de Google que nos ayuda a asegurar que nuestras web apps sigan buenas prácticas. De hecho, usaremos Lighthouse a la hora de evaluar el proyecto.
Finalmente, la interfaz debe estar diseñada específicamente para correr en tablets.
JavaScript (ES6+), HTML y CSS y empaquetada de manera automatizada. Vue
La aplicación debe ser un Single Page App. Los pedidos los tomaremos desde una tablet, pero no queremos una app nativa, sino una web app que sea responsive y pueda funcionar offline. También necesitamos botones grandes para escoger los productos, y el estado actual del pedido siempre visible para poder confirmar con el cliente.
En el README.md cuéntanos qué decisiones de diseño tomaste, incluye bocetos
tipo story board, info de despliegue e instrucciones para developers
(dependencias, instalación, tests, ...).
- Ingresar nombre del cliente.
- Filtrar menú por desayuno y resto del día.
- Agregar ítem al pedido.
- Eliminar ítem del pedido.
- Mostrar resumen de pedido con todos los items y el total.
- Enviar a cocina (esto debe guardar el pedido).
- Vista de pedidos pendientes
- Marcar pedido como listo
- Ver historial de pedidos
- Inicio de sesión
- Restaurar contraseña
| Habilidad | Nivel esperado |
|---|---|
| JavaScript | |
| Estilo | 4 |
| Nomenclatura/semántica | 3 |
| Funciones/modularidad | 3 |
| Estructuras de datos | 3 |
| Tests | 3 |
| HTML | |
| Validación | 3 |
| Estilo | 3 |
| Semántica | 3 |
| SEO | n/a |
| CSS | |
| DRY | 3 |
| Responsive | 3 |
| SCM | |
| Git | 3 |
| GitHub | 3 |
| CS | |
| Lógica | 3 |
| Arquitectura | 2 |
| Patrones/paradigmas | n/a |
| Habilidad | Nivel esperado |
|---|---|
| User Centricity | 3 |
| Entrevistas | n/a |
| Testing | 3 |
| User Flow | 3 |
| Jerarquía | 3 |
| Alineación | 3 |
| Contraste | 3 |
| Color | 3 |
| Tipografía | 3 |
- Debe verse bien y funcionar bien en tablets.
- No queremos una app nativa, sino una web app que se pueda agregar a la pantalla de inicio como PWA.
- Queremos botones grandes para fácil uso en pantallas táctiles (touch screens).
- Queremos el estado actual del pedido siempre visible mientras tomamos un pedido.
- Queremos que sea accesible y que funcione bien en tablets iOS y Android.
El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
interfaz será desplegada usando GitHub pages u otro servicio de hosting que
puedas haber encontrado en el camino.
-
Haz un fork de este repo (en GitHub).
-
Clona tu fork en tu computadora:
git clone git@github.com:<tu-usuario-de-github>/<cohortid>-burger-queen.git cd <cohortid>-burger-queen
-
Crea una rama a partir de
masterpara empezar a trabajar. Por ejemplo:git checkout -b develop
- Qué es eso de serverless? - @PamRucinque en Medium
- Qué es Serverless? | FooBar - YouTube
- Firebase
- Serverless Architectures - Martin Fowler
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm testFor a detailed explanation on how things work, check out the guide and docs for vue-loader.
Built with:
- JS
- HTML
- CSS
- Node.js
- Vue.js
- Visual Code Studio
./
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── build
│ └── *
├── config
│ └── *
├── dist
│ ├── static
│ │ └── *
│ └── index.html
├── node_modules
│ └── *
├── src
│ ├── assets
│ │ └── logo.jpg
│ ├── components
│ │ ├── Login.vue
│ │ ├── *
│ │ └── *
│ ├── router
│ │ └── index.js
│ ├── App.vue
│ └── main.js
├── static
│ └── .gitkeep
└── test
├── e2e
│ └── *
└── unit
└── *
- Jest
Under construction.
Please send a pull request if you would like to contribute.
- Producto final sigue los lineamientos del diseño.
- Documenta proceso de diseño.
- Incluye info para developers (deps, instalación, uso, despliegue, testing, ...).
- 80% o más en sección Performance.
- 80% o más en sección Progressive Web App.
- 80% o más en sección Accessibility.
- 80% o más en sección Best Practices.
- 70% o más en cobertura de statements.
- 70% o más en cobertura de functions.
- 70% o más en cobertura de lines.
- 70% o más en cobertura de branches.
- Ingresar nombre del cliente.
- Filtrar menú por desayuno y resto del día.
- Agregar ítem al pedido.
- Eliminar ítem del pedido.
- Mostrar resumen de pedido con todos los items y el total.
- Enviar a cocina (esto debe guardar el pedido).
- Vista de pedidos pendientes.
- Marcar pedido como listo.
- Ver historial de pedidos.
- Inicio de sesión.
- Restaurar contraseña.
- Se ve bien y funciona bien en tablets.
- Se puede agregar a la pantalla de inicio como web app (tiene manifest, íconos, ...) en iOS y Android.
- Uso fácil en pantallas táctiles (touch screens).
- Estado actual del pedido siempre visible mientras tomamos un pedido.