Using Retool to build a weather dashboard

Retool 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, and the NWS discussion comes from the NWS 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.
2. A MyRadar 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 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. 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 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:
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.

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:
3. Then in the URL parameters section, set units to us.
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.

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")}}.

4. Retrieve forecast discussion

If you don't have an NWS forecast office code yet, see the prereqs section. 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.

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

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.

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.
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 that trigger the getMyRadarForecast and get_all_forecast_discussions queries.
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.

The finished product

If you want the JSON for this app so you can import it to create your own version, here's the gist.