Using Weather Underground API to keep record of the weather in real time

Overview

Weather Underground is a commercial weather service providing real-time weather information via the Internet (wikipedia). Their API provides weather reports for most major cities across the world on its website, as well as local weather reports for newspapers and websites.

By retrieving data from their site in a JSON format, you can display time-accurate weather details in the Umajin Platform.

Prerequisites

  1. Umajin App Creator downloaded and installed.
  2. Any text editor.
  3. Completed the registerAction tutorial and the https tutorial.

Pro Tip: using Visual Studio Code as your editor will allow you to integrate debugging.

Instructions

Step 1) Create a new blank app in the Umajin App Creator to use as a testing platform for our data driven custom component.

Step 2) Set up your Umajin Landing Page for future testing. Ours will have a simple Text Component for a heading and a few other basic Text Components. The lower case words will be mapped to information gathered from Weather Underground. Only when the user presses the ‘Get Weather’ Button Component will all of the labels and information appear. As you can see, we will be displaying the current weather status, the temperature, the temperature that it feels like, the relative humidity, wind speeds, UV levels, and the amount of precipitation for the day.

Step 3) Create a new JavaScript document and name it something that relates to your goal. For our example, we will be naming the file wundergroundTut.js because our goal is to demonstrate the use of the Weather Underground API to display accurate real time weather information.

Make sure that you save this file in the scripts folder under the Umajin Resources Folder.

File → Open Resources Folder → scripts

Step 5) Open a web browser and go to www.wunderground.com. In the “More” tab on the top of the page, go to “Weather API for Developers” seen below.

Once there, click on the ‘Key Settings’ tab which will prompt you to get a key to access the weather information. Once you have the key, you will be able to retrieve the proper information.

Step 4) Go to the ‘Documentation’ tab and familiarize yourself with the example. After doing so, copy the example link they provide to your clipboard. This will allow you to access the weather information for San Francisco. It should look like this:

http://api.wunderground.com/api/YOUR_KEY_HERE/conditions/q/CA/San_Francisco.json

Step 5) Now we will register an Action that will be called on the press of the Button Component labelled ‘Get Weather’. This Action will be called ‘getWeather’.

The function corresponding to the Action call will have a call to httpGet. The url that it is getting information from is the example line from their site.

Step 6) We will write the function called when there is a problem getting information from Weather Underground. It is important that the user sees the error, so we will simply print it out.

Step 7) We need to write the success function for the call to httpGet. This will extract information from the returned JSON and map it to the Text Components in the Umajin Platform. The nested for loop allows us to extract the values associated with the desired keys. We end up with our 8 desired variables. At the end of this function, once variables are assigned, we call a displayWeather function which we will write next.

Step 8)  The displayWeather function needs to store the 8 specific Text Components in variables and set their Text Properties to the extracted information.

Step 9) Set the Action on the Button Component’s ‘On Press’ event, and test your action in the Umajin platform. Our result is shown below.

This series of actions can allow for some very cool custom development. With simple JavaScript code, you can add graphic conditions. For example, if it is cloudy, have some animated clouds appear in the background. If it is raining or snowing, add some custom particle components.