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
- 6. The realistic reason
Cross platform applications
with HTML/JS will be faster
and easier
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
- 24. Demo:
Hello World
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
- 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
- 31. Demo:
Using the device APIs
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
- 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
- 54. The Problem:
You’re building a cross-platform app, but dealing
with a lot of native projects
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