PhoneGap for Mobile Application        Development             Yiguang Hu         yighu@yahoo.com
people dont go to Google on     this, they go to Yelp           Steve Jobs
PhoneGap/Cordovaan HTML5 app platform that allows you to    author native applications with webtechnologies and get access...
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...
APIs-geolocationvaronSuccess = function(position) {      alert(Latitude:     + position.coords.latitude       + n +       ...
APIs-Storagefunction populateDB(tx) {       tx.executeSql(DROP TABLE IF EXISTS DEMO);       tx.executeSql(CREATE TABLE IF ...
APIs-Storagefunction queryDB(tx) {tx.executeSql(SELECT * FROM DEMO, [], querySuccess, errorCB);}function querySuccess(tx, ...
Demonstration• Download and install PhoneGap  – http://phonegap.com/• Develop your web application and wrap it  with Phone...
Android demo1. Requirements  – Eclipse 3.4+2. Install SDK + PhoneGap  – Download and install Eclipse Classic  – Download a...
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 t...
cordova.js file for different platforms are not                 interchangeable!
Android demo continue…5. Refresh the project6. Update activity code  – Add cordova.jar into build path  – Change the class...
iPhone Demo• InstallXcode• Install PhoneGap   – Open and install from Cordova-1.5.0.dmg• Create a new project   •   Select...
Windows phone demo• Require Windows 7 or Windows Vista with SP2• JDK 32bit• Install   – Windows Phone SDK and phonegap• Se...
PhoneGap for Mobile Application        Development             Yiguang Hu         yighu@yahoo.com           yighu@twitter
Upcoming SlideShare
Loading in...5
×

Phone Gap

2,971
-1

Published on

PhoneGap presentation

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,971
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
100
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. PhoneGap for Mobile Application Development Yiguang Hu yighu@yahoo.com
    2. 2. people dont go to Google on this, they go to Yelp Steve Jobs
    3. 3. PhoneGap/Cordovaan HTML5 app platform that allows you to author native applications with webtechnologies and get access to APIs and app stores
    4. 4. How it works• Build once with Web-standards• Wrap it with PhoneGap• Deploy to Multiple platforms
    5. 5. • HTML5+CSS3• JavaScript• Native Features• Deploy to multiple Platforms
    6. 6. Features
    7. 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. 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. 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. 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. 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. 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. 13. Android demo continue…3. Create Android project4. Under project root – Create libs and assets/www
    14. 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. 15. cordova.js file for different platforms are not interchangeable!
    16. 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. 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. 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. 19. PhoneGap for Mobile Application Development Yiguang Hu yighu@yahoo.com yighu@twitter
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×