Hoy en día, las aplicaciones web son nuestras compañeras constantes. Desde mantenernos conectados en redes sociales hasta facilitarnos el trabajo, están presentes en cada momento. Pero lo que hace que este momento sea realmente emocionante es que estas herramientas no solo nos acompañan, ¡sino que también nos abren las puertas a un mundo fascinante: la interacción con inteligencia artificial!
Por eso, hemos creado una página dinámica llamada Flores Dataverse-chat, que nos permite interactuar con la inteligencia artificial, especificamente la de OpenAI. Esta plataforma nos permite interactuar con las flores, mediante un chat y podemos preguntarles por sus características, habitat, origen, descripción, entre otros detalles
En este proyecto hemos convertido nuestro Dateverse en SPA (single page aplication), implementado un router que nos permite navegar por las diferentes rutas de la página. También se a implementado el chat que tiene conexión con la API de OpenAI y nos da la posibilidad de interactuar con la inteligencia artificial y consultar información detallada de cada flor. Además de eso, hemos manteniendo las funcionalidades de visualizar, filtrar, ordenar y calcular estadísticas.
Nuestro proyecto cuenta también con una vista que permite integrar una API KEY de OpenAI que permite la interacción con nuestras flores.
- Preparamos el área de trabajo: hicimos fork, clonamos proyecto e instalamos dependencias.
- Organizamos información.
- Implementamos router, con las funciones setRootEl, setRoutes, renderView y onURLChange. Responsables para las vistas dinámicas de la página.
- Migramos los datos de Dataverse-chat y logramos traer a la nueva página las funcionalidades como filtros, estadísticas, etc.
- Reutilizamos las funciones de Dataverse que permiten aplicar los filtros y cambiar las estadísticas.
- Migramos también las pruebas unitarias de las funciones de Dataverse.
- Visualizamos el set de datos en home.js.
- Logramos almacenar de forma segura la API que nos permite conectar de manera efectiva a la API de OpenAI, para esto integramos las funciones getApiKey y SetApiKey.
- Realizamos test para las funciones getApiKey y SetApiKey.
- Diseñamos la vista de chat individual y la integramos con OpenAI.
- Integramos a OpenAI utilizando promesas, fetch, then y catch.
- Escribimos los test para las funciones asíncronas.