SlideShare a Scribd company logo
1 of 20
Download to read offline
Intro	
  to	
  PhoneGap	
  
Jussi	
  Pohjolainen	
  
Tampere	
  University	
  of	
  Applied	
  Sciences	
  
PhoneGap	
  »	
  Mo?va?on	
  
•  Use	
  web	
  technologies	
  to	
  build	
  hybrid	
  apps	
  
– PhoneGap	
  wraps	
  your	
  html	
  –	
  files	
  inside	
  of	
  na?ve	
  
app	
  that	
  can	
  be	
  upload	
  to	
  app	
  stores	
  
•  Cross-­‐pla1orm	
  development	
  
– iOS,	
  Android,	
  Windows	
  Phone,	
  Blackberry,	
  
Symbian	
  (well,	
  basically	
  everything)	
  
•  Possible	
  to	
  access	
  some	
  na6ve	
  features,	
  like	
  
sensors,	
  camera	
  …	
  
Installa?on	
  
•  Install	
  NodeJS	
  (hMp://nodejs.org/)	
  
– Built	
  on	
  top	
  of	
  V8	
  Chrome	
  JS	
  engine	
  
– PhoneGap	
  uses	
  this	
  
•  Install	
  PhoneGap	
  (hMp://phonegap.com/install/)	
  
– > sudo npm install –g phonegap
•  Install	
  SDK	
  for	
  Android,	
  iOS,	
  Windows	
  Phone..	
  
•  You	
  can	
  also	
  build	
  apps	
  using	
  PhoneGap	
  Build	
  
– Compile	
  in	
  the	
  cloud	
  for	
  Android,	
  iOS..	
  no	
  need	
  to	
  
install	
  separate	
  SDKs.	
  
CLI	
  
•  Creates	
  template	
  project	
  
–  phonegap create my-app
•  Move	
  inside	
  project	
  folder	
  
–  cd my-app/
•  Compile	
  to	
  android	
  
–  phonegap –V build android
•  Compile	
  to	
  iOS	
  
–  phonegap –V build ios
•  Deploy	
  the	
  App	
  
–  phonegap install android/ios
•  Last	
  two	
  can	
  be	
  combined:	
  compile	
  and	
  deploy	
  
–  phonegap run android/ios
About	
  Android	
  PlaXorm	
  
•  Once	
  you	
  have	
  installed	
  Android	
  SDK	
  and	
  you	
  have	
  put	
  
development	
  tools	
  to	
  path,	
  you	
  can	
  configure	
  
emulators	
  
–  android avd
•  See	
  plaXorm	
  guides	
  
–  http://docs.phonegap.com/en/edge/
guide_platforms_index.md.html#Platform%20Guides
•  Emulator	
  can	
  be	
  slow…	
  use	
  real	
  device	
  if	
  possible.	
  If	
  
not,	
  see	
  ?ps:	
  
–  http://stackoverflow.com/questions/2662650/
making-the-android-emulator-run-faster/
12941873#12941873
Project	
  Structure	
  
•  When	
  crea?ng	
  the	
  project	
  the	
  project	
  you	
  get	
  
various	
  directories	
  
–  merges/ // Target files to different platforms
–  platforms/ // Android/iOS projects
–  plugins/ // Installed plugins
–  www/ // Your Web app
•  The	
  last	
  one	
  contains	
  your	
  app	
  that	
  is	
  
wrapped	
  inside	
  of	
  na?ve	
  applica?on.	
  Other	
  
directories	
  are	
  empty	
  un?l	
  you	
  compile	
  the	
  
app	
  for	
  some	
  plaXorm.	
  
www/config.xml
•  App	
  rely	
  on	
  a	
  common	
  config.xml	
  that	
  
provides	
  info	
  about	
  the	
  app	
  and	
  specifies	
  
parameters	
  how	
  it	
  works	
  
•  Packaged	
  Web	
  Apps	
  specifica?on	
  (W3C)	
  
– http://www.w3.org/TR/widgets/
www/index.html
•  App	
  itself	
  is	
  implemented	
  as	
  a	
  web	
  page	
  that	
  is	
  
linked	
  to	
  whatever	
  css	
  and	
  js.	
  
•  App	
  executes	
  inside	
  of	
  "WebView"	
  -­‐	
  component	
  
of	
  na?ve	
  app.	
  
–  Can	
  be	
  distributed	
  
•  The	
  WebView	
  can	
  take	
  the	
  whole	
  screen	
  or	
  you	
  
can	
  develop	
  mix	
  na?ve	
  components	
  and	
  the	
  
WebView	
  
•  If	
  you	
  want	
  to	
  access	
  na?ve	
  features	
  of	
  phone,	
  
you	
  do	
  it	
  by	
  using	
  phonegap.js
Compiling	
  Locally	
  and	
  Remote	
  
•  You	
  must	
  install	
  SDK	
  to	
  be	
  able	
  to	
  compile	
  
your	
  apps	
  locally	
  
– Or	
  you	
  can	
  use	
  PhoneGap	
  Build	
  cloud	
  service	
  
– PhoneGap	
  Build	
  does	
  not	
  support	
  Windows	
  
Phone	
  8	
  and	
  Windows	
  8.	
  
•  Locally	
  supported	
  pla1orms	
  
-­‐  iOS	
  (Mac)	
  
-­‐  Android	
  (Mac,	
  Linux,	
  Windows)	
  
-­‐  Windows	
  Phone	
  (Windows)	
  
PhoneGap	
  Build	
  
•  Create	
  account	
  
–  https://build.phonegap.com/
–  github	
  account	
  is	
  not	
  supported,	
  use	
  adobe	
  id!	
  
•  Login	
  in	
  CLI	
  
–  phonegap remote login --username
iamreallyadog@gmail.com --password mYpASSw0RD
•  A`er	
  that	
  
–  phonegap remote build android/ios
•  Device	
  install?	
  
–  phonegap remote install android/ios
–  You	
  will	
  get	
  a	
  qr	
  code,	
  use	
  that	
  to	
  install	
  on	
  device!	
  
PhoneGap	
  Build	
  
Adding	
  Device	
  Specific	
  Features	
  
•  If	
  you	
  need	
  to	
  access	
  device	
  specific	
  features	
  using	
  JS,	
  you	
  must	
  install	
  
plugins	
  
•  How?	
  
–  phonegap local plugin add url
•  Where	
  url	
  can	
  be	
  
–  https://git-wip-us.apache.org/repos/asf/cordova-plugin-
device.git
•  See:	
  
–  http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The
%20Command-line%20Interface
•  To	
  see	
  all	
  currently	
  installed	
  plugins	
  
–  phonegap local plugin list
•  And	
  delete	
  plugins	
  
–  phonegap local plugin remove org.apache.cordova.core.console
Debugging	
  
•  Possible	
  to	
  use	
  desktop	
  browsers	
  
–  Although	
  na?ve	
  APIs	
  are	
  not	
  available!	
  
•  PhoneGap	
  Ripple	
  emulator	
  
–  http://emulate.phonegap.com/
–  Emulates	
  the	
  na?ve	
  APIs	
  in	
  desktop	
  
•  Log	
  messages	
  
–  console.log(…);
–  Android:	
  	
  
•  Unix: adb logcat | grep 'web console'
•  Win: adb logcat | findstr 'web console'
–  iOS:	
  Xcode	
  Debug	
  Area	
  console	
  
LIFECYCLE	
  EVENTS	
  
Events	
  
•  Your	
  app	
  can	
  listen	
  to	
  life-­‐cycle	
  events	
  such	
  as	
  
–  deviceready
•  When	
  PhoneGap	
  is	
  fully	
  loaded	
  and	
  na?ve	
  APIs	
  can	
  be	
  called	
  
–  pause
•  When	
  app	
  is	
  put	
  to	
  background	
  
–  resume
•  When	
  app	
  is	
  retrieved	
  from	
  background	
  
–  online
•  When	
  app	
  is	
  online	
  
–  offline
•  When	
  app	
  is	
  offline
•  When	
  your	
  app	
  is	
  fully	
  loaded,	
  deviceready	
  event	
  is	
  
raised.	
  AOer	
  that	
  you	
  can	
  start	
  to	
  listen	
  to	
  other	
  events.	
  
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
function onDeviceReady() {
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
This	
  is	
  a	
  dynamically	
  
generated	
  js	
  –	
  file	
  depending	
  
on	
  the	
  plaXorm!	
  
function main() {
"use strict";
var DEBUG = 1;
document.addEventListener("deviceready", deviceReady, false);
function deviceReady() {
// Now safe to use device APIs
debug("deviceReady()", "Device is now ready", 1);
document.addEventListener("pause", devicePause, false);
document.addEventListener("resume", deviceResume, false);
document.addEventListener("online", deviceOnline, false);
document.addEventListener("offline", deviceOffline, false);
}
function devicePause() {
debug("devicePause()", "Device is now paused", 1);
}
function deviceResume() {
debug("deviceResume()", "Device is now resumed", 1);
}
function deviceOnline() {
debug("deviceOnline()", "Device is now online", 1);
}
function deviceOffline() {
debug("deviceOffline()", "Device is now offline", 1);
}
function debug(functionName, text, level) {
if(level <= DEBUG) {
var now = new Date();
console.log(now.toISOString() + " | " + text);
}
}
}
Other	
  Android	
  Events	
  
•  Also	
  following	
  events	
  available	
  
– backbutton // android – platform
– menubutton // android - platform
– searchbutton // android - platform
•  When	
  listening	
  to	
  these,	
  in	
  Android	
  the	
  
normal	
  back-­‐buMon	
  behavior	
  is	
  suppressed!	
  
USING	
  NATIVE	
  APIS:	
  
ACCELEROMETER	
  
function main() {
var options = { frequency: 100 }; // Update every 100 ms
var watchID =
navigator.accelerometer.watchAcceleration(accelerometerSuccess,
accelerometerError,
options);
}
function accelerometerSuccess(acceleration) {
debug("accelerometerSuccess", 'Acceleration X: '
+ acceleration.x + 'n' +
'Acceleration Y: ' + acceleration.y + 'n' +
'Acceleration Z: ' + acceleration.z + 'n' +
'Timestamp: ' + acceleration.timestamp + 'n', 1);
}
function accelerometerError() {
debug("accelerometerError()", "Accelerometer error", 1);
}

More Related Content

What's hot

Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instrumentsIvano Malavolta
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5Roy Clarkson
 
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapChristian Grobmeier
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksJuarez Filho
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworksCarlo Bernaschina
 
Spring Projects Infrastructure
Spring Projects InfrastructureSpring Projects Infrastructure
Spring Projects InfrastructureRoy Clarkson
 
Native Android Development with Spring
Native Android Development with SpringNative Android Development with Spring
Native Android Development with SpringRoy Clarkson
 
Making the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGapMaking the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGapRoy Clarkson
 
Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...
Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...
Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...RianneEmbregts
 
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...Wim Selles
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstRaymond Camden
 
Building Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsBuilding Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsJim Jeffers
 
Apache Cordova: Overview and Introduction
Apache Cordova: Overview and IntroductionApache Cordova: Overview and Introduction
Apache Cordova: Overview and IntroductionGabriele Falasca
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
 
Building Rich Applications with Appcelerator
Building Rich Applications with AppceleratorBuilding Rich Applications with Appcelerator
Building Rich Applications with AppceleratorMatt Raible
 
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)🎤 Hanno Embregts 🎸
 
Native Android Development Practices
Native Android Development PracticesNative Android Development Practices
Native Android Development PracticesRoy Clarkson
 

What's hot (20)

Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
Mobile Web Development with HTML5
Mobile Web Development with HTML5Mobile Web Development with HTML5
Mobile Web Development with HTML5
 
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and Phonegap
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
Cross-platform development frameworks
Cross-platform development frameworksCross-platform development frameworks
Cross-platform development frameworks
 
Spring Projects Infrastructure
Spring Projects InfrastructureSpring Projects Infrastructure
Spring Projects Infrastructure
 
Native Android Development with Spring
Native Android Development with SpringNative Android Development with Spring
Native Android Development with Spring
 
Making the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGapMaking the Mobile Web Native with PhoneGap
Making the Mobile Web Native with PhoneGap
 
Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...
Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...
Building a Spring Boot 2 Application - Ask the Audience! (from Voxxed Days Vi...
 
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
 
Cordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirstCordova + Ionic + MobileFirst
Cordova + Ionic + MobileFirst
 
Building Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in RailsBuilding Mobile Friendly APIs in Rails
Building Mobile Friendly APIs in Rails
 
Apache Cordova: Overview and Introduction
Apache Cordova: Overview and IntroductionApache Cordova: Overview and Introduction
Apache Cordova: Overview and Introduction
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
 
Building Rich Applications with Appcelerator
Building Rich Applications with AppceleratorBuilding Rich Applications with Appcelerator
Building Rich Applications with Appcelerator
 
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
Building a Spring Boot Application - Ask the Audience! (from JVMCon 2018)
 
Ionic2
Ionic2Ionic2
Ionic2
 
Native Android Development Practices
Native Android Development PracticesNative Android Development Practices
Native Android Development Practices
 

Viewers also liked

Viewers also liked (7)

JavaScript Good Practices
JavaScript Good PracticesJavaScript Good Practices
JavaScript Good Practices
 
Intro to Java ME and Asha Platform
Intro to Java ME and Asha PlatformIntro to Java ME and Asha Platform
Intro to Java ME and Asha Platform
 
Introduction to Java ME
Introduction to Java MEIntroduction to Java ME
Introduction to Java ME
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Java JDBC
Java JDBCJava JDBC
Java JDBC
 
PHP tutorial | ptutorial
PHP tutorial | ptutorialPHP tutorial | ptutorial
PHP tutorial | ptutorial
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 

Similar to Intro to PhoneGap

Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGapRamesh Nair
 
Apache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app developmentApache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app developmentwebprogr.com
 
"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
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGapMihai Corlan
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers dssprakash
 
iOS Application Security
iOS Application SecurityiOS Application Security
iOS Application SecurityEgor Tolstoy
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache CordovaIvano Malavolta
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildChris Griffith
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGapJoseph Labrecque
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksSasha dos Santos
 
Phonegap android angualr material design
Phonegap android angualr material designPhonegap android angualr material design
Phonegap android angualr material designSrinadh Kanugala
 
Android Scripting
Android ScriptingAndroid Scripting
Android ScriptingJuan Gomez
 
Phonegap Development & Debugging
Phonegap Development & DebuggingPhonegap Development & Debugging
Phonegap Development & DebuggingIvano Malavolta
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 

Similar to Intro to PhoneGap (20)

Phone gap development, testing, and debugging
Phone gap development, testing, and debuggingPhone gap development, testing, and debugging
Phone gap development, testing, and debugging
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
Apache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app developmentApache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app development
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
Getting started with PhoneGap
Getting started with PhoneGapGetting started with PhoneGap
Getting started with PhoneGap
 
Phone gap
Phone gapPhone gap
Phone gap
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 
iOS Application Security
iOS Application SecurityiOS Application Security
iOS Application Security
 
phonegap_101
phonegap_101phonegap_101
phonegap_101
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
 
Phone gap development, testing, and debugging
Phone gap development, testing, and debuggingPhone gap development, testing, and debugging
Phone gap development, testing, and debugging
 
Phonegap android angualr material design
Phonegap android angualr material designPhonegap android angualr material design
Phonegap android angualr material design
 
Android Scripting
Android ScriptingAndroid Scripting
Android Scripting
 
Phonegap Development & Debugging
Phonegap Development & DebuggingPhonegap Development & Debugging
Phonegap Development & Debugging
 
PhoneGap/Cordova
PhoneGap/CordovaPhoneGap/Cordova
PhoneGap/Cordova
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
 

More from Jussi Pohjolainen

libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferencesJussi Pohjolainen
 
libGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationlibGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationJussi Pohjolainen
 
Intro to Building Android Games using libGDX
Intro to Building Android Games using libGDXIntro to Building Android Games using libGDX
Intro to Building Android Games using libGDXJussi Pohjolainen
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript DevelopmentJussi Pohjolainen
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame AnimationJussi Pohjolainen
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame AnimationJussi Pohjolainen
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDXJussi Pohjolainen
 
Building Android games using LibGDX
Building Android games using LibGDXBuilding Android games using LibGDX
Building Android games using LibGDXJussi Pohjolainen
 
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesCreating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesJussi Pohjolainen
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platformJussi Pohjolainen
 

More from Jussi Pohjolainen (20)

Moved to Speakerdeck
Moved to SpeakerdeckMoved to Speakerdeck
Moved to Speakerdeck
 
Java Web Services
Java Web ServicesJava Web Services
Java Web Services
 
Box2D and libGDX
Box2D and libGDXBox2D and libGDX
Box2D and libGDX
 
libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and Preferences
 
libGDX: Tiled Maps
libGDX: Tiled MapslibGDX: Tiled Maps
libGDX: Tiled Maps
 
libGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationlibGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame Animation
 
Intro to Building Android Games using libGDX
Intro to Building Android Games using libGDXIntro to Building Android Games using libGDX
Intro to Building Android Games using libGDX
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript Development
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
libGDX: Scene2D
libGDX: Scene2DlibGDX: Scene2D
libGDX: Scene2D
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame Animation
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame Animation
 
libGDX: User Input
libGDX: User InputlibGDX: User Input
libGDX: User Input
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDX
 
Building Android games using LibGDX
Building Android games using LibGDXBuilding Android games using LibGDX
Building Android games using LibGDX
 
Android Threading
Android ThreadingAndroid Threading
Android Threading
 
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesCreating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platform
 
Intro to Asha UI
Intro to Asha UIIntro to Asha UI
Intro to Asha UI
 

Recently uploaded

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Recently uploaded (20)

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

Intro to PhoneGap

  • 1. Intro  to  PhoneGap   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  • 2. PhoneGap  »  Mo?va?on   •  Use  web  technologies  to  build  hybrid  apps   – PhoneGap  wraps  your  html  –  files  inside  of  na?ve   app  that  can  be  upload  to  app  stores   •  Cross-­‐pla1orm  development   – iOS,  Android,  Windows  Phone,  Blackberry,   Symbian  (well,  basically  everything)   •  Possible  to  access  some  na6ve  features,  like   sensors,  camera  …  
  • 3. Installa?on   •  Install  NodeJS  (hMp://nodejs.org/)   – Built  on  top  of  V8  Chrome  JS  engine   – PhoneGap  uses  this   •  Install  PhoneGap  (hMp://phonegap.com/install/)   – > sudo npm install –g phonegap •  Install  SDK  for  Android,  iOS,  Windows  Phone..   •  You  can  also  build  apps  using  PhoneGap  Build   – Compile  in  the  cloud  for  Android,  iOS..  no  need  to   install  separate  SDKs.  
  • 4. CLI   •  Creates  template  project   –  phonegap create my-app •  Move  inside  project  folder   –  cd my-app/ •  Compile  to  android   –  phonegap –V build android •  Compile  to  iOS   –  phonegap –V build ios •  Deploy  the  App   –  phonegap install android/ios •  Last  two  can  be  combined:  compile  and  deploy   –  phonegap run android/ios
  • 5. About  Android  PlaXorm   •  Once  you  have  installed  Android  SDK  and  you  have  put   development  tools  to  path,  you  can  configure   emulators   –  android avd •  See  plaXorm  guides   –  http://docs.phonegap.com/en/edge/ guide_platforms_index.md.html#Platform%20Guides •  Emulator  can  be  slow…  use  real  device  if  possible.  If   not,  see  ?ps:   –  http://stackoverflow.com/questions/2662650/ making-the-android-emulator-run-faster/ 12941873#12941873
  • 6. Project  Structure   •  When  crea?ng  the  project  the  project  you  get   various  directories   –  merges/ // Target files to different platforms –  platforms/ // Android/iOS projects –  plugins/ // Installed plugins –  www/ // Your Web app •  The  last  one  contains  your  app  that  is   wrapped  inside  of  na?ve  applica?on.  Other   directories  are  empty  un?l  you  compile  the   app  for  some  plaXorm.  
  • 7. www/config.xml •  App  rely  on  a  common  config.xml  that   provides  info  about  the  app  and  specifies   parameters  how  it  works   •  Packaged  Web  Apps  specifica?on  (W3C)   – http://www.w3.org/TR/widgets/
  • 8. www/index.html •  App  itself  is  implemented  as  a  web  page  that  is   linked  to  whatever  css  and  js.   •  App  executes  inside  of  "WebView"  -­‐  component   of  na?ve  app.   –  Can  be  distributed   •  The  WebView  can  take  the  whole  screen  or  you   can  develop  mix  na?ve  components  and  the   WebView   •  If  you  want  to  access  na?ve  features  of  phone,   you  do  it  by  using  phonegap.js
  • 9. Compiling  Locally  and  Remote   •  You  must  install  SDK  to  be  able  to  compile   your  apps  locally   – Or  you  can  use  PhoneGap  Build  cloud  service   – PhoneGap  Build  does  not  support  Windows   Phone  8  and  Windows  8.   •  Locally  supported  pla1orms   -­‐  iOS  (Mac)   -­‐  Android  (Mac,  Linux,  Windows)   -­‐  Windows  Phone  (Windows)  
  • 10. PhoneGap  Build   •  Create  account   –  https://build.phonegap.com/ –  github  account  is  not  supported,  use  adobe  id!   •  Login  in  CLI   –  phonegap remote login --username iamreallyadog@gmail.com --password mYpASSw0RD •  A`er  that   –  phonegap remote build android/ios •  Device  install?   –  phonegap remote install android/ios –  You  will  get  a  qr  code,  use  that  to  install  on  device!  
  • 12. Adding  Device  Specific  Features   •  If  you  need  to  access  device  specific  features  using  JS,  you  must  install   plugins   •  How?   –  phonegap local plugin add url •  Where  url  can  be   –  https://git-wip-us.apache.org/repos/asf/cordova-plugin- device.git •  See:   –  http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The %20Command-line%20Interface •  To  see  all  currently  installed  plugins   –  phonegap local plugin list •  And  delete  plugins   –  phonegap local plugin remove org.apache.cordova.core.console
  • 13. Debugging   •  Possible  to  use  desktop  browsers   –  Although  na?ve  APIs  are  not  available!   •  PhoneGap  Ripple  emulator   –  http://emulate.phonegap.com/ –  Emulates  the  na?ve  APIs  in  desktop   •  Log  messages   –  console.log(…); –  Android:     •  Unix: adb logcat | grep 'web console' •  Win: adb logcat | findstr 'web console' –  iOS:  Xcode  Debug  Area  console  
  • 15. Events   •  Your  app  can  listen  to  life-­‐cycle  events  such  as   –  deviceready •  When  PhoneGap  is  fully  loaded  and  na?ve  APIs  can  be  called   –  pause •  When  app  is  put  to  background   –  resume •  When  app  is  retrieved  from  background   –  online •  When  app  is  online   –  offline •  When  app  is  offline •  When  your  app  is  fully  loaded,  deviceready  event  is   raised.  AOer  that  you  can  start  to  listen  to  other  events.  
  • 16. <!DOCTYPE html> <html> <head> <title>Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for device API libraries to load function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); } // device APIs are available function onDeviceReady() { // Now safe to use device APIs } </script> </head> <body onload="onLoad()"> </body> </html> This  is  a  dynamically   generated  js  –  file  depending   on  the  plaXorm!  
  • 17. function main() { "use strict"; var DEBUG = 1; document.addEventListener("deviceready", deviceReady, false); function deviceReady() { // Now safe to use device APIs debug("deviceReady()", "Device is now ready", 1); document.addEventListener("pause", devicePause, false); document.addEventListener("resume", deviceResume, false); document.addEventListener("online", deviceOnline, false); document.addEventListener("offline", deviceOffline, false); } function devicePause() { debug("devicePause()", "Device is now paused", 1); } function deviceResume() { debug("deviceResume()", "Device is now resumed", 1); } function deviceOnline() { debug("deviceOnline()", "Device is now online", 1); } function deviceOffline() { debug("deviceOffline()", "Device is now offline", 1); } function debug(functionName, text, level) { if(level <= DEBUG) { var now = new Date(); console.log(now.toISOString() + " | " + text); } } }
  • 18. Other  Android  Events   •  Also  following  events  available   – backbutton // android – platform – menubutton // android - platform – searchbutton // android - platform •  When  listening  to  these,  in  Android  the   normal  back-­‐buMon  behavior  is  suppressed!  
  • 19. USING  NATIVE  APIS:   ACCELEROMETER  
  • 20. function main() { var options = { frequency: 100 }; // Update every 100 ms var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError, options); } function accelerometerSuccess(acceleration) { debug("accelerometerSuccess", 'Acceleration X: ' + acceleration.x + 'n' + 'Acceleration Y: ' + acceleration.y + 'n' + 'Acceleration Z: ' + acceleration.z + 'n' + 'Timestamp: ' + acceleration.timestamp + 'n', 1); } function accelerometerError() { debug("accelerometerError()", "Accelerometer error", 1); }