El mundo del anime no deja de expandirse y evolucionar, capturando la imaginación de personas de todas las edades, etnias y culturas, siendo una experiencia que ha ido trasciendiendo generaciones. Nuestra aplicación está diseñada para conectar a los aficionados del anime, ofreciendo una plataforma dinámica y accesible para explorar, descubrir y enriquecerse con este gran universo.
HunterxVersexChat es una SPA intuitiva, informativa e interactiva, que permite a usuarios objetivos acceder rápidamente a información detallada y organizada de 24 personajes, algunos de los principales del complejo universo del anime "Hunter x Hunter".
Siendo ésta una segunda versión de HunterxVerse, se ha desarrollado una nueva funcionalidad que permite interactuar con cada uno de los personajes a través de un chatbox individual. Además, como segunda instancia, se ha integrado un chatbox grupal, en donde los usuarios podrán comunicarse de manera directa con todos los personajes del anime al mismo tiempo, permitiendo enriquecer la experiencia interactiva.
- En función de mejorar el rendimiento, la facilidad de uso y eficiencia de desarrollo, el proyecto se ha desplegado en Vercel.
- Se ha implementado una integración de API externa: OpenAI API.
- HunterxVersexChat se ha diseñado con una interfaz responsive, que garantiza una experiencia de usuario óptima en una amplia gama de dispositivos, aplicando desarrollo "mobile first".
- Con el propósito de dar una experiencia más fluida a los usuarios se ha desarrollado una aplicación de página única (SPA).
- Centrado en el usuario, se han utilizado historias de usuario para guiar cada etapa del diseño y la implementación.
A continuación se detallan cada una de las funcionalidades desarrolladas:
-
Chat individual: Permite interacción entre usuario y personajes de manera individual para obtener información precisa sobre cada uno de los personajes.
-
Chat grupal: Permite la interacción entre el usuario y los 24 personajes del anime al mismo tiempo.
El proyecto se ha desarrollado en base a la siguiente estructura de archivos:
.
├── src
| ├── components
| ├── data
| | └── dataset.js
| ├── lib
| | └── dataFunctions.js
| ├── views
| ├── index.html
| ├── index.js
| ├── router.js
| └── style.css
├── test
| └── dataFunctions.spec.js
| └── example.spec.js
├── README.md
└── package.json
Para desarrollar esta segunda versión, HunterxVersexChat, se han utilizado diferentes herramientas y tecnologías que permiten que el proyecto cumpla con los requerimientos técnicos específicos y además, obtener un producto de alta calidad en cuanto a la experiencia de usuaries:
- Manejo API key Permite obtener un mecanismo simple de autenticación para acceder a servicios externos, en este caso, la API OpenAI. Almacenándose en el local storage, asegura que la solicitud a la API provienen de una fuente autorizada.
- SPA El uso del modelo Single Page Application permite interactuar con el usuario reescribiendo dinamicamente la pagina actual sin necesidad de recargar la web entera. Esto permite que mejore la experiencia de usuario en cuanto la rapidez y fluidez en el manejo.
- Modularización Manejo de componentes para mejorar la estructura y organización de la aplicación. Facilita el entendimiento y permite manejar correctamente el funcionamiento del código.
- Petición HTTP Generación de solicitud HTTP utilizando promesas mediante fetch, para poder conectar nuestra SPA con la API.
- Figma Desarrollo de diseño para cada componente y vista de la interfaz.
- Test Elaboración de test unitarios: almacenamiento API key y uso de mock para solicitud con fetch.
Las características específicas del diseño están basadas en un proceso investigativo que se resolvió en la creación de un contenido diseñado estratégicamente, que utiliza elementos visuales relativos a la serie. Esto permite que las usuarias puedan envolverse en el mundo de Hunter x Hunter, enriqueciendo su experiencia.
Desde este primer prototipo de alta fidelidad, levantamos un testeo de usabilidad. A partir de las sugerencias de quienes participaron, se realizaron las modificaciones que nos llevaron al producto final.
Mobile
Tablet
Desktop
MilNic 2024 © Hunter X Verse