Skip to content

AlvarezF7/DEV015-dataverse-chat

BranchesTags
 
 

Repository files navigation

Dataverse Chat

Índice

1. Preámbulo

En nuestro día a día, las aplicaciones web son como amigas inseparables. Desde las redes sociales hasta las herramientas de trabajo, las usamos todo el tiempo. Pero lo que hace que este momento sea realmente especial es que estas aplicaciones nos pueden abrir una puerta a algo asombroso: la interacción con inteligencia artificial.

¿Qué tal si pudiéramos conversar con alguien que vivió hace más de cien años o incluso con los personajes de nuestras series y películas favoritas o con entidades que normalmente no pueden hablar como por ejemplo planetas o animales? La inteligencia artificial nos puede ayudar a entender el pasado y a conectarnos con figuras históricas, así como a sumergirnos en mundos ficticios.

Preview app

2. Resumen del proyecto

En este proyecto convertirás 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 personaje/entidad y agregando la posibilidad de interactuar con un personaje/entidad o todos ellos 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

  • Este proyecto se debe resolver en duplas.

  • El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints.

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

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

  • El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando cualquiera de estas opciones: Vercel o Netlify.

  • La división y organización del trabajo debe permitir, sin excepciones, que cada integrante del equipo practique el aprendizaje de todo lo involucrado en cada historia. No se dividan el trabajo como en una fábrica.

    • ¿Hasta acá has avanzado en tus proyectos con cierta fluidez y sin mayores problemas? Sé generosa con tus compañeras, permíteles aprender y practicar sin restricciones, aunque tome un poco más de tiempo. Aprovecha de coachearlas, de hacer pair programming, una de las mejores maneras de aprender es explicando verbalmente.
    • ¿Se te está haciendo difícil y te cuesta un poco más avanzar? No te quedes con las partes "fáciles" del proyecto, conversa, negocia, exige tu oportunidad para practicar y aprender lo que se te hace más difícil. Para comenzar tendrás que hacer un fork y clonar este repositorio.

4. Funcionalidades

Como entregable final tendrás una Single Page Application (SPA) que permita, 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 personaje y poder interactuar con los personajes o entidades del set de data que utilizaste anteriormente.

Aquí definimos en más detalle las 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. Por ejemplo, si usamos la data de ejemplo de Dataverse, correspondiente a las mujeres con mayores contribuciones a la programación en la historia, una usuaria puede establecer una conversación interactiva con Ada Lovelace a través del sistema de chat, obteniendo información sobre sus logros, desafíos y contribuciones a la informática. La inteligencia artificial de OpenAI permite que las respuestas sean informativas y personalizadas según las preguntas de los usuarios.
Usuaria: "Hola, Ada. Cuéntame más sobre tus contribuciones a la informática."

Ada Lovelace (AI de OpenAI): "¡Hola! Claro, estaré encantada de hablar sobre eso.
Mis contribuciones más destacadas se relacionan con el trabajo junto a Charles Babbage
en el diseño de la Máquina Analítica. Además, desarrollé el primer algoritmo destinado
a ser procesado por una máquina, lo que me convierte en la primera programadora de la historia.
¿Hay algo más en particular que te gustaría saber?"

Usuaria: "¡Eso es fascinante! ¿Qué desafíos enfrentaste en ese tiempo?"

Ada Lovelace (AI de OpenAI): "En ese tiempo, enfrenté varios desafíos, uno de los
principales fue la limitación de recursos y la falta de reconocimiento del potencial
de la Máquina Analítica. También tuve que superar las restricciones sociales de
la época, ya que las mujeres tenían un acceso limitado a la educación en
matemáticas y ciencias. Sin embargo, mi pasión por la matemática y la visión
de lo que estas máquinas podrían lograr me impulsaron a seguir adelante."
  • 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 /panel
    • 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.

Nota: puedes revisar esta implementación de ejemplo, cuyo principal objetivo es mostrarte cómo se vería la funcionalidad de chat en tu aplicación, más no tomes el diseño como referencia para tu proyecto, siente libre de hacer volar tu imaginación diseñando tu propia interfaz.

5. Consideraciones técnicas

La lógica del proyecto debe estar implementada completamente en JavaScript (ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o frameworks, solo vanilla JavaScript.

El boilerplate que viene con el proyecto es una estructura inicial. Ustedes deben ir agregando más archivos conforme vayan avanzando en su proyecto. La siguiente es una estructura de archivos que recomendamos:

.
├── 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

src/components

Esta carpeta contendrá archivos JavaScript que representan componentes reutilizables de tu aplicación. Estos componentes pueden ser elementos de la interfaz de usuario que se utilizan en varias partes de tu aplicación. Organizar tus componentes de esta manera ayuda a mantener un código más modular y reutilizable.

src/data

En esta carpeta están los datos con los que vas a trabajar (los datos de ejemplo o los datos que generarías con ayuda de la inteligencia artificial).

src/lib

En esta carpeta, crearás módulos que contengan funcionalidades no relacionadas al DOM. Aquí podrás incluir el archivo dataFunctions.js que contiene las funciones que te permiten filtrar, ordenar y hacer cálculos agregados. También podrás crear archivos con las funciones que interactúen con la API de inteligencia artificial o utilidades destinadas a almacenar datos en el local storage.

src/views

Esta carpeta generalmente contiene archivos de los componentes que representan las diferentes páginas o vistas de tu aplicación. Cada vista (view) puede tener su propio archivo JavaScript, que exporta una función que es responsable de generar los elementos del DOM.

src/index.html

Como en el proyecto anterior, existe un archivo index.html. En este archivo HTML encontrarás un elemento DOM <div id='root'></div> donde vas a renderizar las diferentes vistas de tu aplicación.

src/index.js

El punto de partida para tu SPA sera el archivo src/index.js. Acá encontrarás algunas instrucciones y comentarios para guiarte en el inicio del desarrollo de tu aplicación.

src/router.js

En este archivo vas a manejar el enrutamiento de tu aplicación. Es un archivo que debes crearlo por tu cuenta.

src/style.css

Es un archivo que debes crearlo por tu cuenta para agregar los estilos que necesites para tu aplicación.

src/test

Esta carpeta contiene los tests de tus funciones y componentes. Por ejemplo los tests de dataFunctions deben estar aquí.

6. Hitos

Para resolver un problema, es importante comprenderlo en profundidad. Una forma de hacerlo es descomponerlo en problemas más pequeños. Esto nos ayudará a identificar las causas del problema y a desarrollar soluciones más efectivas.

En este proyecto, te sugerimos que trabajes por hitos. Esto te permitirá enfocarte en un problema a la vez y hacer un seguimiento de tu progreso. A continuación, te presentamos un cronograma de hitos que te puede ayudar a organizar tu trabajo.

7. Criterios de aceptación mínimos del proyecto

Además de las funcionalidades que definimos en la sección de Funcionalidades, tu proyecto debe cumplir con los siguientes requisitos:

Definición del producto

Documenta brevemente tu trabajo en el archivo README.md de tu repositorio, contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve el problema (o problemas) que tiene tu usuaria.

Historias de usuaria

Una vez que entiendas las necesidades de tus usuarias, escribe las Historias de Usuaria que representen todo lo que la usuaria necesita hacer/ver. Las Historias de Usuaria deben ser el resultado de tu proceso de investigación o research de tus usuarias.

Asegúrate de incluir la definición de terminado (definition of done) y los Criterios de Aceptación para cada una.

Usa tus historias de usuaria para planificar tus sprints dividiendo cada historia en tareas.

En la medida de lo posible, termina una Historia de Usuaria antes de pasar a la siguiente (cumpliendo con la Definición de Terminado y los Criterios de Aceptación).

Diseño de la Interfaz de Usuaria

Prototipo de baja fidelidad

Durante tu trabajo deberás haber hecho e iterado bocetos (sketches) de tu solución usando papel y lápiz. Te recomendamos tomar fotos de todas las iteraciones que hagas, que las subas a tu repositorio y las menciones en tu README.md.

Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.

Prototipo de alta fidelidad

Lo siguiente es diseñar tu Interfaz de Usuaria (UI por sus siglas en inglés - User Interface). Para eso debes aprender a utilizar alguna herramienta de diseño visual. Nosotros te recomendamos Figma que es una herramienta que funciona en el navegador y, además, puedes crear una cuenta gratis. Sin embargo, eres libre de utilizar otros editores gráficos como Illustrator, Photoshop, etc.

El diseño debe representar el ideal de tu solución. Digamos que es lo que desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu diseño debe seguir los fundamentos de visual design.

Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.

Testeos de usabilidad

Durante el reto deberás hacer tests de usabilidad con distintos usuarias, y con base en los resultados, deberás iterar tus diseños. Cuéntanos qué problemas de usabilidad detectaste a través de los tests y cómo los mejoraste en tu propuesta final.

Implementación de la Interfaz de Usuaria (HTML/CSS/JS)

Luego de diseñar tu interfaz de usuaria deberás trabajar en su implementación. No es necesario que construyas la interfaz exactamente como la diseñaste. Tu tiempo de hacking es escaso, así que deberás priorizar.

Revisa las funcionalidades que el proyecto pide del interfaz.

Pruebas unitarias

El boilerplate de este proyecto no incluye Pruebas Unitarias (tests), así es que tendrás que escribirlas tú para las funciones encargadas de procesar, filtrar y ordenar la data, así como calcular estadísticas. Te recomendamos usar el framework Jest para ejecutar las pruebas unitarias. Consultar su documentación.

Tus pruebas unitarias deben dar una cobertura del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas) del archivo src/dataFunctions.js que contenga tus funciones y está detallado en la sección de Consideraciones técnicas.

8. 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

DOM (Document Object Model)

JavaScript

Asincronía

Tipos de datos

Módulos

Testing en Javascript

HTTP

AI Prompting

Control de Versiones (Git y GitHub)

Git

  • 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

  • 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

9. Pistas, tips y lecturas complementarias

Primeros pasos

Súmate al canal de Slack #project-dataverse-chat para conversar y pedir ayuda del proyecto.

Te sugerimos algunas tareas para dar inicio al proyecto. No es necesario abordarlas de manera secuencial, y puedes llevarlas a cabo en paralelo mientras avanzas con la planificación de las Historias de Usuario:

Diseño de Wireframes o Prototipo de Baja Fidelidad

Comienza por diseñar wireframes o prototipos de baja fidelidad para capturar los requisitos funcionales de tu proyecto. Es recomendable comenzar con un enfoque "mobile first" para garantizar la usabilidad en dispositivos móviles, y luego extender la atención a pantallas más grandes, como las de escritorio.

Comprende los Conceptos de SPA (Single Page Application) y Enrutamiento

Antes de comenzar a codificar, asegúrate de comprender los conceptos de una Aplicación de Página Única (SPA) y el enrutamiento de páginas. Esto te permitirá crear una experiencia de usuario fluida y dinámica. Investiga las mejores prácticas y las herramientas disponibles para implementar un SPA en tu proyecto.

Preparación de la Estructura del Proyecto

Organiza tu proyecto creando la estructura de directorios necesaria y configurando un sistema de enrutamiento básico para cambiar dinámicamente entre dos vistas. Asegúrate de que tu proyecto tenga una arquitectura limpia y escalable.

Integración de Dataverse

Si tienes la intención de utilizar código de Dataverse en tu proyecto, asegúrate de importar los archivos relevantes, como dataset.js, dataFunctions.js, main.js, y view.js, junto con sus respectivas pruebas. Ten en cuenta que main.js y view.js requerirán una refactorización para adaptarse a las vistas y componentes específicos de tu proyecto.

Identifica las funcionalides de Open AI

Consulta la documentación de la API de Open AI. Identifica y prueba las funciones que usarás para construir el chat de tu aplicación

Cuando ya estés lista para codear, te sugerimos empezar de esta manera

  1. Una de las integrantes del equipo debe realizar un 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo. La otra integrante del equipo deber hacer un fork del repositorio de su compañera y configurar un remote hacia el mismo.
  2. ⬇️ Clona tu fork a tu computadora (copia local).
  3. 📦 Instala las dependencias del proyecto con el comando npm install. Esto asume que has instalado Node.js (que incluye npm).
  4. Si todo ha ido bien, deberías poder ejecutar las 🚥 pruebas unitarias (unit tests) con el comando npm test.
  5. Para ver la interfaz de tu programa en el navegador, usa el comando npm start para arrancar el servidor web y dirígete a http://localhost:5000 en tu navegador.
  6. A codear se ha dicho! 🚀

Contenido de referencia

Desarrollo Front-end

Inteligencia Artificial y Prompting

Herramientas

10. Consideraciones para pedir tu Project Feedback

Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:

  • Cumple con todas las pruebas unitarias al ejecutar npm run test y que tienen una cobertura del 70% de statements (sentencias), functions (funciones), lines (líneas), y branches
  • Esta libre de errores de eslint al ejecutar npm run pretest
  • Está subido a GitHub y desplegado en Netlify o Vercel.
  • Tiene un README.md con la siguiente:
    • Definición del producto clara e informativa
    • Historias de usuaria
    • Un sketch de la solución (prototipo de baja fidelidad) y Diseño de la Interfaz de Usuaria (prototipo de alta fidelidad)
    • El listado de problemas que detectaste a través de tests de usabilidad en el README.md
  • Tiene un UI que cumple las funcionalidades:
    • Permite ver toda la data en la pantalla principal con opciones para filtrar y ordenar.
    • Permite ingresar un API Key a través de un formulario.
    • Permite ver una página con más detalles de cada entidad. En esta página se puede iniciar el chat.
    • Permite conversar con el personaje o entidad de la data a través de un chat.
    • Permite chatear de forma grupal con todas las entidades de la data.
    • Es responsive y fue realizado usando la metodología mobile first.

Recuerda que debes hacer una autoevaluación de objetivos de aprendizaje y life skills desde tu dashboard de estudiante.

Si no has completado todo lo anterior, no consideramos que estás lista para tu sesión de Project Feedback.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.3%
  • CSS 10.0%
  • HTML 0.7%