Connect to an API and get external data in your application. In this example, you'll receive daily weather data from an external source (OpenWeatherMap) and create actions based on the weather. That's how you'll be able to push a custom message for your museum on rainy days :-)
To make it easier, you'll find here a ready-to-use module. Don't hesitate to use it to understand how it works. You just have to upload this module in an HTML component.
In this article, we explain how to use the model in the studio and for those who want to create their own link with an API, we also detail you build it.
1. Use the Weather API
An API is an application programming interface that allows to "plug" on an application to exchange data. All major groups provide APIs: Twitter, Facebook, Google Maps ... An API is open and offered by the program owner.
In our example, we connect to OpenWeatherMap to get the weather of the day.
In the studio, insert an HTML component. In the Properties window, select the type OFFLINE, click ADD SOURCE and upload the .zip file.
Select the component and open the Interactivities window. This component includes seven default triggers corresponding to each weather condition. You can create specific actions according to the weather of the day :-)
If you want to create an action related to the weather, you must first ask the API using the action "Get the weather." For example when displaying the current state:
It'll just create the desired actions. We chose to display to the user the weather using a multi-state:
Now it's your turn!
2. Connect to the Weather API (advanced)
In this section, we explain how to connect to the API and configure the customization settings.
Note : This section is for advanced users who want to connect to another API.
This file is composed of an index.html file, the Panda-bridge file and the pandasuite.json file:
The pandasuite.json file
The pandasuite.json file describes the properties used to create interactivity related to the weather situation.
We detail the key triggers that correspond to the possible weather conditions: thunderstorm, drizzle, rain, snow, clear, clouds and other.
Each trigger has a unique id, a name in the studio and a French translation (locale_name; fr_FR).
We also describe the getWeather component action, which allows to use the API weather data.
The file PandaBridge
The PandaBridge makes it easy to communicate between the HTML component and the application, in terms of transmission and reception. You must insert this file in your .zip file.
There are no changes required.
The methods of the PandaBridge class
Now that the properties have been declared and that communication has been established, we use the methods of PandaBridge class to send and receive different information.
Here are the different additions:
- Insert the script code in the header
- Login API Open Weather Map and description of triggers and actions
The init method allows the initialization, it is what will allow to perform the functionality of PandaBridge.
The onLoad method is called when the component is visually supported. It can receive properties and custom markers component.
Within the getWeather function, we used the send method to send triggers previously described in json. We relied on the code value provided by OpenWeatherMap and describes all weather situations.
The listen method is used to receive a call from the studio: it allows up weather data.
Everything is set correctly! We can now tell the user what the weather is through a multi-state component that comprises the different weather.
You are now able to connect to the API of your choice, create your custom triggers and actions.
