• 1. Preámbulo
• 2. Resumen del proyecto
• 3. Funcionalidades
• 4. Consideraciones técnicas
• 5. Definición del producto
• 6. Objetivos de aprendizaje
• 7. Agradecimiento

¿Qué tal si pudiéramos conversar con un guía que te invite a conocer los mejores lugares de Costa Rica? Hoy en dia la inteligencia artificial nos brinda un mundo de posibilidades, con el acceso de informacion inmediata y veraz de lugares que nunca hemos visitado y nos encantaria conocer con tan solo enviar una pregunta. Es por esta razon que hemos creado la SPA: Pura Vida Tours.

Es una Single Page Application (SPA), que le permite al usuario visualizar, filtrar y ordenar una data de lugares turisticos de Costa Rica desde la vista de "Home". Tambien tiene vista de más detalles de cada tour y vita para poder chatear con Guias turísticos que te invitan a disfrutar de cada tour, adicional se encuentra un chat grupal donde todos los tours son los que chatean con el usuario a traves de API de OpenAI.

• 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

La Single Page Application (SPA) permite, además de visualizar la data, filtrarla, ordenarla y calcular alguna estadística, permite acceder a una página de detalle de cada tour e interactuar a traves de un chat individual y grupal con OpenAI.

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.

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

Este espacio permite dar control al usuario sobre los datos que quieren visualizar podran filtar por provincias de Costa Rica y ordenar por orden alfabetico y por costo promedio, ademas podran resetar las busquedas a traves del botón limpiar.

• Nos indica cual es el % porcentaje de lugares turísticos por provincia con determinado tipo de turismo como: playa, aventura y cultural.

Información completa: Accede a toda la información relevante para tomar decisiones informadas sobre tu viaje.

Fácil de usar: Interfaz intuitiva y amigable para que encuentres lo que necesitas rápidamente.

Personalizable: Filtra y compara lugares según tus preferencias para encontrar tu experiencia ideal.

Planificación eficiente: Ahorra tiempo y dinero al tener una mejor idea de lo que te espera en tu viaje.

Viajeros primerizos: Que buscan información completa y organizada para planificar su viaje a Costa Rica.

Turistas experimentados: Que desean explorar nuevos lugares y comparar diferentes opciones.

Cualquier persona que desee: Tomar decisiones informadas sobre su viaje a Costa Rica.

El boilerplate tiene la siguiente estructura de archivos:

.
├── src
|  ├── assets
|  |  ├── chats.css
|  |  ├── computeZone.css
|  |  ├── description.css
|  |  ├── filterZone.css
|  |  ├── footer.css
|  |  ├── header.css
|  |  ├── renderItem.css
|  |  └── style.css
|  ├── components
|  |  ├── footer.js
|  |  ├── groupchating.js
|  |  ├── header.js
|  |  ├── mainDescription.js
|  |  ├── mainHome.js
|  |  ├── mainTours.js
|  |  └── nav.js
|  ├── data
|  |  └── dataset.js
|  ├── images
|  ├── lib
|  |  ├── apiKey.js
|  |  ├── dataFunctions.js
|  |  └── openAIApi.js
|  ├── views
|  |  ├── GroupChat.js
|  |  ├── Home.js
|  |  ├── IndividualChat.js
|  |  └── TourLayaout.js
|  ├── index.html
|  ├── index.js
|  └── router.js
├── test
|  ├── apiKey.spec.js
|  ├── dataFunctions.spec.js
|  └── openAIApi.spec.js
├── README.md
└── package.json

Se realizaron 5 historia de usuario que podrán ser visualizadas en estre link: https://www.notion.so/Que-quieren-los-turistas-al-vistar-Costa-Rica-ec371c3b51934df1b9d930a19bcd1b0a?pvs=4

Se han creado vistas para mobile, tablet y desktop. Se ha utilizado un diseño responsive para que la aplicación se adapte a diferentes dispositivos.

La aplicación se ha desplegado en Netlify. https://puravida-tours.netlify.app/

En Dataverse, nos preocupamos por la experiencia de nuestros usuarios. Por eso, hemos diseñado un prototipo intuitivo y fácil de usar para nuestro nuevo producto. Visita nuestro prototipo: https://www.figma.com/file/lSXlrTfCcIirOGRveTxuk6/Costa-Rica-te-enamora?type=design&node-id=0%3A1&mode=design&t=0UHfhUdKZJfTRe9Y-1

Header Body Footer

Los usuarios nos han contado:

• "¡Demasiada información en las tarjetas! Me costaba encontrar lo que buscaba."

• "No pude usar la página en mi celular. La información se veía muy pequeña y los botones no responden."

• "Los porcentajes no funcionaban bien. Cuando limpio, no se reinicia la información."

• "Encontré algunos botones que no hacían nada. Parece que la página aún está en desarrollo."

estos problemas para que tu experiencia en Pura Vida Tour sea optima.

• Más sencilla: Información clara y concisa en las tarjetas.

• Adaptable: Diseño responsive para una experiencia óptima en cualquier dispositivo.

• Funcional: Filtros y botones que funcionan correctamente.

• Completa: Página web con todas las funcionalidades disponibles.

• Front-end: JavaScript, HTML, CSS, Jest.

• Back-end: Node.js.

• Librerías: Chart.js (opcional).

• Git, GitHub, GitHub Pages, Chat-gpt, Gemini, OHs Laboratoria, Figma, Trello, Notion.
• Jest
• Vercel
• Netlify

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.

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

• Uso de flexbox en CSS

  Links

  • A Complete Guide to Flexbox - CSS Tricks
  • Flexbox Froggy
  • Flexbox - MDN

• Uso de CSS Grid Layout

  Links

  • A Complete Guide to Grid - CSS Tricks
  • Grids - MDN

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

• Ruteado (History API, evento hashchange, window.location)

  Links

  • Manipulando el historial del navegador - MDN

• Browser storage (localStorage, sessionStorage)

  Links

  • Window.localStorage - MDN

• Fetch API

  Links

  • Fetch API - MDN

• Callbacks

  Links

  • Función Callback - MDN

• Promesas

  Links

  • Promise - MDN
  • How to Write a JavaScript Promise - freecodecamp (en inglés)

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Diferenciar entre tipos de datos primitivos y no primitivos

• Arrays (arreglos)

  Links

  • Arreglos
  • Array - MDN
  • Array.prototype.sort() - MDN
  • Array.prototype.forEach() - MDN
  • Array.prototype.map() - MDN
  • Array.prototype.filter() - MDN
  • Array.prototype.reduce() - MDN

• Objetos (key, value)

  Links

  • Objetos en JavaScript

• Diferenciar entre expresiones (expressions) y sentencias (statements)

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Pruebas asíncronas

  Links

  • Tests de código asincrónico con Jest - Documentación oficial

• Uso de mocks y espías

  Links

  • Manual Mocks con Jest - Documentación oficial

• Cabeceras (headers)

  Links

  • HTTP headers - MDN

• Consulta o petición (request) y respuesta (response).

  Links

  • Generalidades del protocolo HTTP - MDN
  • Mensajes HTTP - MDN

• Códigos de status de HTTP

  Links

  • Códigos de estado de respuesta HTTP - MDN
  • The Complete Guide to Status Codes for Meaningful ReST APIs - dev.to

• Priming Chatbots

  Links

  • Priming Chatbots | Learn Prompting: Your Guide to Communicating with AI

• OpenAI API

  Links

  • Introduction - API Reference - OpenAI API
  • Authentication - API Reference - OpenAI API
  • Making requests - API Reference - OpenAI API
  • The chat completion object - API Reference - OpenAI API

• 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

  • Sitio oficial de GitHub Pages

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

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

• Crear prototipos de alta fidelidad que incluyan interacciones

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

• Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad

  Links

  • Intro a testeos usabilidad
  • Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?

A Laboratoria por el reto.

A la comunidad de GitHub por su apoyo.

Al equipo de trabajo.