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!