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!