SlideShare a Scribd company logo
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

What's hot

Building Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGapBuilding Native Mobile Applications with PhoneGap
Building Native Mobile Applications with PhoneGapSimon MacDonald
 
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 AppsPhoneGap
 
PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010alunny
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGapdegarden
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGapQuang Minh Dao
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSGabriel Huecas
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap InsightsMonaca
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGapJoseph Labrecque
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Developmentthedumbterminal
 
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapWikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapTed Chien
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationMuhammad Hakim A
 
Hybrid App Development with PhoneGap
Hybrid App Development with PhoneGapHybrid App Development with PhoneGap
Hybrid App Development with PhoneGapDotitude
 
The Phonegap Architecture
The Phonegap ArchitectureThe Phonegap Architecture
The Phonegap ArchitectureFrank Gielen
 

What's hot (20)

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
 
Phone gap
Phone gapPhone gap
Phone gap
 
PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
 
Building mobile apps using Phonegap
Building mobile apps using PhonegapBuilding mobile apps using Phonegap
Building mobile apps using Phonegap
 
Phonegap - An Overview
Phonegap - An OverviewPhonegap - An Overview
Phonegap - An Overview
 
Phonegap
PhonegapPhonegap
Phonegap
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Development
 
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGapWikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGap
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
Hybrid App Development with PhoneGap
Hybrid App Development with PhoneGapHybrid App Development with PhoneGap
Hybrid App Development with PhoneGap
 
The Phonegap Architecture
The Phonegap ArchitectureThe Phonegap Architecture
The Phonegap Architecture
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 

Viewers also liked

Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...kiphampton
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 
Intelligent Traffic light detection for individuals with CVD
Intelligent Traffic light detection for individuals with CVDIntelligent Traffic light detection for individuals with CVD
Intelligent Traffic light detection for individuals with CVDSwaroop Aradhya M C
 
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web componentsPolymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web componentspsstoev
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
OBIEE - Introduction & building reports
OBIEE - Introduction & building reportsOBIEE - Introduction & building reports
OBIEE - Introduction & building reportsDeepika Raipuria
 
Raspberry Pi 3 Latest PPT - Robomart
Raspberry Pi 3 Latest PPT - RobomartRaspberry Pi 3 Latest PPT - Robomart
Raspberry Pi 3 Latest PPT - RobomartRobomart
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
Seminar Presentation on raspberry pi
Seminar Presentation on raspberry piSeminar Presentation on raspberry pi
Seminar Presentation on raspberry piGeorgekutty Francis
 
Introduction to raspberry pi
Introduction to raspberry piIntroduction to raspberry pi
Introduction to raspberry pipraveen_23
 
Raspberry pi : an introduction
Raspberry pi : an introductionRaspberry pi : an introduction
Raspberry pi : an introductionLTG Oxford
 
Oracle business intelligence overview
Oracle business intelligence overviewOracle business intelligence overview
Oracle business intelligence overviewnvvrajesh
 

Viewers also liked (18)

Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
Stop Making The Web Harder Than It Is; Real-world REST, HATEOAS, and Hypermed...
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Intelligent Traffic light detection for individuals with CVD
Intelligent Traffic light detection for individuals with CVDIntelligent Traffic light detection for individuals with CVD
Intelligent Traffic light detection for individuals with CVD
 
REST in Practice
REST in PracticeREST in Practice
REST in Practice
 
Ionic by Example
Ionic by ExampleIonic by Example
Ionic by Example
 
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web componentsPolymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
OBIEE - Introduction & building reports
OBIEE - Introduction & building reportsOBIEE - Introduction & building reports
OBIEE - Introduction & building reports
 
Introduction to OBIEE 11g
Introduction to OBIEE 11gIntroduction to OBIEE 11g
Introduction to OBIEE 11g
 
Building Oracle BIEE (OBIEE) Reports, Dashboards
Building Oracle BIEE (OBIEE) Reports, DashboardsBuilding Oracle BIEE (OBIEE) Reports, Dashboards
Building Oracle BIEE (OBIEE) Reports, Dashboards
 
Raspberry Pi 3 Latest PPT - Robomart
Raspberry Pi 3 Latest PPT - RobomartRaspberry Pi 3 Latest PPT - Robomart
Raspberry Pi 3 Latest PPT - Robomart
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Seminar Presentation on raspberry pi
Seminar Presentation on raspberry piSeminar Presentation on raspberry pi
Seminar Presentation on raspberry pi
 
Introduction to raspberry pi
Introduction to raspberry piIntroduction to raspberry pi
Introduction to raspberry pi
 
Raspberry pi : an introduction
Raspberry pi : an introductionRaspberry pi : an introduction
Raspberry pi : an introduction
 
Raspberry pi
Raspberry pi Raspberry pi
Raspberry pi
 
Oracle business intelligence overview
Oracle business intelligence overviewOracle business intelligence overview
Oracle business intelligence overview
 

Similar to Introduction to PhoneGap

PhoneGap - Now and the Future
PhoneGap - Now and the FuturePhoneGap - Now and the Future
PhoneGap - Now and the FutureTim Kim
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGapMihai Corlan
 
Phonegap
PhonegapPhonegap
PhonegapTim Kim
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development Jakir Hossain
 
Mobile Development with PhoneGap
Mobile Development with PhoneGapMobile Development with PhoneGap
Mobile Development with PhoneGapDaniel Ramos
 
PhoneGap/PhoneGap Build - Amsterdam Adobe Camp
PhoneGap/PhoneGap Build - Amsterdam Adobe CampPhoneGap/PhoneGap Build - Amsterdam Adobe Camp
PhoneGap/PhoneGap Build - Amsterdam Adobe CampMihai Corlan
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsJohn M. Wargo
 
Skip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildSkip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildTerry Ryan
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGapChristian Rokitta
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application developmentEngin Hatay
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
 

Similar to Introduction to PhoneGap (20)

PhoneGap - Now and the Future
PhoneGap - Now and the FuturePhoneGap - Now and the Future
PhoneGap - Now and the Future
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
PhoneGap/Cordova
PhoneGap/CordovaPhoneGap/Cordova
PhoneGap/Cordova
 
Webapi
WebapiWebapi
Webapi
 
Phonegap
PhonegapPhonegap
Phonegap
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Cross Platform Mobile App Development
Cross Platform Mobile App Development Cross Platform Mobile App Development
Cross Platform Mobile App Development
 
Mobile Development with PhoneGap
Mobile Development with PhoneGapMobile Development with PhoneGap
Mobile Development with PhoneGap
 
PhoneGap/PhoneGap Build - Amsterdam Adobe Camp
PhoneGap/PhoneGap Build - Amsterdam Adobe CampPhoneGap/PhoneGap Build - Amsterdam Adobe Camp
PhoneGap/PhoneGap Build - Amsterdam Adobe Camp
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
 
Skip the IDE with PhoneGap Build
Skip the IDE with PhoneGap BuildSkip the IDE with PhoneGap Build
Skip the IDE with PhoneGap Build
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application development
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 

More from Ramesh Nair

solUI Introduction (2019)
solUI Introduction (2019)solUI Introduction (2019)
solUI Introduction (2019)Ramesh Nair
 
Kickback - incentivizing event attendance through crypto economics
Kickback - incentivizing event attendance through crypto economicsKickback - incentivizing event attendance through crypto economics
Kickback - incentivizing event attendance through crypto economicsRamesh Nair
 
Introduction to Blockchains
Introduction to BlockchainsIntroduction to Blockchains
Introduction to BlockchainsRamesh Nair
 
Javascript ES6 generators
Javascript ES6 generatorsJavascript ES6 generators
Javascript ES6 generatorsRamesh Nair
 
Introduction to Dart
Introduction to DartIntroduction to Dart
Introduction to DartRamesh Nair
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation JavascriptRamesh Nair
 
Javascript Update May 2013
Javascript Update May 2013Javascript Update May 2013
Javascript Update May 2013Ramesh Nair
 

More from Ramesh Nair (7)

solUI Introduction (2019)
solUI Introduction (2019)solUI Introduction (2019)
solUI Introduction (2019)
 
Kickback - incentivizing event attendance through crypto economics
Kickback - incentivizing event attendance through crypto economicsKickback - incentivizing event attendance through crypto economics
Kickback - incentivizing event attendance through crypto economics
 
Introduction to Blockchains
Introduction to BlockchainsIntroduction to Blockchains
Introduction to Blockchains
 
Javascript ES6 generators
Javascript ES6 generatorsJavascript ES6 generators
Javascript ES6 generators
 
Introduction to Dart
Introduction to DartIntroduction to Dart
Introduction to Dart
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
 
Javascript Update May 2013
Javascript Update May 2013Javascript Update May 2013
Javascript Update May 2013
 

Recently uploaded

Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...drm1699
 
BusinessGPT - Security and Governance for Generative AI
BusinessGPT  - Security and Governance for Generative AIBusinessGPT  - Security and Governance for Generative AI
BusinessGPT - Security and Governance for Generative AIAGATSoftware
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletAndrea Goulet
 
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-CloudAlluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-CloudAlluxio, Inc.
 
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAOpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAShane Coughlan
 
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Lisi Hocke
 
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024SimonedeGijt
 
Test Automation Design Patterns_ A Comprehensive Guide.pdf
Test Automation Design Patterns_ A Comprehensive Guide.pdfTest Automation Design Patterns_ A Comprehensive Guide.pdf
Test Automation Design Patterns_ A Comprehensive Guide.pdfkalichargn70th171
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdftimtebeek1
 
GraphSummit Milan - Neo4j: The Art of the Possible with Graph
GraphSummit Milan - Neo4j: The Art of the Possible with GraphGraphSummit Milan - Neo4j: The Art of the Possible with Graph
GraphSummit Milan - Neo4j: The Art of the Possible with GraphNeo4j
 
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...Flutter Agency
 
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypseTomasz Kowalczewski
 
Workshop - Architecting Innovative Graph Applications- GraphSummit Milan
Workshop -  Architecting Innovative Graph Applications- GraphSummit MilanWorkshop -  Architecting Innovative Graph Applications- GraphSummit Milan
Workshop - Architecting Innovative Graph Applications- GraphSummit MilanNeo4j
 
UNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale Ibrida
UNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale IbridaUNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale Ibrida
UNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale IbridaNeo4j
 

Recently uploaded (20)

Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
Abortion Pills For Sale WhatsApp[[+27737758557]] In Birch Acres, Abortion Pil...
 
BusinessGPT - Security and Governance for Generative AI
BusinessGPT  - Security and Governance for Generative AIBusinessGPT  - Security and Governance for Generative AI
BusinessGPT - Security and Governance for Generative AI
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea Goulet
 
Abortion Pill Prices Polokwane ](+27832195400*)[ 🏥 Women's Abortion Clinic in...
Abortion Pill Prices Polokwane ](+27832195400*)[ 🏥 Women's Abortion Clinic in...Abortion Pill Prices Polokwane ](+27832195400*)[ 🏥 Women's Abortion Clinic in...
Abortion Pill Prices Polokwane ](+27832195400*)[ 🏥 Women's Abortion Clinic in...
 
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-CloudAlluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
 
Abortion Pill Prices Aliwal North ](+27832195400*)[ 🏥 Women's Abortion Clinic...
Abortion Pill Prices Aliwal North ](+27832195400*)[ 🏥 Women's Abortion Clinic...Abortion Pill Prices Aliwal North ](+27832195400*)[ 🏥 Women's Abortion Clinic...
Abortion Pill Prices Aliwal North ](+27832195400*)[ 🏥 Women's Abortion Clinic...
 
Abortion Pill Prices Germiston ](+27832195400*)[ 🏥 Women's Abortion Clinic in...
Abortion Pill Prices Germiston ](+27832195400*)[ 🏥 Women's Abortion Clinic in...Abortion Pill Prices Germiston ](+27832195400*)[ 🏥 Women's Abortion Clinic in...
Abortion Pill Prices Germiston ](+27832195400*)[ 🏥 Women's Abortion Clinic in...
 
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
Abortion Pill Prices Mthatha (@](+27832195400*)[ 🏥 Women's Abortion Clinic In...
 
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAOpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
 
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
 
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
Wired_2.0_CREATE YOUR ULTIMATE LEARNING ENVIRONMENT_JCON_16052024
 
Test Automation Design Patterns_ A Comprehensive Guide.pdf
Test Automation Design Patterns_ A Comprehensive Guide.pdfTest Automation Design Patterns_ A Comprehensive Guide.pdf
Test Automation Design Patterns_ A Comprehensive Guide.pdf
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdf
 
GraphSummit Milan - Neo4j: The Art of the Possible with Graph
GraphSummit Milan - Neo4j: The Art of the Possible with GraphGraphSummit Milan - Neo4j: The Art of the Possible with Graph
GraphSummit Milan - Neo4j: The Art of the Possible with Graph
 
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
Abortion Clinic In Johannesburg ](+27832195400*)[ 🏥 Safe Abortion Pills in Jo...
 
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
Navigation in flutter – how to add stack, tab, and drawer navigators to your ...
 
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
[GeeCON2024] How I learned to stop worrying and love the dark silicon apocalypse
 
Abortion Clinic In Stanger ](+27832195400*)[ 🏥 Safe Abortion Pills In Stanger...
Abortion Clinic In Stanger ](+27832195400*)[ 🏥 Safe Abortion Pills In Stanger...Abortion Clinic In Stanger ](+27832195400*)[ 🏥 Safe Abortion Pills In Stanger...
Abortion Clinic In Stanger ](+27832195400*)[ 🏥 Safe Abortion Pills In Stanger...
 
Workshop - Architecting Innovative Graph Applications- GraphSummit Milan
Workshop -  Architecting Innovative Graph Applications- GraphSummit MilanWorkshop -  Architecting Innovative Graph Applications- GraphSummit Milan
Workshop - Architecting Innovative Graph Applications- GraphSummit Milan
 
UNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale Ibrida
UNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale IbridaUNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale Ibrida
UNI DI NAPOLI FEDERICO II - Il ruolo dei grafi nell'AI Conversazionale Ibrida
 

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”