Se connecter à l'API OpenWeather

Vous pouvez afficher les données météorologiques du jour et la prévision de prochains jours dans votre application en vous connectant à l'API d'OpenWeather. La connexion API s'effectue grâce au composant HTTP.

Pour ce tutoriel, nous détaillerons l'application Paris Weather App. 

Dans cet article

Créer un compte OpenWeather

OpenWeather est un service en ligne accessible gratuitement permettant d'accéder aux prévisions météo d'une ville. Il propose différentes APIs pour obtenir les données météorologiques d'une localisation. 

Créez un compte gratuit sur OpenWeather

OpenWeather vous propose différentes APIs pour obtenir les données météorologiques d'une localisation. Nous allons faire appel à l' API Current Weather pour obtenir la météo du jour, puis à l'API Daily Forecast pour afficher la prévision des prochains jours.

Afficher la météo du jour 

Nous avons préparé notre écran affichant la météo du jour et la température. L'objectif est désormais de se connecter à l'API Current Weather pour afficher les bonnes données. 

Insérer un composant HTTP

La connexion à une API s'effectue grâce au composant HTTP.

De retour dans PandaSuite Studio, cliquez sur  Composants et insérez un composant HTTP

Le mieux est de placer ce composant dans l'avant-plan pour qu'il puisse être actif et interrogé depuis n'importe quel écran de l'application. Sinon, placez-le dans l'écran dans lequel se trouvent ces données.

Paramétrer le composant HTTP

Ouvrez la fenêtre  Propriétés

URL

Rendez-vous dans la documentation technique de l'API Current Weather pour obtenir son URL.

L'URL se présente sous la forme suivante : 

https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

Dans laquelle {city name} est le nom de la ville et {API key} votre clé API personnelle.

Copiez-collez l'URL de référence de l'API depuis le https: jusqu'au ? non inclus, le reste correspond à des chaînes d'interrogation qui seront indiqués plus bas :

https://api.openweathermap.org/data/2.5/weather

Méthode

Choisissez la méthode  GET pour requêter de la donnée depuis l'API.

Chaîne d'interrogation / Query Strings

OpenWeather vous fournit des Query strings qui permettent d'attribuer des valeurs à des paramètres à votre requête API : 

  • la ville : q (dans notre exemple : Paris,fr)
  • l'app ID : appid
  • l'unité de mesure : units (dans notre exemple : metric)
  • et la langue : lang (dans notre exemple : fr) 

L'app ID (appid) correspond à votre clé personnelle API Key que vous générez depuis l'interface OpenWeather.

Pour générer votre app ID / API Key, rendez-vous dans votre Compte, section API keys.

Gestion du cache

Vous avez également la possibilité de personnaliser la mise en cache. Cliquez sur Réseau et cache pour que l'application retourne le contenu du cache mais fasse tout de même la requête afin de le mettre à jour. Cette option permet d’avoir une réponse rapide.

Tester la requête

Désormais il faut tester si votre connexion a été correctement configurée.

Cliquez sur le bouton  Editer du composant HTTP (ou double-cliquez sur le champ visible du composant HTTP).

Des informations apparaissent. Cliquez sur le bouton   Test Request.

Visualisez les résultats de votre requête : si les données brutes correspondent à votre souhait, l'API a été correctement configurée.

Elle vous permet de mieux comprendre la structure de données et de formaliser les bonnes formules.

Afficher les données

Associer une variable sur la température

Sélectionnez le bloc de texte qui indique la température. Dans la fenêtre   Propriétés, cliquez sur l'icône en haut et à droite et le bouton Ajouter > Source.

Copiez-collez la formule suivante :

[data:ID_HTTP(/main/temp/@formatNumber:maximumFractionDigits|0)]°C

Détail de la fonction : 

  • ID_HTTP est l'identifiant du composant HTTP. Double-cliquez sur le nom du composant HTTP depuis la fenêtre Propriétés pour obtenir cet identifiant. 
  • main/temp est le moyen d'accéder à la valeur de la température
  • @formatNumber permet d'afficher un nombre naturellement en fonction de la langue du projet.

Pour retrouver toutes les fonctions, consultez ce tutoriel.

Afficher la météo du jour grâce aux conditions

OpenWeather fournit l'information de la météo du jour depuis son API à l'aide du champ  icon. Ce champ icon a différentes valeurs (01d, 02d, 10n etc...) correspondant aux différentes situations météorologiques : clear sky, few clouds, scattered clouds...

Par exemple  10n est associé à light rain (faible pluie).

Au lieu d'utiliser ces icônes, nous avons inséré une série d'animations After Effects dans un composant Galerie. Chaque animation correspond à une valeur météorologique.

L'objectif est d'afficher la bonne animation en fonction de la valeur remontée par l'API.

Insérez un composant  Conditions. Dans la fenêtre  Propriétés, créez une condition pour chaque valeur :

Donnée : [data:D_HTTP(/weather/0/icon)]
Fonction : Egal à 
Valeur : 01d

Renommez chaque condition avec le nom de la valeur, par exemple 01d.

Cochez la case  Evaluation automatique

Sélectionnez le composant Conditions et créez l'action au déclencheur  Evaluation (01d) > Agir sur un composant > GalerieAller à la page sélectionnée (01d) .

Lancer la requête

Il vous faut créer l'action de requête à l'API depuis votre application. Pour qu'elle se fasse automatiquement, nous choisissons de le faire à l'affichage de l'avant-plan.

Sélectionnez l'avant-plan et cliquez sur  Actions.

Sélectionnez   Affichage courant > Agir sur composant > Composant HTTP > Lancer la requête

Afficher les prévisions dans une collection

Créer une collection

Dans notre exemple, nous affichons les prévisions météo dans une liste horizontale et sous la forme de vignettes comprenant la date du jour, une icône et les moyennes de température. 

Cette liste a été créée visuellement grâce à un composant Collection

Se connecter à l'API Daily Forecast

Pour accéder aux prévisions météo, OpenWeather propose une API dédiée :  Daily Forecast. Pour se connecter à une nouvelle API, il vous faut insérer un nouveau composant HTTP. 

Insérez un nouveau composant HTTP et dans la fenêtre Propriétés, renseignez les champs suivants : 

URL

https://api.openweathermap.org/data/2.5/forecast/daily

Vous trouvez cette URL dans la documentation technique d'OpenWeather :

Méthode

Choisissez la méthode   GET pour requêter de la donnée depuis l'API.

Chaîne d'interrogation / Query Strings

Indiquez les mêmes paramètres que pour l'autre API : 

  • la ville : q (dans notre exemple : Paris,fr)
  • l'app ID : appid
  • l'unité de mesure : units (dans notre exemple : metric)
  • et la langue : lang (dans notre exemple : fr) 

Tester la connexion à l'API

Cliquez sur le bouton  Editer du composant HTTP (ou double-cliquez sur le champ visible du composant HTTP).

Des informations apparaissent.

Cliquez sur le bouton   Test Request.

Visualisez les résultats de votre requête : si les données brutes correspondent à votre souhait, l'API a été correctement configurée.

Afficher les données

Connectez chaque élément de votre liste à la source de données, c'est-à-dire à l'API.

Par exemple, sélectionnez la date.

Dans la fenêtre Propriétés, cliquez sur l'icône de données dynamiques en haut et à droite et le bouton Ajouter.

Copiez-collez la formule suivante :

[data:ID_HTTP(/list/@getByIndex:[data:(rowIndex)]/dt/@multiply:1000/@formatDate:dateStyle|medium)]

Pour retrouver toutes les fonctions, consultez ce tutoriel.

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous