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. @ChrisGriffith  

    View Slide

  2. These  opinions  and  thoughts  are  my  own,  and  
    may  or  may  not  reflect  the  opinions  of  the  
    company  that  I  work  for.  
    Disclaimer  

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. Who  has  built  for  mobile?  

    View Slide

  8. Who  is  developing  for  iOS?  

    View Slide

  9. Who  is  developing  for  Android?  

    View Slide

  10. I  need  to  make  a  mobile  app…  

    View Slide

  11. View Slide

  12. View Slide

  13. Objec&ve  C   Android    
    Flavored  Java  
    C#  XAML  

    View Slide

  14. Objec&ve  C   Android    
    Flavored  Java  
    C#  XAML  

    View Slide

  15. View Slide

  16. PhoneGap  

    View Slide

  17. Genesis  

    View Slide

  18. Ge=ng  Started  
    cordova.apache.org  

    View Slide

  19. But  who  really  uses  HTML  in  their  app?  

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. ApplicaHon  container  that  allows  you  to  build  
    naHvely  installed  apps  using  HTML,  CSS  &  JavaScript    
     
    What  is  PhoneGap?  

    View Slide

  28. What  is  PhoneGap?  
    Your  Code  

    View Slide

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

    View Slide

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

    View Slide

  31. What  is  PhoneGap?  
    Your  Code  
    Na&ve  Web  View  
    Na&ve  APIs  
    Na&ve  App  -­‐  .apk,  .ipa,  etc  

    View Slide

  32. What  plaQorms  support  PhoneGap?  

    View Slide

  33. Since  it  is  HTML,  CSS  &  JSS,  can  I  use  exis&ng  
    tools/frameworks?  

    View Slide

  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  

    View Slide

  35. Device  Access  

    View Slide

  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  

    View Slide

  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  

    View Slide

  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  

    View Slide

  39. PhoneGap  3.0  

    View Slide

  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    
     

    View Slide

  41. PhoneGap  Community  (some…)  

    View Slide

  42. Building  it  
    phonegap.com/start  

    View Slide

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

    View Slide

  44. Building  it  
    build.phonegap.com  

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48.  
         xmlns:gap  =  "h\p://phonegap.com/ns/1.0"  
       id                =  "com.ajsooware.demo.parkfinderhd"  
       versionCode=""  
       version      =  "1.0.1">  
       Park  Finder  HD  
       A  demonstraHon  of  jQuery  Mobile  and  PhoneGap  Build  
       Chris  Griffith
    author>  
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         

    View Slide

  49.      
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         

    View Slide

  50.      
         
         
         
         
         
         
         
         
         
         
         
         
         
         
       

    View Slide

  51. ConfiGAP  
    configap.com  

    View Slide

  52. Building  it  
     

    View Slide

  53. •  Desktop  Browser  
    •  Mobile  via  Web  
    •  Ripple  Emulator  
    •  Local  SDK  to  Simulator/Device  
    REAL  WORLD  BUILDING  

    View Slide

  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  

    View Slide

  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  

    View Slide

  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  

    View Slide

  57. •  Go  to  the  Chrome  Web  Store:    
    h\ps://chrome.google.com/webstore/category/home  
    •  Search  for  "ripple"  
    •  Click  Extensions  
    TO  INSTALL  

    View Slide

  58. View Slide

  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  

    View Slide

  60. Hydra&on  

    View Slide

  61. View Slide

  62. Now  go  build  something!  

    View Slide

  63. Thanks!  
    chris.griffi[email protected]  
    @chrisgriffith  
    h\p://chrisgriffith.wordpress.com/  

    View Slide