Guía 10

Guía 10

DAWM / Proyecto03

Actividades previas

Actividades en clases

OpenWeatherMap (OBLIGATORIO)

  1. Obtenga una cuenta en OpenWeatherMap.
  2. Copie el API key de su correo o desde su perfil.
  3. Acceda a la documentación de Call 5 day / 3 hour forecast data.
  4. Compruebe la respuesta en su navegador del siguiente endpoint.
https://api.openweathermap.org/data/2.5/forecast?q=Guayaquil&mode=xml&appid=<AQUI-EL-API-KEY>

NOTA: Para mejorar la visualización del XML utilice el XMLviewer.

Open-Meteo (OPCIONAL)

  1. En la documentación del API de Open-Meteo:
    • En Search elija Detect Location via GPS,
    • En Hourly Weather Variables marque las opciones Temperature (2m), Rain, Cloud cover Total y Precipitation Probability.
  2. En la sección API Response, recargue el gráfico.
  3. En API URL, copie la URL en una pestaña nueva, p.e.:

https://api.open-meteo.com/v1/forecast?latitude=-2.1454&longitude=-79.9671&hourly=temperature_2m,precipitation_probability,rain,cloud_cover

Diseño del Dashboard

  1. Utilice papel y lápiz para el diseño del dashboard.

  2. Analice la fuente de datos para identificar los nombres, las unidades y operaciones de los elementos del dashboard (indicadores, gráficos, tablas y operaciones con los datos de las tablas).

    Contenido Mínimo:
    - 5 indicadores de la fuente de datos (p.e. nombre de ciudad, país, zona horaria, etc),
    - 1 gráfico (línea, barra, pastel, etc),
    - 1 tabla (filas, columnas y datos a su elección)
    - 1 indicador resultante de las operaciones con los datos en la tabla (total, mayor, etc).

  3. Agrupe, ordene y coloque un título a las secciones (grupo de elementos relacionados entre sí) del dashboard.
  4. Modele el dashboard responsivo. Considere los siguientes ejemplos (1, 2, 3, 4 y 5) de Dribbble como referencias para ambas vistas:
    • Vista para dispositivos móviles: Un sección debajo de otra. Máximo dos elementos en una fila. Considere ocultar secciones o elementos.
    • Vista pantallas grandes: Máximo secciones en una fila. Varios elementos en una fila. Muestre todas las secciones o elementos.

Documentación

Fundamental

Términos

Typescript, superset, transpilación, Stackblitz, xml, json

Referencias