search

Vicky2813 / cdmx-2018-06-bc-core-am-data-dashboard

https://Vicky2813.github.io/cdmx-2018-06-bc-core-am-data-dashboard/src/
0 stars 1 forks source link

readme

Data Dashboard

Preámbulo

En Laboratoria, las Training Managers (TMs) hacen un gran trabajo al analizar la mayor cantidad de datos posibles respecto al progreso de las estudiantes para apoyarlas en su aprendizaje.

La principal medida de progreso de una estudiante en Laboratoria es su avance completando los proyectos de la Ruta de Aprendizaje y su desempeño en función a la Rúbrica de Niveles Esperados. Sin embargo, para completar estos proyectos las estudiantes acceden a contenidos de aprendizaje (lecturas, videos, ejercicios y quizzes) en un sistema que llamamos LMS (Learning Management System). El LMS acumula data sobre quién leyó qué, qué ejercicios se han completado, los resultados de los quizzes, etc.

A pesar de que la data de progreso del LMS (ej. lecturas leídas, ejercicios completados, nota en quizzes, etc.) no impacta directamente en la evaluación de una estudiante, sí es una pieza de información relevante que las TMs quisieran visualizar para tener un mejor entendimiento de cómo va cada estudiante en su proceso de aprendizaje.

Así, el reto de este proyecto es crear una interfaz donde las TMs puedan ver y usar la data de progreso del LMS. Para ello, proponemos crear un data dashboard (tablero de visualización de datos).

Introducción

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

Sin embargo, los datos por sí solos son de poca utilidad. Para transformar datos en información necesitamos procesarlos y entenderlos. Una manera muy sencilla de hacerlo es creando visualizaciones. Las empresas líderes de hoy generan visualizaciones dinámicas de su data que les permiten entender mejor su negocio y tomar decisiones apropiadas.

En este proyecto tendrás tu primer acercamiento a transformar data en información creando tu primer data dashboard.

Si pensamos en un dashboard podemos pensar en el tablero de control de un auto o el de un avión. Un espacio desde el cual un usuario puede tener acceso a la información y controles más relevantes, en este caso, del vehículo que está utilizando. El dashboard de un auto le permite a quien conduce saber a qué velocidad está yendo, qué cambio/velocidad está utilizando, cuánto combustible tiene disponible, cuál es la temperatura del motor, cuántas revoluciones por minuto dan las ruedas, cuánta distancia ha recorrido, etc.

car dashboard

Aplicaciones en el mundo real

En el mundo de la web es muy común el uso de dashboards. De hecho, wikipedia nos dice que un dashboard puede ser un resumen gráfico de varias piezas de información importante, generalmente utilizadas para dar una visión general de una empresa o de un servicio. Así, tenemos dashboards como los de:

Seguramente, a lo largo de tu carrera como diseñadora o desarrolladora, te tocará crear un data dashboard. Quizás sea para visualizar la data de un negocio de delivery de comida, o las rutas históricas de un negocio de transporte, o simplemente los indicadores clave de tu propio emprendimiento ;)

Objetivos

Diseñar y construir una interfaz web donde se pueda visualizar y manipular data, que sea fácil de manipular, amigable al usuario, además de que se pueda utilizar en distintos dispositivos: moviles, tablets y desktops.

Proto Persona

Nombre: Lucile Genero: Femenino Puesto: Training Managers (TMs) Sede: Mexico (CDMX)

Definición del producto

Para conocer un poco más en cuanto a las nececidades del producto, se realizo una entrevista (https://www.youtube.com/watch?v=ihvJ8wsalj4&index=14&list=WL&t=0s) a nuestro usuario principal, en donde observamos que como primer objetivo tiene la consulta de la data, por ello es relevante que la información que se muestre primero sea la de cada sede, se pueda percibir a simple vista y sea facil de entender, además de que la interacción con dicha información se realiza diariamente y en distintos dispositivos. La creación de esta interfaz pretende resolver la consulta de la información, ya que las herramientas que utilizan (excel) en este momento son un tanto deficientes en cuanto a la manipulación de la data. Una vez que se definieron las nececidades de nuestro producto comenzamos con un diagrama de flujo, donde se plasmaron las principales tareas a realizar para el funcionamiento del producto solicitado, como se muestra a continuación:

Diagrama de Flujo

Como siguiente paso se realizo un sketch a lapiz y papel donde se plasma a grandes rasgos la interfaz con los elementos que ayudaran con la interacción de la misma, el cuál se mostro a nuestro cliente para su aprovación.

sketch1 Ilustración 1. Vista principal de la interfaz

sketch1 Ilustración 2. Vista de los menús para la selección de sedes y generaciones

Una vez hechos los cambios pertinentes se paso a diseñar la interfaz con ayuda de una herramienta de diseño visual (Figma), como se puede apreciar a continuación:

Image Figma

Se realiazó un tercer sketch para definir como se mostrara el porcentaje general de completitud de c/estudiante, con su respectivo nombre, correo y duración del programa.

sketch3

Luego de haber realizado el sketch 3 se procedió a realizar en Figma el diseño que se mostrará a continuación:

Image Figma2

A continuación se muestra el sketch final a lapiz y papel de la interfaz que se mostrara para dispositivos como tablets y desktops:

sketch-final

A continuación se muestra el sketch final a lapiz y papel de la interfaz que se mostrara para dispositivos moviles:

sketch-final

Luego de haber realizado los respectivos sketching finales a lapiz y papel se procedió a realizar en Figma el diseño final de la interfaz que se mostrará a continuación:

Image Figma-final

Image Figma-final2

Objetivos de aprendizaje

El objetivo principal de este proyecto es que aprendas a diseñar y construir una interfaz web donde podamos visualizar y manipular data.

Esperamos que puedas pensar en el usuario, entender cuál es la mejor manera de visualizar la data según sus necesidades, y plasmar todo eso en tu diseño en la web.

Además, este proyecto se debe "resolver" en parejas, por lo que un objetivo importante es ganar experiencia en trabajos colaborativos con entrega grupal.

Tópicos a cubrir

Tendrás que familiarizarte con conceptos como: arrays,objects, dom, xhr y visual design.

Además, reforzarás lo aprendido en el proyecto anterior: valores, tipos, variables, control de flujo y tests unitarios.

Consideraciones generales

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.

No se debe utilizar la pseudo-variable this.

Los tests unitarios deben cubrir un mínimo del 70% de statements, functions y lines, y un mínimo del 50% de branches. El boilerplate ya contiene el setup y configuración necesaria para ejecutar los tests (pruebas) usando el comando npm test.

Para comenzar tendrás que hacer un fork y clonar este repositorio que contiene el boilerplate.

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

./
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── data
│   └── laboratoria.json
├── package.json
├── src
│   ├── data.js
│   ├── index.html
│   ├── main.js
│   └── style.css
└── test
|   ├── data.spec.js
|   ├── fixtures.js
|   ├── headless.js
|   └── index.html
└── ux
    └── README.md

La carpeta data/ dentro del boilerplate incluye un extracto de la data que podemos usar tanto en los tests como en la interfaz en sí. Todos los datos usados son ficticios, y su uso no afecta ni perjudica a ninguna persona o individuo moral. Además que en este proyecto encontrarás toda la data en español, esto pensando en que puedas entender y familiarizarte más rápido con esta. Antes de poder visualizar o manipular la data es necesario poder leerla, entenderla y así hacer la mejor interpretación posible de la misma. En los siguientes proyectos estarás enfrentándote a data en inglés y será parte de tus tareas generar estrategias para encontrar el mejor acercamiento y entendimiento del problema.

La carpeta de ux/, incluye un README donde vas a encontrar una guía de qué hacer. Te pedimos que ahí mismo documentes ese proceso que realizaste.

Entregables

Los criterios mínimos de aceptación para considerar que has completado este proyecto son:

User Experience Design

1) Definición del producto

En el README.md cuéntanos cómo pensaste y te acercaste a los usuarios al desarrollar tu producto (Tip: entrevistas) y cuál fue tu proceso para definir el producto final a nivel de experiencia y de interfaz. Es importante que detalles:

2) Sketch de la solución (prototipo de baja fidelidad)

Debes hacer un sketch (boceto) de tu solución usando papel y lápiz, tomarle una foto, subirla a tu repositorio y hacer mención del sketch en tu README.md.

3) Diseño de la Interfaz de Usuario (prototipo de alta fidelidad)

Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés). 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.

El diseño debe representar tu ideal de solución. Digamos que es lo que desearías implementar si tuvieras tiempo ilimitado para hackear.

Tu diseño debe seguir los fundamentos de visual design, como: contraste, alineación, jerarquía, entre otros. Tip: revisa el contenido de UX de la unidad de visual design.

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 tal como la diseñaste. Tendrás un tiempo limitado para hackear, así es que deberás priorizar.

La interfaz debe permitir al usuario:

Es importante que tu interfaz, a pesar de ser una versión mínima de tu ideal, igual debe seguir los fundamentos de visual design, como: contraste, alineación, jerarquía, entre otros.

Detalles de Implementación

data.js El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos. La idea de este archivo es contener toda la funcionalidad que corresponda a obtener, procesar y manipular datos.

Parte de un buen proyecto es que esté ordenado y que otras programadoras puedan acceder a el código rápidamente. Es por esto que este orden no es casualidad y es una convención que generalmente encontrarás en internet bajo el nombre MVC o Modelo Vista Controlador. En este proyecto Controlador y Modelo estarán bajo el archivo data.js.

El boilerplate incluye tests que esperan que implementes las siguientes 4 funciones y las exportes al entorno global (window) dentro del script src/data.js, ten en cuenta que esto es solo lo básico, si necesitas más funciones puedes hacerlo:

1) computeStudentsStats(laboratoria)

Esta función es la responsable de "crear" la lista de estudiantes que vamos a "pintar" en la pantalla. La idea es "recorrer" el arreglo de estudiantes que se encuentra dentro de laboratoria.json.

La función debe devolver un nuevo arreglo de estudiantes donde cada objeto de estudiante deberá tener una propiedad con el nombre stats y dentro, sólo los datos requeridos.

Argumentos
Valor de retorno

Un arreglo de objetos student con las siguientes propiedades:

2) computeGenerationsStats(laboratoria)

Esta función es la responsable de "crear" los status de cada generación que vamos a "pintar" en la pantalla. La idea es "recorrer" el objeto que se encuentra dentro de la "data".

La función debe devolver un nuevo arreglo de generaciones donde cada objeto generation deberá tener una propiedad con el nombre average y dentro el promedio de completedPercentage de todas las estudiantes de la generación.

Argumentos
Valor de retorno

Un arreglo de objetos generation con las siguientes propiedades:

3) sortStudents(students, orderBy, orderDirection)

La función sortStudents() se encarga de ordenar la lista de estudiantes creada con computeStudentsStats() en base a orderBy y orderDirection.

Argumentos
Valor de retorno

Arreglo de estudiantes ordenado.

4) filterStudents(students, search)

Argumentos
Valor de retorno

Nuevo arreglo de usuarios incluyendo solo aquellos que cumplan la condición de filtrado, es decir, aquellos que contengan el string busqueda en el nombre (name) de las estudiantes.

main.js

Ten en cuenta también que existe otro archivo main.js que no está solo por casualidad en la estructura del proyecto. En general es una buena idea ir separando la funcionalidad en varios archivos, ya que a medida que un proyecto crece, se vuelve insostenible dejar todo en un solo archivo. En este caso puedes usar main.js para todo tu código que tenga que ver con mostrar los datos en la pantalla, y data.js para todas las funciones que vimos que obtienen y manipulan los datos.

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.

index.html

Al igual que en el proyecto anterior, también existe un archivo index.html. Como ya sabrás, acá va la página que se mostrará al usuario de este tablero de información. También nos sirve para indicar qué scripts se usarán y unir todo lo que hemos hecho.

Data

En esta carpeta están los datos de prueba del proyecto, contiene información sobre las sedes, las generaciones que han pasado por cada sede, las estudiantes que han pasado por cada generación y su progreso en cada uno de los temas y subtemas que han visto. Para poder usar el archivo JSON, puedes ocupar el mismo método que usarías si es que estuvieses haciendo una llamada HTTP o a una API, pero usando una dirección relativa, ejemplo:

"../data/users.json"

UX

En esta carpeta vas a encontrar una guía para realizar el proceso de diseño de tu data dashboard, donde se explican las diferentes fases a seguir de manera muy breve, así como los pasos a desarrollar dentro de cada fase. También se deja espacios para que completes este README con tu información, pero si deseas agregar más cosas, siéntete en la libertad. Recuerda que este es un proceso creativo que responde a la data recopilada.

Tests

Tendrás también que completar las pruebas unitarias de estas funciones que se incluyen en el boilerplate, que encontrarás en el archivo data.spec.js. Si te fijas bien en la carpeta también encontrarás otros archivos, que detallaremos a continuación:

index.html

No confundas este archivo con tu index.html del proyecto, este archivo es especial para los test y es una manera de ver el resultado de tus pruebas unitarias, pero en el navegador. Para arrancar las pruebas de esta forma, escribe en tu consola:

npm run test-browser

Una página se abrirá en tu navegador conteniendo los resultados de las pruebas.

fixtures.js

Muy importante archivo, aunque no siempre estará (depende del proyecto). Acá es donde está el set de datos de prueba que se usarán para correr las pruebas.

Hacker edition

Features/características extra sugeridas:

Entrega

En este proyecto deberás trabajar colaborativamente. Para ello, una de las integrantes del equipo deberá forkear el repositorio del cohort y la otra integrante deberá hacer un fork del repositorio de su compañera. Luego de esto, deberás configurar un remote hacia el repositorio del cual hiciste el fork.

Para mandar cambios desde un repositorio forkeado al original debes crear un pull request y el propietario del repositorio original recibirá una notificación para revisar el pull request y aceptar los cambios.

Aquí algunas recomendaciones para que organices mejor el trabajo con tu compañera:

¿Quieres saber más forks y pull requests?

Evaluación

Recuerda revisar la rúbrica para ver la descripción detallada de cada habilidad y cada nivel. A continuación presentamos los niveles esperados para cada habilidad:

General

Característica/Habilidad Nivel esperado
Completitud 3
Investigación 3
Documentación 2

Tech

Habilidad Nivel esperado
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
SEO 0
CSS
DRY 2
Responsive 2
SCM
Git 3
GitHub 2
CS
Lógica 1
Arquitectura 2
Patrones/paradigmas 0

UX

Habilidad Nivel esperado
User Centricity 3
Entrevistas 2
Contraste 3
Alineación 3
Jerarquía 2
Tipografía 2
Color 2

Habilidades Blandas

Esperamos que alcances al menos el nivel 2 en todas tus habilidades blandas.

Habilidad Nivel esperado
Planificación y organización 2
Autoaprendizaje 2
Solución de problemas 2
Dar y recibir feedback 2
Adaptabilidad 2
Trabajo en equipo (trabajo colaborativo y responsabilidad) 2
Comunicación eficaz 2
Presentaciones 2

Puntos de experiencia

Primeros pasos

  1. Antes que nada, asegúrate de tener un :pencil: editor de texto en condiciones, algo como Atom o Code.
  2. Para ejecutar los comandos a continuación necesitarás una :shell: UNIX Shell, que es un programita que interpreta líneas de comando (command-line interpreter) así como tener git instalado. Si usas un sistema operativo "UNIX-like", como GNU/Linux o MacOS, ya tienes una shell (terminal) instalada por defecto (y probablemente git también). Si usas Windows puedes usar Git bash, aunque recomendaría que consideres probar :penguin: GNU/Linux.
  3. Una de las integrantes del equipo debe realizar un :fork_and_knife: fork del repo de tu cohort, tus coaches te compartirán un link a un repo. La otra integrante del equipo deber hacer un fork del repositorio de su compañera y configurar un remote hacia el mismo.
  4. :arrow_down: Clona tu fork a tu computadora (copia local).
  5. 📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
  6. Si todo ha ido bien, deberías poder ejecutar las :traffic_light: pruebas unitarias (unit tests) con el comando npm test.
  7. A codear se ha dicho! :rocket:

Herramientas

Para facilitar la lectura del JSON te recomendamos instalar algún plugin en tu navegador o visitar un JSON parser online:

Tips / Pistas