myMeteo

L'objectif de cette activité est de voir comment récupérer des informations de météo au format json ou csv.

De nombreux sites de météo en ligne proposent de récupérer des relevés météo au format json.
Nous proposons de découvrir ici comment récupérer ces informations pour créer sa propre page météo.

Nous allons ici utiliser le site https://www.apixu.com/ mais il existe de nombreux autres sites proposant le même type de service. L’intérêt du site apixu.com est qu’il propose de récupérer le fichier via un lien sécurisé https. Cela est indispensable si on utilise du code P5JS sur OpenProcessing qui utilise lui aussi un lien sécurisé. Si vous travailler en local avec un serveur http non sécurisé vous pouvez utiliser un site météo en http également.

La première étape consiste à se créer un compte sur https://www.apixu.com/ une API key est alors générée vous permettant d’accéder au relevé météo de votre choix via une URL, comme par exemple:

https://api.apixu.com/v1/current.json?key=2483f0621c7245c2aaa182928171306&q=pordic

Ce lien permet d’accéder aux informations météo au format JSON qui se présente sous la forme suivante :

Le même code présenté par codebeautify permet d'en avoir un aperçu plus lisible :

json codebeautify du ficheir ci-dessus

Ce format reprend la structure attribut:valeur du CSS et est de type hiérarchique.
Le fichier précédent pourrait se représenter de la façon suivante :

p5jserver

Pour accéder à ce fichier json depuis P5JS il suffit d’insérer le code suivant :


  var url = 'https://api.apixu.com/v1/current.json?key=2483f0621c7245c2aaa182928171306&q=pordic';

  loadJSON(url, gotWeather);

La fonction loadJSON charge les données au format json, puis appelle la fonction gotWeather pour les traiter.

On accède, par exemple, à l’attribut wind_dir grâce au code weather.current.wind_dir qui décrit l’accès à l’information dans l’arboresence json.


function gotWeather(weather) {
  direction = weather.current.wind_dir;
  textSize(32);
  text("direction vent : "+direction, 10, 100);  

}

https://glitch.com/edit/#!/mymeteo

Exemple de base à remixer

On peut également accéder à l’historique des relevés :
http://api.apixu.com/v1/forecast.json?key=7215455c59c1478a94074003172406&q=Paris&days=5

Voir documentation du site apixu pour plus de détails.

Un autre site de météo avec format JSON possibles :

CC BY NC SA ( Christophe Béasse - Octobre 2017 )

Travail à réaliser :

Ressource à disposition :

Exemple de base à remixer