Se construyó una aplicación web que le permitirá a los usuarios conocer sobre el mundo pokemon. La aplicación le permitirá conocer a detalle a los pokemons y conocer a aquellos que pueden usar en batallas pokemon.
- Adolescentes y jóvenes bilingues de género indistinto, que desean participar en su primera batalla pokemon. Para ello, quieren conocer a detalle sobre cada pokemon (peso, tamaño, elemento, huevo, elementos a los que presenta resistencia, elementos a los que es débil, movimientos rápidos, ataques especiales y línea evolutiva), quieren conocer los pokemons que son resistentes a más elementos y conocer a aquellos pokemons que gasten menos energía por segundo (EPS) en movimientos para que puedan ganar una batalla pokemon.
- El objetivo de la aplicación web es que los usuarios puedan visualizar todos los pokemons y sus características para así reconocer a los que mejor podrían usar para una batalla y ser un mejor jugador de Pokemon.
- Mostrar 251 pokemons en la pagina principal y que cada uno muestre tres características principales (imagen, número de pokedex, nombre y elemento)
- Mostrar información a detalle de cada pokemon
- Filtrar por liga: Kanto y Johto
- Filtrar pokemons por elemento al que pertenece
- Filtrar pokemons por elemento al que presenta resistencia
- Ordenar pokemons de mayor nivel de resistencia a menor nivel de resistencia
- Ordenar pokemons de menor nivel de resistencia a mayor nivel de resistencia
- Ordenar pokemons alfabéticamente de A-Z
- Ordenar pokemons alfabéticamente de Z-A
- Ordenar pokemons por evolución
- Calcular EPS (energía por movimiento) de cada movimiento de un pokemon
- Buscar por nombre a un pokemon
- Yo como usuario quiero recibir la bienvenida para saber de que trata la página.
- Se dará una bienvenida al usuario, informando sobre el tema de la página e invitando a ingresar.
- El usuario podrá acceder al hacer click en el botón de Inicio
- Responsive web design
- Eslint con 0 errores
- Desplegar en gh-pages
Yo como: usuario Quiero: Ver todos los pokemons Para: Tener referencia de los pokemones disponibles. (imagen y nombre)
- El usuario podrá visualizar a todos los pokemones con su respectiva imagen, nombre y número de pokedex.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones y que salgan sin error
- Yo como usuario quiero obtener información a detalle de cada pokemon al hacer click en su imagen. para conocer sobre el peso, altura, huevo, caramelo, tipo, resistencia, debilidad, movimientos y evoluciones de cada pokemón.
- El usuario visualiza la información detallada del pokemón en una interfaz superpuesta.
- El usuario puede visualizar las evoluciones del pokemón y también puede acceder a su información a detalle.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones
- Yo como usuario quiero buscar un pokemon por su nombre para Facilitar la búsqueda.
- El usuario observa en la barra de navegación al lado derecho un buscador
- El usuario escribe el nombre del pokemon que desea
- El usuario escribe el nombre del pokemonse y este se autocompleta
- El usuario obtiene al pokemon buscado
- Responsive web design
- Eslint con 0 errores
- Testear las funciones
- Yo como usuario, quiero obtener los pokemones resistentes a un determinado tipo de elemento para elegir a un pokemon para un combate.
- El usuario observa un select en la parte superior izquierda
- El usuario observa las opciones al tipo de resistencia en el select, y puede hacer click en un de ellos para obtener el de su preferencia.
- El usuario observa los pokemons del tipo seleccionado.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones y que salgan sin error
- Desplegar en gh-pages
- Yo como usuario, quiero ordenar los pokemones de los más resistentes a los menos resistentes y viceversa para poder elegir a un pokemon fuerte para un combate.
- El usuario observa un select en la parte superior derecha de los pokemons.
- El usuario encuentra en el select las opciones ordenar por mayor resistencia y ordenar por menor resistencia.
- El usuario haciendo click en una de las opciones, obtiene el resultado.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones
- Yo como usuario, quiero obtener la energía por movimiento de los pokemons para elegir a aquellos que no gasten mucha energía en una batalla.
- El usuario al hacer click en la imagen de un pokemon observa en la sección de movimientos un botón para calcular la energía por movimiento.
- El usuario al hacer click en el botón Calcular EPS obtiene lo solicitado de cada movimiento.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones
- Yo como usuario quiero filtrar pokemons por liga para diferenciar aquellos que son de liga kanto y liga johto
- El usuario observa en el navegador la opción liga y al hacer click se despliega opción kanto y johto
- El usuario al hacer click en las opciones, filtra los correspondientes a cada liga.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones
- Yo como usuario quiero ordenar alfabéticamente de la A-Z y de la Z-A a los pokemons para ubicarlos rápido si no sé cómo se escribe el nombre completo.
- El usuario observa un select en la parte superior derecha y tiene las opciones ordenar de la A-Z y de Z-A
- El usuario al hacer click en las opciones, ordena de manera que corresponda a la opción seleccionada.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones
- Yo como usuario quiero filtrar pokemons por tipo de elemento para conocer aquellos que son del elemento agua, aire, fuego, etc.
- El usuario observa en el navegador la opción tipo y al hacer click se despliega las opciones de los diferentes tipos de elementos
- El usuario al hacer click en las opciones, filtra los correspondientes a cada tipo de elemento.
- Responsive web design
- Eslint con 0 errores
- Testear las funciones
- Yo como usuario quiero ordenar pokemons por evolución para conocer su cronología evolutiva
- El usuario observa en la parte superior derecha el select "ordenar por" y encuentra la opción ordenar por evolución
- El usuario al hacer click en la opción, los pokemons se ordenan por evolución
- Responsive web design
- Eslint con 0 errores
- El texto de Bienvenida tendrá que ser un resumen preciso sobre la página, para no aburrir al usuario. Y los colores deben contrastarse unos a otros para que los elementos no se pierdan.
- Al mostrar toda la lista de pokemones, solo mostrar 2 ó 3 detalles principales, todas sus características a detalle se mostrarán en un modal al hacer click en cada pokemon.
- El usuario al hacer click en el pokemon encuentra información a detalle del pokemon por secciones. El usuario señala que se debe resaltar los títulos de cada sección.
- El usuario no tiene problema para encontrar el buscador, y le resulta amigable que al ir escribiendo una letra se vaya mostrando coincidencias. El usuario desea que al hacer click en el pokemon se muestre directamente el modal con la información detallada de este.
- El usuario encuentra redundante filtrar por resistencia desde la opción del menu navegador y del select. El usuario menciona que el filtrado en el select le parece suficiente. Luego, observa fácilmente dónde puede filtrar los pokemones por tipo de resistencia y hacer el filtrado correspondiente (agua, fuego, etc.)
- El usuario fácilmente puede ordenar por nivel de resistencia a sus pokemones y le resulta muy útil para reconocer los pokemons que resisten a más elementos.
- Al usuario no le queda claro para qué bloque de movimientos se hará el calculo de EPS. Así que, recomienda fijar el botón en un lugar donde sea entendible que al hacer el calculo se mostrara el EPS de todos los movimientos mostrados.
- El usuario realiza fácilmente la tarea de filtrar por liga a los pokemons.
- El usuario ordena alfabéticamente de A-Z y Z-A los pokemons sin ningún problema.
- El usuario logra fácilmente filtrar a los pokemons por tipo de elemento
- El usuario realiza fácilmente la tarea de ordenar los pokemons por evolución
- 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
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.
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:
-
Pokémon: En este set encontrarás una lista con los 251 Pokémon de la región de Kanto y Johto, junto con sus respectivas estadísticas usadas en el juego Pokémon GO.
-
League of Legends - Challenger leaderboard: Este set de datos muestra la lista de campeones en una liga del juego League of Legends (LoL).
-
Atletas Olímpicos. Este set nos proporciona la lista de los atletas que ganaron medallas en las olímpiadas de invierno y verano del siglo XXI.
El objetivo principal de este proyecto es que, entendiendo las necesidades de tus usuarios, aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data.
Revisa la lista y reflexiona sobre los objetivos que conseguiste en el proyecto anterior. Piensa en eso al decidir tu estrategia de trabajo individual y de equipo.
- 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.
- Entender y reconocer por qué es importante el HTML semántico.
- Identificar y entender tipos de selectores en CSS.
- Entender como funciona
flexboxen CSS. - Construir tu aplicación respetando el diseño planeado (maquetación).
- Entender y reconocer los selectores del DOM (
querySelector|querySelectorAll). - Manejar eventos del DOM. (
addEventListener) - Manipular dinámicamente el DOM. (
createElement,appendchild,innerHTML,value)
- Manipular arrays (
filter|map|sort|reduce). - Manipular objects (key | value).
- Entender el uso de condicionales (
if-else|switch). - Entender el uso de bucles (
for|forEach). - Entender la diferencia entre expression y statements.
- Utilizar funciones (
parámetros|argumentos|valor de retorno). - Entender la diferencia entre tipos de datos atómicos y estructurados.
- Utilizar ES Modules (
import|export).
- Testear funciones (funciones puras).
- Ejecutar comandos de git (
add|commit|pull|status|push). - Utilizar los repositorios de GitHub (
clone|fork|gh-pages). - Colaborar en Github (
pull requests).
- Organizar y dividir el código en módulos (Modularización).
- Utilizar identificadores descriptivos (Nomenclatura | Semántica).
- Utilizar linter para seguir buenas prácticas (ESLINT).
- 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 4 semanas.
Los criterios para considerar que has completado este proyecto son:
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.
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).
Durante tu trabajo deberás haber hecho e iterado bocetos (sketches) de tu
solución usando papel y lápiz. Te recomendamos tomar fotos de todas las
iteraciones que hagas, que las subas a tu repositorio y las menciones en tu
README.md.
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 trabajar. Además, tu diseño debe seguir los fundamentos de visual design.
Durante el reto deberás hacer tests de usabilidad con distintos usuarios, y en base a los resultados, 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.
Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. No es necesario que construyas la interfaz exactamente como la diseñaste. No tienes tiempo ilimitado para trabajar, 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 interactuar para obtener la infomación que necesita.
- Ser responsive, es decir, debe visualizarse sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
- Que la interfaz siga los fundamentos de visual design.
El boilerplate de este proyecto no incluye Pruebas Unitarias (tests), así es que tendrás que escribirlas tú para las funciones que tenga tu código.
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.
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 carpetasrc/datacontiene una versión.jsy una.jsonde 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
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)
| | ├── lol
| | | ├── lol.js
| | | ├── lol.json
| | | └── README.md
| | ├── pokemon
| | | ├── pokemon.js
| | | ├── pokemon.json
| | | └── README.md
| | └── atletas
| | ├── atletas.js
| | └── atletas.json
| | └── README.md
| ├── data.js
| ├── index.html
| ├── main.js
| └── style.css
└── test
└── data.spec.js
directory: 6 file: 17
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.
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.
En este archivo encontrarás una serie de imports comentados. Para cargar las diferentes fuentes de datos tendrás que descomentar la línea correspondiente.
Por ejemplo, si "descomentamos" la siguiente línea:
// import data from './data/pokemon/pokemon.js';La línea quedaría así:
import data from './data/pokemon/pokemon.js';Y ahora tendríamos la variable data disponible en el script src/main.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). Por ejemplo:
-
filterData(data, condition): esta funciónfiltero filtrar recibiría la data, y nos retornaría aquellos datos que sí cumplan con la condición. -
sortData(data, sortBy, sortOrder): esta funciónsortu 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óncomputeo 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, ...).
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).
Tendrás también que completar las pruebas unitarias de las funciones
implementadas en el archivo data.js.
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
remotehacia 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 startpara arrancar el servidor web y dirígete ahttp://localhost:5000en tu navegador. - A codear se ha dicho! 🚀
- Investigación con usuarios / entrevistas
- Principios de diseño visual
- 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
- expressions-vs-statements
- expresión vs sentencia
- datos atomicos vs datos estructurados
- Modulos: Export
- Modulos: Import
- 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
- 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 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 Zeplin 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.