Dans cette vidéo je vais te montrer comment appeler une API de météo en Javascript (en Jquery plus exactement).
API (Application Programming Interface)
Les API (Application Programming Interface) sont des services disponibles sur le WEB en HTTP la plus par du temps. Il existe de nombreux services disponibles comme la météo, GoogleMap, Google Drive, Spotify etc. C’est le moyen d’interopérabilité préféré des développeurs et architectes.
Dans cette exemple de service d’appel météo le but est assez simple puisqu’il s’agit de faire appel a une API de météo afin de récupérer la température d’une ville.
La première chose a faire est de créer un fichier HTML et d’y inclure la librairie Jquery et notre fichier js, meteo.js ainsi qu’un bouton HTML qui va déclencher l’appel de la fonction JS. A noter la balise <p> avec un id zone_meteo qui est la zone ou l’on va renseigner la température de la météo reçue.
<!DOCTYPE html>
<html>
<head>
<title>Tuto Meteo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="meteo.js"></script>
</head>
<body>
<input type="button" value="APPEL API METEO" onclick="buttonClickGET()" />
<p id="zone_meteo">toto</p>
</body>
</html>
Ensuite il faut créer un fichier Javascript qui va contenir le code JS d’appel à l’API météo. Par exemple sur une fonction qui va être appelé sur le clique du bouton. On l’appellera buttonClickGET. Cette fonction va appeler l’URL vers l’API en HTTP GET. Plus de detail ici sur l’utilisation du http GET avec Jquery. l’URL de l’API est accessible dans un navigateur, tu peux y voir la réponse sous forme de JSON en cliquant ici
function buttonClickGET() {
var url = "https://api.openweathermap.org/data/2.5/weather?q=Paris,fr&appid=c21a75b667d6f7abb81f118dcf8d4611&units=metric"
$.get(url, callBackGetSuccess).done(function() {
//alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
//alert( "finished" );
});
}
Et enfin la fonction Callback qui va traiter la réponse. Ici la température se trouve dans l’objet data dans la branche main.temp.
var callBackGetSuccess = function(data) {
var element = document.getElementById("zone_meteo");
element.innerHTML = "La temperature est de " + data.main.temp;
}
Par le suite tu peux un ajouter un champs texte pour saisir la ville etc. Tu peux récupérer les fichiers du tuto ici.
Je suis amusé a intégré cette appel d’API de méteo dans cette article, tu peux faire le test en cliquant sur le bouton ci-dessous
pas de temperature
Ci-dessous le tuto en vidéo détaillé
