Phone Gap

PhoneGap for Mobile Application Development

Yiguang [email protected]

people don't go to Google on this, they go to Yelp

Steve Jobs

PhoneGap/Cordova

an HTML5 app platform that allows you to author native applications with web

technologies and get access to APIs and app stores

How it works

• Build once with Web-standards• Wrap it with PhoneGap• Deploy to Multiple platforms

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

Features

APIs-Accelerometerfunction 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);

APIs-geolocationvar onSuccess = 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);

APIs-Storagefunction 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);

APIs-Storagefunction queryDB(tx) { tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);}

function querySuccess(tx, results) { var len = results.rows.length; console.log("DEMO table: " + len + " rows found.");

for (var i=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);

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!

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.

Android demo continue…

3. Create Android project4. Under project root– Create libs and assets/www

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

cordova.js file for different platforms are not interchangeable!

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.html");

– Add import org.apache.cordova.DroidGap; – Add import com.phonegap.*; – Remove import android.app.Activity;

iPhone Demo• Install Xcode• 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 ios phonegap project directory

into project• Run it again• Copy the html files developed from Android into the ios project

www directory• Run it again

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

PhoneGap for Mobile Application Development

Yiguang [email protected]

yighu@twitter