Dataverse -Chat
Índice
2. Creación de la data mediante uso de IA
5. Problemas detectados en tests de usabilidad
Este proyecto que es la continuacion del proyecto anterior, llamado DataVerse, la cual pudimos reutilizar la data obtenida por la inteligencia artificial y poder construir una página SPA. Este proyecto esta diseñado para que el usuario pueda filtrar y ordenar sus personajes , conocer la estadistica de recompensa y tiene la posibilidad de interactuar con sus personajes preferidos.
Estamos en una etapa donde la inteligencia artificial nos permite obtener información rápida y precisa, a través de un prompting, se solicitó que se creara un objeto de 24 personajes de One Piece y que cada una tuviera un arreglo con unos valores.
One Piece, ha cautivado a innumerables fanáticos con sus personajes fascinantes y sus historias envolventes. Como equipo de desarrollo, reconocemos la pasión y el interés de nuestros usuarios por explorar a fondo a los personajes que han llegado a amar. Con el objetivo de proporcionar una experiencia más enriquecedora y satisfactoria, nos propusimos a implementar la funcionalidad de "Visualizar a detalle su personaje preferido" y asi como también permitirle la interacción con ellos a través de la IA. Para eso nos hicimos las siguientes preguntas:
-
Como usario quiero poder filtrar los personajes para conocer su origen y tripulación.
-
Como usuario quiero poder ordenar los personajes de manera ascendente y descendente.
-
Como usuario quiero poder ordenar los personajes por recompesa más baja y más alta para poder visualizarla y compararlas con otros personajes.
-
Como usuario quiero ingresar la apiKey para poder chatear con todos los personajes.
-
Como usuario quiero un botón para poder ingresar la apiKey y que este quede almacenada y me permita chatear tanto con el personaje individual como el grupal.
En este proyecto se pudo realizar el diseño de alta fidelidad a través de Figma y que pudiera ser de manera responsiva para moviles.
Imagen#1 Prototipo diseño de escritorio.
Imagen#2 Prototipo diseño de escritorio chat individual.
Imagen#3 Prototipo diseño de escritorio chat grupal.
El primer prototipo se planteó el chat individual del personaje y dentro de ella tuviera un botón que permitiera chatear con todos los personajes, la cual fue mostrada a nuestras compañeras y coaches y llegaron a la conclusión que generaba confunsión, recomendando que el chat grupal y el chat individual debia ser independiente; razón por la cual se realizó correcciones quedando asi: un botón que solicita el ApiKey, la cual es requerido para el chat con los personajes tanto individual como grupal, de no ser colocado no podra chatear con los personajes,y si el usuario intenta chatear con el personaje individual sin colocar la ApiKey, esta la redirigirirá a la ruta de ApiKey y sucederá lo mismo si el usuario selecciona el chat grupal sin colocar la ApiKey.
Prototipo revisado por el usuario
.png)
Diseño actual donde el usuario puede colocar la apiKey y pueda interactuar con los personajes de manera individual o grupal.
El objetivo de este proyecto, se requeria construir una página SPA que tuviera las mismas funcionalidades del proyecto anterior de filtar, ordenar y un boton para volver a la página principal y se le agregó que pudiera interactuar con los personajes a través de la IA. Para esto es requerido un ApiKey para que las conversaciónes con los personajes se pueda ejecutar.
El proyecto tiene esta estructura detallada y requeridas para poder tener todo segmentados y poder reutilizar los componentes para la vista de las páginas diseñadas para los personajes y la estadistica.
Incorporamos un botón llamado Api Key , que a través de un input solicita la apiKey, esto le va a permitir al usuario interactuar con cualquier personaje de manera individual o grupal. De no colocarse la apiKey no podrá comunicarse con su personaje y le arrojara un error.
Se realizó test home.spec.js, la cual se validaron los componentes que conforman el home que son: header, navegation, cards y el footer. El test de dataFuntion que permite verficar que las funciones implementadas para filtar , ordenar y mostrar la estadisica esten funcionando correctamente.
Este proyecto esta desplegado en Vercel y la puede encontrar en : https://dev-012-dataverse-chat.vercel.app/?_vercel_share=WeZ1UZLvnT2bSbP2TNmgb6ThOmj8E7nf