1/ Choisir son API

Il existe plusieurs API permettant de récupérer les informations concernant la météo. Pour ce tutoriel, nous avons choisi l’API de openweathermap mais libre à vous d’en prendre une autre si vous vous sentez plus à l’aise.

 

2/ Récupérer l’API

Pou récupérer l’API, vous devez vous rendre sur la page http://openweathermap.org/appid#get afin d’obtenir votre API. Cliquez sur « Sign up » et créez un nouveau compte. Indiquez par la suite le nom de votre entreprise et votre secteur d’activité.

openweather API key

Cliquez sur « API keys » afin de récupérer votre Key. Notez-la afin de pouvoir l’utiliser par la suite.

 

3/ Récupérer les données avec l’API

Vous pouvez à présent aller sur la solution PingView et créer un nouvel écran.

Allez dans « Données / Webservice » et ajoutez l’url suivante suivi de votre key:

http://api.openweathermap.org/data/2.5/weather?q=Lille&units=metric&lang=fr&appid=key

Les éléments en rouge sont ceux que vous pouvez changer en fonction de vos besoins.

Une fois l’url indiqué, cliquez sur « tester » puis déroulez le +1. Vous avez maintenant accès à l’ensemble des données de l’API.

Données API Openweather

Déroulez les menus qui vous intéressent et sélectionnez les données que vous souhaitez afficher.

Attention, lorsque vous avez le symbole [] à gauche d’une donnée, vous devez cliquer sur la flèche à droite afin d’avoir accès au sous-dossier. Sachant que chaque sous-dossier correspond à une source, il y impossible de regrouper des données de plusieurs dossiers différents.

 

Exemple

Si vous souhaitez récupérer les données concernant la température, le vent et la description du temps d’aujourd’hui, vous devez effectuer la manipulation suivante :

  • Cliquez sur +1
  • Sélectionnez « list » comme dossier racine en cliquant sur la flèche vers le bas
  • Cliquez sur +1
  • Cliquez « Main » / « Temp & « Wind » / « Speed »
  • Actualisez
  • Renommez la source et Validez
  • Créer une nouvelle source avec la même URL
  • Retournez sur « list »
  • Cliquez sur +1
  • Sélectionnez « weather » comme dossier racine en cliquant sur la flèche vers la bas
  • Cliquez sur le +1 et sélectionnez « Description »
  • Actualisez
  • Renommez la source et Validez

Vous avez à présent 2 sources de données comprenant la température, la vitesse du vent et la description du temps du jour.

 

4/ Designez l’écran

Météo sur votre écran

Voici un exemple d’écran facile à créer.

Nous avons mis une image de fond d’un ciel bleu avec quelques nuages puis nous avons créé des blocs pour le jour j et les jours +1 et +2. Il s’agit de widgets « texte » et « forme » auxquels nous avons modifié la couleur et l’opacité.

Puis nous avons lié les données des widgets « texte« . Concernant les images, elles changent en fonction de la description du temps. En effet, comme vous pouvez le constater, aujourd’hui le ciel est couvert et par conséquent nous pouvons voir un nuage. Pour cela, il suffit de mettre un widget « pile » et d’y associer plusieurs images météo (nuage, soleil, pluie..). Enfin, mettez en place des conditions d’animation pour que les images changent en temps réel.

 

Explications:

  • Créez un widget pile
  • Ajouter plusieurs images: nuage, pluie, neige, soleil et mettez-les dans le widget « pile »
  • Cliquez sur le widget « pile » puis sur « Conditions »

Conditions d'animation pour la météo

  • Créez des conditions comme dans l’exemple ci-dessus pour que chaque image apparaisse en fonction de votre source de données « Description aujourd’hui »

–> Si « source description météo aujourd’hui » contient « description source » alors « Passer à la page » « numéro de la slide de votre image correspond à la description »

  • Sauvegardez puis vérifiez en aperçu que les conditions correspondent à vos attentes

Attention, pour que les conditions fonctionnenet, il faut réécrire à l’identique ce que la source de données indique.

Vous avez à présent la météo sur votre écran en temps réel !