🌤️Client Web per API Meteo

📖Obiettivo

In questa esercitazione pratica realizzeremo un’interfaccia web dinamica in HTML, CSS e JavaScript per interagire con un’API RESTful pubblica.

Imparerai ad inviare richieste HTTP asincrone (fetch), gestire la risposta JSON e mappare i codici meteo WMO in icone visive.

Questo esempio utilizza l'API di Open-Meteo (combinata con l'API di geocodifica gratuita sempre di Open-Meteo) per permettere di cercare qualsiasi città e visualizzare la temperatura attuale e la velocità del vento.

🔍 Spiegazione del Diagramma di Componente (Vista Logica)

Il diagramma di componente illustra l'architettura software del nostro client web e la suddivisione delle responsabilità tra i vari moduli:

1. Sviluppo del Front-End (HTML, CSS e JavaScript)

Per realizzare l'applicazione web è necessario sviluppare tre componenti fondamentali:

• Interfaccia Utente (index.html e style.css): definisce la struttura visiva dell'applicazione (il modulo di ricerca, le card per i risultati e i messaggi di stato) e ne gestisce la formattazione grafica.

• Logica di Controllo (script.js): gestisce gli eventi dell'utente (come il click sul pulsante "Cerca"), convalida l'input, coordina l'aggiornamento dinamico del DOM. In una prossima versione gestirà anche la mappatura dei codici meteo WMO per mostrare le relative icone.

• Modulo API (fetch manager): si occupa di orchestrare la comunicazione asincrona con i servizi esterni, gestendo le richieste di rete e la risposta in formato JSON.

2. Integrazione con l'API RESTful Open-Meteo

La comunicazione con il backend di Open-Meteo richiede due distinte chiamate HTTP di tipo GET eseguite in sequenza:

• Passo 1 — Geocodifica (Ottenere le coordinate)
  I servizi meteo lavorano tramite coordinate geografiche. La prima chiamata traduce il nome della città inserito dall'utente (es. "Roma") in latitudine e longitudine:

  • Metodo: GET

  • URL Endpoint: [https://geocoding-api.open-meteo.com/v1/search?name=Roma&count=1&language=it&format=json](https://geocoding-api.open-meteo.com/v1/search?name=Roma&count=1&language=it&format=json)

  • Risposta: Un oggetto JSON da cui estraiamo latitude e longitude.

• Passo 2 — Previsioni Meteo (Ottenere i dati meteorologici)
  Sfruttando le coordinate ottenute al Passo 1, effettuiamo la seconda chiamata per recuperare le condizioni meteo attuali:

  • Metodo: GET

  • URL Endpoint: [https://api.open-meteo.com/v1/forecast?latitude=](https://api.open-meteo.com/v1/forecast?latitude=){LAT}&longitude={LON}&current_weather=true

  • Risposta: Un oggetto JSON contenente i dati del meteo corrente (temperatura, velocità del vento e weathercode WMO).

Nota bene: gli URL sono complessi, ma alla pagina https://open-meteo.com/en/docs vengono generati automaticamente selezionando quello che si vuole ottenere tramite una semplice interfaccia grafica.

2. Stili CSS (style.css)

Un layout moderno e minimale centrato nello schermo, facile personalizzare durante la lezione.

3. Logica JavaScript (script.js)

Il codice implementa due chiamate fetch() in cascata: la prima traduce il nome della città in coordinate (Latitudine e Longitudine), la seconda ottiene il meteo usando quelle coordinate.

Punti chiave:

1. Perché usiamo encodeURIComponent()?
   Per evitare bug nel caso l'utente cerchi città con spazi o caratteri speciali (es. "Reggio Emilia" o "San José").

2. Perché servono 2 chiamate fetch()?
   Open-Meteo richiede latitudine e longitudine.
   La prima fetch converte il nome della città nelle coordinate.
   La seconda fetch tramite le coordinate recupera i dati meteo. 

3. Il blocco try...catch...finally:
   Utile per gestire gli errori senza far bloccare l'applicazione e ripristinare l'interfaccia (il bottone Cerca) indipendentemente dal risultato.