PhoneGap in 60 Minutes or Less


Published on

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.

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

PhoneGap in 60 Minutes or Less

  1. 1. PhoneGap in 60 Minutes or Less So Cal Code Camp, July 28, 2013 Saturday, July 27, 13
  2. 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 Saturday, July 27, 13
  3. 3. Please RateThisTalk Saturday, July 27, 13
  4. 4. The Rock n Coder • • • • Saturday, July 27, 13
  5. 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. 6. Agenda (continue) • PhoneGap Build • Performance Tips • Summary Saturday, July 27, 13
  7. 7. What is PhoneGap? Saturday, July 27, 13
  8. 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. 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. 10. Setting Up PhoneGap Saturday, July 27, 13
  11. 11. Setting Up PhoneGap • Install Node.js • Install Device SDKs • Install Cordova via npm Saturday, July 27, 13
  12. 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. 13. Hello PhoneGap Saturday, July 27, 13
  14. 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. 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. 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. 17. Building the App • cordova build - builds all of the platforms • cordova build android - builds only the android platform Saturday, July 27, 13
  18. 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. 19. Using Device Features Saturday, July 27, 13
  20. 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. 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. 22. Using JavaScript Libraries Saturday, July 27, 13
  23. 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. 24. jQuery Mobile • PhoneGap lacks an innate UI • jQuery Mobile can supply • Must be sure that both libraries initialize Saturday, July 27, 13
  25. 25. PhoneGap Build Saturday, July 27, 13
  26. 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. 27. Why PhoneGap Build? • Don't need Device SDKs • Can Use Hydration Saturday, July 27, 13
  28. 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. 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. 30. Links • • • Saturday, July 27, 13
  31. 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