Beginning PhoneGap
Kuro Hsu @ JSGroup
2012/04/02
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
Kuro Hsu (a.k.a kurotanshi)
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 ?
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.
What is PhoneGap ?
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. )
How does PhoneGap work?
Write once, run anywhere?
So, it means...?
NO
Write once, debug everywhere.
The Truth Is...
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.5
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt? IE9
Native Web Control
How does PhoneGap work?
FFI
Common Plugins
Custom Plugins
* FFI = Foreign Function Interface
Common Plugins: Good support across platforms.
PhoneGap API / Plugins:
Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage
PhoneGap API / Plugins:
Custom Plugins: Treeible support across platforms, but you can make it on you own!
PhoneGap API / Plugins:
https://github.com/phonegap/phonegap-plugins
All API features are plugins.
An interface to the most common set of device functionality.
All accessible through JavaScript.
PhoneGap API / Plugins:
Android: Android SDK + Eclipse ADK (optional)
PhoneGap
And, ……
Requirements
Android: Android SDK + Eclipse ADK (optional)
PhoneGap
And, …… YOU!!
Requirements
Getting Started
Demo: First Android App - Hello World
Custom Alert
Contacts.find
Geolocation
Is it too complicated ?
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
Tools
Demo #2: First Second Android App –
Hello World with Applaud.
Demo #3: PhotoShare with PhoneGap
https://github.com/kurotanshi/PhotoShare-Demo-with-PhoneGap
webkit on PC
Ripple Mobile Environment Emulator
weinre ( WEb INspector REmote )
Mobile Safari debugging
Mobile Debugging
Demo #4: Mobile debugging with weinre.
https://github.com/callback/callback-weinre/archives/master
PhoneGap doesn't bundle a UI framework, but they support any JS framework that works in the browser.
Conclusion
PhoneGap doesn't 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.
Conclusion
Thanks!