Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to PhoneGap and PhoneGap Build

Intro to PhoneGap and PhoneGap Build

See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.

This session will cover:
Getting started with the PhoneGap API
Compiling the application using PhoneGap Build


Chris Griffith

October 25, 2013


  1. @ChrisGriffith  

  2. These  opinions  and  thoughts  are  my  own,  and   may

     or  may  not  reflect  the  opinions  of  the   company  that  I  work  for.   Disclaimer  
  3. None
  4. None
  5. None
  6. None
  7. Who  has  built  for  mobile?  

  8. Who  is  developing  for  iOS?  

  9. Who  is  developing  for  Android?  

  10. I  need  to  make  a  mobile  app…  

  11. None
  12. None
  13. Objec&ve  C   Android     Flavored  Java   C#

  14. Objec&ve  C   Android     Flavored  Java   C#

  15. None
  16. PhoneGap  

  17. Genesis  

  18. Ge=ng  Started   cordova.apache.org  

  19. But  who  really  uses  HTML  in  their  app?  

  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. ApplicaHon  container  that  allows  you  to  build   naHvely  installed

     apps  using  HTML,  CSS  &  JavaScript       What  is  PhoneGap?  
  28. What  is  PhoneGap?   Your  Code  

  29. What  is  PhoneGap?   Your  Code   Na&ve  Web  View

  30. What  is  PhoneGap?   Your  Code   Na&ve  Web  View

      Na&ve  APIs  
  31. What  is  PhoneGap?   Your  Code   Na&ve  Web  View

      Na&ve  APIs   Na&ve  App  -­‐  .apk,  .ipa,  etc  
  32. What  plaQorms  support  PhoneGap?  

  33. Since  it  is  HTML,  CSS  &  JSS,  can  I  use

     exis&ng   tools/frameworks?  
  34. Cau&on…   PhoneGap  uses  the  NATIVE  browser  on  the  

    device  to  render  the  HTML/CSS/JS     Keep  that  in  mind,  as  that  can  affect  the  experience  
  35. Device  Access  

  36. Accelerometer  -­‐  when  the  device  moves   Camera  -­‐  pictures

     of  your  cat   Capture  -­‐  audio,  video,  sHlls  of  your  cat   Compass  -­‐  for  when  you're  lost   Connec&on  -­‐  type  of  connecHon   Contacts  -­‐  find  and  create  new  friends   Features  
  37. Device  -­‐  device  and  OS  version  metadata   Events  -­‐

     various  app/hardware  related  events   File  -­‐  naHve  file  system  access  (+  upload)   Geoloca&on  -­‐  for  when  you're  lost   Globaliza&on  -­‐  date/number/currency   formaYng     Features  
  38. Media  -­‐  related  to  audio  playback  (supports   record  as

     well)   No&fica&on  -­‐  visual,  audible,  and  tacHle   noHficaHons   Splashscreen  -­‐  for  your  splash  screen  needs   Storage  -­‐  Mini  database   Features  
  39. PhoneGap  3.0  

  40. Beyond  the  mobile  web   PhoneGap  is  extensible  with  a

     “naHve  plugin”   model  that  enables  you  to  write  your  own   naHve  logic  to  access  via  JavaScript.       There  are  lots  of  open  source  plugins  at   h\ps://github.com/phonegap/phonegap-­‐ plugins       Learn  more  at  h\p://wiki.phonegap.com/w/ page/36752779/  PhoneGap%20Plugins      
  41. PhoneGap  Community  (some…)  

  42. Building  it   phonegap.com/start  

  43. Command  Line  Interface   docs.phonegap.com/en/3.0.0/guide_cli_index.md.html  

  44. Building  it   build.phonegap.com  

  45. None
  46. None
  47. None
  48. <?xml  version="1.0"  encoding="UTF-­‐8"?>    <widget  xmlns  =  "h\p://www.w3.org/ns/widgets"    

     xmlns:gap  =  "h\p://phonegap.com/ns/1.0"      id                =  "com.ajsooware.demo.parkfinderhd"      versionCode=""      version      =  "1.0.1">      <name>Park  Finder  HD</name>      <descripHon>A  demonstraHon  of  jQuery  Mobile  and  PhoneGap  Build</descripHon>      <author  href="h\p://www.aj-­‐sooware.com"  email="chris.griffith@gmail.com">Chris  Griffith</ author>      <preference  name="phonegap-­‐version"  value="3.0.0"  />      <preference  name="orientaHon"  value="portrait"  />      <preference  name="target-­‐device"  value="universal"  />      <preference  name="fullscreen"  value="true"  />      <preference  name="webviewbounce"  value="true"  />      <preference  name="prerendered-­‐icon"  value="true"  />      <preference  name="stay-­‐in-­‐webview"  value="true"  />      <preference  name="ios-­‐statusbarstyle"  value="black-­‐opaque"  />      <preference  name="detect-­‐data-­‐types"  value="true"  />      <preference  name="exit-­‐on-­‐suspend"  value="true"  />      <preference  name="show-­‐splash-­‐screen-­‐spinner"  value="true"  />      <preference  name="auto-­‐hide-­‐splash-­‐screen"  value="true"  />      <preference  name="disable-­‐cursor"  value="true"  />      <preference  name="android-­‐minSdkVersion"  value="11"  />      <preference  name="android-­‐installLocaHon"  value="auto"  />      <preference  name="splash-­‐screen-­‐duraHon"  value="5000"  />      <preference  name="load-­‐url-­‐Hmeout"  value="20000"  />  
  49.    <gap:platorm  name="ios"  />      <gap:platorm  name="android"  />  

       <gap:platorm  name="winphone"  />      <feature  name="h\p://api.phonegap.com/1.0/camera"/>      <feature  name="h\p://api.phonegap.com/1.0/geolocaHon"/>      <feature  name="h\p://api.phonegap.com/1.0/network"/>      <feature  name="h\p://api.phonegap.com/1.0/noHficaHon"/>      <gap:plugin  name="org.apache.cordova.core.media-­‐capture"    />      <gap:plugin  name="org.apache.cordova.core.camera"    />      <gap:plugin  name="org.apache.cordova.core.geolocaHon"    />      <gap:plugin  name="org.apache.cordova.core.device"    />      <gap:plugin  name="org.apache.cordova.core.device-­‐moHon"    />      <gap:plugin  name="org.apache.cordova.core.network-­‐informaHon"    />      <gap:plugin  name="org.apache.cordova.core.dialogs"    />      <gap:plugin  name="org.apache.cordova.core.globalizaHon"    />      <gap:plugin  name="org.apache.cordova.core.console"    />      <gap:plugin  name="org.apache.cordova.core.audiohandler"    />      <gap:plugin  name="org.apache.cordova.core.ba\ery-­‐status"    />      <gap:plugin  name="org.apache.cordova.core.file"    />      <gap:plugin  name="org.apache.cordova.core.device-­‐orientaHon"    />      <gap:plugin  name="org.apache.cordova.core.file-­‐transfer"    />      <gap:plugin  name="org.apache.cordova.core.splashscreen"    />      <gap:plugin  name="org.apache.cordova.core.vibraHon"    />      <gap:plugin  name="org.apache.cordova.core.inappbrowser"    />      <icon  src="icons/icon_57.png"  gap:platorm="ios"  width="57"  height="57"  />      <icon  src="icons/icon_72.png"  gap:platorm="ios"  width="72"  height="72"  />      <icon  src="icons/icon_114.png"  gap:platorm="ios"  width="114"  height="114"  />  
  50.    <icon  src="icons/icon_144.png"  gap:platorm="ios"  width="144"  height="144"  />      <icon

     src="icons/icon_36.png"  gap:platorm="android"  gap:density="ldpi"  />      <icon  src="icons/icon_48.png"  gap:platorm="android"  gap:density="mdpi"  />      <icon  src="icons/icon_72.png"  gap:platorm="android"  gap:density="hdpi"  />      <icon  src="icons/icon_96.png"  gap:platorm="android"  gap:density="xhdpi"  />      <icon  src="icons/icon_48.png"  gap:platorm="winphone"  />      <icon  src="icons/icon_62.png"  gap:platorm="winphone"  gap:role="background"  />      <icon  src="icons/icon_64.png"  gap:platorm="blackberry"  />      <icon  src="icons/icon_64.png"  gap:platorm="webos"  />      <gap:splash  src="splash/splash_320_480.png"  gap:platorm="ios"  width="320"  height="480"  />      <gap:splash  src="splash/splash_640_960.png"  gap:platorm="ios"  width="640"  height="960"  />      <gap:splash  src="splash/splash_320_480.png"  gap:platorm="android"  gap:density="mdpi"  />      <gap:splash  src="splash/splash_480_800.png"  gap:platorm="android"  gap:density="hdpi"  />      <gap:splash  src="splash/splash_800_1280.png"  gap:platorm="android"  gap:density="xhdpi"  />      <access  origin="*.google.com"  subdomains="true"    />    </widget>  
  51. ConfiGAP   configap.com  

  52. Building  it   <Demo  />  

  53. •  Desktop  Browser   •  Mobile  via  Web   • 

    Ripple  Emulator   •  Local  SDK  to  Simulator/Device   REAL  WORLD  BUILDING  
  54. •  Pro:  Super  Fast   •  Pro:  No  setup  

    •  Pro:  Debugging  Rocks   •  Con:  UI  isn't  right   •  Con:  UX  isn't  right   •  Con:  Features  missing   •  Con:  Security  restricHons   DESKTOP  BROWSER  
  55. •  Pro:  Kinda  Fast   •  Pro:  Minimal  setup  

    •  Pro:  UI  and  UX  tesHng   •  Con:  Features  missing   •  Con:  Security  restricHons   •  Con:  Debugging  (kinda)  sucks   MOBILE  VIA  WEB  
  56. •  Pro:  Fast   •  Pro:  Similar  UI   • 

    Pro:  Free   •  Pro:  Security  restricHons  gone   •  Con:  Doesn't  support  100%  of  the  PhoneGap   APIs   •  Con:  SHll  not  on  the  device   RIPPLE  EMULATOR  
  57. •  Go  to  the  Chrome  Web  Store:     h\ps://chrome.google.com/webstore/category/home

      •  Search  for  "ripple"   •  Click  Extensions   TO  INSTALL  
  58. None
  59. •  Pro:  The  Real  Deal   •  Con:  Slow(ish)  

    •  Con:  Not  Free   •  Con:  Debugging  can  suck   TO  BE  CLEAR:     YOU  MUST  ALWAYS  TEST  ON  A  REAL  DEVICE   LOCAL  SDK  TO  SIMULATOR/DEVICE  
  60. Hydra&on  

  61. None
  62. Now  go  build  something!  

  63. Thanks!   chris.griffith@gmail.com   @chrisgriffith   h\p://chrisgriffith.wordpress.com/