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

Transcript

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  
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…  
13. Objec&ve  C   Android     Flavored  Java   C#  XAML  
14. Objec&ve  C   Android     Flavored  Java   C#  XAML  
16. PhoneGap  
17. Genesis  
18. Ge=ng  Started   cordova.apache.org  
19. But  who  really  uses  HTML  in  their  app?  
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  
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  
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  
62. Now  go  build  something!  
63. Thanks!   chris.griffith@gmail.com   @chrisgriffith   h\p://chrisgriffith.wordpress.com/