OPENSHIFT
Workshop
PRESENTED
BY
Shekhar
Gulati
Developing Great Apps with
PhoneGap / Apache Cordova
l  Apache	
  Cordova	
  Introduc1on	
  
l  Follow	
  Apache	
  Cordova	
  workshop	
  tutorial	
  	
  
l  h"ps://github.com/shekhargula5/cordova-­‐workshop	
  
AGENDA
Modern	
  Web	
  Applica5on	
  
Apache	
  Cordova	
  
•  Free,	
  open-­‐source	
  framework	
  for	
  building	
  cross-­‐pla>orm	
  
na1ve	
  applica1ons	
  using	
  HTML5.	
  
•  Combines	
  na1ve	
  and	
  web	
  applica1on	
  technologies	
  to	
  provide	
  
a	
  simple	
  way	
  to	
  build	
  cross	
  pla>orm	
  applica1ons.	
  This	
  is	
  also	
  
called	
  Hybrid	
  applica1on.	
  
•  Extensible.	
  You	
  can	
  write	
  plugins	
  for	
  func1onali1es	
  not	
  
available	
  in	
  Cordova.	
  
Timeline	
  
•  Nitobi	
  developed	
  Mobile	
  development	
  framework	
  called	
  
PhoneGap	
  
•  Adobe	
  acquired	
  Nitobi(company	
  behind	
  PhoneGap)	
  in	
  October	
  
2011	
  
•  Adobe	
  contributed	
  PhoneGap	
  to	
  Apache	
  	
  
•  Open	
  source	
  version	
  is	
  called	
  Apache	
  Cordova	
  
•  PhoneGap	
  is	
  Adobe	
  implementa1on	
  of	
  open	
  source	
  Apache	
  
Cordova.	
  
PhoneGap	
  vs	
  Apache	
  Cordova	
  
•  PhoneGap	
  is	
  an	
  implementa1on	
  of	
  Cordova.	
  It	
  
is	
  also	
  open	
  source	
  
•  Tightly	
  integrates	
  with	
  Adobe	
  product	
  
•  Adobe	
  will	
  offer	
  paid	
  services	
  on	
  top	
  of	
  open	
  
source	
  project	
  
•  PhoneGap	
  also	
  has	
  different	
  command-­‐line	
  
tool	
  
What	
  Apache	
  Cordova	
  is	
  Not?	
  
•  It	
  is	
  not	
  a	
  framework	
  that	
  provides	
  you	
  CSS	
  and	
  JavaScript	
  
libraries	
  required	
  to	
  design	
  your	
  applica1on.	
  
•  As	
  a	
  web/mobile	
  developer	
  you	
  have	
  to	
  decide	
  your	
  stack.	
  
Anything	
  a	
  developer	
  can	
  do	
  in	
  web	
  app	
  hosted	
  on	
  server	
  can	
  
also	
  be	
  done	
  in	
  Cordova.	
  Possible	
  combina1ons	
  
•  HTML	
  5	
  +	
  jQuery	
  +	
  jQuery	
  Mobile	
  
•  HTML	
  5	
  +	
  jQuery	
  +	
  Backbone	
  +	
  Twi[er	
  Bootstrap	
  
•  HTML	
  5	
  +	
  jQuery	
  +	
  Backbone	
  +	
  Topcoat	
  
•  HTML	
  5	
  +	
  Sencha	
  touch	
  
•  ….	
  
Why	
  not	
  only	
  use	
  HTML	
  5?	
  
•  Access	
  to	
  na1ve	
  capabili1es	
  above	
  and	
  beyond	
  available	
  in	
  
browser.	
  
•  Many	
  mobile	
  applica1ons	
  need	
  to	
  do	
  more	
  than	
  HTML.	
  You	
  
need	
  access	
  to	
  device	
  APIs	
  like	
  contacts,	
  camera,	
  etc.	
  
Cordova	
  components	
  
•  Pla>orm	
  specific	
  na1ve	
  applica1on	
  container.	
  The	
  container	
  
renders	
  the	
  HTML	
  5	
  applica1on	
  on	
  the	
  device.	
  
•  JavaScript	
  API	
  to	
  access	
  na1ve	
  device	
  capabili1es	
  
•  Tools	
  to	
  manage	
  the	
  process	
  of	
  applica1on	
  crea1on,	
  plugins,	
  
build	
  the	
  applica1ons,	
  tes1ng	
  on	
  emulators	
  and	
  real	
  devices.	
  
Cordova	
  Applica5on	
  Anatomy	
  
PlaIorm	
  Support	
  
Who’s	
  using	
  it	
  
Workshop	
  Time	
  
	
  
	
  
Download	
  h"p://bit.ly/cordova-­‐workshop	
  
	
  
QUESTIONS?
DONE!

Developing Great Apps with Apache Cordova

  • 1.
  • 2.
    l  Apache  Cordova  Introduc1on   l  Follow  Apache  Cordova  workshop  tutorial     l  h"ps://github.com/shekhargula5/cordova-­‐workshop   AGENDA
  • 3.
  • 4.
    Apache  Cordova   • Free,  open-­‐source  framework  for  building  cross-­‐pla>orm   na1ve  applica1ons  using  HTML5.   •  Combines  na1ve  and  web  applica1on  technologies  to  provide   a  simple  way  to  build  cross  pla>orm  applica1ons.  This  is  also   called  Hybrid  applica1on.   •  Extensible.  You  can  write  plugins  for  func1onali1es  not   available  in  Cordova.  
  • 5.
    Timeline   •  Nitobi  developed  Mobile  development  framework  called   PhoneGap   •  Adobe  acquired  Nitobi(company  behind  PhoneGap)  in  October   2011   •  Adobe  contributed  PhoneGap  to  Apache     •  Open  source  version  is  called  Apache  Cordova   •  PhoneGap  is  Adobe  implementa1on  of  open  source  Apache   Cordova.  
  • 6.
    PhoneGap  vs  Apache  Cordova   •  PhoneGap  is  an  implementa1on  of  Cordova.  It   is  also  open  source   •  Tightly  integrates  with  Adobe  product   •  Adobe  will  offer  paid  services  on  top  of  open   source  project   •  PhoneGap  also  has  different  command-­‐line   tool  
  • 7.
    What  Apache  Cordova  is  Not?   •  It  is  not  a  framework  that  provides  you  CSS  and  JavaScript   libraries  required  to  design  your  applica1on.   •  As  a  web/mobile  developer  you  have  to  decide  your  stack.   Anything  a  developer  can  do  in  web  app  hosted  on  server  can   also  be  done  in  Cordova.  Possible  combina1ons   •  HTML  5  +  jQuery  +  jQuery  Mobile   •  HTML  5  +  jQuery  +  Backbone  +  Twi[er  Bootstrap   •  HTML  5  +  jQuery  +  Backbone  +  Topcoat   •  HTML  5  +  Sencha  touch   •  ….  
  • 8.
    Why  not  only  use  HTML  5?   •  Access  to  na1ve  capabili1es  above  and  beyond  available  in   browser.   •  Many  mobile  applica1ons  need  to  do  more  than  HTML.  You   need  access  to  device  APIs  like  contacts,  camera,  etc.  
  • 9.
    Cordova  components   • Pla>orm  specific  na1ve  applica1on  container.  The  container   renders  the  HTML  5  applica1on  on  the  device.   •  JavaScript  API  to  access  na1ve  device  capabili1es   •  Tools  to  manage  the  process  of  applica1on  crea1on,  plugins,   build  the  applica1ons,  tes1ng  on  emulators  and  real  devices.  
  • 10.
  • 11.
  • 12.
  • 13.
    Workshop  Time       Download  h"p://bit.ly/cordova-­‐workshop    
  • 14.
  • 15.