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 > 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
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.