# Afficher la météo du jour > Découvrez comment afficher la météo du jour via l'API OpenWeather. https://docs.pandasuite.com/fr/essentials/data/display-current-weather/ **Découvrez comment afficher la météo actuelle dans votre application PandaSuite en récupérant des données provenant d'une API météo (Openweather). Par exemple, vous pourrez afficher la température actuelle, le temps (ensoleillé, nuageux, pluvieux), et d’autres informations météo en temps réel.** [Image : Application météo terminée : Paris à 9°C avec humidité, vent et pression, au-dessus d'une liste horizontale de prévisions] Téléchargez gratuitement le template associé à ce tutoriel : [Modèle : Paris Météo du jour](https://pandasuite.com/dashboard/use-template/Bo9M1XgBWa0-8xeEHa80) ## Obtenir la clé API ### Créer un compte gratuit Openweather [OpenWeather](https://openweathermap.org/) 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. [Image : Page d'accueil d'OpenWeather : recherche de ville et météo actuelle de Londres, 10°C et nuageux, à côté d'une carte] Créez un compte gratuit sur [OpenWeather](https://openweathermap.org/). ### Récupérer l'URL de l'API 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. - Connectez-vous à votre compte. - Rendez-vous dans la section **API**. - Choisissez **Current Weather Data** et cliquez sur le bouton **API doc** pour accéder à la [documentation technique](https://openweathermap.org/current) - Vous découvrez l'URL de l'API : [Image : Documentation Current weather data d'OpenWeather, appel par ville : api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}] - Copiez votre clé API depuis le **https:** jusqu'au **?** non inclus. Le reste correspond à des chaînes d'interrogation qui seront indiquées dans les propriétés du composant HTTP. ```plaintext https://api.openweathermap.org/data/2.5/weather ``` ### Générer votre clé API personnelle Pour générer votre clé API (app ID / API Key), rendez-vous dans votre **Compte**, section **API keys.** [Image : Onglet API keys du compte OpenWeather : la clé Default à gauche, le formulaire Create key et son bouton Generate à droite] ## Configurer l'API dans votre projet PandaSuite La connexion à une API s'effectue grâce au [composant HTTP](https://docs.pandasuite.com/fr/essentials/components/http/). ### Insérer le composant HTTP - Ouvrez votre projet - 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 Définissez les propriétés de votre composant HTTP : - **URL** : copiez-collez l'URL de l'API - **Méthode** : choisissez la méthode **GET** pour requêter de la donnée depuis l'API. - **Chaîne d'interrogation** : OpenWeather vous fournit des **Query strings** qui permettent d'attribuer des valeurs à des paramètres à votre requête API : - **q** : la ville (dans notre exemple : Paris,fr) - **appid** : correspond à votre clé personnelle API Key que vous avez généré depuis l'interface OpenWeather. - **units** : l'unité de mesure : (dans notre exemple : metric) - **lang** : la langue (dans notre exemple : fr) [Image : Tableau Parameters de la documentation OpenWeather : q et appid obligatoires, mode, units et lang facultatifs, puis exemples d'appels] - **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. [Image : Propriétés du composant HTTP : URL de l'API, méthode GET, cache Réseau et cache, chaînes d'interrogation APPID, lang, q et units] ## 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. [Image : Composant HTTP Current Weather après Test Request : réponse JSON avec coord, weather et main (temp 17.3), chaînes d'interrogation à droite] Elle vous permet de mieux comprendre la structure de données et de formaliser les bonnes formules. ## Créer un affichage personnalisé dans PandaSuite 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. ### Afficher la température - Sélectionnez le bloc de texte qui indique la température. - Rendez-vous dans les **Propriétés** et plus précisément le **Contenu** pour ajouter un data binding. - Choisissez **Depuis une source de données** > le composant **HTTP** > **main** > **temp**. Utilisez la [fonction FormatNumber](https://docs.pandasuite.com/fr/essentials/data/functions/) pour afficher la température dans le bon format. [Image : Liaison du bloc de texte 0°C à HTTP Current Weather > main > temp : la fenêtre Data liste les valeurs de main, le Contenu affiche temp °C] ### Afficher une icône météo du jour 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)**. [Image : Documentation OpenWeather des icônes météo : champ icon (10n) de la réponse de l'API et liste des codes jour et nuit (01d, 02d…)] Au lieu d'utiliser ces icônes, nous avons inséré une série d'animations After Effects dans [un composant Galerie](https://docs.pandasuite.com/fr/essentials/components/gallery/). Chaque animation correspond à une valeur météorologique. [Image : Aperçu de l'application météo : une animation de soleil et de nuage illustre le temps actuel au-dessus de 17°C, puis les prévisions] 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 : [Image : Condition 01d avec évaluation automatique : cible HTTP Current Weather égale à 01d ; la liste à droite compte une condition par code] - Renommez chaque condition avec le nom de la valeur, par exemple 01d. - Cochez la case **Evaluation automatique**. - Ajoutez une 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 au lancement du Projet. Sélectionnez le Projet et cliquez sur **Actions**. Sélectionnez **Lancement du projet > Agir sur composant > Composant HTTP > Lancer la requête.** [Image : Action du Projet : au Lancement du projet, Lancer la requête du composant HTTP Current Weather, sans délai] ### Afficher les prévisions dans 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 / liste**. #### Se connecter à l'API Daily Forecast Pour accéder aux prévisions météo, OpenWeather propose une autre API dédiée : **Daily Forecast 16 Days**. Rendez-vous dans la [documentation](https://openweathermap.org/forecast16) pour récupérer l'URL de l'API : ```plaintext https://api.openweathermap.org/data/2.5/forecast/daily ``` [Image : Documentation Daily Forecast 16 Days d'OpenWeather, appel par ville : …/data/2.5/forecast/daily?q={city name}&cnt={cnt}&appid={API key}] Insérez un nouveau **composant HTTP** et dans la fenêtre **Propriétés**, renseignez les champs suivants : - **URL** : 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 cette API. - **Chaîne d'interrogation** : indiquez les mêmes paramètres que pour l'autre API : - **q** : la ville (dans notre exemple : Paris,fr) - **app ID** : la clé API personnelle - **units** : l'unité de mesure (dans notre exemple : metric) - **lang** : la langue (dans notre exemple : fr) Cliquez sur le bouton **Editer** du composant HTTP (ou double-cliquez sur le champ visible du composant HTTP). 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 prévisions sous forme de collection Sélectionnez votre composant Collection / Liste et choisissez le composant HTTP comme source de données. Préparez un élément de liste. Pour chaque donnée, ajoutez un data binding vers l'API. [Image : Liaison de la date d'une vignette de la collection à HTTP Forecast > list > dt, avec les fonctions By Index, Multiply et Format Date]