You've probably heard of PhoneGap, the free, open source framework for creating mobile apps using standard web programming, but maybe you're skeptical. You probably have a lot of questions. How easy is it to create an app with PhoneGap? Can I convert my web site to a mobile app? Will the app be too slow to use? In the session I will, with nothing up my sleeves, convert a mobile web site into a PhoneGap app for both iOS and Android. I will take advantage of both device and HTML5 features. I will show solutions to the performance challenges PhoneGap apps sometimes suffer from. I will show to structure your web site to make it easy to convert to a device app.

1. PhoneGap in 60
Minutes or Less
So Cal Code Camp, July 28, 2013
Saturday, July 27, 13

2. Who am I?
Hi, I’m Troy. I have been developing software for over 30
years. For the last 10 years I have been focused on web,
mobile web, and mobile development. I currently work at
Kelley Blue Book as a senior software engineer. My
opinions are my own.
I can be reached rockncoder@gmail.com
Saturday, July 27, 13

3. Please RateThisTalk
http://spkr8.com/t/23661
Saturday, July 27, 13

4. The Rock n Coder
• therockncoder.blogspot.com
• youtube.com/user/rockncoder
• slideshare.net/rockncoder
• https://github.com/Rockncoder
Saturday, July 27, 13

5. Agenda
• What is PhoneGap?
• Setting Up PhoneGap
• Hello PhoneGap
• Deploying to a Device
• Using Device Features (bridging the gap)
• Using JavaScript Libraries
Saturday, July 27, 13

6. Agenda (continue)
• PhoneGap Build
• Performance Tips
• Summary
Saturday, July 27, 13

7. What is PhoneGap?
Saturday, July 27, 13

8. What is PhoneGap?
PhoneGap is a free and open source framework
which allows you to create mobile apps using
standard web APIs.
Saturday, July 27, 13

9. What is the difference between
PhoneGap and Cordova?
Adobe donated PhoneGap to the Apache
Software Foundation under the name Apache
Cordova. So Cordova is the name of the open
source project and PhoneGap is the name of
Adobe's implementation of that project.There
are other implementations such as Telerik's
Icenium and IBM's Worklight.
Saturday, July 27, 13

10. Setting Up PhoneGap
Saturday, July 27, 13

11. Setting Up PhoneGap
• Install Node.js
• Install Device SDKs
• Install Cordova via npm
Saturday, July 27, 13

12. Install Cordova via npm
• npm is the Node Packaged Modules
• It is the standard method of distributing
node application modules
• The modules are written in JavaScript and
are cross platform
• sudo npm install -g cordova
Saturday, July 27, 13

13. Hello PhoneGap
Saturday, July 27, 13

14. Hello PhoneGap
• cordova create hello com.rnc.hello Hello
• create is the command
• hello is the name of the folder
• com.rnc.hello is the unique project name
• Hello is the human project name
Saturday, July 27, 13

15. Understanding the
Folder Format
• merges - where to place platform specific
code
• platforms - the source code for the
platform
• plugins - the applications plug ins
• www - the web version of the app
Saturday, July 27, 13

16. Adding Platforms
• Initially there are no platforms
• cordova platform add xxxx
• xxxx is the name of platform
• You MUST have the SDK installed and on
the path
Saturday, July 27, 13

17. Building the App
• cordova build - builds all of the platforms
• cordova build android - builds only the
android platform
Saturday, July 27, 13

18. Installing on a Device
• cordova run android
• Will install app to currently connected
android device
• Only Android is currently support
• To install iOS you will need Xcode
Saturday, July 27, 13

19. Using Device Features
Saturday, July 27, 13

20. Using Device Features
• The “deviceready” event must be received
before you can access device features
• Most device features access through the
navigator object
• Over a dozen major APIs supported as of
PhoneGap 3.0
Saturday, July 27, 13

21. API What it does
Accelerometer
Captures device motion in the x, y, and
z direction
Camera
The camera object provides access to
the device's default camera application
Compass
Obtains the direction that the device
is pointing
Contacts
The contacts object provides access
to the device contacts database
Geolocation
The geolocation object provides
access to location data based on the
device's GPS sensor or inferred from
network signals
Saturday, July 27, 13

22. Using JavaScript
Libraries
Saturday, July 27, 13

23. Using JavaScript
Libraries
• PhoneGap is compatible with nearly all
JavaScript libraries
• If it works on the web it works
• This includes, Sencha Touch, Backbone,
jQuery and jQuery Mobile...
Saturday, July 27, 13

24. jQuery Mobile
• PhoneGap lacks an innate UI
• jQuery Mobile can supply
• Must be sure that both libraries initialize
Saturday, July 27, 13

25. PhoneGap Build
Saturday, July 27, 13

26. What is phoneGap
Build?
PhoneGap Build is a cloud-based service built
on top of the PhoneGap framework. It allows
you to easily build those same mobile apps in
the cloud.
Saturday, July 27, 13

27. Why PhoneGap Build?
• Don't need Device SDKs
• Can Use Hydration
Saturday, July 27, 13

28. Using PhoneGap Build
• Signup for an account
• Can link to your GitHub account
• Open Source projects are free
• Private projects are charged, first one is
free
• Only git the www folder
Saturday, July 27, 13

29. Performance Tips
• At times performance can be sluggish
especially when combined with jQuery
Mobile
• Use event.preventDefault()
• Cache jQuery Selectors
• Minimize DOM interactions
Saturday, July 27, 13

30. Links
• http://phonegap.com/
• https://build.phonegap.com
• http://jquerymobile.com/
Saturday, July 27, 13

31. Summary
• PhoneGap is way to build mobile apps using
web APIs
• PhoneGap apps are cross platform by default
• PhoneGap build lets you build in the cloud
without installing lots of SDKs
• PhoneGap apps can be performance
challenged
Saturday, July 27, 13