SlideShare a Scribd company logo

Introduction to PhoneGap

•
•
RameshNair6
RameshNair6

PhoneGap allows developers to build mobile apps using HTML, CSS, and JavaScript. It works by using a PhoneGap library to translate web-based app code into a format that can be packaged and run as a native mobile application on different platforms. Developers add the desired device capabilities to their PhoneGap app through plugins. Common tasks like getting started, adding plugins, and using live reloading are described.

Related slideshows

Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Building Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGapBuilding Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGap
 
PhoneGap Day US 2013 - Chrome Packaged Apps
PhoneGap Day US 2013 - Chrome Packaged AppsPhoneGap Day US 2013 - Chrome Packaged Apps
PhoneGap Day US 2013 - Chrome Packaged Apps
 
1 of 15
Download to read offline
Intro to PhoneGap Ramesh Nair / hiddentao Oct 2014 @ Taipei Javascript Enthusiasts
What is PhoneGap? • Build mobile apps using HTML5, Javascript and CSS • Created by Nitobi in 2008 • Acquired by Adobe in 2011 • Code also given to Apache to create “Cordova” • Today 2 projects: Phonegap and Cordova • If Cordova = Blink/Webkit then Phonegap = Chrome • PhoneGap adds extra features to Cordova (e.g. cloud build) • http://cordova.apache.org/ • http://phonegap.com/
Single codebase Multiple platforms img: http://adrocknaphobia.github.io/preso-future-of-mobile/
img: http://chelramsey.com/phonegap-vs-native-builds-a-12-month-review/
How does it work? HTML, Javascript, CSS PhoneGap Javascript API Web browser / UIWebView PhoneGap Native Library Native Platform Mobile app
Getting started Java-like package name $ npm install -g cordova $ cordova create ./mydemo com.mydemo MyDemo $ cd mydemo $ cordova platform add android $ cordova run android Assume iOS/Android SDK is setup Pre-requisites: Android SDK, ANDROID_HOME, ant
Folder layout config.xml - used to generate iOS/Android config hooks/ - actions to run at various points during the build platforms/ - apps for each platform, same as normal apps plugins/ - cordova/phonegap plugins which add functionality www/ - where your HTML, JS and CSS live -> platforms/android/assets/www -> platforms/ios/www -> …
Live-reload = rapid feedback • “The PhoneGap Developer App” • http://app.phonegap.com/ • Available from iOS and Android app stores • phonegap serve • npm install -g phonegap • Watches www/ folder for changes, tells page to reload itself • You can test this in a normal browser too • There is also cordova serve but not sure what it’s supposed to do
Plugins • Allow you to interact with the rest of your device (beyond the web browser) through Javascript • Plugins usually have 2 components: 1. Platform-specific native layer (Android, iOS, etc) 2. Javascript API (used by your app) • All standard device features (e.g. contacts, compass, etc) accessed through plugins • Can also interact with other apps (e.g. Facebook app, Google Maps) • Plugin registry: http://plugins.cordova.io/
Adding a plugin • Geolocation plugin (lat/long) • http://plugins.cordova.io/#/package/ org.apache.cordova.geolocation • We use navigator.geolocation.watchPosition to get the latitude/longitude co-ordinates. $ cordova plugin add org.apache.cordova.geolocation $ cordova run android …OR… phonegap serve
Live-reload issues • PhoneGap Developer App comes with basic plugins - geolocation, camera, etc. • But what if we want to use a plugin it doesn’t have, e.g. Google Maps or our own custom plugin? • We can’t use live-reload with phonegap serve… • …so we will build the live reload mechanism ourselves!
Live-reload issues • PhoneGap Developer App comes with basic plugins - geolocation, camera, etc. • But what if we want to use a plugin it doesn’t have, e.g. Google Maps or our own custom plugin? • We can’t use live-reload with phonegap serve… • …so we will build the live reload mechanism ourselves!
Use gulp for live-reload • gulp-server-livereload - watch for changes and send reload signal • gulp-replace-task - auto-insert live reload host:port into HTML page • Demo app • https://github.com/hiddentao/phonegap-demo-app
Useful links • Ionic framework - http://ionicframework.com • Like Twitter Bootstrap but for hybrid apps. • Built on Angular.JS • Meteor - http://meteor.com/ • Isomorphic Javascript framework (built on node.js) • Lets you push code update to clients on-the-fly • PhoneGap build - https://build.phonegap.com/ • Build and packaging done on a cloud server, saves you time and effort • Trigger.io - https://trigger.io/ • Like PhoneGap but is proprietary and costs money • Easier to use than PhoneGap, better plugin integration, etc.
Any Questions? “PhoneGap is making the world a better place through constructing elegant hierarchies for maximum code reuse and extensibility”

More Related Content

Introduction to PhoneGap

  • 1. Intro to PhoneGap Ramesh Nair / hiddentao Oct 2014 @ Taipei Javascript Enthusiasts
  • 2. What is PhoneGap? • Build mobile apps using HTML5, Javascript and CSS • Created by Nitobi in 2008 • Acquired by Adobe in 2011 • Code also given to Apache to create “Cordova” • Today 2 projects: Phonegap and Cordova • If Cordova = Blink/Webkit then Phonegap = Chrome • PhoneGap adds extra features to Cordova (e.g. cloud build) • http://cordova.apache.org/ • http://phonegap.com/
  • 3. Single codebase Multiple platforms img: http://adrocknaphobia.github.io/preso-future-of-mobile/
  • 5. How does it work? HTML, Javascript, CSS PhoneGap Javascript API Web browser / UIWebView PhoneGap Native Library Native Platform Mobile app
  • 6. Getting started Java-like package name $ npm install -g cordova $ cordova create ./mydemo com.mydemo MyDemo $ cd mydemo $ cordova platform add android $ cordova run android Assume iOS/Android SDK is setup Pre-requisites: Android SDK, ANDROID_HOME, ant
  • 7. Folder layout config.xml - used to generate iOS/Android config hooks/ - actions to run at various points during the build platforms/ - apps for each platform, same as normal apps plugins/ - cordova/phonegap plugins which add functionality www/ - where your HTML, JS and CSS live -> platforms/android/assets/www -> platforms/ios/www -> …
  • 8. Live-reload = rapid feedback • “The PhoneGap Developer App” • http://app.phonegap.com/ • Available from iOS and Android app stores • phonegap serve • npm install -g phonegap • Watches www/ folder for changes, tells page to reload itself • You can test this in a normal browser too • There is also cordova serve but not sure what it’s supposed to do
  • 9. Plugins • Allow you to interact with the rest of your device (beyond the web browser) through Javascript • Plugins usually have 2 components: 1. Platform-specific native layer (Android, iOS, etc) 2. Javascript API (used by your app) • All standard device features (e.g. contacts, compass, etc) accessed through plugins • Can also interact with other apps (e.g. Facebook app, Google Maps) • Plugin registry: http://plugins.cordova.io/
  • 10. Adding a plugin • Geolocation plugin (lat/long) • http://plugins.cordova.io/#/package/ org.apache.cordova.geolocation • We use navigator.geolocation.watchPosition to get the latitude/longitude co-ordinates. $ cordova plugin add org.apache.cordova.geolocation $ cordova run android …OR… phonegap serve
  • 11. Live-reload issues • PhoneGap Developer App comes with basic plugins - geolocation, camera, etc. • But what if we want to use a plugin it doesn’t have, e.g. Google Maps or our own custom plugin? • We can’t use live-reload with phonegap serve… • …so we will build the live reload mechanism ourselves!
  • 12. Live-reload issues • PhoneGap Developer App comes with basic plugins - geolocation, camera, etc. • But what if we want to use a plugin it doesn’t have, e.g. Google Maps or our own custom plugin? • We can’t use live-reload with phonegap serve… • …so we will build the live reload mechanism ourselves!
  • 13. Use gulp for live-reload • gulp-server-livereload - watch for changes and send reload signal • gulp-replace-task - auto-insert live reload host:port into HTML page • Demo app • https://github.com/hiddentao/phonegap-demo-app
  • 14. Useful links • Ionic framework - http://ionicframework.com • Like Twitter Bootstrap but for hybrid apps. • Built on Angular.JS • Meteor - http://meteor.com/ • Isomorphic Javascript framework (built on node.js) • Lets you push code update to clients on-the-fly • PhoneGap build - https://build.phonegap.com/ • Build and packaging done on a cloud server, saves you time and effort • Trigger.io - https://trigger.io/ • Like PhoneGap but is proprietary and costs money • Easier to use than PhoneGap, better plugin integration, etc.
  • 15. Any Questions? “PhoneGap is making the world a better place through constructing elegant hierarchies for maximum code reuse and extensibility”