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
  • RT @m_evans10: @joewalnes A SQL query goes into a bar, walks up to two tables and asks, "Can I join you?"
    August 20, 2014 at 3:55 PM
  • Have you read @wdpitt's newest book? - Web Essentials using #JavaScript & #HTML5. Free PDF download via @InfoQ: http://t.co/lesuPJ770I
    August 20, 2014 at 2:31 PM
  • How can we ensure that we write unit tests with sufficient coverage? Here are some tips for success in #unittesting - http://t.co/zqytilzXXW
    August 20, 2014 at 11:31 AM
  • RT @DZoneLinks: Easily Boost your Web Application by Using nginx - Compuware APM Blog - http://t.co/wm26pvCyKm - @DZoneLinks Big Link by ha…
    August 20, 2014 at 8:59 AM
  • Interested in @unity3d? Check out @johnwboardman's tutorials for Unity game dev with #JavaScript & C#: http://t.co/exsha7cP2b
    August 19, 2014 at 3:30 PM
  • But if you have a passion for quality dev, we might be up your alley. Check out our culture - http://t.co/kWgVdxgvpG http://t.co/y4IFbUA5Ia
    August 19, 2014 at 3:04 PM
  • FRP can solve a common #JavaScript problem - asynchronous requests to the server not returning in requested order http://t.co/jB0ox7Jo4n
    August 19, 2014 at 11:38 AM
  • #RabbitMQ: messaging software built on AMQP protocol. Learn relevant concepts & how to avoid common "gotchas" here: http://t.co/ZwMXlhKyX8
    August 19, 2014 at 9:30 AM
  • We're about to send out our free monthly tech newsletter. Dev tips/articles via email. Not on the list yet? Sign up - http://t.co/aamFVCyyJn
    August 18, 2014 at 1:44 PM
  • There's a new post on the Keyhole blog by Phuong Nguyen - Functional Reactive Programing and #JavaScript - http://t.co/jB0ox7Jo4n
    August 18, 2014 at 11:03 AM
  • Thanks for the RT, @TheGrisExplores! Have a great week.
    August 18, 2014 at 9:38 AM
  • Rapid appdev has a bad rep, but there are ways to bring development time down the right way. Don't Fear the Rapid - http://t.co/aTPcAKOj0r
    August 18, 2014 at 8:31 AM
  • Code For Maintainability So The Next Developer Doesn't Hate You - http://t.co/FWTMF7Pixd 8 helpful tips to do so.
    August 16, 2014 at 12:20 PM
  • DYK? We prefer diverse views, so the info we share doesn't always reflect us as a company. See our Social Policies - http://t.co/MXhB9lE9tV
    August 15, 2014 at 3:30 PM
  • KHS summer intern Bryan Melland just said his goodbyes, headed off to his 1st year @ University of Nebraska. Best wishes for a great year!
    August 15, 2014 at 3:02 PM
  • RT @fpmoles: It's official, KC has a Spring User Group: http://t.co/vaoiGcEva4 cc:@rob_winch
    August 15, 2014 at 2:01 PM
  • Automated Testing is great for dev, but does bring a set of challenges (especially for #agile teams). Success tips: http://t.co/1acl1ngO7i
    August 15, 2014 at 1:20 PM
  • A #JavaScript promise is an I.O.U. to return a value in the future. Promises are cool. Learn about them here - http://t.co/6wCz9b7e4v
    August 15, 2014 at 8:16 AM
  • Found a great resource for folks who want to learn to code - #KC Code Noob. The next Meetup 8/20 covers #Bootstrap - http://t.co/bHom4Lvz7h
    August 14, 2014 at 2:11 PM
  • RT @nicholascloud: the mother of all javascript wysiwyg editor lists https://t.co/o83cGoHQB8
    August 14, 2014 at 11:48 AM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2014 Keyhole Software, LLC. All rights reserved.