Phone Gap
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Phone Gap

on

  • 3,545 views

PhoneGap presentation

PhoneGap presentation

Statistics

Views

Total Views
3,545
Views on SlideShare
3,545
Embed Views
0

Actions

Likes
1
Downloads
98
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Read more: http://www.businessinsider.com/keith-rabois-qa-with-the-square-coo-and-angel-investor-2012-4?op=1#ixzz1rbFHRYjF
  • ADT=Android Deployment Tools

Phone Gap Presentation Transcript

  • 1. PhoneGap for Mobile Application Development Yiguang Hu yighu@yahoo.com
  • 2. people dont go to Google on this, they go to Yelp Steve Jobs
  • 3. PhoneGap/Cordovaan HTML5 app platform that allows you to author native applications with webtechnologies 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-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);
  • 8. APIs-geolocationvaronSuccess = 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-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);
  • 10. APIs-Storagefunction 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 demo1. 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 project4. 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 project6. Update activity code – Add cordova.jar into build path – Change the classs 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