1. Developing with
Phonegap
Building mobile applications with HTML/JS

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

3. Why PhoneGap?

4. The moral reason:
The web is awesome

5. The realistic reason:
Cross platform
applications with HTML/
CSS/JS will be faster and
easier

6. What is PhoneGap?

8. Your Code

9. Your Code
Native Web View

10. Your Code
Native Web View
Native APIs

11. Your Code
Native Web View
Native APIs
Native App - .apk, .ipa, etc

12. 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

13. PhoneGap uses the
native project
format for each
platform.
Open, emulate,
and test from
within the native
development
environment!

14. Because it’s using
the native projects
it’s fully
extendable.

15. PhoneGap provides
a JavaScript Library
that reaches out
into the native
APIs.
That means
anything the
device supports is
doable.

16. PhoneGap is
completely open
source and is part
of the Apache
foundation.

17. The entire project
is available on
Github
https://
github.com/
cordova

18. Getting Started

19. bin/create /Developer/Sites/demoapp
com.digitalbackcountry DemoApp

20. Demo:
Hello World

21. Quick segue: mobile
web apps versus
mobile applications

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

23. You can use ANY
framework you
want, but try to
design for an app.

24. Diving into the
PhoneGap APIs

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

26. capturePhotoEdit: function() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20, allowEdit: true });
},
Camera API onPhotoDataSucess: function(imageData) {
var smallImage = document.getElementById('smallImage');
example
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
},
onFail: function(message) {
alert('Failed because: ' + message);
}

27. Demo:
PhoneGap API Explorer

28. Debugging

29. 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.

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

31. Luckily we have
Weinre, which lets
us debug and
manipulate the
DOM from our PCs.

32. Weinre is built with
node.JS and acts as
a server and uses
the developer tools
from Chrome to
provide hooks into
the mobile app.

33. 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.

34. But, a much easier way:
http://debug.phonegap.com/

35. Demo:
debug.phonegap

36. Extending Phonegap

37. 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

38. 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!

39. Available at
https://github.com/phonegap/phonegap-plugins

40. Final
Considerations

41. Remember that we’re on different
platforms

42. Versus
http://developer.apple.com/library/IOs/#documentation/
UserExperience/Conceptual/MobileHIG/UIElementGuidelines/ http://developer.android.com/design/index.html
UIElementGuidelines.html

43. Demo:
PhoneGap in Action

44. Deploying
PhoneGap Apps

45. build.phonegap.com

46. The Problem:
You’re building a cross-platform app, but
dealing with a lot of native projects

47. The Solution:
PhoneGap Build - create distribution
binaries for multiple platforms in one place

49. Build includes git
support so you can
use git and host
projects on
PhoneGap or build
a project from
Github.

50. Build lets you
define individuals
as tester/developer
which changes
permissions on the
project
accordingly.

51. You can use Build as your testing
distribution as well by making the
download pages public.

52. Will (soon) support
popular plugins so
that you can build
plugins right into
the build process.

53. Supports multiple
PhoneGap versions
so you can target a
wide range of
devices.

54. Demo:
PhoneGap Build

55. Q&A
Ryan Stewart
Web Developer Advocate, Adobe
ryan@adobe.com
blog.digitalbackcountry.com
@ryanstewart
github.com/ryanstewart