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  
   

   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.griffith@gmail.com  
    @chrisgriffith  
    h\p://chrisgriffith.wordpress.com/  
    

    View Slide