Beginning PhoneGap
Upcoming SlideShare
Loading in...5

Beginning PhoneGap



For JavaScript Group #4

For JavaScript Group #4



Total Views
Views on SlideShare
Embed Views



10 Embeds 719 588 92 23 5 4 2 2 1 1 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Beginning PhoneGap Beginning PhoneGap Presentation Transcript

  • Beginning PhoneGap Kuro Hsu @ JSGroup 2012/04/02
  • 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 -  Email: kurotanshi [at]  Blog:
  • Why PhoneGap?
  • Today, Mobile development is mess. Android Java BlackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  • The Web is awesome!
  • 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
  • What is PhoneGap ?
  • What is PhoneGap ?  Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
  • 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.
  • How does PhoneGap work?
  • 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. )
  • So, it means...? Write once, run anywhere?
  • NO
  • The Truth Is... Write once, debug everywhere.
  • 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
  • How does PhoneGap work? Common Plugins Native Web FFI Control Custom Plugins * FFI = Foreign Function Interface
  • PhoneGap API / Plugins:  Common Plugins: Good support across platforms.  Accelerometer  Events  Camera  File  Capture  Geolocation  Compass  Media  Connection  Notification  Contacts  Storage  Device
  • PhoneGap API / Plugins:
  • PhoneGap API / Plugins: Custom Plugins: Treeible support across platforms, but you can make it on you own! 
  • PhoneGap API / Plugins: All API features are plugins. An interface to the most common set of device functionality. All accessible through JavaScript.
  • Requirements Android: Android SDK + Eclipse ADK (optional)  PhoneGap And, ……
  • Requirements Android: Android SDK + Eclipse ADK (optional)  PhoneGap And, …… YOU!!
  • Getting Started
  • Demo: First Android App - Hello World
  • Custom Alert
  • Contacts.find
  • Geolocation
  • Is it too complicated ?
  • 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
  • Demo #2: First Second Android App – Hello World with Applaud.
  • Demo #3: PhotoShare with PhoneGap
  • Mobile Debugging  webkit on PC  Ripple Mobile Environment Emulator  weinre ( WEb INspector REmote )  Mobile Safari debugging
  • Demo #4: Mobile debugging with weinre.
  • Conclusion  PhoneGap doesnt bundle a UI framework, but they support any JS framework that works in the browser.
  • 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.
  • Thanks!