- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones
- 5. Criterios de aceptación del proyecto
- 6. Despliegue
- 7. Pistas / tips
React y Angular 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 caracterí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.
Un pequeño restaurante de hamburguesas, que está creciendo, necesita un sistema a través del cual puedan tomar pedidos usando una tablet, y enviarlos a la cocina para que se preparen ordenada y eficientemente.
Este proyecto tiene dos áreas: interfaz (cliente) y API (servidor). Nuestra clienta nos ha solicitado desarrollar la interfaz que se integre con una API.
Esta vez tenemos un proyecto 100% por encargo. Si bien siempre puedes (y debes) hacer sugerencias de mejoras y/o cambios, muchas veces trabajarás en proyectos en los que primero hay que asegurarse de cumplir con lo requerido.
Esta es la información que tenemos de la clienta:
Somos Burguer Queen, una cadena de comida 24hrs.
Nuestra propuesta de servicio 24hrs ha tenido muy buena acogida y, para seguir creciendo, necesitamos un sistema que nos ayude a tomar los pedidos de nuestrxs clientxs.
Tenemos 2 menús: uno muy sencillo para el desayuno:
Ítem Precio $ Café americano 5 Café con leche 7 Sandwich de jamón y queso 10 Jugo de frutas natural 7 Y otro menú para el resto del día:
Ítem Precio Hamburguesas $ Hamburguesa simple 10 Hamburguesa doble 15 Acompañamientos $ Papas fritas 5 Aros de cebolla 5 Para tomar $ Agua 500ml 5 Agua 750ml 7 Bebida/gaseosa 500ml 7 Bebida/gaseosa 750ml 10 Nuestrxs clientxs son bastante indecisos, por lo que es muy común que cambien el pedido varias veces antes de finalizarlo.
La interfaz debe mostrar los dos menús (desayuno y resto del día), cada uno con todos sus productos. La usuaria debe poder ir eligiendo qué productos agregar y la interfaz debe ir mostrando el resumen del pedido con el costo total.
Además la clienta nos ha dado un link a la documentación que especifica el comportamiento esperado de la API HTTP que deberás consumir. Ahí puedes encontrar todos los detalles de los endpoints, como por ejemplo qué parámetros esperan, qué deben responder, etc.
El objetivo principal de es aprender a construir una interfaz web usando el framework elegido (React, Angular o Vue). Todos estos frameworks de Front-end tratan de solucionar 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 como 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).
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
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
-
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)
-
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)
-
Consulta o petición (request) y respuesta (response).
-
Cabeceras (headers)
-
Cuerpo (body)
-
Verbos HTTP
-
Códigos de status de HTTP
-
Encodings y JSON
-
CORS (Cross-Origin Resource Sharing)
-
Components & templates
-
Directivas estructurales (ngIf / ngFor)
-
@Input | @Output
-
Creación y uso de servicios
-
Manejo de rutas
-
Creación y uso de Observables.
-
Uso de HttpClient
-
Estilos de componentes (ngStyle / ngClass)
-
JSX
-
Componentes y propiedades (props)
-
Manejo de eventos
-
Listas y keys
-
Renderizado condicional
-
Elevación de estado
-
Hooks
-
CSS modules
-
React Router
-
Instancia de Vue.js
-
Datos y métodos
-
Uso y creación de componentes
-
Props
-
Directivas (v-bind | v-model)
-
Iteración (v-for)
-
Eventos (v-on)
-
Propiedades Computadas y Observadores
-
Routing
-
Clases y Estilos
-
Chequeo estático de tipos
-
Rigurosidad
-
Tipos primitivos
-
Arreglos
-
Tipo
any
-
Funciones
-
Propiedades opcionales
-
Tipos Union
-
Alias de tipos
-
Interfaces
-
Type assertions
-
Tipos literales
-
basic-types/null-and-undefined
-
Enums
-
Narrowing
-
classes/members/fields
-
classes/members/constructor
-
classes/members/methods
-
classes/members/getter-setters
-
classes/class-heritage/implements
-
classes/class-heritage/extends
-
classes/member-visibility/public
-
classes/member-visibility/protected
-
classes/member-visibility/private
-
Miembros de clase estáticos
-
this
-
Clases abstractas
-
Decoradores
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
-
Crear prototipos de alta fidelidad que incluyan interacciones
-
Seguir los principios básicos de diseño visual
-
Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
Este proyecto se debe "resolver" en duplas y para trabajar con el backend te sugerimos elegir un método entre las siguientes opciones:
-
Usando una mock API. Puedes crear tu propia mock API con las herramientas json-server y json-server-auth o puedes hacer fork y clonar este repo de una mock API que hemos desarrollado. Esta mock API debería comportarse de la manera definida en la documentación.
-
Consumiendo una API desplegada. Puedes usar una que desarrollarán tus compañeras en su proyecto Burger Queen API, o pueden desplegar tu mock API. Aquí hay un ejemplo como desplegar tu mock con Vercel.
Puedes empezar usando una mock API y en cualquier momento del proyecto pasarte a la API desplegada. Esta situación suele ocurrir en Desarrollo Web cuando se necesita avanzar con la implementación del frontend mientras las personas encargadas del backend aún están en proceso de diseño o desarrollo de la API.
El rango de tiempo estimado para completar el proyecto es de 3 a 5 Sprints.
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.
Uno de los mayores objetivos de este proyecto es aprender a usar una librería o framework popular para desarrollar una web app. Debes elegir entre React o Angular.
Ten en cuenta que si eliges Angular, tienes la obligación de usar TypeScript. Typescript es un lenguaje de programación fuertemente tipado basado en javascript.
Si eliges React, la decisión de usar Typescript es opcional (pero te lo recomendamos!). Aquí puedes encontrar más información en relación a cómo iniciar tu proyecto con Typescript y React.
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 mobile-first.
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 90% de statements, functions, lines y branches.
Por otro lado, 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.
El Product Owner nos presenta este backlog que es el resultado de su trabajo con el clientx hasta hoy.
[Historia de usuario 1] Mesero/a debe poder ingresar al sistema, si el admin ya le ha asignado credenciales
Yo como meserx quiero poder ingresar al sistema de pedidos.
Lo que debe ocurrir para que se satisfagan las necesidades del usuario.
- Acceder a una pantalla de login.
- Ingresar email y contraseña.
- Recibir mensajes de error comprensibles, dependiendo de cuál es el error con la información ingresada.
- Ingresar al sistema de pedidos si las crendenciales son correctas.
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).
Yo como meserx quiero tomar el pedido de unx clientx 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.
Lo que debe ocurrir para que se satisfagan las necesidades del usuario
- Anotar nombre de clientx.
- 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
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).
Yo como jefx de cocina quiero ver los pedidos de lxs clientxs 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 clientx.
- 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.
- 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).
Yo como meserx quiero ver los pedidos que están preparados para entregarlos rápidamente a lxs clientxs que las hicieron.
- Ver listado de pedido listos para servir.
- Marcar pedidos que han sido entregados.
- 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.
Yo como administrador(a) de tienda quiero gestionar a los usuarios de la plataforma para mantener actualizado la informacion de mis trabajadorxs.
- Ver listado de trabajadorxs.
- Agregar trabajadorxs.
- Eliminar trabajadoxs.
- Actualizar datos de trabajadorxs.
- 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).
Yo como administrador(a) de tienda quiero gestionar los productos para mantener actualizado el menú.
- Ver listado de productos.
- Agregar productos.
- Eliminar productos.
- Actualizar datos de productos.
- 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).
Puedes elegir el proveedor (o proveedores) que prefieras junto con el mecanismo de despligue y estrategia de alojamiento. Recuerda que si mockeaste la API, también tienes que desplegarla. Te recomendamos explorar las siguientes opciones:
- Vercel es una plataforma de despliegue que nos permite desplegar nuestra aplicación web estática (HTML, CSS y JavaScript) y también nos permite desplegar aplicaciones web que se ejecutan en el servidor (Node.js).
- Netlify al igual que Vercel, es una plataforma de despliegue que nos permite desplegar nuestra aplicación web estática (HTML, CSS y JavaScript) y también nos permite desplegar aplicaciones web que se ejecutan en el servidor (Node.js).
Súmate al canal de Slack #project-bq-api-client para conversar y pedir ayuda del proyecto.