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.
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
- iOS device (for testing) optional
To create a new project and run the Create script; go through the following steps:
- Locate the PhoneGap directory
- Inside the directory, go to lib/ios/bin
- 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)
- 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 the following code:
<form id="cform"><label for="firstname">First name </label>
<input id="firstname" type="text"
<label for="flastname">Last name </label>
<input id="lastname" type="text" />
<label for="note">Note </label>
<input id="btnSave" onclick="saveContact()"
type="button" value="Save Contact" />
We are using jQuery, so be sure to include the following script in header:
Run the project in a simulator to ensure that your UI looks similar to this screenshot:
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 “
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;
You can access the full code of the application on Keyhole Software’s GitHub repository.
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, email@example.com