SAP Mobile Platform 3.0

Getting Started with Kapsel

Note, that there were significant changes to the Kapsel plugins when moving from SP08 to SP09 and the move from Cordova 4.2.0 to 5.1.1. The following instructions are for SP08. If you are using a newer version of the SDK, please see Getting Started with Kapsel in SP09+.

Overview

One type of mobile app that can be written using the SAP Mobile Platform 3.0 (SMP 3.0) is an HTML5 hybrid app or Kapsel app.  Apache Cordova is an open source project that provides a container which includes a browser that renders the UI of the application and a set of API’s callable from JavaScript to access native device functionality such as the device’s camera and contacts list.  The benefit of this is that the same UI code (HTML/CSS) and business logic code (JavaScript) can be deployed on multiple platforms such as iOS and Android without code modifications.  For a complete list of Kapsel supported device versions see SAP Mobile SDK Supported Devices Operating Systems, Product Availability Matrix and Supported Kapsel Plugins for Windows 8.1 and Windows 8.1 Phone.    The list of Apache Cordova API’s including sample code is available at API Reference.  Apache Cordova itself can be extended to provide additional native device functionality.  For additional details on writing a Cordova plugin see Plugin Development Guide.

Kapsel is a set of plugins that enhance Apache Cordova with functionality such as a stream-lined logon to an SMP 3.0 server, the ability to update deployed applications, encrypted storage and push notifications.  For more information see SMP 3.0 Enablement, the Kapsel specific enablement page at SMP 3.0 for Developers – Hybrid Apps, the blog posts by John Wargo, Kiran Karunakaran the SMP SDK product manager, the roadmap for SMP at http://service.sap.com/saproadmaps and the SAP Web IDE.

Setup

Kapsel apps can be developed on Windows or Mac machines.  Kapsel apps can target Android, iOS and as of SP05 Windows 8.1 and Windows 8.1 Phone.  Development for an iOS device must occur on a Mac machine.  Android development can occur on a Windows or Mac machine.  See also Creating an Application on Windows 8.1 and Windows 8.1 Phone.

SMP 3.0

The SAP Mobile Platform and the SAP Mobile Platform SDK can be downloaded from the SAP Software Download Center.  Additionally, a trial version of the SAP Mobile SDK is available at SMP 3.0 Mobile SDK Trial.  The cloud version of the SMP server named SAP HANA Cloud Platform mobile services or HCPms server is also available as a trial.  The examples shown in this guide were tested using the SP08 PL01 SDK and the on premise SP07 server and it is recommended that theses versions or newer be used when following the examples.  Note, that the server and SDK are on different release schedules.

Two files need to be downloaded to install the SAP Mobile Platform 3.0.  The 3.0 SP08 SDK and the 3.0 SP07 on premise server.  The latest patch levels or PLs should also be applied.

Under Installation & Upgrades, A-Z Alphabetical List of my Products > M >  SAP Mobile Platform SDK > SAP Mobile Platform SDK 3.0 > Support Packages > SAP Mobile Platform SDK 3.0 > Windows on x64 64-bit > EBF 3.0 SP08.

Click on M > SAP Mobile Platform > SAP Mobile Platform 3.0 > Support Packages and Patches > SAP Mobile Platform Runtime 3.0 > Windows on x64 64bit and download EBF 3.0 SP07.

To double check what version of the SDK installed, edit a plugin’s plugin.xml file.  It should contain a version field such as the one shown below.

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="com.sap.mp.cordova.plugins.logon"
    version="3.8.0">

The SMP server is a bit more tricky to determine its version.  There are multiple places where it indicates a version.  The most reliable may be to look at C:\SAP\MobilePlatform3\smp_product_info.xml.  It should contain a version field as the one shown below.

<product name="SMPServer" version="3.0.7.0" compatibilityVersions="3.0.*">

One other place is in the top right of the management cockpit.

Additional Required Software

The Apache Cordova command line will generate a project that can then be built using Android SDK or Xcode.

The Android  SDK also requires Java to run. Note, that as of SP08 of the Kapsel SDK with Cordova 4.2, it is still recommended to use Eclipse with the Android SDK.  See Installing the Eclipse Plugin.  Android Studio will be replacing the ADT plugin for Eclipse in a future release.  To successfully use Apache Cordova for Android, a JAVA_HOME variable must be specified and it should be added to the windows path.

JAVA_HOME=C:\Program Files\Java\jdk1.7.0_45
PATH=%PATH%;%JAVA_HOME%\bin;

The Android SDK tools\bin folder also needs to be added to the windows and mac (.bash_profile) path.

PATH=%PATH%;C:\Android\sdk\tools

or

export PATH=$PATH:~/Downloads/adt-bundle-mac-x86_64-20130522/sdk/tools

If you are using Windows, Git for windows is a prerequisite and must be in the path.  Git can be installed from Git for Windows or git-scm.

On a Mac, Git is installed as part of Xcode.  The following commands can be used in OS X to view the version installed and to verify that it is on the path.

git --version
pkgutil --file-info /usr/bin/git
echo $PATH

If needed it can be installed from Git for Mac.

Finally if using Android, ant should be installed and added to the path.

PATH=%PATH%;C:\apache-ant-1.9.4\bin

Accessing the SAP OData Gateway Demo

Kapsel apps communicate with backend enterprise systems primarily by using OData.  For additional information on OData see Appendix A:  OData.  SAP provides a publicly available OData endpoint at SAP Netweaver Gateway Demo System.  Some of the samples in this guide will utilize this.  Follow the instructions on the previously provided link to receive a user name and password necessary for accessing the OData source used throughout this guide.

Ensure that the OData endpoint can be accessed by opening it in a browser.

https://sapes1.sapdevcenter.com/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT

Enter the provided user name and password.

CarrierCollection is the collection that will be used.

CarrierCollection returns a list of airlines.

Note that the option ?sap-ds-debug=true can be used with SAP Netweaver Gateway OData sources.  This causes HTML to be returned to the browser enabling the content to be displayed in an easier to read format and the links become clickable.

Notice that https is used.  The following step adds the certificate of the SAP Netweaver Gateway server to the SMP 3.0 server.  This is needed as the SMP 3.0 keystore

C:\SAP\MobilePlatform3\Server\configuration\smp_keystore.jks

does not contain the trusted root certificate that was used to sign the certificate used by the SAP Netweaver Gateway server.

Right-click and choose View page info > Connection > Certificate Information.

Click on the Details tab, Copy To File… to export the certificate to a local cer file which can then be imported into the SMP 3.0 server’s keystore.

C:\SAP\MobilePlatform3\Server\configuration>keytool -import -v -alias sapgatewaycert -keystore smp_keystore.jks -storepass changeit -file c:\certs\sapgatewaycert.cer

Note, the password shown above, changeit, was a value that was requested during the SMP 3.0 server install.  Replace changeit with the value you specified during the install.

Note that the SMP 3.0 server needs to be restarted after making this change.

The above step demonstrates how to enable the SMP 3.0 server to trust the OData server’s certificate by installing the certificate (sapgatewaycert.cer) into the SMP 3.0 server’s keystore.  Alternatively, the certificate belonging to the entity that signed the OData server’s certificate (Starfield) could be installed.
Here are a few more useful keytool commands

keytool -list -v -keystore smp_keystore.jks
keytool -list -v -keystore smp_keystore.jks -alias sapgatewaycert
keytool -delete -alias sapgatewaycert -keystore smp_keystore.jks

Configuring a Kapsel App in the Management Cockpit

The SMP 3.0 server provides authentication, logging and the ability to rewrite the URLs of an OData endpoint.  The SMP authentication providers enable the use of an existing authentication system to authenticate users accessing mobile applications.  Rewriting URL’s can hide from the end user the host name of the OData endpoint.

The following steps will demonstrate how to configure a new hybrid or Kapsel app in the SMP 3.0 management cockpit.

Create a new application in the management cockpit.  The management cockpit can be accessed at https://localhost:8083/Admin/.

The default user is smpAdmin and password is whatever was specified during the install.

Click on Applications > New.  The id is

com.mycompany.logon

The OData endpoint URL is

https://sapes1.sapdevcenter.com/sap/opu/odata/IWFND/RMTSAMPLEFLIGHT

Under SSO Mechanisms, click on Add > Technical User (Basic) and specify the user name and password used to access the OData backend system.

The Use System Proxy should be checked if the computer uses a proxy server.  The values for the system proxy are set in the management cockpit under Settings > System.

It is also recommended to set http.nonProxyHosts setting when using the http.proxyHosts setting if using the httpAuthentication provider against a server within your corporate network.

Under the Authentication tab, the simplest thing to do is to choose the default configuration.  When the No Authentication Challenge authentication provider is used, any user name and password passed to the SMP server will succeed during the registration process.

In a non demo scenario, one of the other authentication providers would be used.

An alternate setup would be to use the Basic SSO mechanism with the HTTP/HTTPS Authentication provider.  Note the HTTPS Authentication provider does not currently work with a URL that requires a proxy to reach it.

The following screenshot shows the result of a registration done using the No Authentication provider and the HTTP Authentication provider.  With the No Authentication provider, each user apears with a user name of nosec_identity.  The steps to perform the registration are covered in the Logon plugin section.

Ping the endpoint to confirm that it is correctly configured.

The application is now configured in the SMP 3.0 server and ready to be implemented.

Installing Apache Cordova with Node.js

Note, execute the following commands using the Windows command prompt or the OS X terminal.

If necessary, download and install Node.js from nodejs.org/download.

Node.js and its package manager npm can be used to install Apache Cordova.  The version installed can be seen by the following node command

node -v
v0.10.26

I would recommend using the latest available 0.10.x version.  The following error occurs when using Cordova 4.3.0 and Node 0.12.1.

Request path contains unescaped characters

To see what packages are already globally installed use

npm ls -g

Use npm to install the Apache Cordova command-line interface.
Cordova 3.0.6 (or the latest 3.0.x version) should be used if using SMP 3.0 SDK.
Cordova 3.1.0-0.2.0 (or the latest 3.1.x version) should be used if using SMP 3.0 SP01 SDK.
Cordova 3.3.1-0.1.2 (or the latest 3.3.x version) should be used if using SMP 3.0 SP02 SDK.
Cordova 3.4.0-0.1.3 should be used if using SMP 3.0 SP03 SDK.
Cordova 3.4.1-0.1.0 should be used if using SMP 3.0 SP04 SDK.

Cordova 3.5.0-0.2.7 (or the latest 3.5.x version) should be used if using SMP 3.0 SP05 SDK.

Cordova 3.6.3-0.2.13 (or the latest 3.6.x version) should be used if using SMP 3.0 SP05 PL03 or SP06 SDK.

Cordova 4.2.0 should be used if using SMP 3.0 SP07 SDK.

Cordova 4.2.0 should be used if using SMP 3.0 SP08 SDK.

For SP09 see Getting Started with Kapsel in SP09+

Note, it is possible to use Cordova 4.3.0 with SP08 of the SDK but it requires using the following format when adding Kapsel plugins.

cordova plugin add C:\SAP\MobileSDK3\KapselSDK\plugins\logon --searchpath C:\SAP\MobileSDK3\KapselSDK\plugins
or
cordova plugin add com.sap.mp.cordova.plugins.logon --searchpath C:\SAP\MobileSDK3\KapselSDK\plugins

Additional information is available at The Command-line Interface.

npm install -g cordova@4.2.0
npm ls -g cordova
or
cordova -v

Note, the -g indicates that Apache Cordova should be installed globally.  It will be placed at the location indicated by

npm root -g

Note if you are on a Mac, use

sudo npm install -g cordova@4.2.0

A specific version of Apache Cordova can be installed by specifying a version number or if the version number is not supplied then the latest version is installed.

npm install -g cordova@4.2.0

The available versions can be seen with the info command.

npm info cordova

Note, if you use a proxy server you will need to configure npm, git and plugman as shown below.

npm config set proxy http://proxy:8080
npm config set https-proxy http://proxy:8080

git config --global http.proxy http://proxy:8080
git config --global https.proxy http://proxy:8080

Create a file named C:\Users\i82xxx\.plugman\config or /Users/i82xxx/.plugman/config.

Specify a proxy such as proxy=http://proxy.phl.sap.corp:8080

See also CB-5017.

If these are not set an error similar to the one shown below may appear when creating a project.

[Error: downloaded www assets in /Users/user_name/.cordova/lib/www/cordova/4.0.0/www does not contain index.html, or www subdir with index.html]

If this happens, delete C:\Users\user\.cordova\, set the proxy settings and rerun the create command.

The following are for illustration purposes and demonstrate how to list the current proxy settings and remove the proxy settings.

npm config list
npm config get proxy
npm config get https-proxy
npm config delete proxy
npm config delete https-proxy

git var -l
git config --global --get http.proxy
git config --global --get https.proxy
git config --global --unset http.proxy
git config --global --unset https.proxy

Uninstalling Apache Cordova

Cordova can be uninstalled by

npm uninstall -g cordova
npm cache clean

After performing the uninstall, if the following folder exists, you may wish to also delete it.

C:\Users\user\.cordova

or on a Mac

~/users/user/.cordova

Creating an Apache Cordova Project

The command-line interface or CLI is used to create Cordova projects.  For additional details see Command-line Interface.

Create a folder to hold the Kapsel projects such as C:\Kapsel_Projects or ~/Documents/Kapsel_Projects
A new project can now be created using

cordova -d create C:\Kapsel_Projects\LogonDemo com.mycompany.logon LogonDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}" 

or on a Mac

cordova -d create ~/Documents/Kapsel_Projects/LogonDemo com.mycompany.logondemo LogonDemo "{\"plugin_search_path\":\"/Users/i826567/SAP/MobileSDK3/KapselSDK/plugins/\"}"

When installing plugins, the CLI expects plugins to be installable from the hosted Apache Cordova plugins registry.  The plugin_search_path parameter provides a location where local plugins can be found.  It is now required when using Kapsel plugins in SP04.  In previous versions of Kapsel there was a local .git folder that was being used to resolve the location of dependent Kapsel plugins.  The search path value is stored in C:\Kapsel_Projects\LogonDemo\.cordova\config.json or  ~/Documents/Kapsel_Projects/LogonDemo/.cordova/config.json.  Note it is also possible to specify a searchpath when adding a plugin.  Type cordova help and examine the plugin add command for additional details.

The first parameter following create is the directory to create the project, followed by a reverse-domain-style identifier, followed by the project name and then a JSON string defining where to find the Kapsel plugins when they are added to this project.
Note, this may take a few minutes to complete as an initial download of the template project that will be used has to be downloaded to

C:\Users\user\.cordova

or

~/users/user/.cordova

Note, the -d flag indicates debug output and is optional but can be useful the first time this is run in case something goes wrong.

Note, on a Mac, if the above command fails due to a permission problem, it may be necessary to provide execute rights to the folder where Cordova was installed.

cd /usr/local
sudo chmod +r+x bin

To add a platform run the following command

cd C:\Kapsel_Projects\LogonDemo or cd ~/Documents/Kapsel_Projects/LogonDemo
cordova -d platform add android

or

cordova -d platform add ios

or both at once if you are on a Mac

cordova -d platform add android ios

At this point,

LogonDemo\www

contains the HTML, JavaScript and CSS used by the project. 

The files contained in here are the ones that should be modified.  A duplicate set of the files are included in each of the below directories.

LogonDemo\platforms\android\assets\www
LogonDemo\platfoms\ios\www

A plugin can be added with the following command.  The below plugin enables console.log to display log messages.

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

For a list of additional plugins click on one of the API’s such as Camera at Plugin APIs.

Changes would now be made to index.html file followed by calling the prepare command to copy the files in the project/www folder to the platform specific www folders.

cordova -d prepare android ios

At this point the project can be opened in a development environment such as Xcode or the Eclipse IDE that includes the Android Development Tools plugin.  Alternatively, the cordova command line can also be used to build and deploy the project.

The following are a few examples using the Cordova CLI and the Android SDK.

cordova compile android (creates an apk file that can then be installed)
emulator -avd Android51 (starts an existing Android emulator named Android51)
adb install platforms/android/ant-build/CordovaApp-debug.apk (installs the app on a running device or emulator)
cordova run android (performs a cordova prepare, then builds the apk and installs the app and runs it)

Note to open the project in Eclipse and then run it choose File > Import > Android > Existing Android Code Into Workspace. 
Note that with Cordova 4.2.0, an additional step is needed to enable the project to build in Eclipse.  Right-click on the project and choose properties > Java Build Path > Libraries > Add Jars > CordovaApp-CordovaLIb > bin > cordovaapp-cordovalib.jar.  Under the tab Order and Export check cordovaapp-cordovalib.jar.
Then right-click on the project and choose Run As > Android Application.

To open the project in Xcode, double click on the file

~/Documents/Kapsel_Projects/LogonDemo/platforms/ios/LogonDemo.xcodeproj

Kapsel Plugins

The following sections provide step by step instructions demonstrating each Kapsel plugin and a set of appendices on topics related to Kapsel app development.  Note some of the plugins mentioned below such as the Barcode Scanner, Calendar, and Print plugins are based on third party plugins. They are included in the Kapsel SDK for your convenience.
Logon
AppUpdate
Push
EncryptedStorage
Logger
Settings
AuthProxy
Online Application (New in SP04)
Toolbar (New in SP04)
Barcode Scanner (New in SP04)
Application Preferences (New in SP04)
Cache Manager (New in SP04)
SAP Fiori Client (New in SP04)
Offline OData (New in SP05)
End-To-End Trace (New in SP05)
Attachment Viewer (New in SP05 PL03)

Calendar (New in SP06)

Printer (New in SP06)

Voice Recording (New in SP08)

Appendix A:  OData
Appendix B:  Debugging
Appendix C:  UI Frameworks
Appendix D:  Security
Appendix E:  Upgrading
Appendix F:  Tips
Appendix G:  New Features
Appendix H:  Non Kapsel Plugins
Appendix I:  SAP Afaria and Kapsel
Appendix J:  SMP Server Cloud Version
Appendix K:  Hybrid Apps in SAP Mobile Platform 2.3 and 3.0
Appendix L:  Crosswalk
Appendix M: SAP HANA Cloud Platform Mobile Services (HCPms)
Appendix N: Using SAML with Kapsel

Note that comments are not easily searchable in SCN.  If you have a question that is not specific to the above content it would be best to create a new discussion on SCN.
To include a reference to this document, Right Click on the title and select ‘Copy Shortcut’.  Paste it into the newDiscussion so people will know the relevance.  If you want to bring it to the attention of the author, repeat the same process with the Author’s name.