KEMBAR78
UI innovation with SAP NetWeaver Gateway | PDF
By	
  John	
  Moy	
  
         SAP	
  Mentor	
  
©	
  September	
  2012	
  
Thoughts	
  and	
  opinions	
  expressed	
  here	
  represent	
  my	
  own	
  and	
  
not	
  those	
  of	
  SAP	
  

All	
  content	
  provided	
  in	
  this	
  presentaCon	
  is	
  for	
  informaConal	
  
purposes	
  only.	
  	
  The	
  author	
  makes	
  no	
  representaCons	
  as	
  to	
  the	
  
accuracy	
  or	
  completeness	
  of	
  any	
  informaCon	
  in	
  this	
  
presentaCon.	
  	
  The	
  author	
  will	
  not	
  be	
  liable	
  for	
  any	
  errors	
  or	
  
omissions	
  in	
  this	
  presentaCon	
  nor	
  for	
  the	
  availability	
  of	
  this	
  
informaCon.	
  
R/2	
                               ITS,	
                               Web	
  Dynpro	
  
                 Terminal	
                          WebGUI,	
                            ABAP,	
  
                 Screens	
                           BSP,	
                               Floorplan	
  
                                                     HTMLB	
                              Manager,	
  
                                                                                          NWBC	
  




       R/3	
                    Web	
  Dynpro	
                        SAP	
  UI5,	
  
SAP	
  GUI	
                             Java,	
                   Page	
  Builder,	
  
                                 SAP	
  Portal	
                            CHIPs	
  
Enterprise	
  
 Systems	
  
Consumer	
  


                 Faster	
  user	
  interface	
  innovaCon	
  cycles	
  eg.	
  browsers,	
  iOS,	
  Android	
  etc.	
  



Enterprise	
  


                 Slower	
  user	
  interface	
  updates,	
  Ced	
  to	
  core	
  upgrade	
  cycles	
  
Structure	
                             “Our	
  basic	
  argument	
  is	
  that	
  there	
  
                                             isn’t	
  such	
  a	
  thing	
  as	
  a	
  building.	
  	
  A	
  
Internal	
  Walls	
  




                                             building	
  properly	
  conceived	
  is	
  
                        Tables,	
  etc	
     several	
  layers	
  of	
  longevity	
  of	
  built	
  
                                             components”	
  
                                                                      Frank	
  Duffy,	
  Architect	
  
FoundaCon	
                                                                                          1994	
  
SAP	
  NetWeaver	
  Gateway	
  	
  
                                                                as	
  an	
  enabler	
  

Enterprise	
  
 Systems	
       ExisCng	
   Mobiles	
   TVs,	
  Voice	
  	
  
                   UIs,	
   &	
  Tablets	
   etc…	
  
                 Web	
  UIs	
  
Mobiles	
  
                                                   Websites	
  /	
  
Edge	
                                              Intranet	
  
Usage	
                                                                                                         Kiosks	
  
                                                                       Tablets	
                                  &	
  
                                                                                                                Other	
  
Casual	
                     ESS	
  /	
  MSS	
  
Usage	
  


 Pro	
  
Usage	
  
             NWBC	
  /	
                                                  SAP	
  NetWeaver	
  Gateway	
  	
  
             SAPGUI	
                                                             as	
  an	
  enabler	
  
Back	
  	
     Front	
  	
       Field	
  /	
  	
   Leaders	
             Business	
               Consumers	
  
             Office	
         Office	
          Mobile	
  Sales	
                          Partners	
  
Edge	
  
Usage	
  


Casual	
  
Usage	
  


 Pro	
  
Usage	
                                                                        NOTE:	
  A	
  sample	
  indicaCve	
  
                                                                                allocaCon	
  –	
  will	
  vary	
  for	
  	
  
                                                                                           each	
  organisaCon	
  
Edge	
                                            SAP	
  NetWeaver	
  Gateway	
  
Usage	
  
             ZERO	
  training	
  expectaCon	
             as	
  an	
  enabler	
  


Casual	
  
Usage	
      Simple	
  learning	
  aids	
  

 Pro	
  
Usage	
  
             Training	
  
Edge	
                                                      Mainstream	
  
Usage	
                                                       Usage	
  
             Edge	
  Usage	
  now	
  is	
  potenCally	
  
              Mainsteam	
  Usage	
  in	
  future	
  
Casual	
  
Usage	
  


 Pro	
  
Usage	
  
“	
  INSIDE	
  OUT	
  “	
  
          1.	
  	
  GET	
  hep://server/sap/myapplicaCon	
  
SAP	
  
          2.	
  HTML	
  +	
  Data	
  
          2.1.	
  CSS	
  
          2.2.	
  Javascript	
  
          2.3.	
  Images	
  
          2.4.	
  ..etc	
  
“	
  OUTSIDE	
  IN	
  “	
                                       NaCve	
  mobile	
  app	
  
                                                                                                example	
  
                        1.	
  	
  GET	
  hep://server/sap/myapplicaCon/data	
  
SAP	
  
                        3.	
  Lightweight	
  Data	
  (OData)	
  




                                                                          INSTALLED	
  
                                                                                          2.	
  NaCve	
  App	
  
  SAP	
  NetWeaver	
  Gateway	
                                                           	
  	
  	
  	
  	
  -­‐	
  iOS	
  
          as	
  an	
  enabler	
                                                           	
  	
  	
  	
  	
  -­‐	
  Android	
  
                                                                                          	
  	
  	
  	
  	
  -­‐	
  etc.	
  
“	
  OUTSIDE	
  IN	
  “	
                                    HTML5	
  example	
  
                                                                                             using	
  ‘single-­‐page’	
  
                        1.	
  	
  GET	
  hep://server/sap/myapplicaCon	
                     web	
  apps	
  
SAP	
  
                        3.	
  Lightweight	
  Data	
  (OData)	
  


                                                                                          2.	
  HTML5	
  Layout	
  




                                                                             CACHED	
  
  SAP	
  NetWeaver	
  Gateway	
                                                           	
  	
  	
  	
  	
  -­‐	
  CSS	
  
          as	
  an	
  enabler	
                                                           	
  	
  	
  	
  	
  -­‐	
  Javascript	
  
                                                                                          	
  	
  	
  	
  	
  -­‐	
  Images	
  
Stateful	
  UIs	
                                           Stateless	
  UIs	
  




                      SAP	
  NetWeaver	
  Gateway	
  	
  
                              as	
  an	
  enabler	
  
SAP	
  NetWeaver	
  
          Gateway	
  
SAP	
  


          Service	
  generaCon	
  tools	
            Service	
  consumpCon	
  libraries	
  
          (eg.	
  	
                                 • 	
  	
  Mobile	
  plakorms	
  
          Generate	
  from	
  RFC	
  /	
  BAPI	
     • 	
  	
  HTML5	
  libraries	
  (eg.	
  SAPUI5)	
  	
  
          without	
  coding	
  )	
                   • 	
  	
  Java,	
  PHP,	
  Flash	
  ..etc.	
  
                                                     • 	
  	
  Code	
  generaCon	
  
Architecture	
  for	
  many	
  of	
  SAP’s	
  Mobile	
  Apps	
  
              SAP	
  NetWeaver	
  




                                              SAP	
  Mobile	
  
              Gateway	
  




                                               Plakorm	
  
SAP	
  




                                                                  Server	
  
                                                                  Relay	
  
                                                                                       (Depending	
  on	
  App)	
  
                                             • 	
  AuthenCcaCon	
  &	
  Security	
     • 	
  iOS	
  
                                             • 	
  Secure	
  CommunicaCons	
           • 	
  Android	
  
                                                                                       • 	
  Blackberry	
  
                                             • 	
  Device	
  registraCon	
  
                                                                                       • 	
  Windows	
  
Sample	
  list	
  of	
  SAP’s	
  mobile	
  apps	
  (not	
  all-­‐inclusive)	
  …	
  




                                                                                   	
  =	
  SAP	
  NetWeaver	
  Gateway	
  	
  
                                                                                                     as	
  an	
  enabler	
  
Samples	
  courtesy	
  of	
  and	
  developed	
  
by	
  John	
  Paeerson	
  (see	
  blog	
  on	
  SCN	
  
                  hep://bit.ly/Mh8rC4)	
  
	
  STATELESS	
                                                             	
  OUTSIDE	
  IN	
  
• 	
  	
  Highly	
  scalable	
                                               • 	
  Adopt	
  latest	
  consumer	
  UI	
  usability	
  
                                                                             • 	
  Empower	
  non-­‐SAP	
  UI	
  developers	
  
                                   	
  LOOSE	
  COUPLING	
  
            SAP	
                  • 	
  Support	
  pace	
  layering	
  &	
  service	
  re-­‐use	
  
                                   	
  LIGHTWEIGHT	
  DATA	
  INTERACTION	
  
                                   • 	
  OpCmise	
  response	
  Cme	
  &	
  usability	
  
                                   • 	
  Support	
  HTML5	
  /	
  naCve	
  mobile	
  UIs	
  
                                   	
  PRODUCTIVITY	
  AIDS	
  
                                   • 	
  Quickly	
  expose	
  and	
  consume	
  services	
  
John	
  Moy	
  
SAP	
  Mobility,	
  UI	
  and	
  Development	
  Architect	
  

Email:	
  john@BlueT.com.au	
  
Twieer:	
  @jhmoy	
  
SAP	
  NetWeaver	
  Gateway	
  official	
  SAP	
  Help	
  
hep://help.sap.com/nwgateway	
  

SAP	
  NetWeaver	
  Gateway	
  plug-­‐in	
  for	
  Eclipse	
  
hep://bit.ly/wHwy2B	
  

Installing	
  Trial	
  SAP	
  NetWeaver	
  Gateway	
  on	
  Amazon	
  Web	
  Services	
  (by	
  John	
  Moy)	
  
hep://bit.ly/N7JwR3	
  

UI innovation with SAP NetWeaver Gateway

  • 1.
    By  John  Moy   SAP  Mentor   ©  September  2012  
  • 2.
    Thoughts  and  opinions  expressed  here  represent  my  own  and   not  those  of  SAP   All  content  provided  in  this  presentaCon  is  for  informaConal   purposes  only.    The  author  makes  no  representaCons  as  to  the   accuracy  or  completeness  of  any  informaCon  in  this   presentaCon.    The  author  will  not  be  liable  for  any  errors  or   omissions  in  this  presentaCon  nor  for  the  availability  of  this   informaCon.  
  • 3.
    R/2   ITS,   Web  Dynpro   Terminal   WebGUI,   ABAP,   Screens   BSP,   Floorplan   HTMLB   Manager,   NWBC   R/3   Web  Dynpro   SAP  UI5,   SAP  GUI   Java,   Page  Builder,   SAP  Portal   CHIPs  
  • 4.
  • 5.
    Consumer   Faster  user  interface  innovaCon  cycles  eg.  browsers,  iOS,  Android  etc.   Enterprise   Slower  user  interface  updates,  Ced  to  core  upgrade  cycles  
  • 6.
    Structure   “Our  basic  argument  is  that  there   isn’t  such  a  thing  as  a  building.    A   Internal  Walls   building  properly  conceived  is   Tables,  etc   several  layers  of  longevity  of  built   components”   Frank  Duffy,  Architect   FoundaCon   1994  
  • 7.
    SAP  NetWeaver  Gateway     as  an  enabler   Enterprise   Systems   ExisCng   Mobiles   TVs,  Voice     UIs,   &  Tablets   etc…   Web  UIs  
  • 8.
    Mobiles   Websites  /   Edge   Intranet   Usage   Kiosks   Tablets   &   Other   Casual   ESS  /  MSS   Usage   Pro   Usage   NWBC  /   SAP  NetWeaver  Gateway     SAPGUI   as  an  enabler  
  • 9.
    Back     Front     Field  /     Leaders   Business   Consumers   Office   Office   Mobile  Sales   Partners   Edge   Usage   Casual   Usage   Pro   Usage   NOTE:  A  sample  indicaCve   allocaCon  –  will  vary  for     each  organisaCon  
  • 10.
    Edge   SAP  NetWeaver  Gateway   Usage   ZERO  training  expectaCon   as  an  enabler   Casual   Usage   Simple  learning  aids   Pro   Usage   Training  
  • 11.
    Edge   Mainstream   Usage   Usage   Edge  Usage  now  is  potenCally   Mainsteam  Usage  in  future   Casual   Usage   Pro   Usage  
  • 12.
    “  INSIDE  OUT  “   1.    GET  hep://server/sap/myapplicaCon   SAP   2.  HTML  +  Data   2.1.  CSS   2.2.  Javascript   2.3.  Images   2.4.  ..etc  
  • 13.
    “  OUTSIDE  IN  “   NaCve  mobile  app   example   1.    GET  hep://server/sap/myapplicaCon/data   SAP   3.  Lightweight  Data  (OData)   INSTALLED   2.  NaCve  App   SAP  NetWeaver  Gateway            -­‐  iOS   as  an  enabler            -­‐  Android            -­‐  etc.  
  • 14.
    “  OUTSIDE  IN  “   HTML5  example   using  ‘single-­‐page’   1.    GET  hep://server/sap/myapplicaCon   web  apps   SAP   3.  Lightweight  Data  (OData)   2.  HTML5  Layout   CACHED   SAP  NetWeaver  Gateway            -­‐  CSS   as  an  enabler            -­‐  Javascript            -­‐  Images  
  • 15.
    Stateful  UIs   Stateless  UIs   SAP  NetWeaver  Gateway     as  an  enabler  
  • 16.
    SAP  NetWeaver   Gateway   SAP   Service  generaCon  tools   Service  consumpCon  libraries   (eg.     •     Mobile  plakorms   Generate  from  RFC  /  BAPI   •     HTML5  libraries  (eg.  SAPUI5)     without  coding  )   •     Java,  PHP,  Flash  ..etc.   •     Code  generaCon  
  • 17.
    Architecture  for  many  of  SAP’s  Mobile  Apps   SAP  NetWeaver   SAP  Mobile   Gateway   Plakorm   SAP   Server   Relay   (Depending  on  App)   •   AuthenCcaCon  &  Security   •   iOS   •   Secure  CommunicaCons   •   Android   •   Blackberry   •   Device  registraCon   •   Windows  
  • 18.
    Sample  list  of  SAP’s  mobile  apps  (not  all-­‐inclusive)  …    =  SAP  NetWeaver  Gateway     as  an  enabler  
  • 21.
    Samples  courtesy  of  and  developed   by  John  Paeerson  (see  blog  on  SCN   hep://bit.ly/Mh8rC4)  
  • 22.
      STATELESS     OUTSIDE  IN   •     Highly  scalable   •   Adopt  latest  consumer  UI  usability   •   Empower  non-­‐SAP  UI  developers     LOOSE  COUPLING   SAP   •   Support  pace  layering  &  service  re-­‐use     LIGHTWEIGHT  DATA  INTERACTION   •   OpCmise  response  Cme  &  usability   •   Support  HTML5  /  naCve  mobile  UIs     PRODUCTIVITY  AIDS   •   Quickly  expose  and  consume  services  
  • 23.
    John  Moy   SAP  Mobility,  UI  and  Development  Architect   Email:  john@BlueT.com.au   Twieer:  @jhmoy  
  • 24.
    SAP  NetWeaver  Gateway  official  SAP  Help   hep://help.sap.com/nwgateway   SAP  NetWeaver  Gateway  plug-­‐in  for  Eclipse   hep://bit.ly/wHwy2B   Installing  Trial  SAP  NetWeaver  Gateway  on  Amazon  Web  Services  (by  John  Moy)   hep://bit.ly/N7JwR3