Rapid Prototyping Mobile Applications with PhoneGap

You might be surprised

2012 Adobe Systems Incorporated. All Rights Reserved.

Who is this guy?

Andrew Trice
Technical Evangelist, Adobe atrice@adobe.com h p://tricedesigns.com @andytrice h p://github.com/triceam

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

prototype

A rst or preliminary model of something, esp. a machine, from which other forms are developed or copied.

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

What is PhoneGap?

Application container that allows you to build natively installed apps using HTML, CSS & JavaScript

h p://www.phonegap.com

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Why would you want to use PhoneGap for a prototype?

Have you tried to build an one of these?

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Why would you want to use PhoneGap for a prototype?

Its easy

More people know HTML & JS, over native development Lower barrier of entry in mobile development Integrate seamlessly with HTTP services

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Why would you want to use PhoneGap for a prototype?

It can cost less & can get done faster

Reduced developer hours + web designers can build the prototypes

Less development eort = faster turnaround

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

PhoneGap

PhoneGap is good for more than just prototypes.

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Before we go too far

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Why would you want to use PhoneGap in a production app?

Have you tried to build an application that supports lots of platforms?

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

e world isnt what it used to be

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

ere are lots of variables

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Why would you want to use PhoneGap for a production app?

Write once, run lots of places. Lower barrier of entry Reduced # of required skills Reduced development & long term maintenance cost Integration with existing HTTP-based systems

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

What platforms does PhoneGap support?

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

How do PhoneGap apps work?

Build app UI using HTML & CSS Build app logic & interactivity with JavaScript Use the PhoneGap API to interact with device

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

PhoneGap Application Architecture

Traditional ClientServer Architecture using standard web protocols Typically single-page client side architecture Typically local assets, remote data

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

OK, so what OS features does PhoneGap expose?

http://phonegap.com/about/features
2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

But what if you want more?

PhoneGap is extensible with a native plugin model that enables you to write your own native logic to access via JavaScript. ere are lots of open source plugins at h ps://github.com/phonegap/phonegap-plugins Learn more at h p://wiki.phonegap.com/w/page/36752779/ PhoneGap%20Plugins

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Since it is HTML, CSS & JSS, can I use existing tools/frameworks?

YES!

and many more Any client side web framework can be used
2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

iOS is not Android, Android is not Win Phone, Win Phone is not BlackBerry

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Make your apps feel like aps, not like web pages

Twi er Bootstrap Components iUI CSS to make it look native jQuery Mobile jQuery UI Sencha Touch App Framework Kendo UI App Framework app-UI iScroll Zurb Foundation Moobile

h p://twi er.github.com/bootstrap/ h p://www.iui-js.org/ h p://jquerymobile.com/ h p://jqueryui.com/ h p://www.sencha.com/products/touch/ h p://demos.kendoui.com/ h p://triceam.github.com/app-UI/ h p://cubiq.org/iscroll-4 h p://foundation.zurb.com/ h p://moobilejs.com/

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

HTML/JS Visualization Frameworks (just a few, certainly not all)

http://www.highcharts.com/

http://www.sencha.com/products/touch/charts

http://www.kendoui.com/dataviz.aspx

www.amcharts.com
2012 Adobe Systems Incorporated. All Rights Reserved.

http://www.rgraph.net/

http://raphaeljs.com/

http://mbostock.github.com/d3/

All external content obtained via creative commons or public domain.

Build/Distribution

Platform-speci c build processes

h p://build.phonegap.com

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Build/Distribution Dreamweaver CS6

h p://build.phonegap.com

EXPORT

Details: http://helpx.adobe.com/dreamweaver/using/whats-new.html#id_48821
2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Debugging

Desktop Browser Tools

http://debug.phonegap.com

http://www.iwebinspector.com/
2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Open Source

Did I also mention that PhoneGap is 100% open source? PhoneGap is the commercial name for Apache Cordova. PhoneGap/Cordova was contributed to Apache So ware Foundation by Adobe. You can get involved today!

h p://incubator.apache.org/cordova/

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

Who is using PhoneGap today?

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

What next?

Get started with PhoneGap today!

h p://phonegap.com/start h p://wiki.phonegap.com/

Join PhoneGap Google Groups

h p://groups.google.com/group/phonegap?pli=1

and most importantly HAVE

FUN!

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.

ank You!

Andrew Trice
Technical Evangelist, Adobe atrice@adobe.com h p://tricedesigns.com @andytrice

2012 Adobe Systems Incorporated. All Rights Reserved.

All external content obtained via creative commons or public domain.