- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Consideraciones generales
- 4. Consideraciones específicas
- 5. Consideraciones técnicas
- 6. Desarrollo del proyecto
- 7. Material utilizado
Nuestro segundo proyecto en bootcamp de Laboratoria DEV007, consiste en procesar información de un tema especifico, manipularla y entregarla a traves de una web amigable al usuario. Este proyecto se inclino hacia la data entregada sobre Studio Ghibli.
- Studio Ghibli. En este set encontrarás una lista de las animaciones y sus personajes del Studio Ghibli.
Construiremos una pagina web, donde visualizaremos un conjunto de datos que se adecuaran a las necesidades de nuestros usuarios. Para llegar a esta información realizaremos encuestas para entender que datos desean que sean entregados.
Para este proyecto se consideraron y utilizaron tres puntos importantes:
1. Historias de Usuarios: Se realizaron encuestas en instagram, un formulario de preguntas y los hallazgos entregados por Laboratoria. De esta información se decidieron principales puntos a tratar en la web:
-
Descripcion de las peliculas.
-
Donde se pueden ver las peliculas.
-
Nombre de las peliculas.
-
Nombre de los personajes.
-
Información de las animaciones (fechas estrenos, score, productor, etc.)
-
Poder filtrar y ordenar la información.
- Detalle Instagram
- Detalle Formulario
- Detalle Laboratoria
2. Trello: Es una herramienta de organización, que permitio desglosar cada una de las actividades a realizar por sprint.
3. Prototipos baja y alta fidelidad. Hubo diseño a mano del prototipo de baja fidelidad, y posterior el de alta fidelidad que fue diseñado en figma.
Se probo la web con tres personas de distintas edades, se logro llegar a la web actual considerando que fuera amigable en su uso y tambien util tanto para el que ya conoce al studio como tambien a quien no sabia de Ghibli.
El boilerplate de este proyecto no incluyen Pruebas Unitarias (tests), así es que se debieron escribir para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas.
Como minimo deben considerar dar una cobertura del 70% de statements
(sentencias), functions (funciones), lines (líneas), y branches
(ramas) del archivo src/data.js que contenga las funciones.
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.
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
| | └── rickandmorty
| | | ├── rickandmorty.js
| | | ├── rickandmorty.json
| | | └── README.md
| | └── athletes
| | | ├── athletes.js
| | | ├── athletes.json
| | | └── README.md
| | └── ghibli
| | | ├── ghibli.js
| | | ├── ghibli.json
| | | └── README.md
| ├── data.js
| ├── index.html
| ├── main.js
| └── style.css
└── test
└── data.spec.js
directory: 7 file: 20
Como en el proyecto anterior, existe un archivo index.html.
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 el 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), ....
El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos.
Este archivo debe contener 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.
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.
1. Pagina de inicio: Se considero paleta de colores de studio Ghibli con botones que sean bien distinguidos en su funcionalidad, que no aparezcan imagenes hasta que el usuario pueda elegir que quiere averiguar.
2. Botones Filtrados: Desde un inicio se considero dar la opcion de la data ya filtrada por temas considerados relevantes, como: peliculas, personajes, locaciones y vehiculos. Con sus respectivos botones de acceso.
3. Filtro Peliculas: Puedes acceder a todas las peliculas que tenemos en la data.
4. Filtro Personajes: Puedes acceder a todos los personajes que tenemos en la data.
5. Filtro Locaciones: Puedes acceder a todas las locaciones que tenemos en la data.
6. Filtro Vehiculos: Puedes acceder a todos los vehiculos que tenemos en la data.
7. Barra de busqueda: Puedes acceder a las peliculas solo escribiendo una letra y te apareceran todas las que coincidan.
8. Ordenar A-Z y Z-A: Puedes ordenar las peliculas de la A a la Z y viceversa.
9. Links en la web: Nuestra web tambien te guia hacia mas lugares donde puedes obtener información de Studio Ghibli. Tenemos links de Instagram, Facebook, Tik Tok, Pagina oficial de Ghibli, Wikipedia del Studio y link donde muestra tabla de puntajes para Score de pelilculas.
10. Filtrar por puntaje: Se realizaron encuestas en instagram, un formulario de preguntas y los hallazgos entregados por Laboratoria. De esta información se decidieron principales puntos a tratar en la web:
- 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 atómicos vs datos estructurados
- Modulos: Export
- Modulos: Import