Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Introduction to PhoneGapMihai Corlan | Web Developer Evangelist | Adobe

© 2011 Adobe Systems Incorporated.

About Me

Mihai Corlan

Adobe Web Developer Evangelist

Blog: http://corlan.org

Twitter: mcorlan

Email: mcorlan@adobe.com

2

© 2011 Adobe Systems Incorporated.

Agenda

PhoneGap

PhoneGap Build

Debugging PhoneGap Apps

© 2011 Adobe Systems Incorporated.

What is PhoneGap?

© 2011 Adobe Systems Incorporated.

PhoneGap - Cordova

Is an open source platform for building native mobile applications using standard web technologies (HTML/CSS/JavaScript)

Apache Cordova is the name of the open source project (it is in incubator for now): http://incubator.apache.org/cordova/

PhoneGap is the name of the Adobe’s Cordova distrbution

© 2011 Adobe Systems Incorporated.

Why would you use PhoneGap?

Traditional mobile development looks like this:

Platform

Tools Language

Objective-C

© 2011 Adobe Systems Incorporated.

Why would you use PhoneGap?

Traditional mobile development looks like this:

Platform

Tools Language

Objective-C

Platform

Tools Language

Java

© 2011 Adobe Systems Incorporated.

Why would you use PhoneGap?

What if you want iOS, Android, Symbian, Windows, BlackBerry?

© 2011 Adobe Systems Incorporated.

Why would you use PhoneGap?

PhoneGap allows you to use “write once, run everywhere” paradigm

Web standards based & Open Source

You get native installers for each platform ready to be distributed through application stores (App Store, Android Market, …)

© 2011 Adobe Systems Incorporated.

PhoneGap supports 7 platforms

© 2011 Adobe Systems Incorporated.

PhoneGap could be your best friend if

You want to target multiple mobile platforms

You know HTML/JavaScript/CSS

You already have a web site/web application. Thus you can reuse parts of this (see Wikipedia)

© 2011 Adobe Systems Incorporated.

Demo

© 2011 Adobe Systems Incorporated.

How does PhoneGap work?

PhoneGap App Mobile Device

PhoneGap NativeEngine

PhoneGap JavaScriptEngine

Web ViewRenders the app UI

Access to nativemobilefeaturesYour Code

HTML/JavaScript/CSS/Images/Frameworks/Libraries

© 2011 Adobe Systems Incorporated.

Built-in device APIs

© 2011 Adobe Systems Incorporated.

PhoneGap Plug-ins

http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins

Examples of plugins: https://github.com/purplecabbage/phonegap-plugins

Extend the built-in functionality with custom plug-ins

Delegate heavyweight data processing to native code

Create background services

© 2011 Adobe Systems Incorporated.

Building PhoneGap Apps

© 2011 Adobe Systems Incorporated.

Build your PhoneGap app as you’d build a regular web app

Using your favorite editors (Eclipse, vim, Dreamweaver)

Test and debug the app using your desktop browser

Test and debug the app using mobile simulators/emulators and the physical devices

© 2011 Adobe Systems Incorporated.

What can you use to build your application?

Remember your application will run on the device’s browser

You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so on

Pay attention to performance (mobile vs. desktop)

Pay attention to mobile browser features or lack of them (I am talking about SVG)

© 2011 Adobe Systems Incorporated.

Creating the native installers

There are 2 different methods to build the native installers for your PhoneGap app:

Using the target platform tool chain

Using PhoneGap Build – a cloud service

© 2011 Adobe Systems Incorporated.

Using platform native tool chain

Use the OS and tools each platform recommends:

iOS - http://phonegap.com/start#ios-x4

Android - http://phonegap.com/start#android

BlackBerry - http://phonegap.com/start#blackberry

Windows Phone - http://phonegap.com/start#wp

WebOS: http://phonegap.com/start#webos

Symbian: http://phonegap.com/start#symbian

© 2011 Adobe Systems Incorporated.

Using PhoneGap Build

http://build.phonegap.com - a cloud service

Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, and Symbian

Supports one plugin (ChildBrowser); but you can hack in support for other plugins

It is in beta and it is free; it will always be free for Open Source projects

You upload your files (index.html, CSS, JS, images)

Or you provide a Git / SVN link

Support for debugging

© 2011 Adobe Systems Incorporated.

Resources

Source: github.com/callback

Docs: docs.phonegap.com

Wiki: wiki.phonegap.com

PhoneGap Build: build.phonegap.com

Plugins: github.com/purplecabbage/phonegap-plugins

Support: groups.google.com/group/phonegap

IRC: irc.freenode.net #phonegap

Apps: phonegap.com/apps

Bugs: issues.apache.org/jira/browse/CB

© 2011 Adobe Systems Incorporated.

Thank You!

Question & Answers Time!

http://corlan.org

http://twitter.com/

mcorlan

http://github.com/

mcorlan

mcorlan@adobe.com

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.