[JSDC.tw] Introduction to PhoneGap
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

[JSDC.tw] Introduction to PhoneGap

on

  • 3,741 views

 

Statistics

Views

Total Views
3,741
Views on SlideShare
3,706
Embed Views
35

Actions

Likes
15
Downloads
91
Comments
1

6 Embeds 35

https://twimg0-a.akamaihd.net 14
http://blog.sahsu.mobi 11
https://twitter.com 4
https://si0.twimg.com 2
http://www.powerbeam.host22.com 2
http://www.techgig.com 2

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

[JSDC.tw] Introduction to PhoneGap Presentation Transcript

  • 1. Introduction to PhoneGap & Building mobile apps with HTML5, CSS3 and Javascript. Kuro Hsu @ JSDC 2012/05/19
  • 2. Mobile is Growing• In January 2012, 8.49 percent of website hits/page- views come from a handheld mobile device -- StatCounter• Mobile will be bigger than desktop internet in 5 years -- Morgan Stanley• 2.1 billion mobile devices will have HTML5 browsers by 2016 up from 109 million in 2010 -- ABI Research
  • 3. Mobile development is mess. Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  • 4. Mobile Users prefer browsers over apps
  • 5. The Web is awesome! http://mobilehtml5.org/
  • 6. 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 */}
  • 7. Build Mobile Web with HTML5 • Handheld Friendly <meta name="handheldfriendly" content="true" /> • Mobile Optimized <meta name= "mobileoptimized" content="320" />
  • 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. Build Mobile Web with HTML5• 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. Build Mobile Web with HTML5• Advanced Forms in Mobile<input type="number" pattern="[0-9]*" /><input type="email" required /><input type="text" autocapitalize="off" autocorrect="off" /><input type="url" /><input type="tel" /><input type="date"><input type="datetime"><input type="month"><input type="time"><input type="range">
  • 12. Build Mobile Web with HTML5• Advanced Forms in Mobile
  • 13. Build Mobile Web with HTML5• Advanced links<a href="tel:+886987654321">Call Me</a><a href="sms:+886987654321">Send SMS</a>
  • 14. Build Mobile Web with HTML5• Media Support<video controls width="640" height="368" x-webkit-airplay="allow" src="content/side_with_the_seeds.mov"></video><audio controls preload="auto" autobuffer> <source src="elvis.mp3" /> <source src="elvis.ogg" /></audio>
  • 15. 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; }}
  • 16. 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... }
  • 17. 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... }
  • 18. Build Mobile Web with HTML5• Events - DeviceMotion:window.addEventListener("devicemotion", accel, false);function accel(ev){ // ev.acceleration.x/y/z; // do something…}
  • 19. 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;}
  • 20. Build Mobile Web with HTML5• Canvas API
  • 21. Build Mobile Web with HTML5• Offline Web Application Cache <html manifest="/cache.manifest"> # COMMENT THERE NETWORK: CACHE MANIFEST search.php js/* …… index.html FALLBACK: style.css dynamic.php …… …… CACHE: ……
  • 22. Build Mobile Web with HTML5• LocalStorage / SessionStoragelocalStorage["bar"] = "hello world!";var foo = localStorage.getItem("bar");localStorage.setItem("bar", "hello JSDC!");localStorage.removeItem("bar");localStorage.clear();
  • 23. Mobile Web Strategy
  • 24. Mobile Web Strategy • Evaluate your requirement
  • 25. Mobile Web Strategy • Mobile-First, Responsive Design
  • 26. Mobile Web Strategy • Progressive EnhancementSource: Adam Wang
  • 27. Mobile Web Strategy • Lighter is better
  • 28. Mobile Web Strategy • Evaluate your requirement • Mobile-First, Responsive Design • Progressive Enhancement • Lighter is better
  • 29. To App or Not to App?
  • 30. 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
  • 31. 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
  • 32. PhoneGap
  • 33. PhoneGap Started in 2008 iPhoneDevCamp Working prototype with geolocation
  • 34. 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…
  • 35. Callback(PhoneGap 1.1.0)
  • 36. Callback
  • 37. Apache Cordova ( From PhoneGap 1.5.0 )
  • 38. Apache Cordova Cordova is the open source project PhoneGap is the implementation Like Webkit for Chrome/Safari http://incubator.apache.org/cordova/
  • 39. What is PhoneGap ?
  • 40. What is PhoneGap / Cordova ?  Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
  • 41. What is PhoneGap / Cordova ?  Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
  • 42. 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.
  • 43. So, it means...? Write Once, Run Anywhere?
  • 44. NO
  • 45. The Truth Is... Write Once, Debug Everywhere.
  • 46. 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
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. How does PhoneGap work? 1. Write a web app using HTML5 technologies: HTML5 / CSS / JS
  • 51. How does PhoneGap work? 2. Package your web app into PhoneGap
  • 52. How does PhoneGap work? 2. Package your web app into PhoneGap
  • 53. How does PhoneGap work? 3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )
  • 54. How does PhoneGap work? Common Plugins Native Web FFI Control Custom Plugins * FFI = Foreign Function Interface
  • 55. PhoneGap API / Plugins:  Common Plugins: Good support across platforms. Accelerometer Events Camera File Capture Geolocation Compass Media Connection Notification Contacts Storage Device
  • 56. PhoneGap 1.7.0 - http://phonegap.com/about/features
  • 57. PhoneGap API / Plugins: Custom Plugins: Terrible support across platforms, and you can make it on you own!  https://github.com/phonegap/phonegap-plugins
  • 58. PhoneGap API / Plugins:  An interface to the most common set of device functionality.  All APIs features are plugins.  All accessible through JavaScript (PhoneGap Bridge).
  • 59. Requirements ( for Android )  JDK 1.6+  Android SDK with an Android 2.2+  Eclipse & Android ADT plugin for Eclipse OR Any Text Editor  PhoneGap
  • 60. Get Started ! http://phonegap.com/start
  • 61. Mobile Debugging
  • 62. Mobile Debugging  Webkit on PC
  • 63. Mobile Debugging Mobile Safari debugging
  • 64. Mobile Debugging  Ripple Mobile Environment Emulator (Chrome)
  • 65. Mobile Debugging Weinre / debug.phonegap.com
  • 66. Mobile Debugging Adobe Shadow
  • 67. Mobile Debugging  Webkit on PC  Mobile Safari debugging  Ripple Mobile Environment Emulator  weinre ( WEb INspector REmote )  Adobe Shadow
  • 68. PhoneGap doesnt bundle a UI framework, but they support any JS framework that works in the browser. PhoneGap is just a fancy browser. Native still gives the best performance.
  • 69. “The ultimate purpose of PhoneGap is to cease to exist…” - Brian LeRoux, Nitobi (now Adobe)http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
  • 70. Web is Native.
  • 71. JavaScript Rocks !
  • 72. Thanks!Kuro Hsu kurotanshi @ gmail.com http://kuro.tw https://twitter.com/kurotanshi http://www.plurk.com/kurotanshi