phone gap
DESCRIPTION
PhoneGap presentationTRANSCRIPT
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