A presentation covering methods for debugging and deploying PhoneGap applications. Covers Weinre and some of the features of PhoneGap Build for deploying across many platforms.
1. Debugging and
Deploying with
PhoneGap
Tools and techniques for testing and
distributing cross-platform apps
Thursday, February 16, 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
Thursday, February 16, 2012
3. Agenda
• Debugging with PhoneGap
• Deploying PhoneGap Apps with
PhoneGap Build
Thursday, February 16, 2012
5. Debugging these
kinds of apps is
best done on
device. Luckily
there are a few
tools that make
that easy.
Thursday, February 16, 2012
6. 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.
Thursday, February 16, 2012
7. But what about Device APIs?
Because we’re in the web view, there is no
way to do line-by-line debugging.
Thursday, February 16, 2012
8. No
w
wi
th
Luckily we have
Weinre, which lets
us debug and
manipulate the
DOM from our
PCs.
Thursday, February 16, 2012
9. No
w
wi
th
Luckily we have
Weinre, which lets
us debug and
manipulate the
DOM from our
PCs.
Thursday, February 16, 2012
10. 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.
Thursday, February 16, 2012
11. 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.
Thursday, February 16, 2012
12. Demo:
Debugging with Weinre
Thursday, February 16, 2012
13. But, a much easier
way:
http://
debug.phonegap.com/
Thursday, February 16, 2012
14. Demo:
debug.phonegap.com
Thursday, February 16, 2012
15. Deploying
build.phonegap.com
Thursday, February 16, 2012
16. e Problem:
You’re building a cross-platform app, but
dealing with a lot of native projects
Thursday, February 16, 2012
17. e Solution:
PhoneGap Build - a cloud service for
creating binary files for multiple platforms
from a single codebase
Thursday, February 16, 2012
20. No vendor platform lock-in
Want to build for iOS but don’t have a Mac?
No problem.
Thursday, February 16, 2012
21. Build for every platform at once
PhoneGap Build creates binaries for all of the
major platforms at the same time and in one
place.
Thursday, February 16, 2012
22. Debug on your devices
Use PhoneGap Build to incorporate debug
code in your application so you can test on
the device itself.
Thursday, February 16, 2012
24. 1) Sign up for an account
2) Create an application
a) Can be uploaded
HTML/CSS/JS files
b) Can be a Git/SVN
repo
c) PhoneGap can create
and host a Git repo
3) Profit
Thursday, February 16, 2012
25. Build lets you
configure app
properties across
platforms.
You can also target
specific versions of
PhoneGap to
maximize
compatibility.
Thursday, February 16, 2012
26. Core part of PhoneGap Build:
Work how you want to work
Thursday, February 16, 2012
27. Using Git/SVN
repositories
Thursday, February 16, 2012
28. Build lets you
create a new app
from a Git or SVN
repository
(including GitHub
support).
Note: It can’t be a
private repo.
Thursday, February 16, 2012
29. All of your
development can
be done from
source control.
Simply “Update
Code” from the
App page and
Build will recreate
the binaries based
on the code in
your repository.
Thursday, February 16, 2012
31. Build includes a
debugging option
that will inject the
Weinre JavaScript
into the app so it
can be remotely
debugged using
debug.phonegap.c
om
Thursday, February 16, 2012
32. Just click the
“debug” button in
Build and start
debugging.
No dealing with
the same wifi
connection or USB
tethering.
Thursday, February 16, 2012
33. What I find to be
easiest is to set up
a “regular” version
of the app and a
“debug” version of
the app. Can be
the exact same
repo, but one will
provide debug
binaries
automatically.
Thursday, February 16, 2012
34. Build lets you
define individuals
as tester/
developer which
changes
permissions on the
project
accordingly.
Thursday, February 16, 2012
35. Testers: Can access
the binaries and
rebuild the
binaries based on
what’s in the
linked repository.
Developers: Can
admin the
application as well
as do all the things
testers can do.
Thursday, February 16, 2012
36. You can use Build as your testing
distribution as well by making the
download pages public.
Thursday, February 16, 2012
40. Demo:
PhoneGap Build
Thursday, February 16, 2012
41. Q&A
Ryan Stewart
Web Developer Evangelist, Adobe
ryan@adobe.com
blog.digitalbackcountry.com
@ryanstewart
github.com/ryanstewart
Thursday, February 16, 2012
42. Are you building a cool app??
Let me know! - ryan@adobe.com
Thursday, February 16, 2012