24
© 2011 Adobe Systems Incorporated. Introduction to PhoneGap Mihai Corlan | Web Developer Evangelist | Adobe

Introduction to PhoneGap

Embed Size (px)

DESCRIPTION

Introduction to PhoneGap - an open source and cross platform solution for building mobile applications using web standards

Citation preview

Page 1: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Introduction to PhoneGapMihai Corlan | Web Developer Evangelist | Adobe

Page 2: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

About Me

Mihai Corlan

Adobe Web Developer Evangelist

Blog: http://corlan.org

Twitter: mcorlan

Email: [email protected]

2

Page 3: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Agenda

PhoneGap

PhoneGap Build

Debugging PhoneGap Apps

Page 4: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

What is PhoneGap?

Page 5: Introduction to 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

Page 6: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Why would you use PhoneGap?

Traditional mobile development looks like this:

Platform

Tools Language

Objective-C

Page 7: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Why would you use PhoneGap?

Traditional mobile development looks like this:

Platform

Tools Language

Objective-C

Platform

Tools Language

Java

Page 8: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Why would you use PhoneGap?

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

Page 9: Introduction to PhoneGap

© 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, …)

Page 10: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

PhoneGap supports 7 platforms

Page 11: Introduction to PhoneGap

© 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)

Page 12: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Demo

Page 13: Introduction to PhoneGap

© 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

Page 14: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Built-in device APIs

Page 15: Introduction to PhoneGap

© 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

Page 16: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Building PhoneGap Apps

Page 17: Introduction to PhoneGap

© 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

Page 18: Introduction to PhoneGap

© 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)

Page 19: Introduction to PhoneGap

© 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

Page 20: Introduction to PhoneGap

© 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

Page 21: Introduction to PhoneGap

© 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

Page 22: Introduction to PhoneGap

© 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

Page 23: Introduction to PhoneGap

© 2011 Adobe Systems Incorporated.

Thank You!

Question & Answers Time!

http://corlan.org

http://twitter.com/

mcorlan

http://github.com/

mcorlan

[email protected]

Page 24: Introduction to PhoneGap

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