PhoneGap allows developers to build native mobile apps using HTML, CSS and JavaScript. It works by wrapping web-based apps so they can access device APIs and be deployed to app stores. Developers build their app once using web standards, then PhoneGap packages it to run on multiple platforms like Android, iOS and Windows Phone. The document provides instructions for building basic PhoneGap apps for Android, iOS and Windows Phone, accessing device APIs, and deploying apps to stores.

1. PhoneGap for Mobile Application
Development
Yiguang Hu
yighu@yahoo.com

2. people don't go to Google on
this, they go to Yelp
Steve Jobs

3. PhoneGap/Cordova
an HTML5 app platform that allows you to
author native applications with web
technologies and get access to APIs and app
stores

4. How it works
• Build once with Web-standards
• Wrap it with PhoneGap
• Deploy to Multiple platforms

5. • HTML5+CSS3
• JavaScript
• Native Features
• Deploy to multiple Platforms

6. Features

7. APIs-Accelerometer
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + 'n' +
'Acceleration Y: ' + acceleration.y + 'n' +
'Acceleration Z: ' + acceleration.z + 'n' +
'Timestamp: ' + acceleration.timestamp + 'n');
};
function onError() {
alert('onError!');
};
navigator.accelerometer.getCurrentAcceleration(onSuccess,
onError);

8. APIs-geolocation
varonSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + 'n' +
'Longitude: ' + position.coords.longitude + 'n' +
'Altitude: ' + position.coords.altitude + 'n' +
'Accuracy: ' + position.coords.accuracy + 'n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'n' +
'Heading: ' + position.coords.heading + 'n' +
'Speed: ' + position.coords.speed + 'n' +
'Timestamp: ' + new Date(position.timestamp) + 'n');
};
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);

9. APIs-Storage
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS DEMO');
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
function successCB() {
alert("success!");
}
var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(populateDB, errorCB, successCB);

10. APIs-Storage
function queryDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}
function querySuccess(tx, results) {
varlen = results.rows.length;
console.log("DEMO table: " + len + " rows found.");
for (vari=0; i<len; i++){console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data = " +
results.rows.item(i).data);
}
}
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(queryDB, errorCB);

11. Demonstration
• Download and install PhoneGap
– http://phonegap.com/
• Develop your web application and wrap it
with Phonegap
• Drop www to target platform projects
• Test/Run
• Deploy it!

12. Android demo
1. Requirements
– Eclipse 3.4+
2. Install SDK + PhoneGap
– Download and install Eclipse Classic
– Download and install Android SDK
– Download and install ADT Plugin
– Donwload the latest copy of PhoneGap and
extract its contents.

13. Android demo continue…
3. Create Android project
4. Under project root
– Create libs and assets/www

14. Android demo continue…
5. Copy from phonegap root/libs/android
– example/assets/www/* to assets/www
– cordova-1.5.0.jar to libs/
– xml folder to /res

15. cordova.js file for different platforms are not
interchangeable!

16. Android demo continue…
5. Refresh the project
6. Update activity code
– Add cordova.jar into build path
– Change the class's extend from Activity to DroidGap
– Replace the setContentView() line with
super.loadUrl("file:///android_asset/www/index.ht
ml");
– Add import org.apache.cordova.DroidGap;
– Add import com.phonegap.*;
– Remove import android.app.Activity;

17. iPhone Demo
• InstallXcode
• Install PhoneGap
– Open and install from Cordova-1.5.0.dmg
• Create a new project
• Select PhoneGap/cordova-based Application
• Run it
• Drag the www directory by the iosphonegap project
directory into project
• Run it again
• Copy the html files developed from Android into the ios
project www directory
• Run it again

18. Windows phone demo
• Require Windows 7 or Windows Vista with SP2
• JDK 32bit
• Install
– Windows Phone SDK and phonegap
• Setup
– Open Visual Studio Express for Windows Phone and
choose New Project.
– Select PhoneGapStarter.
– Drag www folder and drop into project
– Copy the app related files into www folder
• Build and run

19. PhoneGap for Mobile Application
Development
Yiguang Hu
yighu@yahoo.com
yighu@twitter