En este proyecto se construyó una página web para visualizar un conjunto (set) de datos que se generó con prompting, buscando que la página web se adecue a lo que el usuario necesita. Se utilizaron herramientas de inteligencia artificial como ChatGPT, ExplainDev, entre otras para generar un conjunto de datos en un archivo javascript. Como entregable final se creó una página web que permite visualizar la data, filtrar, ordenar y calcular alguna estadística.
Como primer paso en dupla identificamos el tema que centramos nuestro proyecto, el cual fue las películas de animación japonesas.
Para poder identificar mejor nuestra navegación y la experiencia del usuario, respondimos las siguientes preguntas para identificar los principales aspectos de nuestro proyecto.
- ¿Quiénes son las principales usuarias del producto?
- ¿Cuáles son los objetivos de estas usuarias 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?
Personas que les guste las peliculas de animacion japonesa
Identificar las distintas películas que existen según diferentes categorías
(directorio)
El Título, Año, Edad recomendada para verla, Director, Género, Estudio de
animación, entre otros, ya que de esta forma podrán filtrar según sus
intereses o la información que tengan de alguna película en especial.
Como referentes tenemos a Netflix
Y Amazon Prime
Cuando quieran buscar información sobre alguna película en específico o quieran saber sobre más películas de algún género, director, año, etc. Dependiendo de sus intereses.
Quiero: Buscar información de una película.
Para: Conocer los datos de la película.
Descripción (conversación): Busca información sobre distintas películas de animación japonesa donde pueda enterarse sobre las características de ellas según sus intereses.
Deben tener el estándar de las características de las películas.
Se debe visualizar la imagen de la película.
Contar con jerarquía tipográfica.
- Que las historias de usuarios sean funcionales, es decir, que si bien no cuente con su parte gráfica completa, pero que el usuario ya pueda ejecutarlas o interactuar con el sitio web según los criterios de aceptación anteriormente indicados.
- Testeo con usuario, recopilando información de las opiniones para luego modificar aquellos parámetros que deban cambiarse y aplicar las sugerencias que indico el usuario.
- Realizar las pruebas unitarias y que salgan aprobadas en su totalidad.
Como: Persona que le gusta las peliculas de animación japonesa
Quiero: Filtrar por nombre, estudio de animación, año.
Para: Buscar una película por el nombre, estudio de animación, año.
Descripción (conversación): Busca una película con un nombre en especifico y para encontrarlo mas facil requiere de un filtro.
Se visualizan las opcion disponibles en la búsqueda por nombre
La usuaria selecciona filtros por nombre
La usuaria puede quitar la selección de filtro elegida anteriormente
Las películas se organizan en el orden definido de inicio deshaciendo la selección de filtrado
Se visualizan las opcion disponibles en la búsqueda por año
La usuaria selecciona filtros por año
Se visualizan las opcion disponibles en la búsqueda por estudio de animación
La usuaria selecciona filtros por estudio de animación
- Que las historias de usuarios estén funcionales, es decir, que si bien no cuente con su parte gráfica completa, pero que el usuario ya pueda ejecutarlas o interactuar con el sitio web según los criterios de aceptación anteriormente indicados.
- Testeo con usuario, recopilando información de las opiniones para luego modificar aquellos parámetros que deban cambiarse y se aplican las sugerencias que indico el usuario.
- Que se realicen las pruebas unitarias y que salgan aprobadas en su totalidad.
Como: Persona que le gusta las peliculas de animación japonesa
Quiero: Agregar la opcion de poner ascendente y descente a un filtro seleccionado
Para: Visualizar el contenido según el orden necesitado.
Descripción (conversación): El usuario selecciona un orden en ascendente y descendente según sus criterios o sus necesidades para la búsqueda de las películas. Se visualizan las películas por la selección de ascendente o descendente dependiendo de la elección de la usuaria
La usuario puede seleccionar el filtro por ascendente y descendente
La usuaria puede quitar la selección de filtro elegida anteriormente
- Que las historias de usuarios estén funcionales, es decir, que si bien no cuente con su parte gráfica completa, pero que el usuario ya pueda ejecutarlas o interactuar con el sitio web según los criterios de aceptación anteriormente indicados.
- Testeo con usuario, recopilando información de las opiniones para luego modificar aquellos parámetros que deban cambiarse y se aplican las sugerencias que indico el usuario.
- Que se realicen las pruebas unitarias y que salgan aprobadas en su totalidad.
Como: Persona que le gusta las peliculas de animacion japonesa
Quiero: Filtrar por género.
Para: Buscar una película por un género en específico.
Descripción (conversación): Busca una película con un genero en especifico haciendo uso de un filtro de búsqueda
Se visualizan las opcion disponibles en la busqueda por genero
La usuaria selecciona filtros por género elegido
La usuaria puede quitar la selección de filtro elegida anteriormente
Las películas se organizan en el orden definido de inicio deshaciendo la selección de filtrado
- Que las historias de usuarios estén funcionales, es decir, que si bien no cuente con su parte gráfica completa, pero que el usuario ya pueda ejecutarlas o interactuar con el sitio web según los criterios de aceptación anteriormente indicados.
- Testeo con usuario, recopilando información de las opiniones para luego modificar aquellos parámetros que deban cambiarse y se aplican las sugerencias que indico el usuario.
- Que se realicen las pruebas unitarias y que salgan aprobadas en su totalidad.
Como: Persona que le gusta las peliculas de animación japonesa
Quiero: Sentirme cómodo en el sitio web / Consultar un sitio web que cuente con jerarquía visual
Para: Visualizar el contenido y que sea de fácil acceso a las funciones
Descripción (conversación): La usuaria ingresa al sitio web y debe ser entendible tan pronto ingresa, para que así pueda navegar en él sin impedimentos.
Es intuitiva
Cuenta con jerarquía visual
La paleta de colores es agradable a la vista
Cuenta con botones de cambio de estado
La letra es legible.
Es responsive
- Testeo con usuario, recopilando información de las opiniones para luego modificar aquellos parámetros que deban cambiarse y se aplican las sugerencias que indico el usuario.
- Que se realicen las pruebas unitarias y que salgan aprobadas en su totalidad.
Preguntas generadas a la IA:
Se hicieron una serie de consultas a IA para conseguir la data que se ocupo en el proyecto, adaptandolo al formato del dataset.js.
Un ejemplo fue:"Tienes la informacion de las mejores peliculas de animacion japonesa en los años de 90s , podrías darme una lista de las 24 mejores peliculas de animacion japonesa de ese año? <br>
Podrías darme esta información organizada de la siguiente manera:
export default [
{
"id": "ada-lovelace",
"name": "Ada Lovelace",
"shortDescription": "Pionera de la informática, fue la primera programadora.",
"description": "Una visionaria del siglo XIX ...",
"imageUrl": "URL_DE_LA_IMAGEN_GENERADA",
"facts": {
"yearOfBirth": 1843,
"placeOfBirth": "London, England",
"mainField": "Computer Science",
}
},]"
Listado de peliculas generado por la IA (usando ChatGPT y Bard)
Se hicieron prototipos acorde a las historias de usuarios identificadas con anterioridad, de esto se crearon un wireframe (prototipo en baja) y un mockup (prototipo en alta), donde pudimos identificar las diferentes caracteristicas graficas de nuestro proyecto.
Wireframe
Mockup trabajado en figma
La lógica del proyecto esta implementada completamente en JavaScript (ES6), HTML y CSS. En este proyecto se utilizo solo vanilla JavaScript.
El _boilerplate_ contiene una estructura de archivos así como toda la configuración de dependencias:
.
├── README.md
├── package.json
├── src
| ├── data
| | └── dataset.js (La que hayas generado con la IA)
| ├── dataFunctions.js
| ├── view.js
| ├── index.html
| ├── main.js
| └── style.css
└── test
└── data.js
└── dataFunctions.spec.js
└── tests-read-only
El corazón de este proyecto es la manipulación de datos a través de arreglos y objetos.
El proyecto tiene funcionalidades que corresponda a obtener, procesar y manipular datos (funciones). Por ejemplo:
* `filterData(data, filterBy, value)`: esta función recibe tres parámetros. El primer parámetro, `data`, nos entrega los datos. El segundo parámetro, `filterBy`, nos dice con respecto a cuál de los campos de la data se quiere filtrar. El tercer parámetro, `value`, indica el valor de campo que queremos filtrar.
* `sortData(data, sortBy, sortOrder)`: esta función `sort` u 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ón `compute` o calcular, nos permite hacer cálculos estadísticos básicos para ser mostrados de acuerdo a la data proporcionada, esta función debe usar el método reduce.
Tambien el proyecto implementa manipulaciones del DOM a traves de archivos javascript, junto con la visualizacion de la data, proveniente del archivo dataset.js., filtros acumulativos entre unos a otros, un boton con la opcion de limpiar los filtros implementados, un buscador por nombre de las peliculas y utilizacion de las propiedades flexbox en el archivo css junto con una vision reponsiva del sitio para dispositivos moviles.
En este proyecto se crearon una serie de test unitarios de las funciones implementadas en el archivo dataFunctions.js. (filterBy, sortBy, etc.)
Finalmente, el proyecto se llevó a cabo en 5 sprints, cada uno con una duración de una semana. Durante este proceso, se realizaron algunas modificaciones, pero se mantuvo la esencia original del proyecto.
La funcionalidad principal consiste en filtrar las películas de animación japonesa según el género, estudio y año de lanzamiento. Además, se ofrece la opción de ordenarlas de manera ascendente o descendente, así como la posibilidad de buscarlas directamente por su nombre en el buscador proporcionado. El botón "limpiar", como su nombre lo indica, permite limpiar los filtros implementados. Adicional a esto, cuenta con una estadística que evalúa el estudio con mayor número de películas y el género que más destaca, así como un contador que muestra en tiempo real las películas exhibidas según los diferentes filtros implementados. De esta manera, se obtiene un sitio de fácil manipulación y comprensión para el usuario.
