Se connecter à une API (la météo)

Se connecter à une API (la météo)

Connectez-vous à une API et récupérez des données externes dans votre application. Dans notre exemple, nous nous basons sur les données météorologiques d'une source externe (OpenWeatherMap) pour connaître le temps du jour et créer des actions en fonction de la météo.  Une application pour un musée peut ainsi inciter à la visite les jours de pluie :-)

Pour vous simplifier la vie, nous avons ce modèle prêt à l'emploi : n'hésitez pas à l'utiliser pour comprendre le fonctionnement. Dans le studio de création, vous n'avez qu'à insérer ce modèle dans un composant HTML.

Dans cet article, nous vous expliquons comment utiliser le modèle dans le studio et pour ceux qui voudraient créer leur propre lien avec une API, nous vous détaillons également sa construction.

TÉLÉCHARGER LE MODULE

 

1. Utiliser l'API météo

Une API est une interface de programmation qui permet de se « brancher » sur une application pour échanger des données. Tous les grands groupes proposent une API : Twitter, Facebook, Google Maps... Une API est ouverte et proposée par le propriétaire du programme.

Dans notre exemple, nous nous connectons à OpenWeatherMap pour connaître la météo du jour.

Dans le studio de création, insérez un composant HTML. Dans la fenêtre Propriétés du composant, sélectionnez le type HORS LIGNE, cliquez sur AJOUTER UNE SOURCE et uploadez le dossier .zip.

Sélectionnez le composant et ouvrez la fenêtre Interactivités. Ce composant comprend sept déclencheurs par défaut correspondant aux différentes conditions météorologiques. Vous pouvez ainsi créer des actions spécifiques en fonction du temps :-)

fenêtre interactivites

Si vous souhaitez créer une action liée à la météo, vous devez au préalable interroger l'API à l'aide de l'action "Obtenir la météo". Vous pouvez par exemple le faire à l'affichage de l'état courant :

obtenir la météo

Il ne vous reste plus qu'à créer les actions de votre choix. Nous avons choisi d'afficher à l'utilisateur la météo en utilisant un multi-état :

créer l'action

A vous de jouer !

 

2. Se connecter à l'API météo (avancé)

Dans cette partie, nous expliquons comment nous avons établi la connexion à l'API et configuré les paramètres de personnalisation.

 Note : Cette partie est réservée aux utilisateurs avancés qui souhaitent construire leur propre connexion à une API.

Ce dossier est composé d'un fichier index.html, du fichier panda-bridge et du fichier de description pandasuite.json :

Capture_d_e_cran_2018-03-28_a__11.29.38.png

 

 

Le fichier de description : pandasuite.json

Dans le fichier pandasuite.json, nous décrivons les propriétés qui nous permettent de créer des interactivités liées à la situation météorologique.

Nous détaillons les principaux déclencheurs qui correspondent aux situations météorologiques possibles : thunderstormdrizzlerainsnowclearclouds et other.

Chaque déclencheur dispose d'un id unique, d'un name pour le studio et d'une traduction française (locale_name ; fr_FR).

Capture_d_e_cran_2018-03-28_a__11.31.07.png

 

Nous décrivons également une action de composants, getWeather, qui permet de faire appel aux données météorologiques de l'API.

 

Capture_d_e_cran_2018-03-28_a__11.32.56.png

 

Le fichier PandaBridge

Pour que le dossier .zip communique avec le studio, il est nécessaire d'inclure ce fichier qui permet d'accéder à la classe PandaBridge et ses différentes méthodes. Il n'y a aucune modification à apporter à ce fichier.

 

Les méthodes de la classe PandaBridge

Maintenant que les propriétés ont été déclarées et que la communication a été établie, nous utilisons les méthodes de la classe PandaBridge pour envoyer et recevoir les différentes informations.

Voici les différents ajouts :

  • Insertion du script dans le header du code

Capture_d_e_cran_2018-03-28_a__11.34.32.png

  • Connexion à l'API Open Weather Map et description des déclencheurs et des actions

La méthode init permet l'initialisation, c'est elle qui va permettre d'exécuter les fonctionnalités de PandaBridge.

La méthode onLoad est appelée quand le composant se charge visuellement. Elle permet de recevoir les propriétés et les marqueurs personnalisés du composant.

Au sein de la fonction getWeather, nous avons utilisé la méthode send pour envoyer les déclencheurs précédemment décrits dans le json.  Nous nous sommes appuyés sur la valeur du code fourni par OpenWeatherMap et qui décrit toutes les situations météorologiques.

La méthode listen est utilisée pour recevoir un appel du studio : elle permet de remonter les données météorologiques.

Capture_d_e_cran_2018-03-28_a__11.38.21.png

Tout est correctement paramétré ! Nous pouvons maintenant indiquer à l'utilisateur le temps qu'il fait grâce à un composant Multi-état qui comprend les différentes météos.

Vous êtes maintenant en mesure de vous connecter à l'API de votre choix, de créer vos déclencheurs et actions personnalisés.

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !