Se stai muovendo i primi passi nel mondo dello sviluppo frontend o vuoi consolidare le tue conoscenze su come interagire con servizi esterni, creare una semplice app meteo con JavaScript è l’esercizio perfetto. Ti permette di toccare con mano concetti fondamentali come l’integrazione di API esterne, la gestione dei dati asincroni e la manipolazione del DOM. In questo articolo, ti guideremo passo dopo passo nella realizzazione di una versione base della tua personalissima applicazione meteo.
Questo progetto ti darà una solida base per comprendere come i siti web moderni recuperano e mostrano dati dinamici, un’abilità essenziale per qualsiasi developer frontend.
Cos’è un’API e perché ci serve per un’app meteo
API sta per “Application Programming Interface”. In termini semplici, pensa a un’API come a un cameriere in un ristorante. Tu (il tuo codice JavaScript) sei il cliente che ordina il cibo (chiede dati meteo) dalla cucina (il server che ospita i dati meteo). Il cameriere (l’API) prende il tuo ordine, lo porta in cucina, attende che sia pronto e ti riporta indietro il piatto (i dati meteo).
Nel nostro caso, l’API meteo è un servizio web che ci fornisce informazioni aggiornate sul tempo in diverse località del mondo. Invece di dover raccogliere e mantenere noi stessi enormi database di dati meteo, ci affidiamo a un provider esterno che lo fa per noi, accedendo ai dati tramite una richiesta standard (solitamente HTTP). L’API risponderà con i dati richiesti in un formato strutturato, tipicamente JSON, che il nostro JavaScript saprà leggere e utilizzare.
Per approfondire l’argomento API in ambito frontend, ti consigliamo la lettura del nostro articolo su Come integrare un’API pubblica in un progetto frontend.
Scegliere l’API Meteo Gratuita
Ci sono diverse API meteo disponibili, molte delle quali offrono un piano gratuito sufficiente per scopi didattici o progetti base. Alcune delle più popolari includono:
- OpenWeatherMap: Offre un piano gratuito con accesso ai dati meteo attuali e previsioni. È molto diffusa e ben documentata.
- WeatherAPI: Un’altra ottima opzione con un piano gratuito che copre molte delle esigenze di un’app base.
Per questo tutorial, useremo OpenWeatherMap per la sua semplicità e popolarità, ma i concetti si applicano a qualsiasi API meteo. Ti invitiamo a esplorare la documentazione ufficiale di quella che scegliete.
Ottenere una API Key
Le API, specialmente quelle che forniscono dati in tempo reale, richiedono quasi sempre una chiave di autenticazione (API Key). Questa chiave è una stringa univoca che identifica la tua applicazione quando fai una richiesta all’API. Serve al provider per monitorare l’utilizzo e prevenire abusi.
Il processo per ottenere una API Key è solitamente semplice:
- Vai sul sito del provider scelto (es. OpenWeatherMap).
- Registrati per un account gratuito.
- Nella tua dashboard o profilo utente, troverai la tua API Key.
Importante: Per un’applicazione lato server, dovresti sempre mantenere la tua API Key al sicuro e non esporla nel codice frontend. Per un’app molto semplice come questa che gira solo nel browser, l’API Key sarà visibile nel codice sorgente. Sii consapevole di questo rischio per progetti reali e valuta soluzioni backend.
Struttura del Progetto: HTML + CSS + JS Base
Iniziamo creando la struttura base dei nostri file:
Bash
app-meteo/
├── index.html
├── style.css
└── script.js
index.html: Contiene la struttura HTML dell’applicazione. Avrà un campo input per la città, un bottone per cercare e un’area dove visualizzare i risultati meteo.style.css: Useremo questo file per aggiungere un po’ di stile, giusto per rendere l’interfaccia usabile.script.js: Qui risiederà la logica principale: gestire l’input dell’utente, chiamare l’API e aggiornare la pagina.
Scrivere il Codice per la Nostra App Meteo con JavaScript
Passiamo ora al cuore del progetto: il codice.
La Struttura HTML
Apri index.html e inserisci il seguente codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Meteo Semplice</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="weather-app">
<h1>App Meteo</h1>
<div class="search-box">
<input type="text" id="city-input" placeholder="Inserisci città">
<button id="search-button">Cerca</button>
</div>
<div class="weather-info" id="weather-info">
</div>
<p id="error-message" class="error"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Abbiamo un titolo, un div per la ricerca con un input e un bottone, un div vuoto dove mostreremo i dati meteo e un paragrafo per eventuali messaggi di errore. Abbiamo assegnato degli ID agli elementi chiave (city-input, search-button, weather-info, error-message) per poterli facilmente selezionare con JavaScript.
Il CSS (Base)
Apri style.css e aggiungi un po’ di stile per centrare il contenuto e migliorare la leggibilità:
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.weather-app {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 400px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.search-box input {
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.search-box button {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
.search-box button:hover {
background-color: #4cae4c;
}
.weather-info {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
min-height: 100px; /* Per mantenere lo spazio anche vuoto */
}
.error {
color: #d9534f;
margin-top: 15px;
}
Questo CSS fornisce una presentazione pulita e centrata per l’applicazione.
Il JavaScript: Recuperare i Dati dall’API
Ora, apri script.js. Dobbiamo innanzitutto selezionare gli elementi HTML e definire la nostra API Key e l’URL base dell’API.
const cityInput = document.getElementById('city-input');
const searchButton = document.getElementById('search-button');
const weatherInfoDiv = document.getElementById('weather-info');
const errorMessageP = document.getElementById('error-message');
// SOSTITUISCI 'LA_TUA_API_KEY' con la tua chiave OpenWeatherMap
const API_KEY = 'LA_TUA_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';
// Funzione per recuperare i dati meteo
async function fetchWeather(city) {
// Pulisce i risultati precedenti e i messaggi di errore
weatherInfoDiv.innerHTML = '';
errorMessageP.textContent = '';
if (!city) {
errorMessageP.textContent = 'Per favore, inserisci una città.';
return;
}
const url = `${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric&lang=it`; // units=metric per Celsius, lang=it per l'italiano
try {
const response = await fetch(url); // Esegui la richiesta. Fetch è asincrono!
// Controlla se la risposta HTTP è OK (status 200-299)
if (!response.ok) {
// Leggi il messaggio di errore dall'API se disponibile
let errorText = response.statusText;
try {
const errorData = await response.json();
if (errorData.message) {
errorText = errorData.message;
}
} catch (jsonError) {
// Se non riesci a parsare JSON, usa il testo dello status
console.error("Could not parse error JSON:", jsonError);
}
throw new Error(`Errore HTTP: ${response.status} - ${errorText}`);
}
const data = await response.json(); // Parsifica la risposta JSON
displayWeather(data); // Chiama la funzione per mostrare i dati
} catch (error) {
// Gestisce errori di rete o errori HTTP
console.error("Errore nel recupero dati:", error);
// Mostra un messaggio più amichevole all'utente
if (error.message.includes('404')) {
errorMessageP.textContent = `Città non trovata. Controlla il nome e riprova.`;
} else if (error.message.includes('401')) {
errorMessageP.textContent = `Errore di autenticazione: API Key non valida o mancante.`;
}
else {
errorMessageP.textContent = `Si è verificato un errore: ${error.message}`;
}
weatherInfoDiv.innerHTML = ''; // Assicurati che non ci siano dati vecchi
}
}
// Funzione per mostrare i dati meteo nell'HTML
function displayWeather(data) {
// Assicurati che i dati siano validi e lo status API sia 200
if (!data || data.cod != 200) { // Usiamo == 200 perché 'cod' può essere un numero o una stringa a seconda dell'API
errorMessageP.textContent = data.message || 'Impossibile mostrare i dati meteo per questa città.';
weatherInfoDiv.innerHTML = '';
return;
}
const weatherDescription = data.weather[0].description;
const temperature = data.main.temp;
const cityName = data.name;
const country = data.sys.country;
const iconCode = data.weather[0].icon;
const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@2x.png`; // URL per l'icona
weatherInfoDiv.innerHTML = `
<h2>${cityName}, ${country}</h2>
<img src="${iconUrl}" alt="${weatherDescription}">
<p>Descrizione: ${weatherDescription}</p>
<p>Temperatura: ${temperature}°C</p>
`;
}
// Aggiungi l'evento al bottone
searchButton.addEventListener('click', () => {
const city = cityInput.value.trim(); // Prendi il valore dall'input e rimuovi spazi bianchi
fetchWeather(city); // Chiama la funzione per recuperare i dati
});
// Opzionale: Permetti la ricerca premendo Invio nell'input field
cityInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
event.preventDefault(); // Evita il submit del form se l'input fosse in un form
searchButton.click(); // Simula il click sul bottone
}
});
Analizziamo il codice JavaScript:
- Selezione Elementi: Otteniamo i riferimenti agli elementi HTML con
document.getElementById. - Configurazione API: Definiamo
API_KEYeBASE_URL. Ricorda di sostituire'LA_TUA_API_KEY'con la tua chiave reale ottenuta da OpenWeatherMap. WorkspaceWeather(city)Function:- È una funzione
asyncperché useremoawaitconWorkspace. Puoi leggere di più su Async Await in JavaScript. - Pulisce l’area risultati e l’area errori ad ogni nuova ricerca.
- Verifica se l’input della città è vuoto e mostra un messaggio di errore se lo è.
- Costruisce l’URL completo per la richiesta API, includendo la città, la chiave API, richiedendo unità metriche (°C) e la lingua italiana.
- Usa
Workspace(url)per inviare la richiesta HTTP.awaitmette in pausa l’esecuzione fino a quando la risposta non arriva. Per una guida completa suWorkspace, consulta Come gestire le richieste API con Fetch in JavaScript. - Controlla
response.ok: Questa proprietà ètruese lo status HTTP è 200-299. Se non è OK, c’è stato un errore HTTP (es. 404 Città non trovata, 401 API Key non valida). Gestiamo questi casi provando a leggere un messaggio di errore dalla risposta JSON dell’API e lanciando unErrorpersonalizzato. await response.json(): Parsifica il corpo della risposta come JSON. Anche questo è un’operazione asincrona.- Chiama
displayWeather(data)per mostrare i dati ottenuti. - Usa un blocco
try...catchper gestire eventuali errori durante ilWorkspace(es. problemi di rete) o gli errori lanciati dal controlloresponse.ok. Vengono mostrati messaggi di errore più specifici in base al tipo di errore HTTP catturato.
- È una funzione
displayWeather(data)Function:- Riceve l’oggetto
datadalla risposta API. - Verifica se i dati sono validi e se lo status code nell’oggetto
data(OpenWeatherMap usadata.cod) indica successo (solitamente 200). - Estrae le informazioni rilevanti dall’oggetto
data(descrizione, temperatura, nome città, paese, codice icona). La struttura esatta dipende dall’API, quindi è fondamentale consultare la sua documentazione. - Costruisce una stringa HTML con le informazioni e la inserisce nel div
weather-infousandoinnerHTML. Puoi leggere di più sulla manipolazione del DOM e suinnerHTMLvstextContentqui: Cos’è il DOM e come manipolarlo in JavaScript e Differenza tra innerText e innerHTML in JavaScript.
- Riceve l’oggetto
- Gestione Eventi:
- Aggiungiamo un event listener al bottone “Cerca” che chiama
WorkspaceWeathercon il valore corrente dell’input field. Puoi imparare di più su come gestire gli eventi in JavaScript qui: Come gestire eventi in JavaScript con addEventListener. - Aggiungiamo un listener all’input field per permettere la ricerca premendo il tasto Invio.
- Aggiungiamo un event listener al bottone “Cerca” che chiama
Ecco fatto! Collegando i file HTML, CSS e JS e aprendo index.html nel browser (ricordati di sostituire la API Key!), dovresti avere una app meteo con JavaScript funzionante.
Gestire gli Errori
Nel codice WorkspaceWeather, abbiamo implementato una gestione base degli errori utilizzando try...catch e controllando response.ok. È cruciale informare l’utente quando qualcosa va storto (città non trovata, problemi di rete, API Key non valida, ecc.) invece di lasciare semplicemente l’app bloccata o vuota. Mostrare messaggi chiari migliora l’esperienza utente.
Estensioni e Miglioramenti Futuri
Questa è solo una base. Ci sono moltissimi modi per migliorare la tua app meteo con JavaScript:
- Geolocalizzazione: Utilizza l’API
navigator.geolocationdel browser per ottenere la posizione dell’utente e mostrare automaticamente il meteo della sua località attuale. - Loading Spinner: Aggiungi un indicatore visivo mentre l’applicazione sta recuperando i dati dall’API per migliorare l’esperienza utente. Potresti usare un semplice CSS spinner o esplorare soluzioni più avanzate.
- Previsioni Future: Estendi l’applicazione per mostrare le previsioni per i prossimi giorni, attingendo a un endpoint diverso dell’API meteo.
- Grafici: Visualizza le variazioni di temperatura o precipitazioni nel tempo usando librerie di grafici come Chart.js.
- Miglioramenti UI/UX: Aggiungi icone meteo più elaborate, sfondi dinamici in base al tempo, e cura il responsive design per adattare l’app a diverse dimensioni di schermo.
- Memorizzazione: Salva le città cercate di recente usando
localStorage. (Vedi Come utilizzare localStorage e sessionStorage per gestire i dati in JavaScript).
Questi miglioramenti ti daranno l’opportunità di esplorare ulteriormente le capacità di JavaScript e le interazioni con le API.
Conclusione
Hai appena creato la base di una app meteo con JavaScript, imparando a interagire con un servizio esterno tramite API. Hai utilizzato Workspace per fare richieste HTTP asincrone, gestito le risposte (e gli errori!) e aggiornato dinamicamente l’interfaccia utente manipolando il DOM.
Questi sono concetti pilastro dello sviluppo frontend moderno. Continua a sperimentare con l’API scelta, prova ad aggiungere le funzionalità suggerite nella sezione “Estensioni e Miglioramenti” e approfondisci argomenti come la gestione del codice asincrono in JavaScript e l’uso avanzato delle Fetch API. La pratica è fondamentale per padroneggiare lo sviluppo web!
Buona programmazione!
