Mobile Development with PhoneGap & HTML5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mobile Development with PhoneGap & HTML5

on

  • 4,945 views

 

Statistics

Views

Total Views
4,945
Views on SlideShare
4,942
Embed Views
3

Actions

Likes
11
Downloads
238
Comments
0

2 Embeds 3

http://www.verious.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Mobile Development with PhoneGap & HTML5 Presentation Transcript

  • 1. Mobile Development with PhoneGap & HTML5 Kuro Hsu @ JS Carnival 2012 2012/10/27
  • 2. Kuro Hsu (a.k.a kurotanshi)• A Front-End Engineer.• Admin of PhoneGap TW Community Page - http://www.facebook.com/PhoneGapTW
  • 3. Why ?
  • 4. Mobile is Growing
  • 5. Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#Mobile development is mess.
  • 6. http://mobilehtml5.org/
  • 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. 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. 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. http://mediaqueri.es
  • 11. Cross Platform• User agent Detectionvar isIphone = !!(navigator.userAgent.match("iPhone"));if(isIphone){ // do something...}
  • 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. 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. 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. 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. Build Mobile Web with HTML5• Events - DeviceMotion:window.addEventListener("devicemotion", accel, false);function accel(ev){ // ev.acceleration.x/y/z; // do something…}
  • 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. 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. 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. 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. PhoneGap
  • 22. PhoneGap Started in 2008 iPhoneDevCamp Working prototype with geolocation
  • 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. Apache Cordova ( From PhoneGap 1.5.0 )
  • 25. Apache Cordova Cordova is the open source project PhoneGap is the implementation Like Webkit for Chrome/Safari http://incubator.apache.org/cordova/
  • 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. 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. 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. So, it means...? Write Once, Run Anywhere?
  • 30. NO
  • 31. The Truth Is... Write Once, Debug Everywhere.
  • 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. 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. 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. 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. How does PhoneGap work?• 1. Write a web app using HTML5 technologies: HTML5 / CSS / JS
  • 37. How does PhoneGap work?• 2. Package your web app into PhoneGap
  • 38. How does PhoneGap work?• 2. Package your web app into PhoneGap
  • 39. How does PhoneGap work?• 3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )
  • 40. How does PhoneGap work?
  • 41. PhoneGap API / Plugins: Accelerometer Events Camera File Capture Geolocation Compass Media Connection Notification Contacts Storage Device
  • 42. http://phonegap.com/about/feature
  • 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. 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. Get Started !
  • 46. Demo
  • 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. 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. Custom Alert / Confirmfunction showConfirm() { navigator.notification.confirm ( ‘remove user?, onConfirm, ‘Clear, ‘OK, NOOOOO!! );}function onConfirm(button) { if( button == 1 ){ // do something }}
  • 50. Cameranavigator.camera.getPicture( onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL, targetWidth: 300, targetHeight: 200 });
  • 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. Mobile Debugging
  • 53. Mobile Debugging • Ripple Mobile Environment Emulator (Chrome)
  • 54. Mobile Debugging • Weinre / debug.phonegap.com
  • 55. PhoneGap doesnt bundle a UI framework,but they support any JS framework thatworks in the browser.
  • 56. Thanks ! Kuro Hsu kurotanshi @ gmail.com http://kuro.tw http://www.plurk.com/kurotanshi http://www.facebook.com/kurotanshi