Using Retool to build a weather dashboard
Tags: retool, myradar, nws, weather
Published: 2023-03-28 23:02:00

[Retool](https://retool.com/) is great for building business software but I love to use it for personal/side projects as well. With just a few API calls, you can use it to build your own weather dashboard.

## What you'll build

You're going to create a weather dashboard that shows the forecast and the National Weather Service (NWS) forecast discussion. The combination of standard forecast data (highs, lows, etc.) and text discussion from meteorologists makes for a well-rounded forecast.

The forecast data is provided by [MyRadar](https://myradar.dev/), and the NWS discussion comes from the [NWS API](https://www.weather.gov/documentation/services-web-api). Both the MyRadar and NWS APIs are free to use with some standard limitations.

## Prerequisites

To build the weather dashboard, you'll need:

1. A [Retool account](https://retool.com/pricing/).
2. A [MyRadar](https://myradar.dev/) dev account. Make sure to note down your **Subscription Key**.

You can find these later but if you want to have everything up front, you also need:

1. The lat/long of the location you want a forecast for. You can use [Google Maps](https://www.google.com/maps) to search for the location, then right click the pin and it'll show the lat/long. This guide uses Detroit so you can use `42.34899378680771, -83.07695478794027` if you want.
2. An NWS forecast office code. This guide is going to use Detroit's code (`dtx`) but if you want to find the office closest to you, click the [location on this map](https://www.weather.gov/srh/nwsoffices). It opens a new page and the code is in the URL (Detroit's NWS office URL: `https://www.weather.gov/dtx/`).

## 1. Create a MyRadar resource

[Resources](https://docs.retool.com/docs/resources) are how you connect your data sources to Retool.

1. Navigate to `/resources` in Retool and click **Create new -> Resource**.
2. Select **Rest API**.
3. Fill out the resource configuration page like this:
![Adding a resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oslqwwkdyxgcbkx8ke25.png)
4. Click **Create resource ->** and then **Create an app ->**. This opens another modal where you name the app and then click **Create app**.

## 2. Retrieve forecast data

If you don't have a lat/long yet, see the [prereqs section](#prerequisites).

To retrieve forecast data:
1. Click on **query1** and rename it to **getMyRadarForecast**.
2. Pass the lat/long (`42.34899378680771,-83.07695478794027`) in the endpoint:
![Configuring the MyRadar query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81nrbjrnl3zyvbz9rne0.png)
3. Then in the **URL parameters** section, set `units` to `us`. 
![Setting URL params](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cinwvu9683foj83nxw9z.png)
4. Click **Save and run**.

## 3. Display forecast data

The data returned is split up into timeframes (currently, minutely, hourly, and daily). This app is going to show the current weather and the hourly forecast, but feel free to display what you want.

To display the current weather:
1. Drag a Key Value component to the canvas and set its **Data** property to `{{getMyRadarForecast.data.currently}}`.
2. In the **Inspect** tab on the right, hover over the **Rows** you want to hide and click the eyeball icon.
3. Optionally edit the **Title of the key column** and the individual **Column titles**.
![Using a Key Value component to display weather data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xtrcq3hf1i34ncz02b8.png)

To display the hourly forecast:
1. Drag a Table component to the canvas and set its **Data** property to `{{ getMyRadarForecast.data.hourly.data }}`.
2. Similar to the current weather, click the eyeball icon to show/hide columns.
3. Optionally edit the **Column titles** by selecting the column and editing the **Column title** value.
4. Convert the UNIX timestamp in the **time** column by selecting the column in the **Inspect** tab, and then setting **Mapped value** to `{{moment.unix(self).format("MM/DD/YYYY h:mm:ss A")}}`. 
![Displaying forecast data in a table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kb71ibg20vjtcroedmh.png)

## 4. Retrieve forecast discussion

If you don't have an NWS forecast office code yet, see the [prereqs section](#prerequisites). You can also use the one in the examples below (`dtx`) if you don't want to use your local office.

Create a new resource query and set the:

-  **Resource** to **RESTQuery (restapi)**.
- endpoint to `https://api.weather.gov/products/types/AFD/locations/DTX` (if you're using your local office, replace `DTX` with your local office code).

Click **Save and run** and rename the query to `get_all_forecast_discussions`.

![Creating the get_all_forecast_discussions query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slmflv0cz08iojq1alv2.png)

This query retrieves URLs for every available forecast discussion for the office. To retrieve the latest discussion:
1. Duplicate the query you just created.
2. Set the endpoint to `{{get_all_forecast_discussions.data['@graph']['0']['@id']}}`.
3. Name the query `get_latest_forecast_discussion`.
4. Click **Save and run**
![Creating the get_latest_forecast_discussion query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffcq445x1ty3ybmhs2gc.png)

## 5. Display the forecast discussion

To display the forecast discussion:

1. Drag a Text component to the canvas and set its value to `{{get_latest_forecast_discussion.data.productText}}`.
2. Forecast discussions can be long sometimes, so set the **Height** to fixed on the Text component.
![Displaying forecast discussion in a Text component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sojc29oi1rk09rpw353q.png)

## 6. Optional polish

You now have all your weather data in the app, but if you want to polish things up a bit:

1. Use Text components to add headers to each part of the app.
2. Rearrange the components so they fit together well.
3. [Customize the style](https://docs.retool.com/docs/design-and-usability).
4. Add a Button component to refresh the data.

To add a refresh button:

1. Drag a Button component to the canvas.
2. Add two [event handlers](https://docs.retool.com/docs/event-handlers) that trigger the `getMyRadarForecast` and `get_all_forecast_discussions` queries.
![Adding event handlers to a Button component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8yhnac8ufynobknoybo.png)
3. Select the `get_all_forecast_discussions` query and create an event handler that runs `get_latest_forecast_discussion`. This way when the button is clicked, the latest forecast discussion is refreshed.
![Adding an event handler to a query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1zluvr6rv6uhcjbcsu7.png)

## The finished product
If you want the JSON for this app so you can [import it](https://docs.retool.com/docs/import-export-apps) to create your own version, [here's the gist](https://gist.github.com/beklapko/0baae2173cd777b8455023d95fb6e051).
![A slightly polished weather dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyy8utf8l3g3kvqpdzcn.png)