En este proyecto tendrás tu primer acercamiento a transformar data en información. El objetivo principal de este proyecto es aprender a diseñar y construir una interfaz web donde podamos visualizar y manipular data con funciones como array.map, array.filter, array.reduce y forEach.
Esperamos que puedan pensar en el usuario, entender cuál es la mejor manera de visualizar la data en la web según sus necesidades.
- Duración estimada: 1 a 2 días
- Equipos: 1 estudiante (individual).
- Tópicos:
- Métodos de arreglos (forEach, map, filter, reduce)
- Visualización de JSON en un navegador
- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Hacker edition
- 7. Consideraciones técnicas
- 8. Pistas, tips y lecturas complementarias
- 9. Checklist
En estos días es normal que cada vez usemos servicios en internet para escuchar música, uno de los servicios favoritos de música que hay es Spotify, para poder tener una cuenta Premium uno tiene que hacer un pago mensual. El precio de este pago es diferente de acuerdo al país donde vives.
Para este proyecto crearás un producto alrededor de los distintos precios que tienen las cuentas premium de Spotify alrededor del mundo.
Como entregable final tendrás una página web que permita visualizar data de los países, los precios de cuentas premium tanto en monedas locales como en dólares.
Además se te pide que realices operaciones sobre estos datos como ordenarlos, filtrarlos, y hacer algún cálculo agregado. Con cálculo agregado nos referimos a distintos cálculos que puedes hacer con la data para mostrar información aún más relevante para los usuarios (promedio, el valor máximo o mínimo, etc).
Puede encontrar los datos aquí:
- Precios de Spotify. Este set nos proporciona una lista de precios del plan premium de Spotify en todos los países del mundo.
El objetivo principal de este proyecto es que aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.
Dicho en palabras sencillas, aprenderás a:
- Aplicar y profundizar todo lo que aprendiste en el proyecto anterior.
- Definir qué data y de qué forma mostrarla en el producto, basándote en tu entendimiento del usuario.
- Manipular arreglos (arrays) y objetos (objects).
- Manipular el DOM (agregar elementos dinámicamente basados en la data).
- Manejar eventos del DOM para permitir interacción con el usuario (filtrado, ordenado, ...).
- Visualizar JSON data en el navegador
- Este proyecto se debe resolver individualmente.
- Usa la data de este archivo
- Tiempo para completar el reto: 1 a 2 días.
- El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub Pages.
- Todo el planeamiento del trabajo deberá ser documentado en un repositorio único por persona en el que se presente el planning, el research, los sketches y las inspiraciones utilizadas para definir el producto.
- Además, deberás detallar en el archivo readme.
- Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc.
- Permitir al usuario filtrar y ordenar la data por precios
- Calcular el promedio del precio que cobra Spotify por cuentas premium por continente.
- Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
- El producto deberá presentarse publicado en github pages.
Las secciones llamadas Hacker Edition son opcionales. Si terminaste con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.
Features/características extra sugeridas:
- En lugar de consumir la data estática brindada en este repositorio, puedes consumir la data de forma dinámica, cargando un archivo JSON por medio de fetch.
- Agregar a tu interfaz de usuario implementada visualizaciones gráficas como ser un mapa del mundo que muestre los precios de Spotify por país, y coloree más oscuro o más claro si el precio es más alto o más bajo. Para ello te recomendamos explorar librerías de gráficas cómo D3.js, datamaps.js, y tinycolor.js
- También puedes añadir más datos sobre los países que muestras usando la librería restcountries.eu
- El diseño visual de los componentes es de libre elección.
- Pueden usar algún framework de css si así lo deciden.
- Array en MDN
- Array.map en MDN
- Array.filter en MDN
- Array.reduce en MDN
- Array.forEach en MDN
- Fetch API en MDN
- json.org
- JavaScript — Map vs. ForEach
- NodeSchool, functional JavaScript
- Functional programming in JavaScript
- CodeWars, list of Katas: Kata
- [.map() vs .forEach() - DEV Community 👩💻👨💻] (https://dev.to/torianne02/map-vs-foreach-pd4)
- Pasa linter (
npm run pretest) - Pasa tests (
npm test) - Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
- Incluye Definición del producto clara e informativa en
README.md. - Incluye historias de usuario en
README.md. - Incluye sketch de la solución (prototipo de baja fidelidad) en
README.md. - Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)
en
README.md. - Incluye el listado de problemas que detectaste a través de tests de
usabilidad en el
README.md. - UI: Muestra lista y/o tabla con datos y/o indicadores.
- UI: Permite ordenar data por uno o más campos (asc y desc).
- UI: Permite filtrar data en base a una condición.
- UI: Es responsive.