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
Tweet

More Decks by Chris Griffith

Other Decks in Technology

Transcript

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

     or  may  not  reflect  the  opinions  of  the   company  that  I  work  for.   Disclaimer  
  2. ApplicaHon  container  that  allows  you  to  build   naHvely  installed

     apps  using  HTML,  CSS  &  JavaScript       What  is  PhoneGap?  
  3. What  is  PhoneGap?   Your  Code   Na&ve  Web  View

      Na&ve  APIs   Na&ve  App  -­‐  .apk,  .ipa,  etc  
  4. 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  
  5. 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  
  6. 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  
  7. 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  
  8. 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      
  9. <?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.griffi[email protected]">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"  />  
  10.    <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"  />  
  11.    <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>  
  12. •  Desktop  Browser   •  Mobile  via  Web   • 

    Ripple  Emulator   •  Local  SDK  to  Simulator/Device   REAL  WORLD  BUILDING  
  13. •  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  
  14. •  Pro:  Kinda  Fast   •  Pro:  Minimal  setup  

    •  Pro:  UI  and  UX  tesHng   •  Con:  Features  missing   •  Con:  Security  restricHons   •  Con:  Debugging  (kinda)  sucks   MOBILE  VIA  WEB  
  15. •  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  
  16. •  Go  to  the  Chrome  Web  Store:     h\ps://chrome.google.com/webstore/category/home

      •  Search  for  "ripple"   •  Click  Extensions   TO  INSTALL  
  17. •  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