CRUISE LINE

Índice

• 1. Definición del proyecto
• 2. Funcionalidades
• 3. Historias de usuario
• 4. Generación de datos
• 5. Diseño de la Interfaz de Usuaria
• 6. Estructura del proyecto
• 7. Criterios de aceptación mínimos del proyecto
• 8. Objetivos de aprendizaje
• 9. Pistas, tips y lecturas complementarias
• 10. Consideraciones para el Project Feedback

---

1. Definición del proyecto

En este proyecto se construyó una página web de cruceros en donde se visualiza un conjunto (set) de datos generados con la herramienta de Inteligencia Articial ChatGPT.

2. Funcionalidades

La página web que permite visualizar la data, filtrarla, ordenarla y calcular el promedio de precios de los cruceros.

Visualización

• Para la visualización de la data generada en ChatGPT se utilizó un componente UI conocido como tarjeta (card) que resalta los valores de las propiedades de la data que le interesaría a los usuarios ver como: imagen, nombre, precio y puerto de salida o embarque del crucero.

Filtrado

• Los usuarios pueden filtrar la data de los cruceros por su propiedad de precio en los siguientes rangos:
  • Price $1000-$1500.
  • Price $1200-$2000.
  • Price $2000-$2500.
  • Price $2500-$3000.

Ordenado

• Ordenado por nombre: Los usuarios pueden ordenar la data con la propiedad de nombre alfabéticamente de forma ascendente (A-Z) o de forma descendente (Z-A).

• Ordenamiento por precio: Los usuarios pueden ordenar la lista de cruceros según el precio de cada uno, lo que facilita la búsqueda de cruceros económicos al proporcionar una ruta eficiente de la información deseada.

Las funciones de ordenado por nombre y precio operan sobre la data filtrada.

Estadísticas

• Promedio de precio de los cruceros: Al hacer click en el botón de estadística los usuarios puede visualizar el promedio de los precios de los cruceros. Ésta función también permite ver el promedio en nuestra data filtrada.

Limpiar (Clear)

• Se agregó el botón de limpiar que permite a los usuarios reiniciar la página web, limpiando filtros, ordenamiento y estadísticas.

Las funciones de filtrar, ordenar, estaditísticas y limpiar agregan el contenido de una manera dinámica utilizando JavaScript.

3. Historias de usuario

En el proyecto realizaron tres historias de usuarios para describir las funcionalidades de la página web desde la perpectiva de los usuarios finales.

3.1. Primera historia de usuario

Los usuarios quieren ir de vacaciones en un crucero de Cruise Lines y desean ver un listado con información detallada de todos los cruceros disponibles en la página web.

• Criterios de Aceptación de usuario.

  • La página web estará en ingles.
  • La información de cada crucero se visualiza utilizando el componente UI de tarjetas que están distribuidas en forma de grilla.
  • Cada crucero proporciona la siguiente información: imagen, nombre, el puerto de salida y el precio por persona del crucero.
  • No hay ningún elemento interactivo en la pantalla.

• Pasos para cumplir con los criterios de aceptación

  • Generación de la data con chat GPT.
  • Diseño del prototipo de media fidelidad.
  • Estructurar el HTML.
  • Darle estilos a la página con CSS.
  • Subir la información a Github.

• Definiciones de terminado (para el equipo):

  • Todo el código está subido a la rama del repositorio en GitHub.
  • Se realizan 2 pruebas con usuarios para saber que entiendan todo.

3.2. Segunda historia de usuario

Los usuarios quieren ir de vacaciones en un crucero de Cruise Lines para ello desean conocer los cruceros disponibles y poder filtrarlos por un rango de precio y ordenarlos de forma ascendente y descendente por su propiedad de precio (económico-caro) y su propiedad de nombre (alfabéticamente).

• Criterios de Aceptación de usuario.

  • La información de cada crucero se visualiza utilizando el componente UI de tarjetas que están distribuidas en forma de grilla.
  • Se tiene un menú en la parte superior donde se puede filtrar la información de los cruceros por rango de precios.
  • Se puede ordenar los crucero en orden alfabético ascendente (A-Z) y descendente(Z-A) los nombres de cruceros.
  • Se puede ordenar la información utilizando su propiedad de precio de manera ascendente (económico-caro) y descendente(caro-económico).

• Pasos para cumplir con los criterios de aceptación

  • Colocar un menú en la pagina principal que contenga la función de filtrado por rango de precios, la función de ordenado de forma ascendente y descendente utilizando las propiedades de nombre y precio de la data.
  • Realizar la función de filtrado (filterData) en JavaScript por rango de precios de los cruceros.
  • Realizar las funciones de ordenado (sortData) y (sortDataByPrice) que ordenan la data por orden ascendente y descendente de acuerdo a las propiedades de precio y nombre en la página principal.
  • Subir la información a Github.

• Definiciones de terminado (para el equipo):

  • Todo el código está subido a la rama del repositorio en GitHub.
  • Se publica la página web en GitHub Pages.
  • Se realizan 2 pruebas con usuarios para saber que entiendan todo.

3.3. Tercera historia de usuario

Los usuarios quieren ir de vacaciones en un crucero de Cruise Lines para ello desean conocer los cruceros disponibles y poder filtrarlos por un rango de precio y ordenarlos de forma ascendente y descendente por su propiedad de precio (económico-caro) y su propiedad de nombre (alfabéticamente).Así mismo, tener un botón de limpiar que vuelva la página a su estado inicial sin aplicar ningún filtro. Además de tener un botón que me permita calcular el promedio de precios de los cruceros al inicio de la página y cada vez que se filtre la información.

• Criterios de Aceptación de usuario.

  • La información de cada crucero se visualiza utilizando el componente UI de tarjetas que están distribuidas en forma de grilla.
  • Se tiene un menú en la parte superior donde se puede filtrar la información de los cruceros por rango de precios.
  • Se puede ordenar los crucero en orden alfabético ascendente (A-Z) y descendente(Z-A) los nombres de cruceros.
  • Se puede ordenar la información utilizando su propiedad de precio de manera ascendente (económico-caro) y descendente(caro-económico).
  • Tener un botón que me permita calcular el promedio de precios de los cruceros. El promedio también se debe calcular cuando se filtre la información.
  • Tener botón de limpiar que permita volver todo a la página inicial.

• Pasos para cumplir con los criterios de aceptación

  • Colocar en menú el botón CLEAR.
  • Asignarle a la función al botón CLEAR por medio de JavaScript que al momento de presionarlo vuelva a la pàgina inicial sin haber aplicado ningún filtro u orden.
  • Colocar un botón STATISTICS debajo del menú principal.
  • Asignarle al botón STATISTICS la funcionalidad mediante JavaScript que nos permita calcular el promedio de precios de los cruceros en la página principal y cuando se apliquen los filtros.
  • Subir la información a Github.

• Definiciones de terminado (para el equipo):

  • Todo el código está subido a la rama del repositorio en GitHub.
  • Se publica la página web en GitHub Pages.
  • Se realizan 2 pruebas con usuarios para saber que entiendan todo.

4. Generación de datos

En la generación de datos debemos tener un arreglo con 24 objetos. Y la estructura de cada objeto es la siguiente:

• id: Identificador único. Debe ser un string de no más de 32 characteres, en minúscula, compuesto solo por letras, números, underscore (_) o guión (-).

• name: El nombre de nuestro crucero.

• shortDescription: Descripción corta del crucero. Esta descripción tiene como máximo 20 palabras.

• description: Descripción extendida del crucero. Esta descripción tiene entre 80 y 100 palabras.

• imageUrl: URL de la imagen de cada crucero. Esta imagen fue generada a través de inteligencia artifical utilizando el generador de imágenes de Bing.

• facts: Cada crucero tiene 7 propiedades:

      facts: {
      shipSize: 362,
      shipClass: 'Clase Oasis',
      visitingPorts: 'Port Canaveral, CocoCay, Nassau, Cozumel, Roatán, Falmouth',
      departurePort: 'Port Canaveral',
      durationInDays: 7,
      cruisePrice: 1750,
      cruiseDate: '2024-08-01'
    }

  Los valores de las propiedades, son de tipo number, boolean o un string y no tienen más de 64 caracteres.

La data final de nuestro proyecto, según los requisitos anteriores es la siguiente:

const data = [
  {
    id: '1',
    name: 'Symphony of the Seas',
    shortDescription: 'Descubre la grandeza en Symphony of the Seas, el crucero más grande del mundo. ¡Aventuras emocionantes te esperan!',
    description: 'Symphony of the Seas, parte de la flota de Royal Caribbean Group, es el crucero más grande del mundo. Con un ambiente lujoso y emocionante, ofrece una experiencia única de primer nivel. Explora destinos exóticos, disfruta de deliciosa gastronomía y participa en actividades emocionantes. Con una eslora impresionante, este barco ha sido construido con tecnología de vanguardia. Disfruta de tus vacaciones con comodidades de primera clase y un itinerario que te llevará a lugares inolvidables como Miami, Cococay, Cozumel, Roatán, Puerto Costa Maya.',
    imageUrl: 'https://github.com/Wendy-Alejandra/DEV013-dataverse/blob/main/src/data/images/symphonyOfTheSeasCaribe.jpeg?raw=true',
    facts: {
      shipSize: 362,
      shipClass: 'Clase Oasis',
      visitingPorts: 'Miami, Cococay, Cozumel, Roatán, Puerto Costa Maya',
      departurePort: 'Miami',
      durationInDays: 7,
      cruisePrice: 1500,
      cruiseDate: '2024-05-01'
    }
  },
  //... 23 objetos más
]

4.1. Prompt utilizado

5. Diseño de la Interfaz de Usuaria

El diseño de interfaz de usuario es esencial para crear experiencias web efectivas y satisfactorias para los usuarios, teniendo en cuenta aspectos estéticos, funcionales y de usabilidad.

En el presente proyecto se realizaron en Figma dos prototipos de alta fidelidad con la metodología Mobile First.

5.1. Prototipo de baja fidelidad

5.2. Prototipo de alta fidelidad

6. Estructura del Proyecto

El boilerplate contiene una estructura de archivos como punto de partida así como toda la configuración de dependencias:

.
├── README.md
├── package.json
├── src
|  ├── data 
|  |  └── dataset.js (La que hayas generado con la IA)
|  ├── dataFunctions.js
|  ├── view.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.js
   └── dataFunctions.spec.js
   └── tests-read-only

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

Criterios de código

Prueba de cada grupo de objetivos de aprendizaje de manera individual con los siguientes comandos:

npm run test:oas-html
npm run test:oas-css
npm run test:oas-web-api
npm run test:oas-js
npm run test:oas-prompting
npm run test:oas // Esto es para correr todos los tests de OAs

HTML

• Uso de HTML semántico

  • Tiene un <header> con <h1>
  • Tiene un <footer>
  • Tiene un <main> con <h2>
  • Todas las etiquetas de controles (inputs, selects, radio, etc) tienen <label>
  • <ul> esta usado para dibujar la data
  • Los hijos de <li> usan attributos de microdata itemscope e itemprop

CSS

• Uso de selectores de CSS

  • Uso de selector class para los items
  • Uso de flexbox en sentido row y column
  • Uso de flexbox para el elemento que contiene los items
  • Uso de flexbox para el elemento que contiene los UI inputs

Web APIs

• Uso de selectores del DOM

  • La aplicación usa querySelector para buscar los elementos del DOM

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

  • addEventListener con callback que tiene parámetro de event, lo que permite el uso del objeto event con event.target o event.currentTarget
  • La aplicación registra Event Listeners para escuchar click, change, keyup dependiendo del evento que se quiere escuchar

• Manipulación dinámica del DOM

  • La aplicación actualiza el atributo innerHTML.
  • La aplicación usa createElement y appendChild, o template strings para crear elementos

JavaScript

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

  • La aplicación declara variables con let y const en manera adecuada

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

  • La aplicación usa el statement if..else para evaluar condiciones

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

  • La aplicación usa el statement for o método forEach para iterar

• Funciones (params, args, return)

  En el archivo dataFunctions.js define las siguientes funciones:

  • una función sortBy que tiene 3 parámetros (data, sortBy, sortOrder) y devuelve el arreglo ordenado
  • una función filterBy que tiene 3 parámetros (data, filterBy, value) y devuelve el arreglo filtrado
  • una función computeStats que tiene al menos un parámetro (data) y devuelve un valor computado

  Más sobre estos puntos en la sección dataFunctions.js

• Arrays (arreglos)

  • Uso de Arreglos
  • Uso de Array.prototype.sort() - MDN o Array.prototype.toSorted - MDN
  • Uso de Array.prototype.forEach() - MDN
  • Uso de Array.prototype.map() - MDN
  • Uso de Array.prototype.filter() - MDN
  • Uso de Array.prototype.reduce() - MDN

• Objetos

  • Uso de notación de punto para acceder propiedades
  • Uso de notación de brackets para acceder propiedades

• Módulos de ECMAScript (ES Modules)

  • La aplicación usa import y export para importar y exportar valores desde un modulo JavaScript.

Pruebas unitarias

El boilerplate de este proyecto no incluye pruebas unitarias (tests), así que se realiza las pruebas unitarias para testear las funciones de visualizar, filtrar y ordenar la data, así como calcular el promedio de precio de los cruceros.

Se usó el framework Jest para ejecutar las pruebas unitarias dando cobertura del 91.48% de statements (sentencias), 100% functions (funciones), 90.47% lines (líneas), y 80.55% branches (ramas) del archivo src/dataFunctions.js que contiene las funciones.

8. Objetivos de aprendizaje

HTML

• Uso de HTML semántico

  Links

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

CSS

• 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

Web APIs

• 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

JavaScript

• 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

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

  Links

  • Valores, tipos de datos y operadores
  • Variables

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

  Links

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

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

  Links

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

• Funciones (params, args, return)

  Links

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

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

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

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

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

  • Sitio oficial de GitHub Pages

• 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

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

AI Prompting

• Dando Instrucciones

  Links

  • Dando Instrucciones | Learn Prompting: Your Guide to Communicating with AI

• Few shot prompting

  Links

  • Few shot prompting | Learn Prompting: Your Guide to Communicating with AI

9. Pistas, tips y lecturas complementarias

Desarrollo Front-end

• Tópicos en la currícula de Laboratoria testing, arreglos, objetos, funciones, DOM en Browser Javascript.
• Buscando elementos con querySelector*
• Objeto del evento
• Array en MDN
• Array.sort en MDN
• Array.toSorted en MDN
• Array.map en MDN
• Array.filter en MDN
• Array.reduce en MDN
• Array.forEach en MDN
• Object.keys en MDN
• Object.entries en MDN
• Atributos de datos
• expressions-vs-statements
• expresión vs sentencia
• Datos atómicos vs datos estructurados
• Módulos: Export
• Módulos: Import
• Diferencia entre array y objetos
• ¿Cómo puedo recorrer un objeto?
• map, filter, sort y reduce también son métodos para objetos
• Diferencia entre expression y statements
• Diferencia entre createElement e innerHTML
• ¿Qué es el Scope?

Herramientas

• Git
• GitHub
• GitHub Pages
• Para preguntas sobre Git recomendamos ver este playlist
• Node.js
• Jest

Organización del Trabajo

• Historias de Usuario. Ojo que Cris no diferencia Definición de terminado de Criterios de Aceptación y nosotros sí lo haremos. Más detalles en la guía.
• Cómo dividir H.U.

10. Consideraciones para el Project Feedback

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

• Cumple con todos los criterios mínimos de aceptación al ejecutar npm run test:oas
• Cumple con todas las pruebas end to end al ejecutar npm run test:e2e
• 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 GitHub Pages
• Captura de pantalla del prompt utilizado para generar los datos.
• Tiene un README.md con la siguente:
  • Definición del producto clara e informativa
  • Historias de usuario
  • Un 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:
  • Muestra lista con datos y/o indicadores
  • Permite ordenar data por uno o más campos (asc y desc)
  • Permite filtrar data con base en una condición
  • Permite limpiar los filtros con un botón
  • Es responsive

Autoevaluación de objetivos de aprendizaje y life skills completados.