jQuery ed AJAX: Creare un widget meteo ed inserirlo in un sito web.
In questo tutorial vedremo come creare un piccolo widget meteo che mostri la temperatura in gradi centigradi e l’icona relativa allo stato metereologico della zona/città in questione.
Per prima cosa dobbiamo appoggiarci ad un servizio che possa procurare API meteo da sfruttare per la creazione del nostro widget, ho scelto per questo esempio il sito Wunderground che offre, dopo iscrizione, dei piani gratuiti per creare dei widget meteo dai più semplici a quelli più complessi, utilizzando le API che mette a disposizione.
Dopo la registrazione vi verrà assegnata una API key composta da numeri e lettere, questa sarà fondamentale durante la creazione del widget.
Ora dobbiamo creare la nostra prima richiesta di informazioni meteo, come abbiamo detto inizialmente vogliamo avere informazioni riguardo temperatura e clima di una città, poniamo il caso sia New York, ed eseguiamo la nostra richiesta tramite un URL che ci riporterà informazioni in formato JSON:
http://api.wunderground.com/api/TUA_API_KEY/geolookup/conditions/lang:IT/q/NY/New_York.json
Copiate ed incollate l’URL sopra nel vostro browser sostituendo TUA_API_KEY con la chiave assegnata da Wunderground dopo la registrazione, come potete vedere vi compariranno una serie di dati sottoforma di elenco che mostrano informazioni riguardo New York, ma prima di proseguire analizziamo la richiesta che abbiamo fatto scomponendo l’URL sopra:
geolookup e condition: Sono due funzioni che richiamano una serie di dati, da cui andremo ad attingere per creare il nostro widget, sono sostanzialmente il cuore della richiesta API, in particolare geolookup riporta una serie di informazioni rispetto la posizione della città che si specifica, condition invece riporterà una serie di informazioni riguardo alle condizioni meteo, Wunderground mette a disposizione anche altre funzioni per ricevere ancora più dati da manipolare, una volta registrato, nella sezione Documentation potrete trovare tutto l’elenco.
Lang:IT: Permette di ricevere le informazioni in lingua italiana, La API Wunderground supportano diverse lingue.
NY e New_York sono rispettivamente lo stato e la città a cui vogliamo fare riferimento per ricevere le informazioni meteo.
Consiglio: Per visualizzare la risposta JSON in maniera più intuitiva puoi usare il browser Chrome e il plugin JSONview.
Ora che abbiamo eseguito la richiesta nel browser dobbiamo andare a prendere le informazioni di cui abbiamo bisogno, estrapolarle, ed inserirle all’interno di un div HTML, per eseguire questi passaggi possiamo usare jQuery e le sue funzioni AJAX.
Per prima cosa creiamo un file HTML e tra i tag body scriviamo un tag img dove inserire l’icona rappresentativa della situazione meteo (sole, pioggia, neve etc…), e un div con id meteo dove inserire la temperatura, lasciando al momento vuoti entrambi i tag, perchè saranno popolati tramite jQuery.
< !DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<img src=""/>
<div id="meteo"></div>
...
</body>
</html>
Il secondo passaggio è esaminare la risposta json ed estrapolare i dati che ci servono: Utilizzando l’URL di prima, nella risposta, vedremo una lista molto lunga di dati e valori ma a noi saranno sufficienti il dato city contenuto a sua volta dentro location che mostrerà come valore il termine New York, il dato icon_url contenuto dentro la voce observation che ha come valore l’URL dell’icona meteo, questo dovremo poi inserirlo dentro all’attributo src del tag img creato in precedenza, ed infine il dato temp_c contenuto dentro observation che riporterà la temperatura a NY al momento della richiesta in gradi centigradi.
Ora ritorniamo sul file HTML creato nel passaggio superiore e, tra i tag head, richiamiamo la libreria jQuery, poi apriamo un tag script ed inseriamo il codice jQuery sotto:
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
// L'URL per la richiesta API, quello che abbiamo specificato ad inizio post.
url: "http://api.wunderground.com/api/10ea0e643a3d7699/geolookup/conditions/lang:IT/q/NY/New_York.json",
// Specifica che tipo di dati sono quelli risultanti dalla richiesta.
dataType: "jsonp",
// Se la richiesta avrà successo allora estrapoliamo i dati che ci servono.
success: function(data) {
// Estrapoliamo dati e valori relaivi alla città e temperatura
// ed aggiungiamoli al div #meteo
$("#meteo").append("<p> La temperatura a " +data.location.city+ " è di: " +data.current_observation.temp_c+ " °C </p>");
// Estrapoliamo L'URL dell'icona meteo e aggiungiamolo all'attributo
// src dell'immagine con classe .icona, poi aggiungiamo il tag al div
//#meteo
$("img.icona").attr("src",data.current_observation.icon_url).prependTo('#meteo')
}
// Nel caso la richiesta fallisca facciamo qualcosa
error: function() {
alert('Errore nella ricezioni dei dati meteo.');
}
});
});
</script>
A questo punto il gioco è fatto, salvando e ricaricando la pagina HTML vedremo il nostro widget in azione ed avrà un aspetto del genere.
Probabilmente troppo spoglio, quindi per abbellirlo possiamo formattare il div meteo ed il contenuto con regole CSS:
#meteo {
font-family:arial; color:#333;
padding:10px;
background:#e2e2e2;
margin:auto;
width:410px;
border-radius:10px;
}
#meteo img{
float:left;
margin-right:20px;
}
Per vedere il risultato finale puoi eseguire il download per studiare e modificare il codice di questo tutorial.
Ancora nessuna risposta per jQuery ed AJAX: Creare un widget meteo ed inserirlo in un sito web.