Introduction to PhoneGap

2,470 views

Published on

A brief introduction to PhoneGap and getting started building hybrid mobile apps.

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,470
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
104
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introduction to PhoneGap

  1. 1. Intro to PhoneGap Ramesh Nair / hiddentao Oct 2014 @ Taipei Javascript Enthusiasts
  2. 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. 3. Single codebase Multiple platforms img: http://adrocknaphobia.github.io/preso-future-of-mobile/
  4. 4. img: http://chelramsey.com/phonegap-vs-native-builds-a-12-month-review/
  5. 5. How does it work? HTML, Javascript, CSS PhoneGap Javascript API Web browser / UIWebView PhoneGap Native Library Native Platform Mobile app
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Any Questions? “PhoneGap is making the world a better place through constructing elegant hierarchies for maximum code reuse and extensibility”

×