Your SlideShare is downloading. ×

Beginning PhoneGap

7,730

Published on

For JavaScript Group #4 …

For JavaScript Group #4
2012.04.02

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

No Downloads
Views
Total Views
7,730
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
420
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Beginning PhoneGap Kuro Hsu @ JSGroup 2012/04/02
  • 2. Kuro Hsu (a.k.a kurotanshi) Front-End Engineer. Core member of Drupal TW. - DrupalCamp Taipei will be held on July 7th, 2012!!  Moderator of PhoneGap CN forum - http://bbs.phonegapcn.com/forum.php  Email: kurotanshi [at] gmail.com  Blog: http://kuro.tw
  • 3. Why PhoneGap?
  • 4. Today, Mobile development is mess. Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  • 5. The Web is awesome!
  • 6. 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
  • 7. What is PhoneGap ?
  • 8. What is PhoneGap ?  Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
  • 9. What is PhoneGap ?  PhoneGap uses the native browser on the device to render the HTML/CSS/JS, and keep in mind that can affect the experience.  It allows you to author native applications with web technologies, and also keeps your apps nice and small.
  • 10. How does PhoneGap work?
  • 11. How does PhoneGap work? 1. Write a web app using HTML5 technologies: HTML5 / CSS / JS
  • 12. How does PhoneGap work? 2. Package your web app into PhoneGap
  • 13. How does PhoneGap work? 2. Package your web app into PhoneGap
  • 14. How does PhoneGap work? 3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )
  • 15. So, it means...? Write once, run anywhere?
  • 16. NO
  • 17. The Truth Is... Write once, debug everywhere.
  • 18. 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
  • 19. How does PhoneGap work? Common Plugins Native Web FFI Control Custom Plugins * FFI = Foreign Function Interface
  • 20. PhoneGap API / Plugins:  Common Plugins: Good support across platforms.  Accelerometer  Events  Camera  File  Capture  Geolocation  Compass  Media  Connection  Notification  Contacts  Storage  Device
  • 21. PhoneGap API / Plugins:
  • 22. PhoneGap API / Plugins: Custom Plugins: Treeible support across platforms, but you can make it on you own!  https://github.com/phonegap/phonegap-plugins
  • 23. PhoneGap API / Plugins: All API features are plugins. An interface to the most common set of device functionality. All accessible through JavaScript.
  • 24. Requirements Android: Android SDK + Eclipse ADK (optional)  PhoneGap And, ……
  • 25. Requirements Android: Android SDK + Eclipse ADK (optional)  PhoneGap And, …… YOU!!
  • 26. Getting Started
  • 27. Demo: First Android App - Hello World
  • 28. Custom Alert
  • 29. Contacts.find
  • 30. Geolocation
  • 31. Is it too complicated ?
  • 32. Tools AppLaud: - A Eclipse Plugin for PhoneGap Android. - Bundled with PhoneGap 1.4.1 - Bundled with jQuery Mobile 1.0.1 - Dramatically improved API examples http://goo.gl/AoxZH
  • 33. Demo #2: First Second Android App – Hello World with Applaud.
  • 34. Demo #3: PhotoShare with PhoneGaphttps://github.com/kurotanshi/PhotoShare-Demo-with-PhoneGap
  • 35. Mobile Debugging  webkit on PC  Ripple Mobile Environment Emulator  weinre ( WEb INspector REmote )  Mobile Safari debugging
  • 36. Demo #4: Mobile debugging with weinre. https://github.com/callback/callback-weinre/archives/master
  • 37. Conclusion  PhoneGap doesnt bundle a UI framework, but they support any JS framework that works in the browser.
  • 38. Conclusion  PhoneGap doesnt bundle a UI framework, but they support any JS framework that works in the browser.  PhoneGap is just a fancy browser.  PhoneGap app is more powerful web app.  Native still gives the best performance.
  • 39. Thanks!

×