Skip to content

olicrea/DEV013-dataverse-chat

BranchesTags
 
 

Repository files navigation

Dataverse Chat

Índice

1. Preámbulo

¿Qué tal si pudiéramos conversar con nuestras películas favoritas? La inteligencia artificial nos puede ayudar a conectarnos con mundos ficticios. Y es por eso que nació la SPA: MovieDev

Vista inicial:

página MovieDev

2. Resumen del proyecto

En este proyecto se convirtió la aplicación desarrollada en Dataverse en una Single Page Application (SPA), manteniendo las funcionalidades de visualizar, filtrar, ordenar y calcular alguna estadística, adicionando una nueva vista para consultar información detallada de cada película y agregando la posibilidad de interactuar con una película o todas ellas a través de un sistema de chat impulsado por la API de OpenAI.

Los objetivos generales de este proyecto son los siguientes

  • Desarrollar una Single Page Application (SPA)
  • Aplicar los conceptos de responsividad en el desarrollo de las vistas
  • Implementar un router para la navegación entre las diferentes vistas de la aplicación
  • Integrar una API externa
  • Entender la asincronía en JavaScript
  • Crear una suite de pruebas unitarias que permitan testear código asíncrono

3. Consideraciones generales

  • La lógica del proyecto está implementada completamente en JavaScript (ES6+), HTML y CSS. Para este proyecto no se utilizan frameworks o librerías de CSS y JS.

  • Reutilizar cierta parte del código del proyecto Dataverse, sobre todo el dataset. Además se refactoriza el código para que sea más modular y reutilizable implementando nuevas funciones para lograr las funcionalidades requeridas en este proyecto.

  • La interfaz será desplegada usando: Vercel.

4. Funcionalidades

La Single Page Application (SPA) permite, además de visualizar la data, filtrarla, ordenarla y calcular alguna estadística tal como se hizo en Dataverse, acceder a una página de detalle de cada película y poder interactuar con las entidades del set de data.

Funcionalidades mínimas que debe tener:

  • La aplicación debe ser responsive
  • La aplicación debe ser una SPA con múltiples vistas:
    • Implementar un sistema de enrutamiento que permita la navegación dentro de la aplicación.
    • Cada vista de la aplicación debe ser cargada dinámicamente mediante JavaScript.
    • Asegurarse de que la URL se actualice de manera acorde a la vista cargada al igual que el title del documento (la pestaña del navegador).
    • La aplicación debe ser capaz de cargar la vista correspondiente a la URL actual al iniciar la aplicación.
  • La aplicación debe mantener las funcionalidades de Dataverse: visualizar, filtrar, ordenar y calcular estadística de la data.
  • Al hacer clic en una tarjeta de personaje/entidad, la aplicación debe redirigirse a una vista con su propia URL que muestre la información detallada sobre ese personaje/entidad en particular
  • La aplicación debe permitir a la usuaria configurar la API Key para interactuar con la API de Open AI
  • Usando la API de Open AI, la aplicación debe permitir al usuario interactuar con un personaje/entidad a través de un chat.

Captura de conversación

  • La aplicación debe permitir al usuario interactuar de manera simultánea con todos los personajes/entidades a través de un chat:
    • Esta funcionalidad debe cargarse en la URL /groupChats
    • La usuaria puede ingresar su pregunta o mensaje para todos los personajes/entidades en un cuadro de texto y enviarlo con un botón
    • El mensaje de la usuaria debe ser ajustado para cada personaje/entidad, con el objetivo que este genere una respuesta basada en su personalidad y conocimiento
    • Las respuestas de todos los personajes se muestran de acuerdo al orden respuesta.
    • Indicar visualmente cuando uno o varios personajes/entidades esten generando una respuesta al mensaje enviado
  • La aplicación debe informar a la usuaria los errores que puedan surgir al interactuar con la API, como por ejemplo alcanzar la cuota de tokens por minuto o cualquier otro error relacionado con la API. Debería proporcionarse una descripción clara de la causa del problema y posibles soluciones.

Para que los chats anteriores puedan funcionar, es esencial que la aplicación se integre con la IA a través de la API de OpenAI. Para ello, el equipo de Laboratoria te proporcionará una API Key que la usuaria deberá poder ingresar en la aplicación que tu construirás.

Captura de conversación grupal

5. Consideraciones técnicas

El boilerplate tiene la siguiente estructura de archivos:

├── src
|  ├── components
                   header 
                   footer 
                   btnSalirdelChat
                   btnRegresar
                   menuSelects
                   
|  ├── data
|  |  └── dataset.js
|  ├── lib
|  |  └── dataFunctions.js
|  |   -  openAIApi.js
|  |   -  apyKeyFunction.js
|  ├── views
                   - home
                   - viewDescriptionCard
                   - viewError 
                   - viewAPIKey
                   - viewBienvenida
                   - viewIndividualChat
                   - viewGroupChat
|  ├── index.html
|  ├── index.js
|  ├── router.js
|  └── style.css
├── test
|  └── dataFunctions.spec.js
|  └── apiKey.spec.js
|  └── components.spec.js
|  └── openAIApi.spec.js
├── README.md
└── package.json

Definición del producto

Nuestras usuarias son chicas que se están sumergiendo al mundo del desarrollo web y que para saber más quisieran conocer películas de tecnología relacionadas con el rubro

Historias de usuaria

Hu 1

Yo como desarrolladora web quiero ver información más detallada y específica de cada uno de los films. Para saber más detalles interesantes y no quedarme con información básica.

Criterios de aceptación:
  • Botón claramente visible en la tarjeta de cada película que permita acceder a su información detallada, intuitivamente
  • Al hacer click en el botón, la página debe cambiar y mostrar información más amplia y detallada sobre la película seleccionada
  • La información ampliada debe incluir detalles interesantes sobre la película, que no se mostraron en la tarjeta de inicio
  • La navegación de regreso desde la vista detallada a la vista principal debe ser intuitiva y fácil de usar
  • La funcionalidad de visualización de información detallada debe poder verse de manera consistente en dispositivos móviles y de escritorio.
Definición de terminado:
  • Al darle click al botón, la información más detallada se despliega en una nueva vista con su propia URL
  • El código asociado con la implementación de la vista detallada debe estar libre de errores. Debe superar sus propios tests
  • La interfaz de usuario para la vista detallada debe ser estéticamente agradable y coherente con el diseño general de la página web. Respeta las buenas prácticas de UX design
  • Debe ser responsive. Y realizar pruebas para garantizar que la funcionalidad de información detallada funcione correctamente en diversos navegadores y dispositivos.

Hu 2

Yo como desarrolladora web quiero entablar una conversación con cada uno de los films de MovieDev. Para preguntar y saber de primera mano más detalles, curiosidades y cosas interesantes que no se encuentran en su descripción.

Criterios de aceptación:
  • En la pantalla de cada película debe haber un botón claramente visible que permita a la usuaria iniciar una conversación para interactuar con dicha película.
  • Si la usuaria ingresó previamente API key en el botón correspondiente: al hacer click en el botón de chat se debe abrir un chat que permita a la usuaria enviar preguntas o comentarios.
  • Si la usuaria no ingresó previamente API key en el botón correspondiente: al hacer click en el botón de chat se debe abrir la vista para ingresar credenciales API key y después de ingresadas la página automáticamente la redirigirá al chat que le permitirá a la usuaria enviar preguntas o comentarios.
  • La pantalla de chat individual debe adaptarse a diferentes tipos de dispositivos y navegadores
  • Se puede diferenciar claramente en el chat que hay - interacción entre la usuaria y la película
  • Puede usar emoticones
  • Hay botón de envío para mensajes
  • Es agradable a la vista
  • Tiene la opción de salir del chat por si la usuaria no quiere continuar chateando
  • Hay una ventana para ver el despliegue del chat y otra para el input de la usuaria.
Definición de terminado:
  • Botón de entrar a chat funciona sin errores, cumple con criterios de diseño UX. Es legible, con suficiente contaste. - Posición que llama a la acción de manera intuitiva.
  • El despliegue de la view de chat individual se procesa de manera rápida y preciso, sin errores.
  • Si es el caso, el redireccionamiento de credenciales API key hacia el chat es rápido, preciso y sin errores.
  • La pantalla de chat individual es una vista independiente, con su propia URL.
  • La pantalla de chat individual es responsiva.
  • El funcionamiento del chat y su legibilidad fue probado con testeos de usabilidad.
  • El ingreso de los inputs y la lectura del chat total se hace cómodamente sin perturbar la vista. Admite los caracteres típicos necesarios en un chat.
  • El botón de envío de mensajes funciona sin errores, cumple con criterios de diseño UX. Es legible, con suficiente contaste. Posición que llama a la acción de manera intuitiva.
  • La vista del chat tiene un estilo coherente que corresponde al resto de la página web.
  • La función de chat supera sus propios tests.

Hu 3

Yo como desarrolladora web quiero entablar una conversación con todos los films de MovieDev y sus personajes. Para entretenerme y conocer más sus diferencias, similitudes y rankings.

Criterios de aceptación:
  • Botón animado resaltado en la parte superior de la página con la función de ingresar a chatear con los personajes de los films.
  • Al hacer Click en el botón debe cambiar la página y mostrar todos los personajes y la conversación con la opción de enviar emojis.
  • El chat debe tener forma de nube y el nombre de quien lo escribe.
  • En la parte inferior del chat el usuario debe tener la opción de regresar a la página principal.
  • Todo su contenido debe ser coherente con el tamaño de pantalla desde el dispositivo del que se ingresa.
  • Si la usuaria ingresa una credencial errónea se le debe avisar sin salir de la página actual.
Definición de terminado:
  • Al clickear “chat grupal” se generará un nuevo renderizado con la vista y esta asociada al pathname: /chatgrupal y su valor generará una función específica de vista renderizadora en el que se muestre todas las partes del chat con un estilo “burbuja”.
  • Los módulos deben superar los tests propuestos por Laboratoria y deben ser netamente independientes para facilitar su modulación.
  • El despliegue debe ser Resposive y debe cumplir con los requisitos que se establecieron desde el inicio y ofrece una experiencia de usuaria consistente y atractiva.
  • Crear un alert para advertir el ingreso erróneo.

Hu 4

Yo como desarrolladora web quiero ingresar mis credenciales para chatear con los films de MovieDev de manera segura y sencilla. Para no perder tiempo, no perderme en la página y hacerlo de la manera más automatizada.

Criterios de aceptación:
  • Botón animado resaltado en la parte superior de la página con la función de ingresar la Api Key.
  • Al hacer Click en el botón debe cambiar la página y mostrar un cuadro, allí el usuario ingresará su Api.
  • En la parte inferior del recuadro de ingreso el usuario tiene dos opciones una para validar los datos y otra para regresar a la página principal.
  • Todo su contenido debe ser coherente con el tamaño de pantalla desde el dispositivo con el que se ingresa.
Definición de terminado:
  • Al clickear el botón de “ingresar Api Key” se generará un nuevo renderizado con la vista y esta asociada al pathname: /api y su valor generará una función específica de vista renderizadora en el que se muestre un imput con el ingreso de las credenciales de la Api Key.
  • Los módulos deben superar los tests propuestos por Laboratoria y deben ser netamente independientes para facilitar su modulación.
  • El despliegue debe ser Resposive y debe cumplir con los requisitos que se establecieron desde el inicio y ofrece una experiencia de usuaria consistente y atractiva.

Diseño de la Interfaz de Usuaria

Prototipo de mediana fidelidad

Prototipado en Figma

Se iteró entre bocetos.

Solicitamos continuo feedback de nuestros prototipos a nuestras compañeras y/o coaches.

Testeos de usabilidad

Hallazgos solucionados a través del diseño:

  • Los usuarios no podían encontrar fácilmente las diferentes secciones o funcionalidades de la aplicación. El flujo de interacción del usuario resultaba confuso.

  • No había buena respuesta del diseño en diferentes dispositivos.

  • Los textos no eran muy legibles.

  • Interactividad de la aplicación estaba siendo deficiente.

  • El usuario no sabía qué hacerdespués del error por credencial APIKey.No había claridad.

  • La paleta de colores resultaba agotadora.

7. Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

CSS

Web APIs

JavaScript

HTTP

AI Prompting

Control de Versiones (Git y GitHub)

  • Git: Instalación y configuración

  • Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

  • Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

  • GitHub: Creación de cuenta y repos, configuración de llaves SSH

  • GitHub: Despliegue con GitHub Pages

    Links

  • GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

Centrado en el usuario

  • Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

  • Crear prototipos de alta fidelidad que incluyan interacciones

  • Seguir los principios básicos de diseño visual

Investigación

About

Tercer proyecto realizado en <Laboratoria> con DEV013. Del 25 de enero del 2024 al 25 de marzo del 2024

dev-013-dataverse-chat-jvsl-2nyxj2bj7-oli-developer.vercel.app

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 88.5%
  • CSS 11.2%
  • HTML 0.3%