Intro	
  to	
  PhoneGap	
  
Jussi	
  Pohjolainen	
  
Tampere	
  University	
  of	
  Applied	
  Sciences	
  
PhoneGap	
  »	
  Mo?va?on	
  
•  Use	
  web	
  technologies	
  to	
  build	
  hybrid	
  apps	
  
– PhoneGap	
  wraps	
  yo...
Installa?on	
  
•  Install	
  NodeJS	
  (hMp://nodejs.org/)	
  
– Built	
  on	
  top	
  of	
  V8	
  Chrome	
  JS	
  engine...
CLI	
  
•  Creates	
  template	
  project	
  
–  phonegap create my-app
•  Move	
  inside	
  project	
  folder	
  
–  cd m...
About	
  Android	
  PlaXorm	
  
•  Once	
  you	
  have	
  installed	
  Android	
  SDK	
  and	
  you	
  have	
  put	
  
dev...
Project	
  Structure	
  
•  When	
  crea?ng	
  the	
  project	
  the	
  project	
  you	
  get	
  
various	
  directories	
...
www/config.xml
•  App	
  rely	
  on	
  a	
  common	
  config.xml	
  that	
  
provides	
  info	
  about	
  the	
  app	
  an...
www/index.html
•  App	
  itself	
  is	
  implemented	
  as	
  a	
  web	
  page	
  that	
  is	
  
linked	
  to	
  whatever	...
Compiling	
  Locally	
  and	
  Remote	
  
•  You	
  must	
  install	
  SDK	
  to	
  be	
  able	
  to	
  compile	
  
your	
...
PhoneGap	
  Build	
  
•  Create	
  account	
  
–  https://build.phonegap.com/
–  github	
  account	
  is	
  not	
  support...
PhoneGap	
  Build	
  
Adding	
  Device	
  Specific	
  Features	
  
•  If	
  you	
  need	
  to	
  access	
  device	
  specific	
  features	
  using...
Debugging	
  
•  Possible	
  to	
  use	
  desktop	
  browsers	
  
–  Although	
  na?ve	
  APIs	
  are	
  not	
  available!...
LIFECYCLE	
  EVENTS	
  
Events	
  
•  Your	
  app	
  can	
  listen	
  to	
  life-­‐cycle	
  events	
  such	
  as	
  
–  deviceready
•  When	
  Pho...
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="phon...
function main() {
"use strict";
var DEBUG = 1;
document.addEventListener("deviceready", deviceReady, false);
function devi...
Other	
  Android	
  Events	
  
•  Also	
  following	
  events	
  available	
  
– backbutton // android – platform
– menubu...
USING	
  NATIVE	
  APIS:	
  
ACCELEROMETER	
  
function main() {
var options = { frequency: 100 }; // Update every 100 ms
var watchID =
navigator.accelerometer.watchAcce...
Upcoming SlideShare
Loading in...5
×

Intro to PhoneGap

1,154

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,154
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to PhoneGap

  1. 1. Intro  to  PhoneGap   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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!  
  11. 11. PhoneGap  Build  
  12. 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. 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  
  14. 14. LIFECYCLE  EVENTS  
  15. 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. 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. 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. 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. 19. USING  NATIVE  APIS:   ACCELEROMETER  
  20. 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); }
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×