rapid prototyping with phonegap

© 2012 Adobe Systems Incorporated. All Rights Reserved.
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

hp://tricedesigns.com
@andytrice
hp://github.com/triceam



All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
pro·to·type
A rst or preliminary model of
something, esp. a machine, from which
other forms are developed or copied.
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
What is PhoneGap?
All external content obtained via creative commons or public domain.
!  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.
Why would you want to use PhoneGap for a prototype?
All external content obtained via creative commons or public domain.

Have you tried to
build an one of
these?
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Why would you want to use PhoneGap for a prototype?
!  It’s easy
!  More people know HTML & JS, over native development
!  Lower barrier of entry in mobile development
!  Integrate seamlessly with HTTP services
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
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 effort = faster turnaround

All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
PhoneGap
PhoneGap is good for more
than just prototypes.
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Before we go too far…
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Why would you want to use PhoneGap in a production app?
All external content obtained via creative commons or public domain.
Have you tried to

build an application
that supports lots of
platforms?
© 2012 Adobe Systems Incorporated. All Rights Reserved.
e world isn’t what it used to be…
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
ere are lots of variables
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
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
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
What platforms does PhoneGap support?
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
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
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
PhoneGap Application Architecture

All external content obtained via creative commons or public domain.
!  Traditional Client-
Server Architecture
using standard web
protocols
!  Typically single-page
client side architecture
!  Typically local assets,
remote data
© 2012 Adobe Systems Incorporated. All Rights Reserved.
OK, so what OS features does PhoneGap expose?
All external content obtained via creative commons or public domain.


© 2012 Adobe Systems Incorporated. All Rights Reserved.
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
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Since it is HTML, CSS & JSS, can I use existing tools/frameworks?
!  YES!

…and many more…

Any client side web framework can be used
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
iOS is not Android, Android is not Win Phone, Win Phone is not BlackBerry
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Make your apps feel like aps, not like web pages
!  Twier Bootstrap – Components hp://twier.github.com/bootstrap/
!  iUI – CSS to make it look native hp://www.iui-js.org/
!  jQuery Mobile hp://jquerymobile.com/
!  jQuery UI hp://jqueryui.com/
!  Sencha Touch – App Framework hp://www.sencha.com/products/touch/
!  Kendo UI – App Framework hp://demos.kendoui.com/
!  app-UI hp://triceam.github.com/app-UI/
!  iScroll hp://cubiq.org/iscroll-4
!  Zurb Foundation hp://foundation.zurb.com/
!  Moobile hp://moobilejs.com/
All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
HTML/JS Visualization Frameworks (just a few, certainly not all)
All external content obtained via creative commons or public domain.
www.amcharts.com





© 2012 Adobe Systems Incorporated. All Rights Reserved.
Build/Distribution
!  Platform-specic build processes !  hp://build.phonegap.com

All external content obtained via creative commons or public domain.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Build/Distribution – Dreamweaver CS6
!  hp://build.phonegap.com
All external content obtained via creative commons or public domain.
Details:
EXPORT
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Debugging
All external content obtained via creative commons or public domain.
Desktop Browser Tools