1.
Developing with
Phonegap
Building mobile applications with HTML/JS
Monday, January 23, 2012

2.
Ryan Stewart
Web Developer Evangelist, Adobe
ryan@adobe.com
blog.digitalbackcountry.com
@ryanstewart
github.com/ryanstewart
Based in Seattle
Things I Like:
Beer
Mountaineering/Hiking/Backpacking
Geolocation/Mapping stuff
Monday, January 23, 2012

3.
Agenda
• Why PhoneGap?
• Who is PhoneGap...really?
• Getting Started with PhoneGap
• PhoneGap APIs
• Extending PhoneGap
• Final Considerations
Monday, January 23, 2012

4.
Why PhoneGap?
Monday, January 23, 2012

5.
The moral reason:
The web is awesome
Monday, January 23, 2012

6.
The realistic reason
Cross platform applications
with HTML/JS will be faster
and easier
Monday, January 23, 2012

7.
What is PhoneGap?
Monday, January 23, 2012

8.
Monday, January 23, 2012

9.
Your Code
Monday, January 23, 2012

10.
Your Code
Native Web View
Monday, January 23, 2012

11.
Your Code
Native Web View
Native APIs
Monday, January 23, 2012

12.
Your Code
Native Web View
Native APIs
Native App - .apk, .ipa, etc
Monday, January 23, 2012

13.
PhoneGap uses the native browser on the
device to render the HTML/CSS/JS
Keep in mind that can affect the experience
It also keeps apps nice and small
Monday, January 23, 2012

14.
PhoneGap uses the
native project format
for each platform.
Open, emulate, and
test from within the
native development
environment!
Monday, January 23, 2012

15.
Because it’s using the
native projects it’s fully
extendable.
Monday, January 23, 2012

16.
PhoneGap provides a
JavaScript Library that
reaches out into the
native APIs.
That means anything
the device supports is
doable.
Monday, January 23, 2012

17.
PhoneGap is
completely open
source and has been
submitted to the
Apache Foundation.
Monday, January 23, 2012

18.
It will be known as
Cordova when it gets
approved
http://
incubator.apache.
org/callback/
Monday, January 23, 2012

19.
The entire project is
available on Github
https://
github.com/
cordova
Monday, January 23, 2012

20.
Getting Started
Monday, January 23, 2012

21.
There are multiple
ways to “start” with
PhoneGap.
The project includes
command line tools,
IDE plugins, and
Dreamweaver 5.5 ships
with PhoneGap
support.
Monday, January 23, 2012

22.
bin/create ~/Sites/phonegap_preso/demo Demo
Monday, January 23, 2012

23.
Quick tour through the project structure
Monday, January 23, 2012

24.
Demo:
Hello World
Monday, January 23, 2012

25.
Quick segue: mobile web
apps versus mobile
applications
Monday, January 23, 2012

26.
Very important to
keep in mind that
we’re building a mobile
app, not a mobile web
app.
Let’s look at jQuery
Mobile
Monday, January 23, 2012

27.
You can use ANY
framework you want,
but try to design for an
app.
(I kind of like
Bootstrap)
Monday, January 23, 2012

28.
Diving into the
PhoneGap APIs
Monday, January 23, 2012

29.
- Accelerometer
- Camera
- Capture
Out of the box, - Compass
- Connection
PhoneGap - Contacts
provides support for a -
-
Device
Events
number of basic device -
-
File
Geolocation
APIs - Media
- Network
- Notification
- Storage
Monday, January 23, 2012

30.
Camera API
example
Monday, January 23, 2012

31.
Demo:
Using the device APIs
Monday, January 23, 2012

32.
Debugging
Monday, January 23, 2012

33.
It’s all just HTML/JS, so
you can use your
browser!
Take advantage of
Chrome Developer
tools/Firebug to test
your app’s UI.
Monday, January 23, 2012

34.
But what about Device APIs?
Because we’re in the web view, there is no
way to do line-by-line debugging.
Monday, January 23, 2012

35.
Luckily we have
Weinre, which lets us
debug and manipulate
the DOM from our
PCs.
Monday, January 23, 2012

36.
Weinre can be
configured as a server
(there is a Mac
application) and uses
the developer tools
from Chrome to
provide hooks into the
mobile app.
Monday, January 23, 2012

37.
Drop in a <script> tag
on a remote server
and Weinre will let you
use the Developer
Tools on your apps.
Requires internet
access, so keep that in
mind.
Monday, January 23, 2012

38.
Demo:
Debugging with Weinre
Monday, January 23, 2012

39.
But, a much easier way:
http://
debug.phonegap.com/
Monday, January 23, 2012

40.
Demo:
debug.phonegap
Monday, January 23, 2012

41.
Extending Phonegap
Monday, January 23, 2012

42.
For added functionality
PhoneGap provides a
plug-in mechanism.
Includes OS-specific
code/libraries and the
JS to use it in
PhoneGap
Some of the helpful
ones: PayPal,
Facebook, Push
Notification
Monday, January 23, 2012

43.
Plug-is are one of the
areas that show off the
power of a hybrid web/
native approach.
There are a ton of
native-centric SDKs
(like Facebook) that
provide a great native
experience. We can
use those!
Monday, January 23, 2012

44.
Available at
https://github.com/phonegap/phonegap-plugins
Monday, January 23, 2012

45.
This app can just use the
plugins.barcodeScanner.scan method to
call out to some native code that reads and parses
a barcode.
Monday, January 23, 2012

46.
Demo:
PhoneGap Plugins
Monday, January 23, 2012

47.
Final Considerations
Monday, January 23, 2012

48.
Remember that we’re on different platforms
Monday, January 23, 2012

49.
Versus
http://developer.apple.com/library/IOs/#documentation/
UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html
UIElementGuidelines.html
Monday, January 23, 2012

50.
Some important
performance
implications:
Currently only iOS
hardware accelerates
CSS3 transitions.
Monday, January 23, 2012

51.
Couple of tips:
Always test features first (if !supported)
For UI-specifics, you can use the device
class to get device info
Monday, January 23, 2012

52.
Demo:
PhoneGap in Action
Monday, January 23, 2012

53.
One more thing.
build.phonegap.com
Monday, January 23, 2012

54.
The Problem:
You’re building a cross-platform app, but dealing
with a lot of native projects
Monday, January 23, 2012

55.
The Solution:
Monday, January 23, 2012

56.
Monday, January 23, 2012

57.
Build includes git
support so you can use
git and host projects
on PhoneGap or build
a project from Github.
Monday, January 23, 2012

58.
Build lets you define
individuals as tester/
developer which
changes permissions
on the project
accordingly.
Monday, January 23, 2012

59.
You can use Build as your testing
distribution as well by making the
download pages public.
Monday, January 23, 2012

60.
Will (soon) support
popular plugins so that
you can build plugins
right into the build
process.
Monday, January 23, 2012

61.
Supports multiple
PhoneGap versions so
you can target a wide
range of devices.
Monday, January 23, 2012

62.
Demo:
PhoneGap Build
Monday, January 23, 2012

63.
Recap
• Why is PhoneGap?
• Who is PhoneGap...really?
• Getting Started with PhoneGap
• PhoneGap APIs
• Extending PhoneGap
• Final Considerations
Monday, January 23, 2012

64.
also, Beer:
Q&A
Ryan Stewart
Web Developer Evangelist, Adobe
ryan@adobe.com
blog.digitalbackcountry.com
@ryanstewart
github.com/ryanstewart
Monday, January 23, 2012