• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Objetivos de aprendizaje
• 4. Criterios que cumple el proyecto
• 5. Checklis
• 6. Autoras

Según Forbes, el 90% de la data que existe hoy ha sido creada durante los últimos dos años. Cada día generamos 2.5 millones de terabytes 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.

Este proyecto consta de la creción de una página web para visualizar un conjunto (set) de datos de 251 pokemones, personajes de la conocida serie y juego Pokémon GO!

Esta página web otorgará a los usuarios una interfaz de facil acceso donde puedan visualizar la data de los pokemones,filtrarla, ordenarla y conocer el top 10 de pokemones más altos y pesados; con el objetivo de dar un soporte en sus necesidades a aquellos usuarios del juego mundialmente conocido:Pokémon GO.

En la construcción de este proyecto se cumplieron ciertos requisitos para dar al usuario un producto correctamente definido entendiendo lo necesita.

• Uso de HTML semántico.
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de flexbox en CSS.

• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

• Uso de condicionales (if-else | switch | operador ternario)
• Uso de bucles (for | for..in | for..of | while)
• Uso de funciones (parámetros | argumentos | valor de retorno)
• Manipular arrays (filter | map | sort | reduce)
• Manipular objects (key | value)
• Uso ES modules (import | export)
• Diferenciar entre expression y statements.
• Diferenciar entre tipos de datos atómicos y estructurados.

• Testeo unitario.

• Organizar y dividir el código en módulos (Modularización)
• Uso de identificadores descriptivos (Nomenclatura | Semántica)
• Uso de linter (ESLINT)

• Uso de comandos de git (add | commit | pull | status | push)
• Manejo de repositorios de GitHub (clone | fork | gh-pages)
• Colaboración en Github (branches | pull requests | |tags)

• Diseñar la aplicación pensando y entendiendo al usuario.
• Crear prototipos para obtener feedback e iterar.
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
• Planear y ejecutar tests de usabilidad.

Los criterios del proyecto son:

El proyecto fue diseñado con la visión de que sea un soporte y/o una herramienta funcional para usuarios del juego digital Pokémon GO; este juego incita al usuario a atrapar la mayor cantidad y mejor calidad de pokémon para que posteriormente estos personajes se batan a duelo con los pokémon de otros usuarios; para que los usuarios puedan ganar esas batallas, necesitan conocer las características de los pokemón y elegir bien a sus personajes. Este aplicativo web ayuda a estos usuarios a obtener de manera casi instantánea y sencilla las diferentes características de cada uno de los 251 pokémon que ellos necesitan.

El proyecto cumple con las siguientes características:

• Permite acceder a la lista de los 251 pokemones en órden, mostrando el número, el nombre y la imagen del pokémon.
• Permite tener acceso a las características más específicas de cada pokémon.
• Permite ordenar numérica y alfabéticamente la información de los pokémon (asc. y descendente).
• Permite filtrar los pokémon de acuerdo a su tipo.
• Otorga información sobre los 10 pokémon más altos y más pesados.

Realizamos 3 historias de usuario:

En la primera historia de Usuario definimos como usuario a aquel jugador aficionado de Pokémon GO! :

En la segunda historia de usuario definimos al jugador junior de Pokémon GO! como usuario final, donde tendrá acceso a las características de cada pokémon:

En la tercera historia de usuario el jugador intermedio de Pokémon GO! es el usuario final, donde contará con la herramienta de filtrado por tipos y podrá ordenarlos de acuerdo a diferentes opciones:

Realizamos un boceto inicial para aterrizar la idea del proyecto:

Posteriormente desarrollamos los prototipos de alta fidelidad para cada una de las pantallas a mostrar:

En esta imagen visualizamos la pantalla de bienvenida con la lista de los 251 pokemones:

En la siguiente imagen se puede observar las caracteristicas del pokémon elegido:

Esta imagen muestra la lista desplegable que habíamos diseñado inicialmente:

Posteriormente a través de los diferentes testeos de usabilidad que se realizaron, descubrimos que era necesario que las opciones de filtrado debían ser separadas y los links importantes debian ser incluídos en un menu responsive:

Problemas que reconocimos tras los test de usabilidad:

• Cuando las opciones de filtrado permanecían juntas, hacía que el usuario no pueda visulizar a primera vista la cantidad de opciones que el aplicativo web ofrecía.
• Sin un menú responsive se hacía muy desordenado la lista de links importantes, específicamente para dispositivos móbiles.
• Falta de cuadro de búsqueda para que la información requerida por el usuario sea encontrada fácilmente.

Las pruebas unitarias para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas nos dan como resultado lo siguiente:

 PASS  test/data.spec.js (7.031 s)
  filterData
    √ is a function (13 ms)
    √ should return an array with elements (5 ms)
    √ should return an array with three elements (8 ms)
    √ should return an object with information about pokemon `water` type (6 ms)
  sortData
    √ is a function (2 ms)
    √ should be an object (3 ms)
    √ should sort alphabetically from A to Z (3 ms)
    √ should sort alphabetically from Z to A (2 ms)
    √ should sort descending from 221 to 217 (3 ms)
  greaterHeight
    √ is a function (1 ms)
    √ should return an object with 3 elements (4 ms)
    √ should return an object with the first greater height value (2 ms)
    √ should return an object sort by `size:heigth` (4 ms)
  greaterWeight
    √ is a function (1 ms)
    √ should return an array list with pokemons in order by weight  (4 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |    95.45 |     100 |     100 |                  
 data.js  |     100 |    95.45 |     100 |     100 | 26               
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       15 passed, 15 total
Snapshots:   0 total
Time:        13.156 s, estimated 15 s
Ran all test suites.

• Usa VanillaJS.
• No hace uso de this.
• 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 un plan de acción de tus objetivos de aprendizaje prioritizado en README.md (o otro archivo).
• 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 link a Figma 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.

-Paola Vitalia Taboada Alanoca.

-Dafne Corali Aquino Manyari.