Create a Weather App using ToolJet and OpenWeatherMap API
Tags: restapi, lowcode, tooljet, javascript
Published: 2024-05-23 13:07:01

## Introduction

In this tutorial, we will create a weather app using [ToolJet](https://github.com/ToolJet/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 (https://github.com/ToolJet/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](https://app.tooljet.com/).
- **API Key from OpenWeatherMap :** Create an account on [OpenWeatherMap](https://openweathermap.org/api) 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:

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n95j5xyp3sumxj3q2co.png)

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](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components).

Let’s start by creating the app’s header.

- Drag and drop the **Icon** and a **Text** Component from the [components library](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components) 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.

![Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/he39zz6hovu1juqtmhxq.png)
_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).

![Text Input Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aku05shl8sxp2uoro9al.png)

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/02d@2x.png](http://openweathermap.org/img/wn/02d@2x.png).
- 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.

![Basic Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d447becefrefqvgjv8sz.png)

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](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.

![Humidity Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxb487s9tpw0pvvdwqrk.png)

- 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](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.

![Windspeed Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48nibp9b9brsqyude2l0.png)

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](https://docs.tooljet.com/docs/tooljet-concepts/what-are-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 **<LOCATION>** 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 **<APP_ID>** 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.

![Query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnrp51aj8i48tr2r6a8v.png)
_In ToolJet, [double curly braces](https://docs.tooljet.com/docs/tooljet-concepts/how-to-access-values) 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](https://docs.tooljet.com/docs/tooljet-concepts/what-are-events)** 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.

![On enter pressed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6yf9ks5o54eu9v81q7r.png)

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.

![On Click](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dedxjb8z45imwklbfyn.png)

### 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}}`.

![Weather Descsription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2rsxut1p7gv9td82htg.png)

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/h` under the **Data** property. This will display the wind speed of the entered location.

![Final Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gtqynlshz9l5v1uowjg.png)

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](https://docs.tooljet.com/docs/) can do, visit the ToolJet docs or join us and post your queries on [Slack](https://join.slack.com/t/tooljet/shared_invite/zt-2ij7t3rzo-qV7WTUTyDVQkwVxTlpxQqw).