SAP Mobile Platform 3.0

Getting Started with Kapsel using SMP 3.0 SDK SP09+

Overview

If you are using SP 13 or higher please see the newer version of this document at Getting Started with Kapsel SP 13+

The following instructions are for versions of the SDK from SP 09 – SP 12.  If you are using an older version of the SDK, please see Getting Started with Kapsel in SP08.

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 with a browser that renders the UI of an 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, Android and Windows 10 without code modifications.  For a complete list of Kapsel supported device versions see SAP Mobile SDK Supported Devices Operating Systems and Product Availability Matrix.
The list of Apache Cordova API’s including sample code is available at Plugin APIs.  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, offline access for OData calls, 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, or Kiran Karunakaran, or Sami Lechner 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 Windows 8.1, Windows Phone 8.1, and Windows 10.
Development for an iOS device must occur on a Mac machine.
Android development can occur on a Windows or Mac machine.
Windows development must occur on a Windows machine.
See also Creating an Application on Windows.
Note, if using SAPUI5 or OpenUI5 on Windows 8.1 or Windows Phone 8.1, please see JavaScript Dynamic Content Shim.  This shim is not needed if targeting Windows 10.

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 SP12 SDK and the on premise SP10 server and it is recommended that these 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 SP12 SDK and the 3.0 SP10 on premise server.  The latest patch levels or PLs should also be applied.

Under Software Downloads > Support Packages & Patches, By Alphabetical Index (A-Z) > M >  SAP Mobile Platform SDK > SAP Mobile Platform SDK 3.0 > Downloads > SMPSDK30012P SP12 PL01

Under Software Downloads > Support Packages & Patches, By Alphabetical Index (A-Z) > M > SAP Mobile Platform > SAP Mobile Platform Runtime 3.0 > Windows on x64 64bit > Download 3.0 SP 10.

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="kapsel-plugin-logon"
    version="3.12.2">

The SMP server is a bit trickier 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.10.0" compatibilityVersions="3.0.*">

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

Additional Required Software

If your computer uses a proxy create the following environment variables and specify your proxy server.  On windows, create system rather than user variables.

no_proxy=localhost
http_proxy=http://proxy.phl.sap.corp:8080
https_proxy=http://proxy.phl.sap.corp:8080

Android

Install a Java JDK such as jdk-8u45-windows-x64.exe.

Download and install the Android command line tools such as installer_r24.4.1-windows.exe.  Alternatively you can download a package that includes the ADT and Android Studio which is an IDE for Android development.
Run the SDK Manager (C:\Android\android-sdk\SDK Manager.exe) and install the Android SDK Tools, Platform-tools, Build-tools as well as the SDK Platform and System Image for a particular Android Version such as Android 5.1.1.
As of SDK 10, download and install Extras > Android Support Repository and Android Support Library.  See also Support Library Setup.
Note, on a Windows machine, environment variables are added via Control Panel > System > Advanced System Settings > Environment Variables.
On a Mac, edit the file /Users/user/.bash_profile

Create an environment variable named ANDROID_HOME.

ANDROID_HOME=C:\Android\android-sdk

Add the path to tools and platform-tools to your path.

%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

If one does not exist, create a KAPSEL_HOME environment variable.

KAPSEL_HOME=C:\SAP\MobileSDK3\KapselSDK

If your computer uses a proxy and you are developing for Android, create a folder (if one does not exist) named .gradle in your home directory and a file within it named gradle.properties.

C:\Users\i82XXX\.gradle\gradle.properties
or
/Users/i82xxx/.gradle/gradle.properties

The contents of the file might be as follows.

systemProp.http.proxyHost=proxy
systemProp.http.proxyPort=8080
systemProp.http.nonProxyHosts=*.sap.corp|localhost
systemProp.https.proxyHost=proxy
systemProp.https.proxyPort=8080
systemProp.https.nonProxyHosts=*.sap.corp|localhost

iOS

Download Xcode.

Windows 8.1, Windows 8.1 Phone and Windows 10

Download a version of Visual Studio 2015 such as Visual Studio Community.
The following options should be selected.
Programming Languages > Visual C++ > Common Tools for Visual C++ 2015 Windows and Web Development > Microsoft Web Developer Tools
Windows and Web Development > Universal Windows App Development Tools
Windows and Web Development > Windows 8.1 and Windows Phone 8.0/8.1 Tools

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.
Note, the OData section contains an example where the same OData source is created using the SQL Anywhere OData producer.

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 on the lock icon to the left of the URL and choose Details > View Certificate.

Notice that the certificate used by sapes1.sapdevcenter.com was issued by the CA Go Daddy.  In order for the SMP server to successfully connect over HTTPS to this site, the SMP server needs to trust this CA.  The list of trusted CA’s can be viewed in the management cockpit under Settings > Certificates.

If this CA was not present it could be added by following the below steps.
Export the certificate in Chrome by clicking on the Certificate Path tab, selecting Go Daddy Root Certificate Authority – G2 > View Certificate > Details tab, Copy To File… > export the certificate as Base-64.

Next import the certificate into the SMP 3.0 server’s keystore using the import button.
Note the SMP server needs to be restarted after making this change.
The SMP server has 2 different keystores.  The smp_keystore.jks contains trusted CA certificates for validation purposes and technical user certificates (with private keys) for accessing backend systems. The local_smp_keystore.jks holds only server certificates for HTTPS listeners.

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.  For additional details see SAP Mobile Platform Server as an OData Proxy.

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

Note, the Same-Origin Policy setting is new in SP09 of the SMP server.  It is not enforced for file URL’s which are used by Cordova/Kapsel applications.  For additional details see Using CORS.

As an example, if this policy is enabled and a web page being hosted from a web server on port 80 attempts to register with the SMP server on port 8080, the following would occur.
An options request is made that contains the following header.

Origin: http://10.7.171.234

The response contains the following header.

Access-Control-Allow-Origin: http://10.7.171.234:8080

Since these do not match, the browser does not let the request proceed and reports the following error.

XMLHttpRequest cannot load http://10.7.171.234:8080/odata/applications/latest/com.mycompany.logon/Connections.
The 'Access-Control-Allow-Origin' header has a value 'http://10.7.171.234:8080' that is not equal to the supplied origin.
Origin 'http://10.7.171.234' is therefore not allowed access.

The OData endpoint URL is

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

Under SSO Mechanisms, click on Add > Basic.

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.
Note, changing these values requires restarting the server as indicated by the i beside the property names.

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, create a new HTTP/HTTPS authentication provider.  Provide the same URL that was used for the endpoint.  During the registration process, the SMP server will validate the provided user name and password against this URL.

Ping the endpoint to confirm that it is correctly configured.

The following screenshot shows the result of a registration.  The steps to perform the registration are covered in the Logon plugin section.

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
v5.4.1

Install the latest available version.
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.
* You may wish to upgrade to a newer version on Android to address this fixed security flaw on Android.  CVE-2015-1835
Cordova 5.1.1 should be used if using SMP 3.0 SP09 SDK.
Cordova 5.1.1 should be used if using SMP 3.0 SP10 SDK.
Cordova 5.4.1 should be used if using SMP 3.0 SP11 SDK.
Cordova 6.0.0 should be used if using SMP 3.0 SP12 SDK.

npm install -g cordova@6.0.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@6.0.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@6.0.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 as shown below.

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

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

Uninstalling Apache Cordova

Note, this section is for illustration purposes only.  Cordova should not be uninstalled to continue with this guide.

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 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

or on a Mac

cordova -d create ~/Documents/Kapsel_Projects/LogonDemo com.mycompany.logondemo LogonDemo

The first parameter following create is the directory to create the project, followed by a reverse-domain-style identifier, followed by the project name.
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.
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

cordova -d platform add windows

If you are developing Windows 10 universal apps add the following preference to your config.xml file as documented here.

<preference name="windows-target-version" value="10.0" />

At this point, the root www folder contains the HTML, JavaScript and CSS used by the project.

A duplicate set (also known as platform specific set) of the files are included in each of the below directories.  These files should not be modified as they are replaced with the set from the folder shown in the previous screenshot when the commands cordova prepare or cordova run are executed.

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

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

cordova plugin add cordova-plugin-console

Note it is possible to specify a specific version of a plugin or to specify that the plugin comes from a GIT repository.

cordova plugin add cordova-plugin-console@0.2.12
cordova plugin add cordova-plugin-console@latest
cordova plugin add https://github.com/apache/cordova-plugin-console.git
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.13

As of Cordova 5.0, plugins are stored in NPM ecosystem:cordova and have a different naming standard (cordova-plugin-camera vs org.apache.cordova.camera).
Previously they were available in the Apache Cordova plugins registry.
Some commonly used plugins are listed here.
Some of the plugins are archived here.

Type cordova help plugin and examine the add command for additional details.

After the project has been created, the default app can be modified, and additional files can be added to the www folder such as adding datajs-1.1.2.min.js.  Another common change would be to edit the config.xml file and specify a few settings such as enabling all orientations on iOS and the min Android SDK to target.

  <platform name="ios">
      <preference name="Orientation" value="all" />
      <preference name="deployment-target" value="6.0" />
  </platform>
  <platform name="android">
      <preference name="android-minSdkVersion" value="14" />
  </platform>

Changes would now be made to the 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

Running an Apache Cordova Project

At this point the project can be opened in a development environment such as Xcode, Android Studio or Visual Studio.  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 for each platform.

Android

cordova compile android (creates an apk file that can then be installed)
emulator -list-avds (lists the emulators that are currently available)
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, if the below error is shown after running cordova run android, unchecking Settings > Developer options > Verify apps over USB may help.  See also Unable to test app after upgrading to Lollipop.

java.lang.UnsatisfiedLinkError: No implementation found for java.lang.String android.os.SystemProperties.native_get(java.lang.String)

To open the project in Android Studio choose Import Project and navigate to C:\Kapsel_Projects\LogonDemo\platforms\android.
The project can be run by choosing Run > Run ‘android’
Note, if you are unable to build the project in Android Studio, try running the following commands and then opening it.

cordova platform remove android
cordova platform add android --searchpath %KAPSEL_HOME%/plugins
cordova build android

iOS

For iOS the following additional components need to be installed.

sudo npm install -g ios-sim
sudo npm install -g ios-deploy

Then the below command can also be used to prepare, build and install an iOS app.

cordova run ios --list //if needed to determine a target

cordova run ios --emulator --target iPhone-5
or
cordova run ios --device

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

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

Windows

For Windows the following commands can be run.  Note if you are deploying to a phone, the phone must first be unlocked using the Windows Phone Developer Registration tool.

cordova run windows --archs=x64

cordova run windows --list
cordova run windows --emulator --target
or
cordova run windows --archs=arm --device -- --phone

If you double click on the following file, it will open in Visual Studio and a project for each platform can be seen.

C:\Kapsel_Projects\LogonDemo\platforms\windows\CordovaApp.sln

Notice that the bolded one below is the project for Windows Phone 8.1.  To use a different one, right-click on the project and choose Set as Startup Project.
An architecture such as x64 or ARM can be selected.  These then affect the available list of available target devices.
Note that it is required to select an architecture to work with some of the Kapsel plugins.  They do not support the option AnyCPU.

Note, if you attempt to install three application on a Windows phone you may encounter the following error message.

 Error: Unable to install application. The maximum number of developer applications on this phone has been reached. Please uninstall a developer application and try again.

See also, Register as an app developer.
Note, if you receive the Error, Package could not be registered, a possible workaround is to remove the sharedUserCertificates cabability in the appxmanifest file.  This capability is added by the Kapsel Logon plugin.  In general, the Capability entries should appear first and the DeviceCapabilities should appear second.

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
Barcode Scanner
Offline OData
End-To-End Trace
Attachment Viewer
Calendar
Printer

Localization
SAP Fiori Client
Online Application
Toolbar
Application Preferences
Voice Recording

Appendix A:  OData
Appendix B:  Debugging
Appendix C:  UI Frameworks
Appendix D:  Security
Appendix D:  Security Part 2
Appendix E:  Upgrading
Appendix F:  Tips
Appendix G:  New Features
Appendix H:  Non Kapsel Plugins
Appendix I:  SAP Afaria and Kapsel

Appendix J:  Hybrid Apps in SAP Mobile Platform 2.3 vs 3.0
Appendix K: Crosswalk
Appendix L:  SAP HANA Cloud Platform Mobile Services (HCPms)
Appendix M:  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 new Discussion 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.