- 1. Resumen del proyecto
- 2. Consideraciones generales
- 3. Historias de Usuario
- 4. Diseño de la Interfaz de Usuario
- 5. Pruebas unitarias
- 6. Consideraciones técnicas
- 7. Checklist
En la pagina web POKEDEX APP podras visualizar un conjunto de datos de pokemon donde se encuentran 251 Pokemones de la región de Kanto y Johto.
Tambien podras visualizar la data, filtrarla, ordenarla y hacer algún cálculo agregado.
- Este proyecto se resolvio en duplas.
- Nuestro proyecto fue entregado subiendo nuestro código a GitHub (commit/push) a nuestros respectivos repositorios Jackelin Gutierrez y Pamela Rupay
- Nuestra demo la pueden encontrar en POKEDEX APP.
- 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.
Historias de Usuario 1
- Un maestro pokemon quiere poder encontrar un pokemon por su nombre.
Criterios de Aceptación
- Se agrego un input en html donde se puede escribir el nombre del pokemon.
- Se Filtro un input para ver al pokemon al escribir su nombre
Definición de Terminado
- Se paso el test de la funcion filtrar name, para encontrar conincidencia con lo que se escribe.
Historias de Usuario 2
- Un maestro pokemon quiere poder encontrar un pokemon por su tipo.
Criterios de Aceptación
- Se agrego option en html donde se puede elegir el tipo del pokemon
- Se Filtro el option para ver al pokemon al elegir su tipo.
Definición de Terminado
- Se paso el test de la función filtrar tipo, para encontrar coincidencia con el tipo que se elige de pokemon.
Historias de Usuario 3
- Un maestro pokemon quiere poder encontrar un pokemon por su debilidad.
Criterios de Aceptación
- Se agrego option en html donde se puede elegir el tipo de debilidad del pokemon.
- Se Filtro el option para ver al pokemon al elegir su tipo de debilidad.
Definición de Terminado
- Se paso el test de la función filtrar tipo de debilidad, para encontrar coincidencia con el tipo que se elige de pokemon.
Historias de Usuario 4
- Un maestro pokemon quiere poder encontrar los pokemones en forma ascendente y descendente por su nombre, tambien de forma ascendente y descendente por su poder.
Criterios de Aceptación
- Se agrego option en html donde se puede elegir la opcion en forma asecente y decente del pokemon.
- Se Filtro el option para ordenar y ver al pokemon al elegir su opcion.
Definición de Terminado
- Se paso el test de la función filtrar ordenar, para encontrar coincidencia con la opcion que se elige de pokemon.
Historias de Usuario 5
- Un maestro pokemon quiere poder encontrar los datos del pokemon.
Criterios de Aceptación
- Se realizo un modal en html donde aparece un card con el pokemon elegido y sus datos especificos.
Definición de Terminado
- Se logra que aparezca el card al dar click al pokemon elegido con su informacion.
Nuestra pagina web POKEDEX APP:
- Muestra la data en una interfaz en card.
- Permite al usuario interactuar para obtener la infomación que necesita.
- Es responsive, es decir, se puede visualizar sin problemas desde distintos tamaños de pantallas: móviles, tablets y desktops.
Se realizo funciones encargadas de procesar, filtrar y ordenar la data, así como calcular.
Las pruebas unitarias nos dan una cobertura del 100% de statements
(sentencias), functions (funciones), lines (líneas), y branches
(ramas) del archivo src/data.js.
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
| ├── img
| ├── data (según con qué data trabajes)
| | ├── pokemon
| | | ├── pokemon.js
| | | ├── pokemon.json
| | | └── README.md
| ├── data.js
| ├── index.html
| ├── inicio.html
| ├── main.js
| └── style.css
└── test
└── data.spec.js
directory: 6 file: 17
- 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 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.