Build a Location-Based Mobile App With HTML5 & Javascript: 1

You don’t need separate platform-specific technologies to develop powerful, useful apps. You’d be surprised with what you can build with HTML5 and popular JavaScript libraries. This article is the first of a series in which I’ll develop a mobile app purely through HTML5 and JavaScript frameworks. The app will be called “Where I parked my car”, and we’ll build it with jQuery Mobile and Cordova (also known as PhoneGap). In this first article, I’ll explain the app’s features and which languages and frameworks you need to know in order to follow the tutorial. To create this application, I’ll also use the new HTML5 API, specifically the local storage and the geolocation (actually not really part of the HTML5 specs), as well as the Google Maps API. A hybrid app is built using web technologies, and then wrapped in a platform-specific shell that allows it to be installed just like a native app. If you want an overview of the differences between native, hybrid, and web apps, I’ll advice you to read Native, Hybrid or Web Apps?.

Uncovering the Features

The aim of “Where I parked my car” is to let you bookmark where you parked your car on a map using the GPS function of your smartphone, and then—after you have finished your walk—find a route to return to it. This kind of application is useful if you don’t have a good memory or if you’re in a foreign city. In addition, “Where I parked my car” will also save a log of your saved positions (up to 50), so that you can retrieve a location for future use. Since scrolling a list of 50 items can be really annoying, the app will have a search filter so you can easily achieve the task. The list allows you to see the position on a map, and you can also to delete one or more old locations. Finally, I’ll also create a small credits page within the app.

The Ingredients

To fully understand what’s going to be developed, you must have at least a basic knowledge of the following languages and frameworks:

• HTML: It will be used to create the markup of the pages. Where appropriate, I’ll use some new HTML5 tags.
• CSS: Since most of the CSS enhancements will be done by jQuery Mobile, it isn’t really needed extensively. However, I’ll use few rules to correct or adjust some styles as you’ll see later.
• JavaScript: The business logic is entirely written in JavaScript so if you don’t know some key concepts like what’s a callback or a closure, you’ll need to study it before proceeding.
• jQuery: I’ll use jQuery mainly to select elements and attach event handlers, so there’s nothing special here.
• jQuery Mobile: It’ll be used to automatically enhance the application interface. I’ll use the page loading widget, the listview for the positions’ log, and I’ll put some buttons inside the header and the footer of the pages to build a toolbar.
• Cordova (PhoneGap): As said before, Cordova will be used to wrap the files so you can compile them as if you built a native app. Of course, I’ll take advantage of some of the APIs offered by the framework, such as notifications, geolocation, and connection

The version of jQuery Mobile used will be 1.2.0, so if you need a refresher on what’s new in this version, you can read What’s New in jQuery Mobile 1.2.0? and Build Lists and Popups in Minutes Using jQuery Mobile. The Cordova version used will be the 2.0.0. I choose this rather than the newer versions, because in my tests it has performance better in conjunction with jQuery Mobile. Apart from the above list, I’ll use also these APIs:

• Geolocation API: It provides location information for the device in the form of latitude and longitude. Since many operating systems already support it, Cordova will use the native interface rather than its own implementation. However, for the platforms that don’t have this API, Cordova uses its implementation that adheres to the W3C specification. If you need an introduction to this API, you can read Using the HTML5 Geolocation API.
• Google Maps API: The Google Maps API lets you integrate the Google Maps service with your website. The service is completely free, but you should subscribe to the APIs console website to obtain your own API key, and use it when you send a request to the service. Since this API will still work without the key, I’ll use it without a unique API key.
• Web Storage API: This provides access to the devices storage options. If you need a starting point, you can take a look at An Overview of the Web Storage API.

Remember that Cordova uses a different JavaScript file for every operating system, so if you’d like to compile the application on your own, you need to use a specific IDE-SDK bundle like Eclipse and the Android SDK, Visual Studio and the Windows Phone SDK, and so on, for every platform. This could be a real pain, so “Where I parked my car” will be developed with the assumption that the compilation will be done using the Adobe cloud service, called Adobe PhoneGap Build. It’ll be the service itself that includes the correct Cordova library for each platform at compiling time. So, to follow this tutorial, you can use a simple text editor or the IDE that you prefer to use, for example NetBeans, without installing any other SDK. I’ll release the final code on my bitbucket repository, where I’ll remove the library as specified by the Adobe PhoneGap Build doc.

The Project’s Structure

The structure of the project will be quite straightforward. In fact, I’ll create the HTML files, the Adobe PhoneGap Build configuration file, the standard splashscreen, and the app’s icon in the root of the project. Then, I’ll divide the other files into three categories (actually folders): CSS, images, and JS. To develop “Where I parked my car”, in addition to the jQuery, jQuery Mobile, and Cordova files, I’ll create the following documents:

• index.html: This is the entry point and will include all the libraries’ files used throughout the application. It’ll also have the buttons to set and get the current position and to view the positions’ log.
• map.html: This is where you’ll see the map that will show you your position, your car position, and the route to reach it.
• positions.html: This page will show the positions’ log as a list.
• aurelio.html: This is the credits page. Nothing very interesting here.
• style.css: As I said before, I’ll write few style changes that deviate from the jQuery Mobile standard style.
• jquery.mobile.config.js: It’ll contain a configuration for jQuery Mobile
• functions.js: This file will contain the function to initialize the application and some other utility functions.
• maps.js: This file will have the functions that use the Google Maps API to draw the map and the route to the car.
• positions.js: This file will save and load the previous positions using the Local Storage API.
• config.xml: This XML file will contain the metadata of the applications and will be used by the Adobe cloud service to store settings like the app version number and the package contents.

At this point, you might argue that since we’re building a small app, I could use a single file that has all the pages combined. You’re absolutely right, but I prefer to keep things separated for organization.

Setting Up the Project

First of all, create the project folder, for example “where-i-parked-my-car” and create the three folders mentioned above: CSS, images, and JS. Now, you need to download the jQuery, jQuery Mobile and Codova files. Place all the JavaScript files of these frameworks inside the “JS” folder, put the jQuery Mobile bundled images in the “images” folder, and finally put the jQuery Mobile CSS file inside the “CSS” folder. If you’ve done everything right, the project should have the following structure:

---css
|   ---jquery.mobile-1.2.0.min.css
|   ---style.css
---images
|   ---ajax-loader.gif
|   ---icons-18-black.png
|   ---icons-18-white.png
|   ---icons-36-black.png
|   ---icons-36-white.png
---js
|   ---cordova-2.0.0.js
|   ---jquery-1.8.3.min.js
|   ---jquery.mobile-1.2.0.min.js

As said before, a reference to the Google Maps API is required. Including the file that you need is very simple and consists of just adding the following line to your HTML.

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Please note that this line contains a sensor parameter. It must be included in the URL and set to true if you’re using a sensor (like a GPS), or false otherwise. Since we’re using the Maps API to create a mobile app, we’ll set it to true.

Conclusion

In this first and introductory article, I showed the features of “Where I parked my car” and outlined an overview of the technologies that will be used for its implementation. I have structured the files that comprise the application in an organized fashion so that we can move straight toward developing. Finally, I explained how to set up the project. In the next article I’ll dive into the code and show you how to create the HTML pages.

Frequently Asked Questions on Building a Location-Based Mobile App