Skip to Content

/wp-content/uploads/2015/07/sap_logo_753082.png

Appendix J:  Hybrid Apps in SAP Mobile Platform 2.3 vs 3.0

The goal of this document is to highlight some of the similarities and differences between the SAP Mobile Platform (SMP) 2.3 Hybrid Web Container (HWC) and its replacement in 3.0, the open source Apache Cordova container with Kapsel plugins. This document demonstrates how an OData-based app that proxies data through an SMP server runs with both SMP 2.3 and SMP 3.0 servers.  For more information about OData see Appendix A OData in Getting Started with Kapsel.

Similarities
Differences
An OData Web App
A HWC App in SMP 2.3 that uses the SMP Server as a Proxy to an OData Connection
An Apache Cordova App in SMP 3.0 that Uses the Server as a Proxy to an OData Connection

Similarities

  • Both HWCs and Cordova are hybrid app solutions, which means they use HTML for the UI, enabling an application to run on multiple devices (Android, iOS, etc.), and enabling native-device features using JavaScript APIs through Cordova plugins.
  • You can use any HTML UI library when developing a hybrid app.
  • Hybrid apps that are deployed to SMP 2.x and SMP 3.0 servers have a mechanism to update deployed applications. In SMP 3.0, you can use the Kapsel AppUpdate plugin to update deployed apps.
  • Both HWCs and Cordova containers can be password protected, so you can view hybrid apps only after entering a passcode. In SMP 3.0, the passcode screen is provided by the Kapsel Logon  plugin and the password policy.

Differences

  • A Hybrid Web Container is a proprietary container that includes Cordova, whereas Kapsel plugins are standard Cordova plugins that you can add to a Cordova project.
  • HWCs were designed to host applications that made requests to SMP server using the Messaging Based Synchronization (MBS) protocol, with both requests and responses in XML format.  These messages were placed in a queue to enable the application to run when the device was offline. Messages were sent and received when a device had connectivity. The original HWC container hosted applications that had a UI described by XML (SUP 1.5). This was later enhanced to use HTML and JavaScript so developers could more easily customize an application’s UI (SUP 2.0). Application data was designed around Mobile Business Objects (MBOs), and included Eclipse-based tooling support to enable creating apps using WYSIWYG editing, and wizards that could create screens or entire apps based on MBOs and their relationships.  A second type of application became available, which used OData to communicate (SUP 2.2 SP02), instead of using MBOs and the MBS communication protocol. This type of application in SUP 2.2 and SMP 2.3 did not contain the WYSIWYG tooling support. SMP 3.0 hybrid apps support neither the MBS protocol nor MBO-based apps.
  • HWCs were designed to host multiple apps. An SMP 3.0 hybrid app is a single application, although if you launch it from from the SAP Fiori launchpad, it appears as multiple applications. See Introducing SAP Fiori Launchpad.
  • A HWC has an inbox and opens the appropriate app to handle incoming messages. The inbox was designed to handle simple workflows like approving a purchase order or a vacation request. It also supported native notifications. SMP 3.0 hybrid apps handle native notifications via the Kapsel Push  plugin and does not have an inbox.
  • As of SMP 2.3 SP04, HWCs support Windows Mobile 6.x, BlackBerry 6 and 7, Android 3.0-4.4, and Apple iOS 5.0-7.0; Kapsel plugins are supported on Android 4.0-4.4 and Apple iOS 6 and 7 in SMP 3.0 SP04 SDK.  Windows 8.1 and Windows Phone 8.1 support is added for Kapsel as of SP05.
  • HWCs use Cordova 2.0.0. Kapsel plugins in SMP 3.0 SP04 SDK are compatible with Cordova 3.4 and Cordova 3.5 as of SMP 3.0 SP05 SDK.
  • By default, applications developed using the Hybrid App Designer for HWCs use JQuery Mobile. SAP recommends the SAPUI5 library for SMP 3.0.
  • The Eclipse-based Hybrid App Designer that was used to create hybrid apps for HWCs is not available in SMP 3.0. You can use the SAP Web-IDE to create SAPUI5 applications. In SMP 2.3 and SMP 3.0, you can use any UI library or tooling to create hybrid apps.
  • The SMP 2.3 Eclipse tooling enables the creation of MBOs to provide a layer of abstraction when accessing enterprise data sources such as JDBC, REST, and SAP JCo. In SMP 3.0, you can use SAP Integration Gateway to enable JDBC and other enterprise sources as OData services.  See Data Integration using Integration Gateway, Tutorial: Creating an OData service based on SAP Gateway, SOAP, JDBC and JPA data sources, and How to use Integration Gateway with SMP 3.0 for additional information.
  • HWCs enable some offline use cases. Specifically, an offline device can perform a submit action, and the request is queued and sent the next time the device has connectivity. HWCs also provide an on-device cache that you can use to save the results of read requests, and return those results if the same request is made when the device was offline. As of SP05, a Kapsel plugin will support offline OData requests with full CRUD support.

An OData Web App

  • Create a folder named C:\ODataSample.
  • Create a file named C:\ODataSample\products.html and paste in the following code:
    <html><head><script src="datajs-1.1.2.min.js"></script>
    <script>
        function successCallback(data, response) {         var productsTable = document.getElementById("productsTable");         for (var i = 0; i < data.results.length; i++) {             var row = productsTable.insertRow(1);             var cell1 = row.insertCell(0);             var cell2 = row.insertCell(1);             var cell3 = row.insertCell(2);              cell1.innerHTML = data.results[i].Name;             cell2.innerHTML = data.results[i].Description;             cell3.innerHTML = data.results[i].Price;         }     }     function errorCallback(e) {         alert("An error occurred");         alert(e);      }     function init() {         OData.defaultHttpClient.enableJsonpCallback=true;  //http://datajs.codeplex.com/wikipage?title=OData%20Security&referringTitle=Cross%20Domain%20Requests         OData.read("http://services.odata.org/OData/OData.svc/Products", successCallback, errorCallback);     } </script></head>
    <body onload="init()">
       <table id="productsTable"><tr><th>Name</th><th>Description</th><th>Price</th></tr></table>
    </body></html>
  • Download the latest datajs file (datajs-1.1.2.min.js) from datajs and place it in the \ODataSample folder.

    The datajs JavaScript library provides a read method that takes an OData URL and returns the data as a JavaScript object.

  • Open the file in the Chrome desktop browser.
    image1.PNG

    The products.html file that was loaded from the file system is allowed to request data from services.odata.org because JavaScript Object Notation with padding (JSONP) is used. The browser would otherwise prevent this request from succeeding, because of an origin policy restriction. Another way to work around this is to host the application and use a reverse proxy server with the Web server that hosts the page, so both the request to load the page and the request to the OData source appears to the browser as the same server.
    It may be helpful to step through the above code in the debugger.

A HWC App in SMP 2.3 that uses the SMP Server as a Proxy to an OData Connection

The SMP 2.3 and SMP 3.0 servers enable OData endpoints to be proxied through them.  This provides additional security, reporting options, logging options and the ability to send native notifications.  The following example makes use of the Cordova device API to display information about the device it is being run on.

  • The SAP Control Center can be accessed at https://localhost:8283/scc/# and the default user is supAdmin.
    Create a REST-based application that has the endpoint below:
    http://services.odata.org/OData/OData.svc

    image2.PNG

    This creates a connection that is used as a proxy to the OData endpoint. 
    image3.PNG

    See also Creating a Proxy Connection and Configuring Secure Communication With an HTTP Proxy.

  • Before you can use a proxy, it must be registered with the application. After a successful registration, SMP server returns an application connection ID that uniquely identifies the registration. Save the products2.html file to the C:\ODataSample directory.
    In Chrome, open products2.html. Press Ctrl+Shift+I to open the developer tools. Select the Network tab, and click Reload. Click Register, then click Read.
    image4.PNG

    For a read proxy request to succeed, pass the X-SMP-APPCID header that uniquely identifies the registration. In SMP 2.x, the header is called X-SUP-APPCID.

    The registration appears in the SAP Control Center.
    image5.PNG

  • Deploy the app in the HWC container running on an Android. Create a directory in which to put a HWC package containing the app such as:
    C:\pkgtool
  • Copy:
    C:\SAP\MobilePlatform\MobileSDK23\HybridApp\API\Container\android\cordova-2.0.0.javascript

    to:

    C:\ODataSample\cordova-2.0.0.javascript
  • Edit the products2.html file, and uncomment the include for cordova-2.0.0.javascript.
    Modify the URL from localhost to the IP address of your SMP 2.3 server.
  • Start the packaging tool:
    C:\SAP\MobilePlatform\MobileSDK23\HybridApp\Packaging Tool\packagingtool.bat
  • Specify the previously created Output directory.
    image6.PNG
  • Create a new project named Products in this location:
    C:\ODataSample

    image7.PNG

  • On the General Information tab, set the Client icon to 83.
    Specify the platforms, the files to be included for each platform, and the HTML file to load, then click Generate.
    image8.PNG
  • Deploy the resulting zip file, and assign it to a device using the SAP Control Center. It is assumed that the HWC is already installed on the device and connected to the SMP server.  If not, see Registering Application Connections in Sybase Control Center and Configuring the Android Emulator.
    image9.PNG

    image10.PNG

  • The hybrid app now appears on the selected device inside the Hybrid Web Container.
    image11.PNG
    image12.PNG

    Notice that the Cordova device plugin is being used to display information about the device type on which the app is running.

An Apache Cordova App in SMP 3.0 that Uses the Server as a Proxy to an OData Connection

The SMP 2.3 and SMP 3.0 servers enable OData endpoints to be proxied through them.  This provides additional security, reporting options, logging options and the ability to send native notifications.  The following example makes use of the Cordova device API to display information about the device it is being run on.

  • Create an application in the Management Cockpit, accessible at https://localhost:8083/Admin; the default user is smpAdmin.
    The ID is com.mycompany.product; the name is Product Demo; the Type is Hybrid.
    If your network uses a proxy to connect to the Internet, check Use System Proxy.
    Set the endpoint to this URL:
    http://services.odata.org/OData/OData.svc

    image13.PNG

    Choose default as the Existing Profile for the application authentication. This enables any user name and password to access the app, because the default application profile includes the No Authentication Challenge authentication provider.

    Select the connection, and click Ping to ensure that the connection has been successfully configured.
    image14.PNG

  • Save the products2.html file to C:\ODataSample\products3.html, and modify the IP address and port used in the variable smpURL to match the location on which the SMP 3.0 server is running. Press Ctrl+Shift+I to open the Developer Tools, select the Network tab, and click Reload.  Before using the proxy, you must register with the application. After a successful registration, the SMP server returns an application connection ID that uniquely identifies the registration.  Click Register, then click Read.
    image15.PNG

    For a successful read proxy request, the X-SMP-APPCID must be included, which uniquely identifies the registration.

    A registration now appears in the Management Cockpit.
    image16.PNG

  • Deploy the app to a Cordova container running on Android. Create a Cordova project that uses the products.html file, and add the Cordova deviceplugin to the project.
    cordova create C:\Kapsel_Projects\ProductsDemo com.mycompany.products ProductsDemo
    cd C:\Kapsel_Projects\ProductsDemo
    cordova plugin add cordova-plugin-device
    cordova platform add android
  • Edit the C:\Kapsel_Projects\ProductsDemo\config.xml file, and change the setting
    <content src="index.html" />
    to
    <content src="products3.html" />
  • Copy both the products3.html and the datajs-1.1.2.min.js files to C:\Kapsel_Projects\ProductsDemo\www.
  • Edit the products3.html file, and uncomment the import for cordova.js.  Modify the URL from localhost to the IP address of your SMP 3.0 server.
  • Prepare, build and deploy the project.
    cordova run android

    image17.PNG
    image18.PNG

    The Cordova device plugin is used to display information about the device type on which the app is running.

  • Kapsel provides a logon plugin that can be used to handle the task of registering with the SMP server and securely storing the application connection ID.

This document has shown how an OData based application can be built using the SMP 2.3 and 3.0 platform and has highlighted some of the differences between the SMP 2.3 Hybrid Web Container and its replacement in SMP 3.0, the Apache Cordova container with Kapsel plugins.

Back to Getting Started With Kapsel

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply