Aller au contenu
PandaSuite Docs

Afficher la météo du jour

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.

OpenWeather Integration Screen

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

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.

OpenWeather Website Screenshot

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.

API Documentation Screenshot

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ées 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)
API Query Strings

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.

API Key Generation

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.

Cache Management Screen

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.

Test Request Results

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.

Adding Temperature 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).

Weather Icons Example

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.

Animation Example

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.

Automatic Evaluation

Sélectionnez le composant Conditions et créez l’action au déclencheur Evaluation (01d) > Agir sur un composant > Galerie > Aller à 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.

Action Trigger Example

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 :

API Daily Forecast Documentation

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.

Adding Data Source

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.