Mobile Development with PhoneGap & HTML5

4,947 views

Published on

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

No Downloads
Views
Total views
4,947
On SlideShare
0
From Embeds
0
Number of Embeds
4
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

×