Figure 3-2

Overview

Have you ever checked the weather online, and wondered how the application or website actually worked? It’s easy to create your own weather forecast app from scratch by making use of publicly available APIs. In this article, we’ll be creating a mobile app that displays the current weather of a specific city/state. We’ll be using the Weather Underground API to retrieve information about the weather in a city/state specified by the user, and then display the relevant information to the user.

This article makes use of HTML, CSS, Javascript, jQuery Mobile, and PhoneGap. Since the length of this article is limited, I won’t be exploring the inner mechanics of the languages or frameworks involved. It’s geared towards readers with at least a basic knowledge of programming, and you may need to Google concepts that you don’t understand. However, I will be explaining how to create the app step-by-step, so you should be able to follow along, even if you’re a beginner.

The Weather Underground API

The Weather Underground API is used for retrieving weather information for a particular city and state. You’ll need to get your own API key, but it’s free to use – all you need to do is sign up! To get started, visit the following URL and click “Sign Up For FREE!”:

https://www.wunderground.com/weather/api/

The registration process should be easy to follow. The requests from our app to the Weather Underground API follow the format of:

http://api.wunderground.com/api/<Your API Key>/conditions/q/<State>/<City>.json

Replace <Your API Key> with the API key you received upon registration, replace <State> with the state, and replace <City> with the city you would like to obtain weather information for. For example, if your API Key was abc12345, and you made a request for weather data on Providence, RI, the URL for your request would be:

http://api.wunderground.com/api/abc12345/conditions/q/RI/Providence.json

An example of the JSON data (which may be viewed by visiting the URL above in a web browser) returned by a request to the Weather Underground API is shown in Code Listing 2-1. If you don’t know what JSON is, there are plenty of online resources available which can help you to understand it. I have highlighted in yellow the pieces of JSON data that we’ll be using.

Code Listing 2-1

We’ll only be using a picture icon representing the weather condition, a description of the condition, the temperature, and the humidity. There is much more information in the response than what we actually need, so we just grab the values that we need to display to the user. There are other types of requests that may be used to query the Weather Underground API, such as a 5-day forecast (as opposed to the current weather conditions). For further documentation on the Weather Underground API, please consult the URL:

https://www.wunderground.com/weather/api/d/docs

The Source Code

Before I walk through building the app piece by piece, we’re going to start with the source code for the entire application. We’ll test the app in our browser, and then we can begin breaking down what all of the code really means. Without further ado, let’s take a look at the source code for our application shown in Code Listing 2-1.

Code Listing 2-1

Type the code into your favorite text editor and save the file as index.html. Although I was able to easily get it to work within Firefox, Google Chrome requires a little extra maneuvering. You’ll need to right click on the Google Chrome icon, select Properties, and add “-allow-file-access-from-files” to the Target property for the icon. This is shown in Figure 3-1 (the Target property is outlined in red), although the equivalent process might be different on OSX or Linux. Without adding -allow-file-access-from-files to the Target property, the Chrome browser won’t load the app due to built-in security measures.

Figure 2-1

Figure 2-1

The app is designed for mobile devices, so it will look a bit odd on a desktop browser, as shown in Figure 3-2.

Figure 3-2

Figure 3-2

However, if you load the app in Google Chrome, and view it as a phone via Google Developer Tools, then the formatting of the app makes more sense, as shown in Figure 3-3.

Figure 3-3

Figure 3-3

Adding jQuery Mobile

jQuery Mobile is a cross-platform framework that is based on HTML5, CSS, and jQuery. Adding jQuery Mobile to our app is very easy, and it helps make our app more mobile friendly. To add jQuery Mobile to our app, we simply add the lines of code shown in Code Listing 4-1 to the head section of our document:

Code Listing 4-1

The comments clearly describe what each line of code does. We first add a meta tag that provides proper rendering and touch zooming. Then we add the jQuery Mobile stylesheets, the jQuery library, and the jQuery Mobile library. We haven’t actually used any jQuery Mobile at this point, but we have at least added the foundation which allows us to use it. Next, we will examine the body of our HTML document, which makes use of jQuery Mobile.

The Body of the HTML

Let’s examine the body of the HTML code for our app, shown in Code Listing 5-1.

Code Listing 5-1

The HTML tags are all very basic. We create divs for the overall container, the header, the search section, and also a div for displaying the weather forecast. The search div (SearchDiv) contains text input boxes and a button for submitting the city/state. The weather forecast div (CurrentWeatherDiv) contains the table which we use to display the weather data, and is populated via our Javascript code (we will get into that later). The table is initially empty, but becomes visible once it is populated with data.

One thing that you may notice to be a bit different than a basic HTML page is the use of the data-role property. We only use it in three separate lines of code, as shown below:

The data-role properties actually implement features of jQuery Mobile into our code. We have specified which div represents the page (via data-role=”page”) and which div represents the content of that page (via data-role=”content”). In our table, data-role=”table” turns a regular HTML table into a jQuery Mobile table.

The code for our button specifies that it should call the getWeather function of our Javascript when clicked by setting the onclick property to getWeather ():

We’ve covered all of the HTML code, but we need to examine what happens once the “Get Weather” button is clicked. With that being said, let’s dive into the Javascript code.

The Javascript Code

The Javascript code of our document is everything placed between the <script> tags. First, let’s examine the getWeather function (shown in Code Listing 6-1), which is called when the “Get Weather” button is clicked.

Code Listing 6-1

First, we create an XMLHttpRequest object (if you don’t know what an XMLHttpRequest is, a quick Google search should help) and properly set the onreadystatechange property. The onreadystatechange property is used to specify what should happen when the state of request changes. We specify that we should check if the request is successful (a ready state of 4 and status of 200), in which case, we call the generateTable function. However, before we dig into the generateTable function, let’s see how the URL of the request is generated.

We store the values of the city and state parameters (entered by the user) into the variables named city and state. The document.getElementById(“CityInput”).value returns the value of the text stored in the CityInput text box. We do the same thing for the state input text box, and then we use those values to generate the proper URL for our request:

We already mentioned earlier (in the Weather Underground API section) how the URLs need to be formatted, and also provided a concrete example. Just for added clarity, let’s look again at the format for the request URL and a concrete example.

Format:
http://api.wunderground.com/api/<Your API Key>/conditions/q/<State>/<City>.json

Example:
http://api.wunderground.com/api/abc12345/conditions/q/RI/Providence.json

In other words, we just use the city and state portions of the URL by filling them in with the values entered by the user. The last line of code in the getWeather function sends the request:

Once we get a response to our request, the function specified by the onreadystatechange property of our XMLHttpRequest object is called. This is the generateTable function, which generates the jQuery Mobile table used to display the weather data. The code for the generateTable function is shown in Code Listing 6-2.

Code Listing 6-2

In summary, the generateTable function takes the response to our request and grabs the particular values that we need from it. The response is in JSON format, and is passed to our function via the responseJSON parameter. After we extract the particular values that we need, we populate the table of our app used for displaying the weather information to the user.

We first transform the raw JSON data into a Javascript friendly Object, which we store in a variable named weatherData:

Next, we extract the values for the icon URL, the weather condition, the temperature, and the humidity (these values were highlighted in yellow in Code Listing 2-1 of The Weather Underground API section):

Finally, we generate the HTML of our jQuery Mobile table (appropriately named WeatherTable) with the values that we extracted from the JSON data:

That’s it! The Javascript used in this app is quite minimal, and just does what is necessary to get the job done. In the art of programming, it’s always best to keep things simple when you can.

The CSS Styling

The CSS styling of our app is also quite minimal. I didn’t want to go overboard with the styling since this isn’t primarily an article on CSS, but I’ll explain the CSS used in our app for clarity. The CSS code is everything within the <style> tags, and is shown in Code Listing 7-1.

Code Listing 7-1

Here is a list of how we style each HTML element in plain English:

  • body – We set the text-align property to center (which centers all text, images, etc.) and the font type to bold. All of the visible content in our app exists within the body, so these properties are applied to everything in our app.
  • td – The td tag is used to create cells within an HTML table (td literally stands for table data). We specify that all table cells should have a sky blue background (RGB code #1B99DF) and white text (RGB fcode #FFFFFF). That way, it follows a weather theme of clouds upon a blue sky. We also set the font to Arial.

PhoneGap

Creating native applications for every major mobile device platform (iPhone, Android, Blackberry, and Windows) had been a difficult process. Each of the various platforms required different languages and/or frameworks. Adobe PhoneGap essentially bridges the gap (hence the name PhoneGap) between the different mobile platforms. PhoneGap transforms applications written using HTML, CSS, and Javascript into native mobile applications for all of the major mobile platforms. Therefore, you don’t need to waste your time with manually creating a different version of your app for each platform. PhoneGap does all of that heavy lifting for you, which saves plenty of time and prevents headaches.

In this article, we’ll be using PhoneGap Desktop. Installing PhoneGap Desktop is very easy; simple installation instructions for both Windows and Mac are provided at the following URL:

http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/

Once you have installed PhoneGap Desktop, create a new PhoneGap project by clicking the plus sign and selecting “Create new PhoneGap project…” as shown in Figure 8-1.

Figure 8-1

Figure 8-1

Next, specify a directory and name for your app as in Figure 8-2.

Figure 8-2

Figure 8-2

Before we go any further with PhoneGap Desktop, we need to replace the default index.html file (created automatically by PhoneGap) with the index.html code of our weather app. The index.html file should be located within the www directory of our PhoneGap project directory.

However, there is some code that is necessary to properly utilize PhoneGap within the default index.html file that doesn’t already exist within our index.html file. I’ve added the new code that we need to our index.html (all of the new additions are in red), which is shown in Code Listing 8-1. Please note that we also replaced the meta tag for the viewport with the viewport meta tag from PhoneGap.

Code Listing 8-1

After you replace the code in the index.html file of the www folder with the code shown in Code Listing 8-1, click the play button (outlined in red in Figure 8-3) in PhoneGap Desktop.

Figure 8-3

Figure 8-3

At the bottom of PhoneGap Desktop, it will tell you the local IP address and port that your server is running on. Keep in mind that since this is a local IP address, you won’t be able to view it outside of your own local network. You can host your apps in the cloud with PhoneGap Build, but let’s first view our app by going to the IP address and port of our application. For example, in Figure 8-3, it specifies that the server is running on http://192.168.1.167:3000. However, the address specified for your app will most likely be different, so use the address provided specifically for your application. Visit that address in a web browser, so that you may preview your app as shown in Figure 8-4.

Figure 8-4

Figure 8-4

We may also preview your app on a mobile device. After all, we designed our app for a phone, rather than a desktop. Simply download/install the PhoneGap Developer App on your phone, and then enter the server address for your app. It’s as simple as that. If you want to make your app publicly available (rather than only available on your local network), you should also check out PhoneGap Build. PhoneGap Build enables you to host your app on the cloud. You may visit https://build.phonegap.com/apps for more information on this subject.

Feel free to experiment with other features of the Weather Underground API. For example, you could change the app so that it actually displays a forecast for tomorrow, rather than the current weather. Alternatively, you could also provide both options, by adding a button for “Get Current Weather” and “Get Tomorrow’s Forecast”, so that the user can choose between the two options.

You would think that developing a mobile weather app would be complicated – but it doesn’t have to be! There are APIs for all sorts of things in modern times, which allow us to easily add features to our applications that would be otherwise impossible to implement. Combining the power of APIs with frameworks such as PhoneGap and jQuery Mobile, the sky is nowhere near the limit.

5 thoughts on “Weather Application

  1. Thanks for going to the effort of making these types of tutorials. Many people benefit from these tutorials and gain an insight into what can be achieved with a little help and information. Awesome

Leave a Reply

Your email address will not be published. Required fields are marked *