Mobile Development with  PhoneGap & HTML5           Kuro Hsu @ JS Carnival 2012                               2012/10/27
Kuro Hsu    (a.k.a kurotanshi)• A Front-End Engineer.• Admin of PhoneGap TW Community Page  - http://www.facebook.com/Phon...
Why ?
Mobile is Growing
Android          Java   BlackBerry         Java       iOS        Objective-C     Palm OS      C, C++, Pascal    Symbian   ...
http://mobilehtml5.org/
Build Mobile Web with HTML5• Setup the Viewport<meta name="viewport"      content="width=device-width;      initial-scale=...
Build Mobile Web with HTML5• Mobile CSS Resethttp://www.vcarrer.com/2010/11/css-mobile-reset.html• CSS Features-webkit-tex...
Cross Platform• Media Queries @media only screen and (max-width: 480px) {     /* small screen styles */ } @media only scre...
http://mediaqueri.es
Cross Platform• User agent Detectionvar isIphone = !!(navigator.userAgent.match("iPhone"));if(isIphone){  // do something....
Cross Platform• Feature Detectionif( !!window.WebSocket ){    var socket = new WebSocket(ws://sample.com:111/so);    // do...
Build Mobile Web with HTML5• Events - Orientation:window.addEventListener(orientationchange,                       chkOrie...
Build Mobile Web with HTML5• Events - Touch events: window.addEventListener("touchstart",    touchEvents,   false); window...
Build Mobile Web with HTML5• Events – Gesture events : window.addEventListener("gesturestart", gstEvents, false); window.a...
Build Mobile Web with HTML5• Events - DeviceMotion:window.addEventListener("devicemotion", accel, false);function accel(ev...
Build Mobile Web with HTML5 • Geolocation APIwindow.navigator.geolocation.getCurrentPosition(success, [failure, [options]]...
Build Mobile Web with HTML5• LocalStorage / SessionStoragelocalStorage["bar"] = "hello world!";var foo = localStorage.getI...
Web vs. Native                     Web        Native    Dev Cost      Reasonable   Expensive   Dev Time         Short     ...
Web vs. Hybrid vs. Native                    Web        Hybrid       Native   Dev Cost      Reasonable   Reasonable   Expe...
PhoneGap
PhoneGap Started in 2008 iPhoneDevCamp Working prototype with geolocation
PhoneGap 2008: support iPhone, Android and Blackberry 4 2009: Added Symbian and webOS support.       "Rejected" by Apple...
Apache Cordova  ( From PhoneGap 1.5.0 )
Apache Cordova Cordova is the open source project PhoneGap is the implementation Like Webkit for Chrome/Safari http://...
What is PhoneGap / Cordova ? • Basically just a webkit browser with all the   chrome removed, even the menu bar, and   dos...
What is PhoneGap / Cordova ? • Basically just a webkit browser with all the   chrome removed, even the menu bar, and   dos...
What is PhoneGap / Cordova ? • PhoneGap is an HTML5 app platform that allows   you to author native applications with web ...
So, it means...?     Write Once, Run Anywhere?
NO
The Truth Is...     Write Once, Debug       Everywhere.
Uses Platforms Native Control                                                           Windows   iOS       Android   Blac...
Uses Platforms Native Control                                                           Windows   iOS       Android   Blac...
Uses Platforms Native Control                                                           Windows   iOS       Android   Blac...
Uses Platforms Native Control                                                           Windows   iOS       Android   Blac...
How does PhoneGap work?• 1. Write a web app using HTML5 technologies:  HTML5 / CSS / JS
How does PhoneGap work?• 2. Package your web app into PhoneGap
How does PhoneGap work?• 2. Package your web app into PhoneGap
How does PhoneGap work?• 3. Deploy your Native  App to multiple devices (  iOS, Android, Blackberry,  WP 7..., and so on. )
How does PhoneGap work?
PhoneGap API / Plugins:   Accelerometer   Events   Camera          File   Capture         Geolocation   Compass    ...
http://phonegap.com/about/feature
PhoneGap API / Plugins: • Custom Plugins: Terrible support across   platforms, and you can make it on you own!      https...
PhoneGap API / Plugins: • An interface to the most common set of   device functionality. • All APIs features are plugins. ...
Get Started !
Demo
Accelerometer APIfunction onSuccess(acceleration) {    alert(Acceleration X:  + acceleration.x + n +          Acceleration...
Media APIfunction playAudio(url) {    var my_media = new Media(url,    // success callback    function() {        console....
Custom Alert / Confirmfunction showConfirm() {    navigator.notification.confirm (       ‘remove user?,       onConfirm,  ...
Cameranavigator.camera.getPicture(  onPhotoDataSuccess,  onFail,  {    quality: 50,    destinationType: destinationType.DA...
• AppLaud              – A Eclipse Plugin for PhoneGap                Android.              – Bundled with PhoneGap 1.9.0 ...
Mobile Debugging
Mobile Debugging • Ripple Mobile Environment Emulator (Chrome)
Mobile Debugging • Weinre / debug.phonegap.com
PhoneGap doesnt bundle a UI framework,but they support any JS framework thatworks in the browser.
Thanks ! Kuro Hsu   kurotanshi @ gmail.com   http://kuro.tw   http://www.plurk.com/kurotanshi   http://www.facebook.c...
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Upcoming SlideShare
Loading in …5
×

Mobile Development with PhoneGap & HTML5

4,797 views
4,801 views

Published on

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,797
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
283
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Mobile Development with PhoneGap & HTML5

  1. 1. Mobile Development with PhoneGap & HTML5 Kuro Hsu @ JS Carnival 2012 2012/10/27
  2. 2. Kuro Hsu (a.k.a kurotanshi)• A Front-End Engineer.• Admin of PhoneGap TW Community Page - http://www.facebook.com/PhoneGapTW
  3. 3. Why ?
  4. 4. Mobile is Growing
  5. 5. Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#Mobile development is mess.
  6. 6. http://mobilehtml5.org/
  7. 7. Build Mobile Web with HTML5• Setup the Viewport<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />@viewport { width: device-width; zoom: 1.0; maximum-scale: 1.0; user-zoom: fixed; /* zoom = 1, fixed = 0 */}
  8. 8. Build Mobile Web with HTML5• Mobile CSS Resethttp://www.vcarrer.com/2010/11/css-mobile-reset.html• CSS Features-webkit-text-size-adjust: none;-webkit-tap-highlight-color: transparent;position: fixed; /* iOS5 & Android 2.2+ */overflow: scroll; /* iOS5 */……, and more.
  9. 9. Cross Platform• Media Queries @media only screen and (max-width: 480px) { /* small screen styles */ } @media only screen and (min-width: 481px) { /* large screen styles */ }
  10. 10. http://mediaqueri.es
  11. 11. Cross Platform• User agent Detectionvar isIphone = !!(navigator.userAgent.match("iPhone"));if(isIphone){ // do something...}
  12. 12. Cross Platform• Feature Detectionif( !!window.WebSocket ){ var socket = new WebSocket(ws://sample.com:111/so); // do something...}else{ var fakeSocket = new XmlHttpRequest(); // do something...}
  13. 13. Build Mobile Web with HTML5• Events - Orientation:window.addEventListener(orientationchange, chkOrientation, false);function chkOrientation(ev){ var orient; if (window.orientation) { orient = (Math.abs(window.orientation) === 90) ? landscape : portrait; }}
  14. 14. Build Mobile Web with HTML5• Events - Touch events: window.addEventListener("touchstart", touchEvents, false); window.addEventListener("touchmove", touchEvents, false); window.addEventListener("touchend", touchEvents, false); window.addEventListener("touchcancel", touchEvents, false); function touchEvents(ev){ // do something... }
  15. 15. Build Mobile Web with HTML5• Events – Gesture events : window.addEventListener("gesturestart", gstEvents, false); window.addEventListener("gestureend", gstEvents, false); window.addEventListener("gesturechange", gstEvents, false); function gstEvents(ev){ // do something... }
  16. 16. Build Mobile Web with HTML5• Events - DeviceMotion:window.addEventListener("devicemotion", accel, false);function accel(ev){ // ev.acceleration.x/y/z; // do something…}
  17. 17. Build Mobile Web with HTML5 • Geolocation APIwindow.navigator.geolocation.getCurrentPosition(success, [failure, [options]] );if(window.navigator.geolocation){ var geo = navigatoe.geolocation(); geo.getCurrentPosition(getPosSuccess);}function getPosSuccess(pos){ var lat = pos.coords.latitude; var lon = pos.coords.longitude;}
  18. 18. Build Mobile Web with HTML5• LocalStorage / SessionStoragelocalStorage["bar"] = "hello world!";var foo = localStorage.getItem("bar");localStorage.setItem("bar", "Hello JavaScript!");localStorage.removeItem("bar");localStorage.clear();
  19. 19. Web vs. Native Web Native Dev Cost Reasonable Expensive Dev Time Short Long Portability High None Performance Fast Very Fast Native Functionality No All App Store Distribution No Yes Extensible No Yes
  20. 20. Web vs. Hybrid vs. Native Web Hybrid Native Dev Cost Reasonable Reasonable Expensive Dev Time Short Short Long Portability High High None Performance Fast Fast Very Fast Native Functionality No Yes All App Store Distribution No Yes Yes Extensible No Yes Yes
  21. 21. PhoneGap
  22. 22. PhoneGap Started in 2008 iPhoneDevCamp Working prototype with geolocation
  23. 23. PhoneGap 2008: support iPhone, Android and Blackberry 4 2009: Added Symbian and webOS support. "Rejected" by Apple. 2011: Added Windows Phone 7 support. Adobe officially announced the acquisition of Nitobi Software on October 4. In process to becoming a project under the Apache Software Foundation. And New Name…
  24. 24. Apache Cordova ( From PhoneGap 1.5.0 )
  25. 25. Apache Cordova Cordova is the open source project PhoneGap is the implementation Like Webkit for Chrome/Safari http://incubator.apache.org/cordova/
  26. 26. What is PhoneGap / Cordova ? • Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
  27. 27. What is PhoneGap / Cordova ? • Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
  28. 28. What is PhoneGap / Cordova ? • PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.
  29. 29. So, it means...? Write Once, Run Anywhere?
  30. 30. NO
  31. 31. The Truth Is... Write Once, Debug Everywhere.
  32. 32. Uses Platforms Native Control Windows iOS Android Blackberry webOS Symbian Phone 7.0 WebKit 532.9 WebKit WebKit WebKit WebCore with WebKit with S60 or Qt? …Javascript V8 Piranah Core
  33. 33. Uses Platforms Native Control Windows iOS Android Blackberry webOS Symbian Phone 7.0 WebKit IE7 532.9 WebKit WebKit WebKit WebCore with WebKit with S60 or Qt?Javascript V8 Piranah Core
  34. 34. Uses Platforms Native Control Windows iOS Android Blackberry webOS Symbian Phone 7.5 WebKit 532.9 WebKit WebKit WebCoreJavascript with V8 WebKit with Piranah WebKit S60 or Qt? IE9 Core
  35. 35. Uses Platforms Native Control Windows iOS Android Blackberry webOS Symbian Phone 7.5 WebKit 532.9 WebKit WebKit WebKit WebCore with WebKit with S60 or Qt? IE9Javascript V8 Piranah Core
  36. 36. How does PhoneGap work?• 1. Write a web app using HTML5 technologies: HTML5 / CSS / JS
  37. 37. How does PhoneGap work?• 2. Package your web app into PhoneGap
  38. 38. How does PhoneGap work?• 2. Package your web app into PhoneGap
  39. 39. How does PhoneGap work?• 3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )
  40. 40. How does PhoneGap work?
  41. 41. PhoneGap API / Plugins: Accelerometer Events Camera File Capture Geolocation Compass Media Connection Notification Contacts Storage Device
  42. 42. http://phonegap.com/about/feature
  43. 43. PhoneGap API / Plugins: • Custom Plugins: Terrible support across platforms, and you can make it on you own!  https://github.com/phonegap/phonegap-plugins
  44. 44. PhoneGap API / Plugins: • An interface to the most common set of device functionality. • All APIs features are plugins. • All accessible through JavaScript (PhoneGap Bridge).
  45. 45. Get Started !
  46. 46. Demo
  47. 47. Accelerometer APIfunction 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!);};var watchID =navigator.accelerometer.watchAcceleration( onSuccess, onError, options);
  48. 48. Media APIfunction playAudio(url) { var my_media = new Media(url, // success callback function() { console.log("playAudio(): Audio Success"); }, // error callback function(err) { console.log("playAudio(): Audio Error:" + err); }); // Play audio my_media.play();}
  49. 49. Custom Alert / Confirmfunction showConfirm() { navigator.notification.confirm ( ‘remove user?, onConfirm, ‘Clear, ‘OK, NOOOOO!! );}function onConfirm(button) { if( button == 1 ){ // do something }}
  50. 50. Cameranavigator.camera.getPicture( onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL, targetWidth: 300, targetHeight: 200 });
  51. 51. • AppLaud – A Eclipse Plugin for PhoneGap Android. – Bundled with PhoneGap 1.9.0 – Bundled with jQuery Mobile 1.1.0 – Support for ADT 20 (the latest release of the Android Development Tools)http://goo.gl/lwKgX
  52. 52. Mobile Debugging
  53. 53. Mobile Debugging • Ripple Mobile Environment Emulator (Chrome)
  54. 54. Mobile Debugging • Weinre / debug.phonegap.com
  55. 55. PhoneGap doesnt bundle a UI framework,but they support any JS framework thatworks in the browser.
  56. 56. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi

×