Scenario

My latest adventure took me towards developing a location tracking application using PhoneGap. The goal was to continuously monitor the location of the user (obviously the user had to permit the app for doing so – Privacy alert!) and share the info with the peers. This required interacting with the iOS Location Services to get the current location coordinates of the user and then sending them over to the backend server via an ajax call, etc. While this sounds easy, I had to go thru various obstacles to reach the right solution. I am going to divide the solution in a series of blog posts to throw light on all situations faced and the good/bad solution choices then finally how the goal was achieved.

What is PhoneGap?

In case you didn’t know, PhoneGap is a framework that allows cross-platform web application development for mobiles using HTML5, JS, CSS3 and without requiring the developer to have experience with the native language of the targeted platform.

Basic Approach

Ever since PhoneGap v3+, it has become much easier to access a device’s native functionalities. PhoneGap is based on Apache’s Cordova project which is a set of APIs (adhering to W3C HTML5 specs) that enables accessing the native device features directly from javascript accomplished via “Plugins”. A plugin is a piece of native and javascript code bundled together, the native code exposes an interface i.e. methods that access the device features and the javascript code is used for enabling invocation of the exposed interface thru user-defined JS code. Depending on the platform the native language varies e.g. Objective C for iOS and Java for android, etc. In this blog, we’ll consider the strictest platform to code for iOS 7. 🙂

Getting Started

To get started, install Node.JS followed by PhoneGap module (which internally installs Cordova) as show here. I had PhoneGap 3.3.0, Xcode5 and command line tools installed on my machine while writing this blog post. Now, if you follow the documentation provided by PhoneGap like a good student you would execute the following commands:

Install PhoneGap

sudo npm install -g phonegap

Create a PhoneGap app

phonegap create MyAppFolder "com.myorg.loctracker" "My Location Tracker"

Add iOS as platform

cd MyAppFolder
phonegap build ios

Add Geolocation plugin

phonegap plugin add org.apache.cordova.geolocation
cd www
vi config.xml

Add the following lines in the file at the bottom (but as a child of widget tag) and save the file:

<feature name="Geolocation">
   <param name="ios-package" value="CDVLocation" />
   <param name="onload" value="true" />
</feature>

Thats it for the configuration part. Now lets just run the app for the first time by:

phonegap run ios

This would automatically launch the iOS simulator with the basic PhoneGap app running on it, that looks like this:

PhoneGap Basic Installation

PhoneGap Basic Installation

The code you see comes from www/index.html page hosted on a native UIWebView control. The cool thing here is you actually have a web app running on your iOS as a native app without actually requiring the code to be hosted on an external server.

Now you have the basic app running. I encourage you to explore the code added in the “plugins” folder to understand the code structure, to given an overview, the native code will be present inside the “plugins/org.apache.cordova.geolocation/src/ios” directory and javascript is at “plugins/org…/www” directory. The Xcode project is located at “platforms/ios/” directory, you’ll need this later.

Congratulations, you now officially know how to create PhoneGap app for iOS. Feel free to explore the API documentation. In the next post, I’ll cover the following:

  • Life cycle of a phonegap app
  • Getting geolocation coordinates on-demand
  • Monitoring location change in realtime

Stay tuned!