Tag Archive: PhoneGap


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 hereI 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!

I recently was working on making a webpage compatible with the portable devices specifically iPhone & iPad. And when I say compatible, there are only 2 things to keep in mind:

  1. The graphical elements should maintain the layout or gracefully adjusted to remove the horizontal scroll.
  2. The functionalities are preserved – this would include all the dynamic aspects like server side calls, animations, etc.

For the first requirement, we have a really great solution – “Twitter Bootstrap”. Just add it to any page and making it responsive becomes super easy. Of course, it does require the programmer to still have a sense of a front-end designer i.e. just putting the framework in place is not going help, it requires some effort still. I am going to refrain from going into details about the styling aspect in this post and talk about the issues I dealt in terms of functionality.

The second requirement is tricky and get really annoying at times. Some components required replacing, tweaking while somethings were not supported at all. Below, I’m going to mention all the challenges I faced:

  • Custom scrolling solution like jquery.slimScroll had some rendering/processing issues, though iScroll is a good replacement.
  • If you are using text controls than the virtual keyboard can create mayhem for your user experience, the primary reason is when the keyboard opens, the page automatically scrolls up but the original position fails to restore when the keyboard is closed.
  • Sounds & Videos – while on the desktop you can play these as and when required i.e. on page load, based on an event, the iOS web engine only allows the playing of these files as consequence of a user action ONLY. This can totally ruin your UX if you have a auto-playing media files.
  • If the user puts the browser in the background or is working with multiple tabs, then in pre-iOS 7 devices, the pages state will be lost i.e. when the user goes back to the page it’ll open up like you hit refresh. While the query string params in the URL are retained, the post params are lost. In iOS7, I guess there’s a better handling of this particular case where the page is kept in memory but maybe its only for a limited time.

One good thing is jQuery works nicely and the socket.io also is not blocked although Apple only wants to use APNS for their push notifications but then again when the browser is in the background, the page is dead and no processing is done.

How do we handle these cases where we dont want to create a Native App due to lack of time, resources, experience, etc? Well one solution can be PhoneGap, it allows you convert your existing web app into a iOS installable application. Please see that it doesnt cover all the cases mentioned above directly, you would still have to write some native code as an hybrid solution but it reduces a lot of pain. Also, you’ll have to go thru Apple Developer Program and App publishing guidelines to ensure the app is available at the AppStore. It sounds like more of a mess but its a one time investment, for a solution that works!