Introduction
In this tutorial, we will create a weather app using ToolJet and OpenWeatherMap. By the end of this guide, you'll have a functional app that fetches and displays weather data for any city using the OpenWeatherMap API.
Prerequisites:
Before we start, make sure you have:
ToolJet: An open-source, low-code platform allowing you to build internal tools and applications rapidly. If you don’t have an account, sign up for a free ToolJet cloud account here.
API Key from OpenWeatherMap: Create an account on OpenWeatherMap to generate an API Key that will be used while we create queries to fetch the weather data.
Here’s a quick preview of the app that we will be building by the end of this tutorial:
Before creating the UI, let’s create a new ToolJet App. On your ToolJet dashboard, click on the Create an app button and name the app Weather App.
Once the app is created, we can start with the UI.
Creating the UI
Creating a custom UI is straightforward with the help of ToolJet’s built-in components.
Let’s start by creating the app’s header.
- Drag and drop the Icon and a Text Component from the components library on the right and rename them to headerIcon and headerText, respectively.
- To configure the Text component, click on it and see the Properties Panel on the right.
- Set its Data property to 'Weather App', and under the Styles section, change its colour to light blue (Hex code: #4a90e2ff), font-weight to bold and font size to 25.
Renaming components is an effective way to refer to components as the app grows.
- Once the header is ready, drag and drop a Text Input component onto the canvas. This is where we will be entering our desired locations. Rename it to locationInput.
- For locationInput, change Label to Enter Location and Placeholder to Enter Location. Let’s set the default value to 'San Francisco'.
- Next to locationInput component, add a Button component, rename it to getWeatherButton, and change the Button text property to Get Weather from the properties panel. From the Styles tab, change the Background color of the button to blue (Hex code: #4a90e2ff).
Next we will create the layout where we will be displaying the weather data.
- Drag and drop a Container component. Containers are used to group related components.
- Add an Image component inside the Container and rename it to weatherImage. This component will be used to display the weather through an image later in the tutorial. For now, let’s add a dummy image. In the URL section, add the URL, http://openweathermap.org/img/wn/[email protected].
- Next, add two Text components and rename them to weatherDescription and locationText, respectively. Add some dummy text under their Data property. The dummy data will be made dynamic as the tutorial progresses.
- For both the text components, in the Styles section, change the font size to 25, font-weight to bold and alignment to center.
We will also display a particular location's humidity and wind speed.
- Drag and drop the Image component and rename it to humidityIcon. In the URL property, let’s use the following URL for now: https://cdn.iconscout.com/icon/premium/png-512-thumb/humidity-14-532297.png?f=webp&w=512.
- Place two Text components next to the Image component and rename them to humidityPrecent and humidityText respectively. In the Styles section, set the font weight to bold for both.
- For the humidityPercent and humidityText components, add some dummy data in the Data section of the Properties panel. As the tutorial progresses, we will be fetching the humidity data dynamically.
- To add wind-speed data, copy the Image and Text components and paste them beside the humidity section.
- Rename the Image component to windspeedImage and the Text components to windpseed and windspeedText, respectively.
- Select the windspeedImage component, and in the URL section, add the following URL for the image: https://cdn.iconscout.com/icon/premium/png-512-thumb/wind-336-974466.png?f=webp&w=512
- Select the windspeed component, add some dummy data in the Data property. In the Styles tab, set the font weight to bold.
- For the windspeedText component, add some dummy data in the Data property. In the Styles tab, set the weight to bold.
With the above steps, our UI is now ready. It’s time to use OpenWeatherMap API to fetch the weather data for our desired location.
Use OpenWeatherMap API to Fetch Weather Data
1. Creating the Query
To fetch the weather data from OpenWeatherMap API, we will use ToolJet’s queries.
Follow the steps below to create a query and fetch the data.
- Expand the Query Panel at the bottom and click the Add button to create a query.
- Choose the REST API query and rename it to getWeatherData.
- Since we will just be fetching the data, in the Request section, choose the Method as GET from the dropdown, and add the following as the URL:
https://api.openweathermap.org/data/2.5/weather?q=<LOCATION>&appid=<APP_ID>. - Replace with the following code:
{{components.locationInput.value}}; since we have set the default value to 'San Francisco', the location will be replaced with 'San Francisco' for now. - Replace the with the API Key that you generated while creating an account on OpenWeatherMap API.
- To ensure that the query runs every time the application loads, enable Run this query on application load?
- Click on the Run button to see that the weather data is being fetched from the OpenWeatherMap API for the city of San Francisco.
In ToolJet, double curly braces are used to access or refer dynamic values.
2. Adding Event to locationInput and getWeatherButton Components
Now that we’re successfully configured the query, we will bind this query to our locationInput and getWeatherButton components.
- Select the locationInput component. In the properties panel, click on the New event handler button, set Event as On enter pressed, choose Action as Run Query, and select getWeatherData as the query.
- To test it, let’s change the location to 'London' and press enter. If you followed the above steps correctly, the query should fetch the data related to London.
We would also want the query to run once we enter a location and press the Get Weather button. To do so, follow the steps below:
- Select the getWeatherButton button, and click on New event handler.
- Choose the Event as On click, Action as Run Query, and select getWeatherData as the Query.
- If you followed the above steps correctly, you can now run the query after clicking on the Get Weather button.
3. Binding the Data to the Components
Since we can now fetch the queries by pressing enter and clicking on the Get Weather button, we will bind the fetched data to our UI to make our app dynamic.
Let’s start with the weatherImage component first.
- Select the weatherImage component, and replace the URL with
http://openweathermap.org/img/wn/{{queries.getWeatherData.data.weather[0].icon}}@2x.png. This will ensure, that the image changes accordingly with the weather of a particular city. - Next, select the weatherDescription component and replace the text under the Data property with the following code:
{{Math.round((queries.getWeatherData.data.main.temp - 273.15) * 10) / 10}} °C, {{queries.getWeatherData.data.weather[0].description}}. Here, we’re converting the temperature to degrees Celsius and adding the weather description. - Select the locationText component, and add the following code to the Data property:
{{queries.getWeatherData.data.name}}.
If you followed the above steps correctly, you should see the image, temperature, weather description and city name changing according to the location we’re adding to the locationInput component.
The last step would be to display the actual humidity percentage and the windspeed of the entered location.
- Select the humidityPercent component, add
{{queries.getWeatherData.data.main.humidity}}%under the Data property. This will give the humidity percentage of the entered location. - Next, click on the windspeed component, and add
{{queries.getWeatherData.data.wind.speed}} Km/hunder the Data property. This will display the wind speed of the entered location.
If you have followed all the steps mentioned above, you can see that all of the component data gets updated after running the query according to the location we add.
To make sure that our app displays a loader whenever the data is being fetched for the new city, select the Container component and in the Loading state property, click fx and add {{queries.getWeatherData.isLoading}}.
Conclusion
You've successfully built a weather app using ToolJet by consuming the OpenWeatherMap REST API. This simple app demonstrates how straightforward it is to create functional apps in ToolJet. To know more about what ToolJet can do, visit the ToolJet docs or join us and post your queries on Slack.
SOCIAL SHARE CARD GENERATOR