Weather App
In this tutorial, we will create an application that will leverage OpenWeatherMap plugin to access and display weather information
This web application will first get the localization of the user, get weather information at this location (using latitude and longitude) and display the information (weather condition with an icon and temperature).
Weather Application using OpenWeatherMap Plugin
We use a flexbox vertical layout for the Body container and we center all the children elements.
We will use a limited set of Interface elements for this app:
- A header element at the top with "My Weather App"
- A text element with the location name
- An image describing weather conditions
- A text describing weather conditions
- A text with temperature
We group all the elements except the header in another container with a flexbox layout and we center all its children horizontally and vertically. In the "Flex Child" section in the style editor of this container, we set the property Grow to 1 to make it use all the vertical remaining space:
Layout of the Weather App
Most of the information displayed on this page is dynamic. It will be loaded from the OpenWeatherMap data using a plugin. We will need to create the following variables to store dynamic data:
- Location Name: (type: text) the name of the user's location obtained using browser current location tool
- Weather Image: (type: image) the icon to describe the current weather
- Weather Label: (type: text) a description of the current weather
- Temperature: (type: number) the current temperature at the user's location in °C
Create these variables and use them as dynamic properties for the text and image elements of our page. You can see also in the information displayed that a function is use "ifempty". As we are requesting information from an external service (OpenWeatherMap), the information won't be instantly available, so we want to display placeholder text if our variables are empty: e.g. display "???". To do that, we use functions in the dynamic mapping tool:
Using ifempty utility function in dynamic mapping tool
We can also choose a placeholder for the weather icon: e.g. a gif with loading weather icon:
Now we need to use a workflow to retrieve information from OpenWeatherMap and save useful information in variables.
We need to install two plugins to make this application work:
- Current Location:
- OpenWeatherMap: an online service that provides weather data, including current weather data, forecasts, and historical data
Go to the plugins section and click on "Install" button for these two plugins. "Current Location" plugin doesn't require parameters to work. OpenWeatherMap requires an API Key to be able to request weather information to this service. Go to the OpenWeatherMap website to request a new free API Key and provide the value in the plugin configuration:
Provide API Key for OpenWeatherMap plugin
Now that the required plugins have been installed, we can create a new page workflow called "Get Weather" that will be triggered "On Page Load".
We first need to retrieve the user's current location. Click on the "Plus" icon to add a new node and select "Current Location" in the "Utility" section. This node doesn't require any configuration to work. In preview mode, it will first request access to user's current location and then provide it to the next action nodes of the workflow.
Next, we add a node from the OpenWeatherMap plugin, "Current Weather by Geographic Coordinates". This node requires to provide that latitude and longitude of the user's location, so we choose a dynamic property for the two parameters using the outputs of the "Current Location" node.
Retrieve current location weather information using OpenWeatherMap from latitude and longitude
Next, we need to save the useful outputs from OpenWeatherMap in variables to be able to use them in the page elements. We have 4 variables to update and we use the following outputs from OpenWeatherMap: City Name, Weather > Icon, Weather > Description and Temperature.
Update variables using OpenWeatherMap outputs
For Weather Image variable, we do not get a direct link to an image in the outputs of OpenWeatherMap. We just receive an identifier for the icon, so we need to choose the following dynamic value when updating "Weather Image" variable:
Link of the weather description icon
Then we can preview the application:
Current Location Request on page load
When we choose "Authorize", our app will retrieve the current weather and display it:
Current Weather retrieved from OpenWeatherMap
Last modified 2yr ago