Developing PhoneGap Apps
Snow Mobile 2/16/13
Don Coleman
Chariot Solutions
@doncoleman
PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.
Cordova
vs
PhoneGap
PhoneGap Supports Many Platforms
iOS, Android
Windows Phone, Blackberry
Symbian, Bada, WebOS
Tizen, Chrome, Windows 8
PhoneGap embeds a web view in a native app
JavaScript API
Your app is a native app
PhoneGap does not provide a UI
Can I wrap any website in PhoneGap and magically have a mobile app?
NO!
Unzip archive
move somewhere like /usr/local/phonegap-2.4.0
Do you have platform tools installed?
Xcode
Android SDK
Visual Studio
BlackBerry Webworks SDK
iOS
$ cd /usr/local/phonegap-2.4.0
$ cd lib/ios/bin
$ ./create ~/foo com.example.foo Foo
$ cd ~/foo
$ ./cordova/emulate
Android
$ cd /usr/local/phonegap-2.4.0
$ cd lib/android/bin
$ ./create ~/foo com.example.foo Foo
$ cd ~/foo
$ ./cordova/run
So we created a project, now what?
The www directory is just a web project
index.html
<!DOCTYPE html>
<html>
...
<script src="cordova-2.4.0.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener(
'deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
}
};
API Call
navigator.camera.getPicture(
onSuccess,
onFailure,
{
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
}
);
Callbacks
function onSuccess(imageURI) {
image.src = imageURI;
}
function onFailure(message) {
alert('Failed because: ' + message);
}
Permissions
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
index.html
<div>
<div>
<img id="image"></img>
<div>
<div>
<h1 id="cameraLabel">Camera</h1>
<div>
</div>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener(
'deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
cameraLabel.addEventListener(
'touchstart', app.takePicture, false);
},
takePicture: function() {
}
};
index.js
takePicture: function() {
navigator.camera.getPicture(
function(imageURI) {
image.src = imageURI;
},
function(error) {
console.log("error");
},
{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
targetWidth: 320,
targetHeight: 320,
allowEdit: true,
saveToPhotoAlbum: false
}
);
}
Troubleshooting
read the log output
ensure code is valid with jshint
Web Inspector
Ripple
http://emulate.phonegap.com
Weinre
http://debug.phonegap.com
Other ways to debug
Plugins
Extend PhoneGap
https://github.com/phonegap/phonegap-plugins
$ plugman
Usage
---------
Add a plugin:
plugman --platform --project --plugin
Remove a plugin:
plugman --remove --platform --project --plugin
List plugins:
plugman --list
$ plugman --list
BarcodeScanner - Cross-platform BarcodeScanner for Cordova/PhoneGap
ChildBrowser - ChildBrowser plugin
Facebook-Connect - Official plugin for Facebook Connect
GAPlugin - Google Analytics Plugin
KeychainPlugin - Keychain Plugin for Apache Cordova
NFC - Near Field Communication Plugin
PushPlugin - Push Notification Plugin for iOS and Android
TestflightPlugin - TestFlight Plugin for Apache Cordova
plugman --platform ios --project platforms/ios --plugin BarcodeScanner
PhoneGap is built out of plugins
Managing code
across multiple platforms
PhoneGap Build
http://build.phonegap.com/
