An overview of PhoneGap. Covers the basics about what PhoneGap is, how to get started, how to use the device APIs, and how to debug it along with some other things to consider when building mobile applications with HTML/JS/CSS.
Breaking the Kubernetes Kill Chain: Host Path Mount
PhoneGap: Building Mobile Applications with HTML/JS
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
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
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
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
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
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
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
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