JavaScript

Tema 6 · APIs – Dades obertes per a l'enginyeria

Introducció

Una API (Application Programming Interface) permet que dues aplicacions es comuniquin. A la web, moltes APIs exposen dades en format JSON. Des d'una pàgina web podem consultar APIs públiques per obtenir informació meteorològica, dades de trànsit, preus de l'energia o catàlegs tècnics, i mostrar-les en temps real al nostre panell de control.

Objectius

  • Fer peticions HTTP amb fetch() i processar la resposta JSON
  • Gestionar errors de xarxa i respostes no vàlides
  • Mostrar dades obtingudes d'una API al DOM de manera dinàmica
  • Combinar APIs amb JSON per crear petites aplicacions de monitoratge

Fetch bàsic i gestió d'errors

Exemple de consulta a una API pública de predicció meteorològica (gratuïta):

// API gratuïta d'exemple (Open-Meteo)
const url = "https://api.open-meteo.com/v1/forecast?latitude=41.38&longitude=2.17&hourly=temperature_2m&forecast_days=1";

fetch(url)
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => {
    console.log("Dades rebudes:", data);
    const temperatura = data.hourly.temperature_2m[0];
    document.getElementById("temp-actual").textContent = `${temperatura} °C`;
  })
  .catch(error => {
    document.getElementById("temp-actual").textContent = "Error en carregar dades";
    console.error("Fetch error:", error);
  });

Exemple complet: estació meteorològica web

Construir una targeta que mostri temperatura i humitat en temps real:

function carregarMeteo() {
  fetch("https://api.open-meteo.com/v1/forecast?latitude=41.38&longitude=2.17¤t=temperature_2m,relative_humidity_2m")
    .then(res => res.json())
    .then(data => {
      const t = data.current.temperature_2m;
      const h = data.current.relative_humidity_2m;
      document.getElementById("info-meteo").innerHTML =
        `<strong>Temperatura:</strong> ${t}°C <br> <strong>Humitat:</strong> ${h}%`;
    })
    .catch(err => {
      document.getElementById("info-meteo").textContent = "No disponible";
    });
}

// Cridar cada 10 minuts
setInterval(carregarMeteo, 600000);
carregarMeteo();

Exercicis

  1. Utilitza l'API d'Open-Meteo per obtenir la temperatura màxima i mínima d'avui i mostrar-les en una pàgina web.
  2. Simula una API local amb un fitxer JSON (com al tema 5) i fes servir fetch per consumir-la.
  3. Afegeix un botó "Actualitzar" que torni a consultar l'API i actualitzi la interfície sense recarregar la pàgina.

Mini Projecte – Panell de monitoratge d'energia

Dissenya un panell que consulti dades d'una API (real o simulada) per mostrar informació rellevant per a un enginyer:

  • Tria una API pública (meteorològica, preu de l'electricitat, qualitat de l'aire...) o crea'n una de simulada amb un JSON local.
  • Fes una petició amb fetch() i mostra les dades principals en targetes (cards) amb CSS.
  • Inclou un indicador visual (color, icona) que canviï segons el valor (per exemple, verd si la temperatura és òptima, vermell si és extrema).
  • Actualitza automàticament cada 5 minuts o mitjançant un botó "Actualitzar".

Documenta el codi perquè un company pugui canviar fàcilment l'API utilitzada.

Tema 5 Índex Tema 7