/MEX008-FE-Burger-Queen

Proyecto multidisciplinario (UX Design / Front End Development), Burger Queen. Cliente PanD'monium

Primary LanguageJavaScript

Burger Queen

Índice

1. Preámbulo

React, Angular y Vue son algunos de los frameworks y librerías de JavaScript más utilizados por lxs desarrolladorxs alrededor del mundo, y hay una razón para eso. En el contexto del navegador, mantener la interfaz sincronizada con el estado es difícil. Al elegir un framework o librería para nuestra interfaz, nos apoyamos en una serie de convenciones e implementaciones probadas y documentadas para resolver un problema común a toda interfaz web. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las caractrísticas específicas de nuestra aplicación.

Cuando elegimos una de estas tecnologías no solo importamos un pedacito de código para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una arquitectura, una serie de principios de diseño, un paradigma, unas abstracciones, un vocabulario, una comunidad, etc...

Como desarrolladora Front-end, estos kits de desarrollo pueden resultarte de gran ayuda para implementar rápidamente características de los proyectos en los que trabajes.

2. Resumen del proyecto

BurgerQueen

Nos contactó una cadena de comida rápida vegana para que contruyamos una interfaz para optimizar toma de pedidos y administración dentro de sus locales establecidos.

Este proyecto supone un reto mayor a los que te has enfrentado ya que abarca la fase de producción y las áreas de UX y Front End deben colaborar y trabajar juntas, así como coordinar los requerimientos de tu cliente y de tus usuarios.

Sobre el diseño El restaurante Pan D'Monium tiene el objetivo de estandarizar la forma de tomar pedidos y que eso se refleje en el tiempo de entrega tanto en sucursal para posteriormente implementarlo en el resto de la cadena, así también facilitar la cobranza e impactar el trabajo en cocina.

Para lograr esto debes de entender el funcionamiento total del negocio, todo el flujo, los puntos de interacción y el rol de cada uno de los stakeholders que participan en el proceso. Para ello deberás prestar mucha atención a la investigación realizada por el equipo de UX design, sus insights y findings. Así como dar feedback necesario sobre esos puntos. El restaurante se encuentra en Av. Chilpancingo 129, Roma Sur y el nombre de tu contacto es Aurora.

Durante el proceso vas a estar en constante comunicación con tu equipo de UX Designers para resolver dudas y decisiones de diseño así como negociar los alcances del proyecto tanto con tu cliente como con tu equipo. Tu prioridad en este caso debe equilibrar tres puntos: Aprendizaje, Colaboración, Calidad del producto, no dejes de darle el seguimiento y la importancia hasta su implementación y presentación final.

3. Objetivos de aprendizaje

  1. El objetivo principal de es aprender a 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 familiarizarte 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).

  2. Como objetivo secundario, deberá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.

  3. Finalmente, la interfaz debe estar diseñada específicamente para correr en el/los dispositivo/s que mejor se acomode a las necesidades del cliente. Nota: esto debe ser validado con tu equipo de UX.

Tópicos: react, angular, vue, pwa, offline-first, service-worker.

Requerimientos

  • Entender cómo se realizan los pedidos en Pan D'Monium y cuáles son las necesidades del personal de cocina y del personal de atención al público (meser@s y cajer@s).
    • Ideal si dentro de la investigación toman fotos de las formas en que se toman pedidos actualmente.
  • Diseñar la versión para tablets de esta aplicación, teniendo en cuenta el modo de uso de esta tablet (por ej. El uso de la pantalla táctil) y los distintos tipos de usuarios.
    • El diseño se debe adaptar a dos tamaños de tablets 9.7 y 7 pulgadas.
    • Crear un ícono para poder agregar la pantalla al home de la tablet. Puedes usar appicon y agregar las especificaciones para el equipo de desarrollo.
  • El estado actual del pedido siempre visible mientras tomamos un pedido.
  • Necesitamos hacer una web app, así será accesible y funcionará bien en tablets iOS y Android.
  • Testear e iterar los diseños con personal del restaurante.
  • Entregar las especificaciones de diseño al equipo de desarrollo en Figma, Zeplin ó XD.
  • Hacer seguimiento y QA a la implementación realizada por el equipo de desarrollo.
  • Realizar pruebas de usabilidad de la aplicación web al final de cada entrega del equipo de desarrollo.

Momentos Importantes

  • Kick off del proyecto en el que conocerás a tu squad integrado por UX Designers y FE Developers, tendrás que coordinarte con ellas y establecer flujos de trabajo.
  • [UX] Establecer contacto con el restaurante.
  • [UX] Al final de la primer semana hay un check in con el cliente.
  • [UX] Al final de la segunda semana hay una demo de soluciones y prototipos.
  • Al final de la tercer y cuarta semana hacer check in del alcance técnico con tu squad de FE Developers.
  • Al final de la quinta semana será la de Demo Final de la totalidad 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 (a través de un backend del que nos darán detalles más adelante).

burger-queen

4. Consideraciones generales

Este proyecto se debe "resolver" en equipos.

Trabaja en una historia hasta terminarla antes de pasar a la siguiente. Trabaja hasta la historia que puedas en el tiempo especificado.

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6+), HTML y CSS y empaquetada de manera automatizada. En este proyecto Sí está permitido usar librerías o frameworks (debes elegir entre React, Vue o Angular).

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.

Necesitamos pensar bien en el aspecto UX de de quienes van a tomar los pedidos, el tamaño y aspecto de los botones, la visibilidad del estado actual del pedido, etc.

La aplicación desplegada debe tener 80% o más el las puntuaciones de Performance, Progressive Web App, Accessibility y Best Practices de Lighthouse.

La aplicación debe hacer uso de npm-scripts y contar con scripts start, test, build y deploy, que se encarguen de arrancar, correr las pruebas, empaquetar y desplegar la aplicación respectivamente.

Los tests unitarios deben cubrir un mínimo del 70% de statements, functions, lines y branches.

En este proyecto podrás usar firebase u otros servicios como backend. Deberán acordar cuál será la estructura de los datos y su permanencia.

Por otro lado, la parte de la interfaz no está incluida, por lo que, deberás definir la estructura de carpetas y archivos que consideres necesaria. Puedes guiarte de las convenciones del framework elegido. Por ende, los tests y el setup necesario para ejecutarlos, serán hechos por ti.

Para comenzar este proyecto tendrás que hacer un fork y clonar este repositorio.

5. Criterios de aceptación mínimos del proyecto

Definición del productos

Considerando la investigación de UX, deberán crear las historias de usuario que respondan a las necesidades encontradas y soluciones propuestas.

Cada historia debe estar compuesta por la definición de la historia, sus Criterios de Aceptación y sus Definiciones de terminado.

Te dejamos esta Historia de Usuario que te puede servir como ejemplo o guía. Nota: tu producto no necesariamente tiene que implementar esta historia.

[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

Lo que debe ocurrir para que se satisfagan las necesidades del usuario.

  • 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

Lo acordado que debe ocurrir para decir que la historia está terminada.

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

6. Pistas, tips y lecturas complementarias

Primeros pasos

  1. Procede a configurar/instalar el framework que hayan decidido usar.

    Para el caso de React.js, Vue.js y Angular, cada uno tiene su propio proceso de instalación, y ahora también cada uno tiene una herramienta de líneas de comando (CLI) que tiene automatizada las instalación y configuración inicial de un proyecto nuevo y hará que este proceso sea más sencillo.

  2. Recuerda inicializar tu proyecto con para subirlo a GitHub

    git init

    Te recomendamos subir una versión inicial que contenga tu primer README.md y los archivos generados por el CLI de tu framework.

    Luego crea una rama a partir de master para empezar a trabajar. Por ejemplo:`

    git checkout -b develop

  3. Crear proyecto en Firebase

  4. Habilitar Firestore (comenzar en modo bloqueado) en sección de "Bases de Datos" de Firebase console.

  5. Instalar utilidad de línea de comando de Firebase:

    npm i -g firebase-tools

  6. Agregamos entorno de producción para desplegar:

    firebase use --add

  7. Desplegar: firebase deploy

  8. Llegado a este punto ya puedes comenzar con el front-end 😉

Otros recursos

Frameworks / libraries

Herramientas

PWA

Serverless

Cloud functions

7. Autoevaluación

NOTA: Esta sección incluye una lista de habilidades que se podrán tener en cuenta a la hora de evaluar el proyecto. Los niveles esperados son sugerencias así como guías en el diseño curricular, pero no reglas absolutas.

Te aconsejamos revisar nuestra rúbrica para ver la descripción detallada de cada habilidad y cada nivel. Te recomendamos también que trates de aplicarte la rúbrica a tí misma y/o a los proyectos de tus compañeras a lo largo del Bootcamp para ir viendo tu evolución.

Habilidades Blandas (Soft Skills)

Habilidad
Planificación, organización y manejo del tiempo
Autoaprendizaje
Presentaciones
Adaptabilidad
Solución de problemas
Trabajo en equipo
Responsabilidad
Dar y recibir feedback
Comunicación eficaz

Habilidades Técnicas (Front-end)

Habilidad
Computer Science (CS)
Lógica / Algoritmia
Arquitectura
Source Code Management (SCM)
Git
GitHub
JavaScript
Estilo (linter js)
Nomenclatura / semántica
Uso de funciones / modularidad
Estructuras de datos
Tests
HTML/CSS
Correctitud / Validación
Estilo (linter html)
Semántica / Arquitectura de información
DRY (CSS)
Responsive Web Design

Habilidades Técnicas (UX)

Habilidad
User Centricity
Visual Design

Checklist

General

  • Producto final sigue los lineamientos del diseño.

README.md

  • Documenta proceso de diseño.
  • Incluye info para developers (deps, instalación, uso, despliegue, testing, ...).

Lighthouse (opcional)

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

Tests

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

UX

  • Se ve bien y funciona bien en los dispositivos acordados.
  • 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.