Voici mon retour sur l'utilisation d'une API: OpenWeatherMap
Une API qui permet d'obtenir les informations météorologiques.
1°) Se connecter
2°) Demander une Clef
3°) Trouver sa localisation
4°) Creer sa requete
5°) Le code
1°) Se connecter
https://home.openweathermap.org/users/sign_up
Créer un compte c'est rapide et gratuit (sur ce que l'on veux faire)
2°) Demander une Clef
Se connecter avec son compte et demander une Clef:
https://home.openweathermap.org/api_keys
(32 Hexas)
3°)Trouver sa localisation:
On télécharge le fichier suivant: http://bulk.openweathermap.org/sample/city.list.json.gz
On le dézippe et ouvre le fichier avec excel (Oui quand même l'ouvrir)
Ctrl-F, on cherche PARIS, on reprend le code juste au dessus: 6455259
4°) Creer sa requete
Une fois la requête créer il ne restera plus qu'a la mettre dans le navigateur
Voici le début de la requête :
http://api.openweathermap.org/data/2.5/weather
Ensuite on cherche la localisation (voir paragraphe 3)
?id=6455259
Ici on ajoute la clef (voir paragraphe 2)
&APPID=1234567890abcdef1234567890abcdef
Ici on choisi la langue
&lang=fr
Ici les unités (Farenheit ou Celcius)
&units=metric
5°) Le code
C'est en regardant la vidéo de Anthony Welc que j'ai voulu reproduire ce qu'il avait fait et l'adapter à mon tour.
https://www.youtube.com/watch?v=nop5geuxP3s
Voici mon code: (sans ma clef ou ma localisation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>API Meteo</title></head>
<body>
https://www.youtube.com/watch?v=nop5geuxP3s
exemple Requete:<br>
<script>
window.fetch('http://api.openweathermap.org/data/2.5/weather?id=6444014&APPID=18dd96c0cfb2f065d69889c070e03ee4&lang=fr&units=metric')
.then(res => res.json())
.then(resJson => {
document.write(resJson.name);
document.write("<br>");
document.write(resJson.weather[0].description);
document.write("<br>min: "+ resJson.main.temp_min + " max: " + resJson.main.temp_max + " now: " + resJson.main.temp);
document.write("<br>Humidite: " + resJson.main.humidity);
heureleve=new Date(resJson.sys.sunrise*1000)
heurecouche=new Date(resJson.sys.sunset*1000)
document.write("<br>");
document.write("Leve: "+ heureleve.toLocaleTimeString('fr-FR') + " Couche: " + heurecouche.toLocaleTimeString('fr-FR'));
})
//console.log(window.navigator);
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire