The source code for this sample can be found here: https://github.com/gomobile/sample-masheryworldweatheronline or download the Intel(R) XDK to check out all the HTML5 Samples.
This is a simple single-page app created using the Intel XDK. It serves as an example of how easy it is to build a mobile app that integrates an external web service API. It was built from scratch using Start with a Blank Project. There are many other examples in the gallery that feature the App Starter and App Designer project creation interfaces.
How’s the Weather Outside?
Implementing location and weather data in your mobile app can be incredibly useful for end users. Knowing if your user is living in the polar vortex or basking in the warm sunrays in Hawaii allows you to deliver a magically relevant tailored experience. How can you accomplish this? By simply combining the user’s location with a real time weather API – and this is exactly what this app demonstrates.
Starting from Blank
While the wizards and app design layout helpers in the XDK are extremely useful, there will be times when you simply need to go directly to code. As you tailor your app's scripting and apply CSS pixel-pushing, it is the source code editor that is required to make your app behave exactly the way you want.
To start building an app from scratch without the GUI IDE helpers, simply navigate to the Projects tab at the very top of the XDK. Click the Start a New Project at the bottom of the screen. On the New Project Setup page, you’ll be prompted to name a home directory for your project. Once you create the project, you’re left with a pristine directory with a single file - index.html. This is exactly how we started this sample application.
Project Layout: JavaScript App Framework and UI
We’ve chosen to use Intel’s App Framework as the JS library. You can download the App Framework from Github - https://github.com/01org/appframework/. We use it for the following tasks:
- UI - nicely styled CSS themes for iOS, iOS7, Android, Windows 8 and more
- Query selector - easy traversal of the DOM for selecting and modifying values (very similar to jQuery)
In this sample app, we’ve imported the base files (see /js directory), along with a CSS (see /css) files.
- js/
- appframework.min.js - minimized version of the JavaScript helper library
- api.js - functions for making remote API calls and parsing results (made for this sample app)
- css/
- weather.css - CSS customizations (made for this sample app)
Setting up the World Weather Online API
The primary focus of this app is to demonstrate how to make API calls, parse the data, and integrate that data into the view. In this sample, we’re using the World Weather Online API, which showcases data that you would find on the World Weather Online website. In order for this sample app to operate properly, you will need to get your own World Weather Online API key. The API is free to use and fetching an API key takes only a minute or two.
Navigate to World Weather Online’s developer portal - http://developer.worldweatheronline.com. If you already have a Mashery ID, sign in with your credentials. Otherwise, register for a new account. After providing your registration information, verify your e-mail address, login, and apply for a key (or create a new application). You will soon receive an API key to the World Weather Online Free Weather API – Free Weather API on your browser and via e-mail.
With this sample app opened in the XDK, navigate to the Develop tab. On the left side of the XDK, you’ll find a list of directories and files. Inside the js directory, you’ll find api.js. Select/open that file into the IDE (editor). Next, copy your new API key (beware of white-space padding) from your other browser window or e-mail into api.js.
// ********************SET YOUR API KEY HERE******************* // Insert your World Weather Online API Key here. README for more info.
var apiKey = 'PLACE-YOUR-API-KEY-HERE';
// ************************************************************Single Page with a Results Div
This sample app consists of one view rendered from index.html. All of the library files mentioned above are loaded from this page. All of the content is placed into the <div> with the "content" id. The results are dynamically placed into the <div> with a class name of "search_result".
<div class='search_form'>
<input type="text" name="q" value="" placeholder="City or ZIP Code" id="weather" required />
<button id="submit" onclick='search();'>Search</button>
</div>
<div class="search_result"></div>App Flow: Search and Results
The flow of this app is very simple. The user types in a CITY NAME or ZIP code, touches the Search button which then displays current weather information including the current temperature and description of the current conditions.
Making Web Request
App Framework AJAX function is used to make a web request. JSONP is used because data is requested from an external web service API. searchCallback is the function called when request succeeds.
$.ajax({
dataType: "jsonp",
url: url,
success: searchCallback
})
The Callback
Once the call is completed, the data is parsed and different pieces are sent through functions that construct the formatted response. The code segment below handles this task:
var serverResponse = data;
try{
$("div.search_result").html(generateRowHTML(
serverResponse.data.nearest_area[0].areaName[0].value,
serverResponse.data.current_condition[0].weatherIconUrl[0].value,
serverResponse.data.current_condition[0].temp_F,
serverResponse.data.current_condition[0].weatherDesc[0].value));
} catch(ex) {
$("div.search_result").html("<b>Not Available</b>");
} Automatically Fetching Location
In this sample app, we ask the user to provide their city name or postal code. Another option is to poll the device for the latitude and longitude. For a native iOS development, you would use the Core Location framework. For native Android, it is the android.location location APIs or the Google Location Services API. However, Intel XDK also supports cross-platform location lookup functions using JavaScript. (see the geolocation sample on GitHub or within the XDK sample apps collection). World Weather Online’s APIs also support lat/lon as a query argument.
Summary
Integrating RESTful APIs into your mobile app is straightforward with App Framework. All that you'll need is a grasp of the API method mechanics and payload structure. This is one sample app in a small series of examples that demonstrates API integration. To discover other interesting RESTful APIs for your app creation endeavors, visit http://developer.mashery.com/apis.