phonegap in 60 minutes or less
DESCRIPTION
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.TRANSCRIPT
PhoneGap in 60 Minutes or Less
So Cal Code Camp, July 28, 2013
Saturday, July 27, 13
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 [email protected]
Saturday, July 27, 13
Please Rate This Talkhttp://spkr8.com/t/23661
Saturday, July 27, 13
The Rock n Coder
• therockncoder.blogspot.com
• youtube.com/user/rockncoder
• slideshare.net/rockncoder
• https://github.com/Rockncoder
Saturday, July 27, 13
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
Agenda (continue)
• PhoneGap Build
• Performance Tips
• Summary
Saturday, July 27, 13
What is PhoneGap?
Saturday, July 27, 13
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
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
Setting Up PhoneGap
Saturday, July 27, 13
Setting Up PhoneGap
• Install Node.js
• Install Device SDKs
• Install Cordova via npm
Saturday, July 27, 13
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
Hello PhoneGap
Saturday, July 27, 13
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
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
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
Building the App
• cordova build - builds all of the platforms
• cordova build android - builds only the android platform
Saturday, July 27, 13
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
Using Device Features
Saturday, July 27, 13
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
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
Using JavaScript Libraries
Saturday, July 27, 13
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
jQuery Mobile
• PhoneGap lacks an innate UI
• jQuery Mobile can supply
• Must be sure that both libraries initialize
Saturday, July 27, 13
PhoneGap Build
Saturday, July 27, 13
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
Why PhoneGap Build?
• Don't need Device SDKs
• Can Use Hydration
Saturday, July 27, 13
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
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
Links
• http://phonegap.com/
• https://build.phonegap.com
• http://jquerymobile.com/
Saturday, July 27, 13
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