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
  • Good introduction to TypeScript - http://t.co/0N22fVpAHt Plus, how to approach modularization in #TypeScript - http://t.co/wxRWGBj3Uh
    June 30, 2015 at 3:25 PM
  • .@mrbristopher just delivered a new S911 Night Drone to James Hayes, winner of our #kcdc15 giveaway! Congrats, James! http://t.co/RriJIxubH2
    June 30, 2015 at 11:35 AM
  • It feels like primitives could have been left out of the initial implementation of #Java. See why - http://t.co/A8ChCBHXJO
    June 29, 2015 at 4:05 PM
  • Developers in a bounce house! I repeat, developers in a bounce house! We had a blast at our 1st company picnic. Pics: http://t.co/XIqs7ECUst
    June 29, 2015 at 1:40 PM
  • New #SpringBatch tutorial from @jhackett01: Spring Batch – Replacing XML Job Configuration With JavaConfig http://t.co/PmdXnriKQu #java
    June 29, 2015 at 11:46 AM
  • We had such a fun time at the Keyhole company picnic! Pictures to come, including some of our developers in the bounce house. #loveourteam
    June 29, 2015 at 8:41 AM
  • In #JavaScript, how do we harness the power of callbacks without the confusing mess of nested functions? Promises - http://t.co/j1gAJ9hi3D
    June 29, 2015 at 8:40 AM
  • .@zachagardner We are so happy that your family attended! This will definitely need to be repeated every year!
    June 28, 2015 at 8:14 PM
  • Thank you to all on the Keyhole team who came to our first inaugural company picnic! Wonderful food, family and bounce house fun!
    June 28, 2015 at 7:50 PM
  • Debugging is a challenging part of being a programmer. We have a tutorial series to help, with a #JavaScript focus - http://t.co/rfhjJo64P7
    June 27, 2015 at 1:45 PM
  • We love #KCDC15! @PinsightMedia's James Hayes just was drawn as the winner of the @KeyholeSoftware drone giveaway. Stop on by the KHS booth.
    June 26, 2015 at 2:24 PM
  • Congratulations to James Hayes! You have won the Keyhole drone giveaway, come up and get your prize! #KCDC15
    June 26, 2015 at 2:09 PM
  • There are just 15 minutes left to register to win the drone from us at the Keyhole Software booth - come say hi and grab some frogs! #kcdc15
    June 26, 2015 at 1:45 PM
  • RT @duanenewman: So many great attendees and speakers at #KCDC15. Sad that we already are at the last day.
    June 26, 2015 at 1:34 PM
  • And thank you to @jonathanfmills! We just ran out of characters in our tweet. #KCDC15 is/has been such a great experience. Thank you to ALL!
    June 26, 2015 at 12:24 PM
  • Huge thank you to @boontlee, @leebrandt & all the #kcdc15 / @kc_dc conference organizers. So valuable for #KansasCity & such fun to sponsor!
    June 26, 2015 at 10:53 AM
  • RT @sixthpoint: Slides from today's presentation "Building a more responsive design with JSF + Bootstrap 3" http://t.co/R2R6KocrUC #kcdc15
    June 26, 2015 at 10:32 AM
  • #KCDC15: Using Java EE 6 Interceptors to provide Business Rules Validation on Stateless EJB Services is @ 10:10 - http://t.co/vtJU358WZk
    June 26, 2015 at 8:06 AM
  • BIG news from the @KeyholeSoftware #KCDC15 booth: @eastlack just set the new world record... his #GrokOla Frog Flinger just went 73 feet!
    June 25, 2015 at 4:02 PM
  • DYK? There is package for Node.js that allows you to invoke .NET code in-process from a #Nodejs app – Edge.js. Info: http://t.co/fYNjfiF3al
    June 25, 2015 at 3:05 PM