I found a lot of tutorials for PhoneGap 2, but I couldn’t find any PhoneGap 3 tutorial. That’s why I start a PhoneGap 3 tutorial session. Please note, I never worked with PhoneGap 2, so please correct me if I’m wrong.
In the first part I want to install PhoneGap 3 and deploy a sample example into the Android simulator.
Prerequisites:
- Node Js
- NPM
- Google Android 4.2.2 (API 17), SDK build tools
Install PhoneGap 3 (docs):
1 | # sudo npm install -g phonegap |
Now create the first PhoneGap 3 application:
1 2 | # phonegap create my-app # cd my-app |
Make sure the Android SDK tools are available in your path, for example:
1 2 | # export PATH=$PATH:/Users/xxx/_code/android-sdk-macosx/tools/ # export PATH=$PATH:/Users/xxx/_code/android-sdk-macosx/platform-tools/ |
It’s time to build the Android application and install it into the emulator:
1 | # phonegap local run android |
A hint about the Android simulator. Make sure to install the HAXM Intel drivers to speed up the simulator. I also selected a x86 image and enabled the snapshot option. More details how to setup your hardware: Link.
My first application should create a contact and show an alert. PhoneGap 3 uses plugins for all tasks that need a native part. See this link for a description about the plugins. As I want to create a contact on my phone, I have to add the contact plugin:
1 2 3 4 5 6 | # phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git [phonegap] adding the plugin: https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git [phonegap] successfully added the plugin # phonegap local plugin list [phonegap] org.apache.cordova.core.contacts |
The js part (app logic), file js/index.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicity call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); var myContact = navigator.contacts.create({"displayName": "Test User"}); myContact.note = "This contact has a note."; console.log("The contact, " + myContact.displayName + ", note: " + myContact.note); app.receivedEvent('contactcreated'); myContact.save(app.onContactSaveSuccess,app.onContactSaveError); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); }, onContactSaveSuccess: function(contact) { window.alert("Save Success"); }, onContactSaveError: function(contact) { window.alert("Save Failed"); }, }; |
And the representation layer, file: index.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>PILLEpalle!</title> </head> <body> <div class="app"> <h1>PhoneGap</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> <div id="contactcreated" class="blink"> <p class="event listening">Creating Contact</p> <p class="event received">Contact created</p> </div> </div> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html> |
Deploy it to the simulator:
1 | # phonegap local run android |
And verify that the a user was created.
Congratulations, you created your first PhoneGap 3 application! There are some nasty things open, the alert window is displayed before the main window is displayed. And alert is used in the app logic layer, which should be in representation layer. You see, there is room for improvement.
Edit 29.8.13:
Short add on how to deploy an iOS application. Make sure you have XCode and Brew installed, then install the “ios-sim” package:
1 | # brew install ios-sim |
That’s it, now run you PhoneGap3 application on your iOS simulator:
1 | phonegap local run ios |
And the native iOS simulator runs quite faster than the Android emulator.
Another Tutorial for PhoneGap 3 beginner: http://www.triadwebcrafters.com/blog/?p=166