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 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.
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 entender y analizar data es creando visualizaciones. Las empresas líderes de hoy generan visualizaciones dinámicas de su data que les permite 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 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 está utilizando, cuánto combustible tiene disponible, qué tan caliente está el motor, cuántas revoluciones por minuto dan las ruedas, cuánta distancia has recorrido, etc.
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:
-
Google Analytics para visualizar la data de tráfico de sitios web.
-
Mailchimp para visualizar el desempeño de campañas de mercadeo digital por correo electrónico.
-
Quickbooks para visualizar la información financiera de una empresa.
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 tu propio emprendimiento ;)
El objetivo principal de aprendizaje de este proyecto es aprender a diseñar y construir una interfaz web donde podamos visualizar y manipular data.
Esperamos que en este proyecto puedas pensar en el usuario, entendiendo cuál es la mejor forma de visualizar la data según sus necesidades, y poder plasmar 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 con entrega grupal.
Para completar este proyecto 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.
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 este proyecto 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
│ ├── cohorts
│ │ └── lim-2018-03-pre-core-pw
│ │ ├── progress.json
│ │ └── users.json
│ └── cohorts.json
├── package.json
├── src
│ ├── data.js
│ ├── index.html
│ ├── main.js
│ └── style.css
└── test
├── data.spec.js
├── fixtures.js
├── headless.js
└── index.html
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í.
Los criterios mínimos de aceptación para considerar que has completado este proyecto son:
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:
- Quiénes son los principales usarios de producto.
- Cuáles son los objetivos de estos usarios en relación con el producto.
- Cuáles son los datos más relevantes que el usuario quiere ver en la interfaz y por qué. Cómo los descubriste.
- Cuándo revisa normalmente estos datos
- Cómo crees que el producto les está resolviendo sus problemas.
- Cómo fue tu proceso de diseño.
Debes realizar un Sketch (usando papel y lápiz) de tu solución, tomarle una
foto, subirla a tu repositorio y hacer mención del sketch en tu README.md.
Una vez completado el Sketch, debes diseñar tu Interfaz de Usuario (UI por sus siglas en inglés). Para esto debes aprender a utilizar alguna herramienta de diseño visual. Nosotros te recomendamos Figma dado que es una herramienta que funciona en el navegador y puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator,Photoshop, PowerPoint, Keynote, etc.
Este 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.
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 has diseñado. Tendrás un tiempo limitado para hackear, así que deberás priorizar.
Sin embargo, como mínimo, tu implementación debe:
- Permitir al usuario seleccionar un cohort de una lista de cohorts.
- Al seleccionar un cohort:
- Listar las alumnas de ese cohort
- Para cada alumna:
- Calcular porcentaje de completitud de todos los cursos.
- Calcular grado de completitud de lecturas, ejercicios autocorregidos, y quizzes.
- Ordenar alumnas por completitud general (porcentaje consumido/completado de todos los cursos del cohort en cuestión), de lecturas, ejercicios autocorregidos y quizzes.
- Filtrar/buscar alumnas por nombre.
- Visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
- Incluir pruebas unitarias.
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.
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 :
Esta función es la responsable de "crear" la lista de usuarios (estudiantes)
que vamos a "pintar" en la pantalla. La idea es "recorrer" el arreglo de
usuarios (users) y calcular los indicadores necesarios de progreso para cada
uno. La función debe devolver un nuevo arreglo de usuarios donde a cada objeto
de usuario se le debe agregar una propiedad con el nombre stats con las
estadísticas calculadas.
users: Arreglo de objetos obtenido de la data en bruto.progress: Objeto de progreso en bruto. Contiene una llave para cada usuario (uid) con un objeto que contiene el progreso del usuario para cada curso.courses: Arreglo de strings con los ids de los cursos del cohort en cuestión. Esta data se puede extraer de la propiedadcoursesIndexde los objetos que representan los cohorts.
Un arreglo de objetos usuario con la propiedad stats, la cual debe ser un
objeto con las siguientes propiedades:
percent: Número entero entre 0 y 100 que indica el porcentaje de completitud general del usuario con respecto a todos los cursos asignados a su cohort.exercises: Objeto con tres propiedades:total: Número total de ejercicios autocorregidos presentes en cursos del cohort.completed: Número de ejercicios autocorregidos completados por el usuario.percent: Porcentaje de ejercicios autocorregidos completados.
reads: Objeto con tres propiedades:total: Número total de lecturas presentes en cursos del cohort.completed: Número de lecturas completadas por el usuario.percent: Porcentaje de lecturas completadas.
quizzes: Objeto con cinco propiedades:total: Número total de quizzes presentes en cursos del cohort.completed: Número de quizzes completadas por el usuario.percent: Porcentaje de quizzes completadas.scoreSum: Suma de todas las puntuaciones (score) de los quizzes completados.scoreAvg: Promedio de puntuaciones en quizzes completados.
La función sortUsers() se encarga de ordenar la lista de usuarios creada con
computeUsersStats() en base a orderBy y orderDirection.
users: Arreglo de objetos creado concomputeUsersStats().orderBy: String que indica el criterio de ordenado. Debe permitir ordenar por nombre, porcentaje de completitud total, porcentaje de ejercicios autocorregidos completados, porcentaje de quizzes completados, puntuación promedio en quizzes completados, y porcentaje de lecturas completadas.orderDirection: La dirección en la que queremos ordenar. Posibles valores:ASCyDESC(ascendiente y descendiente).
Arreglo de usuarios ordenado.
users: Arreglo de objetos creado concomputeUsersStats().search: String de búsqueda.
Nuevo arreglo de usuarios incluyendo solo aquellos que complan la condición de
filtrado, es decir, aquellos que contengan el string search en el nombre
(name) del usuario.
Esta función es la que deberíamos estar al seleccionar un cohort y cada vez que
el usuario cambia los criterios de ordenado y filtrado en la interfaz. Esta
función debe invocar internamente a computeUsersStats(), sortUsers() y
filterUsers().
options: An object with the following keys:cohort: Objeto cohort (de la lista de cohorts)cohortData: Objeto con dos propiedades:users: Arreglo de usuarios miembros del cohort.progress: Objeto con data de progreso de cada usuario en el contexto de un cohort en particular.
orderBy: String con criterio de ordenado (versortUsers).orderDirection: String con dirección de ordenado (versortUsers).search: String de búsqueda (verfilterUsers)
Nuevo arreglo de usuarios ordenado y filtrado con la propiedad stats
añadida (ver computeUsersStats).
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 para tus compañeras.
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.
En esta carpeta están los datos de prueba del proyecto, contiene información sobre los cohortes (grupos de alumnas de una generación y rama en particular), alumnas y su progreso en cada uno de los cursos que son parte de cada cohorte. Para poder usar cada uno de los archivos 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/cohorts.json"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 :
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-browserUna página se abrirá en tu navegador conteniendo los resultados de las pruebas.
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.
Features/características extra sugeridas:
- En lugar de consumir la data estática brindada en este repositorio, puedes consumir la data del Live API de Laboratoria. Lee la documentación aquí.
- Agregarle a tu interfaz de usuario implementada visualizaciones gráficas.
- Brindar el detalle de progreso de cada alumna por curso
- Proveer estadísticas de progreso de todo el cohort
El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
interfaz será desplegada usando GitHub pages.
Recuerda revisar la rúbrica para ver la descripción detallada de cada habilidad y cada nivel. A continuación presentamos los niveles esperados de cada habilidad que deberías alcanzar al finalizar este proyecto:
| Característica/Habilidad | Nivel esperado |
|---|---|
| Completitud | 3 |
| Investigación | 3 |
| Documentación | 2 |
| 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 |
| Habilidad | Nivel esperado |
|---|---|
| User Centricity | 3 |
| Entrevistas | 2 |
| Contraste | 3 |
| Alineación | 3 |
| Jerarquía | 2 |
| Tipografía | 2 |
| Color | 2 |
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 | 2 |
| Comunicación eficaz | 2 |
| Presentaciones | 2 |
- Completar los ejericicios de manipulación de arreglos en el LMS
- Completar los ejericicios de manipulación de objetos en el LMS
- Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Code.
- Para ejecutar los comandos a continuación necesitarás una 🐚
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
gittambién). Si usas Windows puedes usar Git bash, aunque recomendaría que consideres probar 🐧 GNU/Linux. - Haz tu propio 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo privado y te darán acceso de lectura en ese repo.
- ⬇️ 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. - A codear se ha dicho! 🚀