PhoneGap

Android, iOS and Windows Mobile…Oh My: An Introduction to PhoneGap

by on March 25, 2013 9:52 am

With the growing adoption and reliance on smartphones and tablets in the competitive handheld industry, mobile applications need to be built across all major mobile operating platforms to reach the demanding customer base. These expectations leave mobile developers with the daunting task of building expertise in Android, iOS, and Windows Mobile. I will be the first to admit from first-hand experience, that moving from developing for Android to iOS or vice-versa can be difficult as every SDK has its own quirks.

As a working developer in the middle of my graduate studies, time is a big constraint. I often have class assignments that require me to develop in multiple mobile operating platforms. Therefore, I was delighted to learn about PhoneGap.

About

PhoneGap is an open source framework that allows the building of applications across major mobile platforms using languages you are already familiar and comfortable with, like HTML5, JavaScript, and CSS. It can be compiled using platform-native tools. The JavaScript API is defined to facilitate access to device features for supported platforms.

To familiarize myself with PhoneGap functionality, I decided to start small by building a simple application for an iPhone. Before diving into development of the application, please make sure that the following software tools are installed on your development machine.

Required Software Tools and Devices:

  • Mac OS X Lion or greater (10.7.4+)
  • iOS 6 SDK and Xcode 4.5.2 (latest version of Xcode)
  • Xcode command line tools
  • PhoneGap
  • iOS device (for testing) optional

Example Application

I developed a basic application to create a new contact with first name, last name, and a note using HTML, jQuery, and JavaScript. I used an HTML form to get the user input and integrated it with PhoneGap’s contact object.

To create a new project and run the Create script; go through the following steps:

  1. Locate the PhoneGap directory
  2. Inside the directory, go to lib/ios/bin
  3. Launch the Terminal and change the directory to point to the bin folder identified above (Tip: drag the bin folder to the Terminal to accomplish this step)
  4. Run the create script with “./create ~/Documents/Cordova/ContactTest org.apache.cordova.ContactTest ContactTest”. 

I have broken down the script to provide more definition:

  • ~/Documents/Cordova/ContactTest is the project directory location
  • org.apache.cordova.ContactTest is the package name. It must be the reverse domain App ID created in the Apple provisioning portal.
  • ContactTest is the project name

Finally, the project for iPhone is created and you are now ready to open the project in Xcode. You can find the default Index.html file under the www folder.

To create a contact, we will prompt the user to input the values with an html form in the body of index.html with following code:

<form id="cform"><label for="firstname">First name </label>
 <input id="firstname" type="text" name="first" />
 <label for="flastname">Last name </label>
 <input id="lastname" type="text" />
 <label for="note">Note </label>
 <textarea id="note"></textarea>
 <input id="btnSave" onclick="saveContact()" type="button" value="Save Contact" />
</form>

We are using jQuery, so be sure to include the following script in header:

<script charset="utf-8" type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script charset="utf-8" type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>

Run the project in a simulator to ensure that your UI looks similar to this screenshot:

PhoneGap Blog

When a user clicks on “Save Contact,” the ‘SaveContact()’ function is called and defined in the header. We will get the values that the user entered in the form inside the “saveContact” function with the following JavaScript:

var fname = document.getElementById('firstname').value;
var lname = document.getElementById('lastname').value;
var fullname = fname + " " + lname;
var note = document.getElementById('note').value;

To save the information on the phone, we need to create a contact and assign the gathered information. “Contact.Create()” creates and returns the new contact – but it is not saved on mobile phone yet. Assign the values to the contact and then save the contact using “Contact.save()” which saves the contact in the mobile phone. Here is the code:

var contact = navigator.contacts.create();
contact.displayName = fullname;
contact.note = note;
var name = new ContactName();
name.givenName = fname;
name.familyName = lname;
contact.name = name;
contact.save(onSaveSuccess,onSaveError);

You can access the full code of the application on Keyhole Software’s GitHub repository.

Final Notes

If you are already familiar with HTML, CSS and JavaScript, PhoneGap is an easy way into any mobile native application development. However, if your application is complex and needs to deal with massive amounts of data, it is advised to create a web service or server that can be accessed over XML. If you want to implement such a complex function in a native application environment, I would suggest using another medium. But for simple applications that can be implemented with HTML, PhoneGap is a good option as it provides the capacity to use the same code for a variety of mobile platforms. Overall, if you want to learn mobile platform development, PhoneGap is a good starting point.

Also, PhoneGap has recently released PhoneGap Build. PhoneGap Build compiles code, once submitted, on the cloud and provides a deployable application for multiple mobile platforms. More details about PhoneGap and PhoneGap Build can be found here. Good luck!

– Jinal Patel, asktheteam@keyholesoftware.com

Update: Check out a related PhoneGap post by Jinal Patel written November 4, 2013 - PhoneGap: Utilizing Native Mobile Features with Plugins

  • Share:

2 Responses to “Android, iOS and Windows Mobile…Oh My: An Introduction to PhoneGap”

  1. I thoroughly enjoyed reading this post

  2. […] my previous blog “Android, iOS, and Windows Mobile…Oh My: An Introduction to PhoneGap,” I summarized the basic functionality. I would recommend reviewing the post if you have not yet […]

Leave a Reply

Things Twitter is Talking About
  • Vacuole #Encapsulation aims to minimize the code necessary for routinely verbose data tasks -http://t.co/fJQzz731rZ
    April 23, 2014 at 9:45 AM
  • DYK? We translate our hands-on experience to custom courses to train your dev teams. Our new course on #AngularJS: http://t.co/Bf3UuClj4Z
    April 23, 2014 at 8:45 AM
  • Interested in #Backbone & #Marionette but not sure where to start? Check out the Marionette-Require-Boilerplate: http://t.co/XDj43BwSS3 #SPA
    April 22, 2014 at 4:50 PM
  • Responsive Design can help in giving your users a consistent app experience across devices. Quick tutorial - http://t.co/BDrT5LvgRo
    April 22, 2014 at 2:31 PM
  • Tips & tricks to save time in the #Eclipse IDE - http://t.co/uGgCkchwNk (keystroke combos, navigation, time tracking & more)
    April 22, 2014 at 8:40 AM
  • Join us! Looking to add to our team a developer w/ advanced #JavaScript & #NodeJS exp (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 21, 2014 at 7:35 PM
  • Looking into #ExtJS but don't know where to start? Check out our video tutorial series to find your way around - http://t.co/XFYDT6YNWA
    April 21, 2014 at 4:35 PM
  • We've been tinkering with JS library Famo.us since its public release 4/10. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 21, 2014 at 2:03 PM
  • RT @CompSciFact: Rivest, Shamir, and Adleman published the RSA public key cryptography algorithm in 1978.
    April 21, 2014 at 11:13 AM
  • DYK? When we share/RT/blog/etc, it doesn't mean that Keyhole endorses it - we just like variety of opinions! Info: http://t.co/MXhB9lE9tV
    April 19, 2014 at 3:01 PM
  • A huge welcome to Justin Graber who joined the Keyhole team this week!
    April 18, 2014 at 3:25 PM
  • Pssst... @kc_dc early bird pricing ends on Sunday. Shoot us a note if you want to save 10% off of your ticket with our sponsor promo code!
    April 18, 2014 at 2:49 PM
  • Join our team! Looking for a developer w/ advanced #JavaScript & #NodeJS experience (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 18, 2014 at 11:21 AM
  • .@befamous has huge potential to make HTML5/JS/CSS web pages feel as native apps. Here's our inital tech takeaways - http://t.co/S77TSKHDKd
    April 18, 2014 at 9:50 AM
  • Why to use AngularUI Router instead of ngRoute - http://t.co/tBnj5ZCkOw
    April 17, 2014 at 7:55 PM
  • RT @joemccann: Total Number of GitHub Repositories by Programming Language http://t.co/30cekDsE4s
    April 17, 2014 at 4:25 PM
  • JSF + AngularJS = AngularFaces? http://t.co/mXvOTwVbb6 // Interesting insight. Thoughts?
    April 17, 2014 at 3:45 PM
  • RT @MikeGelphman: Great news, guys: @TobiasRush founder of @eyeverify is our latest @MobileMidwest speaker addition http://t.co/8fE8oNfPnX
    April 17, 2014 at 1:35 PM
  • .@befamous was released publicly 4/10 & we've been tinkering with it since. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 17, 2014 at 8:33 AM
  • Famo.us' main idea is for HTML5/JS/CSS web pages to feel like native mobile apps. So, @zachagardner tried it out - http://t.co/S77TSKHDKd
    April 15, 2014 at 6:40 PM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2013 Keyhole Software, LLC. All rights reserved.