Data Lovers

Índice

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. Evaluación
9. Pistas, tips y lecturas complementarias
10. Checklist

1. Preámbulo

Según un estudio de IBM, el 90% de la data que existe hoy ha sido creada durante los últimos dos años. Cada día generamos 2.5 trillones de bytes de datos, una cifra sin precedentes.

No obstante, los datos por sí mismos son de poca utilidad. Para que esas grandes cantidades de datos se conviertan en información fácil de leer para los usuarios, necesitamos entender y procesar estos datos. Una manera simple de hacerlo es creando interfaces y visualizaciones.

En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte izquierda se puede construir una interfaz amigable y entendible por el usuario al lado derecho.

* Puedes ver el detalle de la data en este link y la interfaz construida en este link.

2. Resumen del proyecto

En este proyecto construirás una página web para visualizar un conjunto (set) de datos que se adecúe a lo que descubras que tu usuario necesita.

Como entregable final tendrás una página web que permita visualizar la data, filtrarla, ordenarla 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).

Esta vez te proponemos una serie de datos de diferentes temáticas para que explores y decidas con qué temática te interesa trabajar. Hemos elegido específicamente estos sets de datos porque creemos que se adecúan bien a esta etapa de tu aprendizaje.

Una vez que definas tu área de interés, buscar entender quién es tu usuario y qué necesita saber o ver exactamente; luego podrás construir la interfaz que le ayude a interactuar y entender mejor esos datos.

Estos son datos que te proponemos:

Indicadores de desarrollo del Banco Mundial de algunos países (Brasil, Chile, México y Perú). Estos datos incluyen indicadores demográficos, económicos y comerciales.
Pokémon: En este set encontrarás una lista con los 151 Pokémon de la región de Kanto, junto con sus respectivas estadísticas usadas en el juego Pokémon GO.
Steam noticias: Lista noticias relacionadas a los videojuegos presentes en la plataforma de Steam.
League of Legends - Challenger leaderboard: Este set de datos muestra la lista de jugadores en una liga del juego League of Legends (LoL), puedes revisar la documentación de su API en este link.
Personas heridas por medio de transporte en EEUU. Este set nos muestra el número de personas heridas en accidentes de transporte, con data anual desde 1960 y categorizada por tipo de transporte (aire, barco, automóvil, moto, bicicleta, ...).
Rick and Morty. Este set nos proporciona la lista de los personajes de la serie Rick and Morty. Puedes revisar la documentación de su API en este link.
Pacientes en EEUU. Este set nos proporciona una lista de pacientes de EEUU. Puedes revisar la documentación de su API en este link.

Algunos sets de datos tiene una identidad gráfica que deberás utilizar en la interfaz. La identidad gráfica, también conocida como guía de estilos en diseño, de estos sets la podrás encontrar en el siguiente link.

3. Objetivos de aprendizaje

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.
Pensar en las necesidades de los usuarios para crear historias de usuario.
Escribir y trabajar con historias de usuario, sus definiciones de terminado (definition of done) y Criterios de Aceptación como herramienta central de la organización y planificación de tu trabajo.
Definir qué data y de qué forma mostrarla en el producto, basándote en tu entendimiento del usuario.
Crear productos que sigan los principios básicos de diseño visual y las heurísticas de usabilidad.
Iterar el diseño del producto, basándote en los resultados de los tests de usabilidad.
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, ...).
Entender los beneficios y complejidades de trabajar en equipo en un ambiente de incertidumbre.

4. Consideraciones generales

Este proyecto se debe resolver en duplas.
El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub Pages.
Tiempo para completarlo: Toma como referencia 3 semanas.

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

Los criterios para considerar que has completado este proyecto son:

Definición del producto

Documenta brevemente tu trabajo en el archivo README.md de tu repositorio, contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve el problema (o problemas) que tiene tu usuario.

Historias de usuario

Una vez que entiendas las necesidades de tus usuarios, escribe las Historias de Usuario que representen todo lo que el usuario necesita hacer/ver. Las Historias de Usuario deben ser el resultado de tu proceso de investigación o research de tus usuarios.

Asegúrate de incluir la definición de terminado (definition of done) y los Criterios de Aceptación para cada una.

En la medida de lo posible, termina una historia de usuario antes de pasar a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación).

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad

Durante tu trabajo deberás haber hecho e iterado sketches (bocetos) de tu solución usando papel y lápiz. Te recomendamos tomar fotos de todas las iteraciones que hagas, las subas a tu repositorio, y las menciones en tu README.md.

Prototipo de alta fidelidad

Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - User Interface). Para eso debes aprender a utilizar alguna herramienta de diseño visual. Nosotros te recomendamos Figma que es una herramienta que funciona en el navegador y, además, puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator, Photoshop, PowerPoint, Keynote, etc. Recuerda utilizar la identidad gráfica correspondiente a cada set de datos que elijas.

El diseño debe representar el ideal de tu solución. Digamos que es lo que desearías implementar si tuvieras tiempo ilimitado para hackear. Además, tu diseño debe seguir los fundamentos de visual design. También, deberás exportar tu diseño a Zeplin y utilizar las especificaciones de estilo que te dé Zeplin al momento de implementar tus diseños en código.

Testeos de usabilidad

Durante el reto deberás realizar tests de usabilidad con distintos usuarios, y en base a los resultados de esos tests, deberás iterar tus diseños. Cuéntanos qué problemas de usabilidad detectaste a través de los tests y cómo los mejoraste en tu propuesta final.

Implementación de la Interfaz de Usuario (HTML/CSS/JS)

Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. Como mencionamos, no es necesario que construyas la interfaz exactamente como la diseñaste. Tendrás un tiempo limitado para hackear, así es que deberás priorizar.

Como mínimo, tu implementación debe:

Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc.
Permitir al usuario filtrar y ordenar la data.
Calcular estadísticas de la colección (o subcolección) como media aritmética, máximo y/o mínimo de algún atributo numérico, o contar cuántas veces aparece un determinado valor, por ejemplo.
Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.

Es importante que tu interfaz, a pesar de ser una versión mínima de tu ideal, siga los fundamentos de visual design.

Pruebas unitarias

El boilerplate de este proyecto no incluye Pruebas Unitarias (tests), así es que tendrás que escribir tu propias pruebas unitarias para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas.

Tus pruebas unitarias deben dar una cobertura del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas) del archivo src/data.js que contenga tus funciones y está detallado en la sección de Consideraciones técnicas.

6. Hacker edition

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. La carpeta src/data contiene una versión .js y una .json de de cada set datos.
Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para ello te recomendamos explorar librerías de gráficas como Chart.js o Google Charts.
100% Coverage

7. Consideraciones técnicas

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o frameworks, solo vanilla JavaScript, con la excepción de librerías para hacer gráficas (charts); ver Parte opcional más arriba.

No se debe utilizar la pseudo-variable this.

El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias:

.
├── EXTRA.md
├── README.md
├── package.json
├── src
|  ├── data (según con qué data trabajes)
|  |  ├── injuries
|  |  |  ├── injuries.js
|  |  |  └── injuries.json
|  |  ├── lol
|  |  |  ├── lol.js
|  |  |  └── lol.json
|  |  ├── patient
|  |  |  ├── patient.js
|  |  |  └── patient.json
|  |  ├── pokemon
|  |  |  ├── pokemon.js
|  |  |  └── pokemon.json
|  |  ├── rickandmorty
|  |  |  ├── rickandmorty.js
|  |  |  └── rickandmorty.json
|  |  ├── steam
|  |  |  ├── steam.js
|  |  |  └── steam.json
|  |  └── worldbank
|  |     ├── worldbank.js
|  |     └── worldbank.json
|  ├── data.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.spec.js

directory: 10 file: 22

`src/index.html`

Como en el proyecto anterior, existe un archivo index.html. Como ya sabes, acá va la página que se mostrará al usuario. También nos sirve para indicar qué scripts se usarán y unir todo lo que hemos hecho.

En este archivo encontrarás una serie de etiquetas (tags) <script> comentadas. Para cargar las diferentes fuentes de datos tendrás que descomentar estas etiquetas. Cada uno estos scripts asignará una variable global con la data correspondiente a esa fuente de datos.

Por ejemplo, si "descomentamos" la siguiente línea:

<!-- <script src="./data/worldbank/worldbank.js"></script> -->

La línea quedaría así:

<script src="./data/worldbank/worldbank.js"></script>

Y ahora tendríamos la variable global WORLDBANK disponible en nuestros otros scripts (como src/data.js o src/main.js).

`src/main.js`

Recomendamos usar src/main.js para todo tu código que tenga que ver con mostrar los datos en la pantalla. Con esto nos referimos básicamente a la interacción con el DOM. Operaciones como creación de nodos, registro de manejadores de eventos (event listeners o event handlers), ....

Esta no es la única forma de dividir tu código, puedes usar más archivos y carpetas, siempre y cuando la estructura sea clara para tus compañeras.

`src/data.js`

El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos.

Te reomendamos que este archivo contenga toda la funcionalidad que corresponda a obtener, procesar y manipular datos (tus funciones):

filterData(data, condition): esta función filter o filtrar recibiría la data, y nos retornaría aquellos datos que sí cumplan con la condición.
sortData(data, sortBy, sortOrder): esta función sort u ordenar recibe tres parámetros. El primer parámetro, data, nos entrega los datos. El segundo parámetro, sortBy, nos dice con respecto a cuál de los campos de la data se quiere ordenar. El tercer parámetro, sortOrder, indica si se quiere ordenar de manera ascendente o descendente.
computeStats(data): la función compute o calcular, nos permitirá hacer cálculos estadísticos básicos para ser mostrados de acuerdo a la data proporcionada.

Estos nombres de funciones y de parámetros son solamente referenciales, lo que decidas depende de tu propia implementación.

Estas funciones deben ser puras e independientes del DOM. Estas funciones serán después usadas desde el archivo src/main.js, al cargar la página, y cada vez que el usuario interactúe (click, filtrado, ordenado, ...).

`src/data`

En esta carpeta están los datos de las diferentes fuentes. Encontrarás una carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la extensión .js y otro .json. Ambos archivos contienen la misma data; la diferencia es que el .js lo usaremos a través de una etiqueta <script>, mientras que el .json está ahí para opcionalmente cargar la data de forma asíncrona con fetch() (ver sección de Parte Opcional).

`test/data.spec.js`

Tendrás también que completar las pruebas unitarias de las funciones implementadas en el archivo data.js.

8. Evaluació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.

General

Característica/Habilidad	Nivel esperado
Completitud	4

Habilidades Blandas

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

Tech

Habilidad	Nivel esperado
Computer Science
Lógica	1
Arquitectura	2
Source Control Management
Git	2
GitHub	2
JavaScript
Estilo	2
Nomenclatura/semántica	3
Funciones/modularidad	2
Estructuras de datos	2
Tests	2
HTML
Validación	3
Estilo	3
Semántica	2
CSS
DRY	3
Responsive	2

UX

Habilidad	Nivel esperado
User Centricity (Diseño Centrado en el Usuario)	3
*Diseño Visual (Visual Design)*	2

9. Pistas, tips y lecturas complementarias

Primeros pasos

Antes de empezar a escribir código, debes definir qué deberá hacer el producto en base al conocimiento que puedas obtener de tu usuario. Estas preguntas te pueden ayudar:

¿Quiénes son los principales usuarios de producto?
¿Cuáles son los objetivos de estos usuarios en relación con el producto?
¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
¿Cuándo utilizan o utilizarían el producto?
Toda tu investigación previa debe tener como resultado todas las Historias de Usuario de tu proyecto.
No hagas los prototipos de alta fidelidad de todas tus Historias. Comienza solamente por los que se necesiten para tu Sprint 1 (semana 1 de trabajo). Más pistas en la guía de organización para el proyecto.

Cuando ya estés lista para codear, te sugerimos empezar de esta manera:

Una de las integrantes del equipo debe realizar un 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo. La otra integrante del equipo deber hacer un fork del repositorio de su compañera y configurar un remote hacia el mismo.
⬇️ Clona tu fork a tu computadora (copia local).
📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
Para ver la interfaz de tu programa en el navegador, usa el comando npm start para arrancar el servidor web y dirígete a http://localhost:5000 en tu navegador.
A codear se ha dicho! 🚀

Contenido de referencia

Diseño de experiencia de usuario (User Experience Design)

Investigación con usuarios / entrevistas
Principios de diseño visual

Desarrollo Front-end

Unidad de testing en curso de JavaScript en LMS.
Unidad de arreglos en curso de JavaScript en LMS.
Unidad de objetos en curso de JavaScript en LMS.
Unidad de funciones en curso de JavaScript en LMS.
Unidad de DOM en curso de Browser JavaScript en LMS.
Array en MDN
Array.sort en MDN
Array.map en MDN
Array.filter en MDN
Array.reduce en MDN
Array.forEach en MDN
Object.keys en MDN
Object.entries en MDN
Fetch API en MDN
json.org

Herramientas

Organización del Trabajo

Historias de Usuario. Ojo que Cris no diferencia Definición de terminado de Criterios de Aceptación y nosotros sí lo haremos. Más detalles en la guía.
Cómo dividir H.U.
Guía para Data Lovers

shirley-startary/data-lovers-rickandMorty