Connect to the OpenWeather API

Select the text block that indicates the temperature. In the window Properties, Click on the icon at the top right and the button Add > Source.

Automatic forecasts in Paris for your site

You can call on the infoclimat API, which will return you the detailed forecasts for this city.
We just ask you to specify the source, in the form of a link to www.infoclimate.fr, in your applications or pages using this data.

This API is limited to a reasonable and non -commercial use. Is considered reasonable a use of less than 5.000 queries in 24 hours and less than one request per second, for all forecast API.
You will have to make sure you do not exceed this limit, or your access will be automatically locked (in this case you will receive an ERTP error message 509 Bandwidth Limit Exceeded)). Please respect our service offered to you for free, without advertising, by an association of volunteers. If your needs are higher (in terms of the number of requests or parameters available), please contact us beforehand.
If the authentication key is wrong, the message 400 Bad Request will be returned. If the run is being released and data not available, the code will be 409 Conflict.
We advise you to always check the “Request_State” setting before processing data, this will avoid raising your applications in the event of a problem.

• • Contact us / US contact
  • Become volunteer or employee
  • Who are we ? What do we do ?
  • Legal Notice
  • ∞
  • Meteo-time-Reel.FR – Weather in real -time
  • Weather archive search engine
  • The weather in Ventoux
  • The association
  • The forums
  • Android
  • iOS
  • ∞
  • Infoclimat is a brand registered under number 053372184
  • Site declared to the CNIL (875366) | SIRET: 45386074400037
  • Infoclimat is a non -profit 1901 law association

  Connect to the OpenWeather API

  You can display the weather data of the day and the forecast of next days in your application by connecting to the openweather API. The API connection is made thanks to the HTTP component.

  

  For this tutorial, we will detail the Paris Weather app application.

  In this article

  • Create an OpenWeather account
  • Display the weather forecast
  • Show forecasts in a collection

  Create an OpenWeather account

  OpenWeather is an online service accessible for free allowing access to the weather forecast for a city. It offers different APIs to obtain weather data from a location.

  

  Create a free account on openweather

  Openweather offers you different APIs to obtain weather data from a location. We will call on the API CURRENT WEATHER To get the weather of the day, then at theAPI Daily Forecast To display the forecast for the next few days.

  Display the weather forecast

  We have prepared our screen displaying the weather and the temperature. The objective is now to connect to the Weather API Current to display the right data.

  Insert an HTTP component

  Connection to an API is made thanks to the HTTP component.

  Back in Pandasuite Studio, click on Components and insert a component Http.

  The best is to place this component in the foreground so that it can be active and questioned from any screen of the application. Otherwise, place it in the screen in which these data are located.

  Configure the HTTP component

  Open the window Properties.

  URL

  Go to the Technical Documentation of the Weather API Current to get his URL.

  

  The URL is in the following form:

  https: // API.OpenWeatherMap.Org/Data/2.5/Weather?q = & appid =

  In which is the name of the city and your personal api key.

  Copy the API reference URL from the HTTPS: until ? Not included, the rest corresponds to question chains which will be indicated below:

  https: // API.OpenWeatherMap.Org/Data/2.5/Weather

  Method

  Choose the method Get to require data from the API.

  Question chain / query thongs

  OpenWeather provides you Query thongs which make it possible to attribute values ​​to parameters to your API request:

  • the city : q (in our example: Paris, FR)
  • The app id: appid
  • The unit of measurement: units (in our example: Metric)
  • and language: lang (in our example: FR)

  

  The ID AP (Appid) corresponds to your personal key API Key that you generate from the OpenWeather interface.

  To generate your ID / API Key app, go to your Account, section Keys API.

  

  Cache management

  You can also personalize the chatter. Click on Network and cache so that the application returns the content of the cache but still makes the request in order to update it. This option allows you to have a quick response.

  

  Test the request

  Now you have to test if your connection has been properly configured.

  Click on the button Edit of the HTTP component (or double-click on the visible field of the HTTP component).

  Information appears. Click on the button Request test.

  Visualize the results of your request: if the raw data correspond to your wish, the API has been properly configured.

  

  It allows you to better understand the data structure and to formalize the right formulas.

  Display data

  Associate a variable on the temperature

  Select the text block that indicates the temperature. In the window Properties, Click on the icon at the top right and the button Add > Source.

  

  Copy the following formula:

  [Data: ID_HTTP (/Main/Temp/@FormatNumber: Maximum FractionDigits | 0)] ° C

  Detail of the function:

  • ID_HTTP is the HTTP component identifier. Double-click on the name of the HTTP component from the Properties window to obtain this identifier.
  • Main/Temp eSt The means of accessing the temperature value
  • @formatnumber allows you to display a number naturally depending on the language language.

  To find all the functions, see this tutorial.

  Show the weather for the day thanks to the conditions

  OpenWeather provides information on the weather from the day from its API using the field icon. This field icon To different values ​​(01D, 02D, 10N etc. ) corresponding to the different weather situations: Clear Sky, Few Clouds, Scattered Clouds.

  For example 10n is associated with Light Rain (Low rain).

  

  Instead of using these icons, we have inserted a series of After Effects animations in a gallery component. Each animation corresponds to a weather value.

  

  The objective is to display the right animation according to the value raised by the API.

  Insert a component Terms. In the window Properties, Create a condition for each value:

  Data: [Data: d_http (/weather/0/icon)] Function: EGAL at value: 01D

  Rename each condition with the name of the value, for example 01D.

  Check the box Automatic evaluation

  

  Select the Conditions and Create the action with the trigger Evaluation (01D) > Act on a component > Gallery > Go to the selected page (01D) .

  Launch the request

  You need to create the API query action from your application. In order for it to do automatically, we choose to do so when displaying the foreground.

  Select the foreground and click on Actions.

  Select Current display > Act on component > HTTP component > Launch the request

  

  Show forecasts in a collection

  Create a collection

  In our example, we display the weather forecast in a horizontal list and in the form of stickers including the date of the day, an icon and the averages of temperature.

  This list was created visually thanks to a component Collection.

  Connect to the Daily Forecast API

  To access the weather forecasts, OpenWeather offers a dedicated API: Daily Forecast. To connect to a new API, you must insert a new HTTP component.

  Insert a new HTTP component and in the window Properties, Inform the following fields:

  URL

  https: // API.OpenWeatherMap.Org/Data/2.5/Forecast/Daily

  You find this URL in the technical documentation of Openweather:

  

  Method

  Choose the method Get to require data from the API.

  Question chain / query thongs

  Indicate the same parameters as for the other API:

  • The city: Q (in our example: Paris, FR)
  • The ID app: Appid
  • The unit of measurement: Units (in our example: Metric)
  • and language: Lang (in our example: FR)

  Test the API connection

  Click on the button Edit of the HTTP component (or double-click on the visible field of the HTTP component).

  Information appears.

  Click on the button Request test.

  Visualize the results of your request: if the raw data correspond to your wish, the API has been properly configured.

  Display data

  Connect each element of your list to the data source, that is to say to the API.

  For example, select the date.

  In the window Properties, Click on the dynamic data icon at the top right and the button Add.

  

  Copy the following formula:

  [Data: Id_HTTP (/List/@Getbyindex: [Data: (Rowindex)]/Dt/@multiply: 1000/@Formatdate: Datestyle | Medium)]]

  To find all the functions, see this tutorial.

  This has answered your question ?

  Thank you for the comments there was a problem to submit your comments. please try again later.