MOB161 Hands-On Boot Camp: Putting the

Enterprise in Your Mobile App

Public
Speakers

Las Vegas, Sept 19 - 23 Bangalore, October 5 - 7 Barcelona, Nov 8 - 10

Dan van Leeuwen Prathiba Parameswara Chris Whealy

Claudia Pacheco Sharvari Sami Lechner
Michael Jess Kushagra Jain Michael Jess

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Disclaimer

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of
SAP. Except for your obligation to protect confidential information, this presentation is not subject to your license agreement or
any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this
presentation or any related document, or to develop or release any functionality mentioned therein.

This presentation, or any related document and SAP's strategy and possible future developments, products and or platforms
directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice.
The information in this presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality.
This presentation is provided without a warranty of any kind, either express or implied, including but not limited to, the implied
warranties of merchantability, fitness for a particular purpose, or non-infringement. This presentation is for informational
purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this
presentation, except if such damages were caused by SAPs intentional or gross negligence.

All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially
from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only
as of their dates, and they should not be relied upon in making purchasing decisions.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Agenda

Setup
A quick look at the software used for this session
OData
Accessing data
HTML5 based app
Basic HTML5 app that accesses an OData backend
Debugging using Web Inspector
Examine logged messages, HTTP requests, variables, and set breakpoints
SAP Fiori
Learn about SAPUI5, Fiori UX, and the SAP Web IDE

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Agenda

Hybrid/Cordova/Kapsel
Create a HTML based UI wrapped in a native app that can access native features
Barcode scanner
Enhance the app with the ability to show details of a scanned barcode
Registering with HANA Cloud Platform mobile services
Logon Plugin
Native Logging
Logger Plugin
Offline enablement
Provide a device database that can handle requests and modification while the device is disconnected

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Agenda

Offline Errors
Intro to Error Handling in Offline Apps
Document Service
Managing unstructured content
Push
Receiving notifications
AppUpdate
Make changes to the deployed app without using an app store

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

OData

Open Data Protocol

Public
OData

OData is an open standard, originally developed by

Microsoft, but now administered by the OASIS Organisation. SAP Annotations

OData

Atom
Publishing
A method of accessing data that is self-described and is
Atom JSON
easily accessible using just a browser. Syndication

OData provides database-like access to server-side

XML
resources; hence, it has been described as:
ODBC for the Web HTTP(S)

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 8

HTML5 based app

Basic HTML5 app that accesses an OData backend

Public
HTML5 based app

Pros
Build the UI once and it runs on many platforms
Updates are easy, simply update the content on the web server
JavaScript/HTML is a very well known language
Cons
Native is faster and more functional
Limited access to native device features like contacts, barcode scanner etc.
Need to consider caching so content that is not updated frequently can be cached
Can be difficult to handle data requests and updates with no network

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 10

Debugging using web
inspector
Examine logged messages, HTTP requests, variables, and set breakpoints

Public
Debugging using web inspector

Built into Chrome and enables

Viewing of JavaScript logged messages
Examine HTTP requests
Step through the code line by line and
examine variables
Exploratory programming
Can also be used to debug hybrid apps

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 12

SAP Fiori

Learn about SAPUI5, Fiori UX, and the SAP Web IDE

Public
SAP Fiori

What is SAPUI5?
A JavaScript UI library created by SAP and an open source version called OpenUI5

What is SAP Fiori UX?

Set of design guidelines for creating SAP HTML5 apps that make use of SAPUI5

What are SAP Fiori Apps?

Over 900 apps that cover commonly used SAP functionality using SAP Fiori UX

What is the SAP Web IDE and HAT?

A cloud based development environment for creating and extending SAP Fiori Apps.
Hybrid Application Toolkit (HAT) enables Cordova development in the WEB IDE.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 14

Hybrid/Cordova/Kapsel

Create a HTML based UI wrapped in a native app that can access native features

Public
Hybrid/Cordova

What is a Hybrid App?

An HTML/JavaScript app that uses the Apache Cordova to provide a WebView and a set of native
functionality exposed as plugins callable from JavaScript.
Pros
Access to native device features through Cordova plugins using a JavaScript API
Build the app once and it runs on many platforms
Content (HTML, JavaScript etc.) is bundled as part of the app
Cons
Native is faster and more functional
Can be difficult to handle data requests without a network connection
Need to use App Stores for updates to the app

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 16

Cordova high level architecture

Mobile Device
Mobile Device
Native Application
Native Application

Web View
WebView
JavaScript, CSS, HTML, etc.
JavaScript, CSS, HTML, etc.

Plugin Plugin Plugin Plugin

PluginAPI
JavaScript PluginAPI
JavaScript PluginAPI
JavaScript PluginAPI
JavaScript
JavaScript API JavaScript API JavaScript API JavaScript API

Native API Native API Native API Native API

Native API Native API Native API Native API

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 17

Kapsel

What is a Kapsel App?

A Cordova app that uses plugins from the SAP Mobile Platform 3.0 SDK to provide additional
enterprise functionality such as offline OData, push notifications, application updates etc.

What is the SAP Fiori Client?

A Hybrid/Cordova App that uses Kapsel plugins to enhance a Fiori App with access to device
functionality.
A script to create the app is included in the SDK under KapselSDK/apps/fiori_client

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 18

Hybrid Application Development Using Kapsel
Support for Cross-Platform App Development

Kapsel
3rd party plugin
Cordova Container
is shipped as a standard part of the 3rd party plugin
SAP Mobile SDK
AppUpdate
is the name of a set of SAP Hybrid Business AuthProxy
specific plugins for Apache Cordova Application EncryptedStorage
(SAPUI5) Logger
plugins behave exactly like any other
Logon
3rd party Cordova plugin
Push
JavaScript Interface
plugins give Cordova applications Settings
enterprise capabilities via the Cloud Platform Offline
(HCPms) or On-premise (SMP3) Libraries etc
solutions
Device APIs Kapsel
runs on Android, iOS and Windows
H/W Features of Mobile Device

Mobile Device

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 19

Barcode scanner

Enhance the app with the ability to show details of a scanned barcode

Public
Barcode scanner

Use functionality from a plugin to scan a product ID and

show results
Shows how easy it is to make use of functionality provided via
an open source plugin
The native plugin code is available for a variety of platforms
including Android, iOS and Windows Phone
App does not need to be rewritten to support multiple platforms

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 21

Barcode scanner

function scan() {
cordova.plugins.barcodeScanner.scan(scanSuccessCallback, scanErrorCallback);
}

function scanSuccessCallback(result) {
log(JSON.stringify(result));
}

function scanErrorCallback(error) {
alert("Scanning failed: " + JSON.stringify(error));
}

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 22

Demo

Complete Exercises 1 7

Public
Registering with HANA Cloud
Platform mobile services
Logon Plugin

Public
Registering with HANA Cloud Platform Mobile Services (HCPms)

HANA Cloud Platform Mobile Services (HCPms) Features:

Enables Offline OData
Makes available data about devices that have registered, response times etc.
Authentication can be handled by the server (LDAP, SAML, etc.)
Can be used to enforce a passcode policy for the app
Provides a common interface for push notifications
Used to provision updates of a Kapsel app
Logon Plugin
Has an API to show a registration screen
Provides a passcode screen to further protect the app
Stores credentials in a secure data vault

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 25

Logon plugin
Code snippet

function register() {
var appId = "com.sapteched.mob161";
var context = {
"serverHost": "<HCPms Host>",
"https": "true",
"serverPort": "443"
};

sap.Logon.init(logonSuccessCallback, logonErrorCallback, appId, context);

}

function logonSuccessCallback(result) {
JavaScript
alert("Successfully Registered");
}

function logonErrorCallback(error) {
console.log("An error occurred: " + JSON.stringify(error));
}

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 26

Logging

Increasing the supportability of an app

Public
Logging

Logs are stored on the device

The log level can be changed in the app or remotely in HCPms cockpit
Logs can be viewed in the app, emailed from the app, or uploaded to the HCPms
Entries can be added to the log via calls to console.log or sap.Logger.debug, info, warn, error
JavaScript and native components of the plugins can log message

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 28

Logger plugin
Code snippet

function setLogLevel(logLevel) {
sap.Logger.setLogLevel(logLevel);
}

function getLogLevel() {
sap.Logger.getLogLevel(getLogLevelSuccess, getLogLevelFailure);
}

function getLogLevelSuccess(level) {
console.log("MOB161 Log Level is " + level);
JavaScript
}

<button onclick="sap.Logger.clearLog()">Clear Log</button>

<button onclick="sap.Logger.getLogEntries(getLogEntriesSuccess, getLogEntriesError)">View Log</button>

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 29

Offline enablement

Provide a device database that can handle requests and modification while the device is disconnected

Public
Offline enablement

Kapsel Offline Plugin

Can be used to specify which parts of an application should be useable when an application is offline
Creates a device database containing the specified data
OData requests are served from the offline database
When the device has connectivity locally made changes are flushed to the backend and changes on
the backend are refreshed back to the device database
It can reduce network traffic and improve query times

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 31

Offline plugin
Code snippet

function openStore() {
var properties = {
"name": "gtmDemoOfflineStore",
"host": applicationContext.registrationContext.serverHost,
"port": applicationContext.registrationContext.serverPort,
"https": applicationContext.registrationContext.https,
"serviceRoot" : appId,
"definingRequests" : {
SalesOrders" : "/SalesOrderHeaders",
"SalesOrderItems" : "/SalesOrderItems"
}
};
store = sap.OData.createOfflineStore(properties);
store.open(openStoreSuccessCallback, errorCallback);
JavaScript
JavaScript
}

function openStoreSuccessCallback() {;
sap.OData.applyHttpClient(); //Offline OData calls can now be made against datajs.
}

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 32

Offline plugin
Code snippet

function flushStore() {
store.flush(flushStoreSuccessCallback, errorCallback);
}
JavaScript
function refreshStore() {
store.refresh(refreshStoreCallback, errorCallback);
}

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 33

Offline error handling

Annotations, the error archive and how to recover from an error

Public
Offline error handling

Annotations
Can be used identify which entities have been modified locally or which entities are in an error state
Entities in an error state can be updated and then flushed again

Error Archive
Provides details of failed flush and refresh operations
Deleting an entry from the error archive will revert the entities to the state they were in prior to the flush
or refresh operation

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 35

Document Service

Managing unstructured content

Public
Document Service Overview

SAP HANA Cloud Platform document service provides an enterprise cloud content repository for unstructured or semi-
structured content.

Key capabilities

Customer
Content repository for unstructured or semi-structured
content HTTPS Internet
Define hierarchies and metadata
Support for access controls, checkout and versioning Applications on
SAP HANA
Based on OASIS content management interoperability

Cloud Platform
Cloud Platform
services (CMIS)

SAP HANA
Benefits Document Service API
Multi-tenancy and fully managed
Files are always encrypted (AES) before storage
Document Service

Read more: SAP HANA Cloud Platform, document service

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 37
Integration with Mobile Service for Development and Operations

SAP HANA Cloud Platform document service is integrated with

mobile service for development and operations in order to
provide your app the ability to leverage extended document
management features.

Key capabilities
It is enabled by default. No need to configure anything in
the HCP mobile services cockpit to enable the document
service integration.
It automatically creates an application folder under a
common repository under the tenant for each application

Benefits
Allow mobile apps to upload, share, distribute and retrieve
static content from and towards your mobile users

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 38

Document Service
Code snippet

function connectCMIS(fname) {
cmisURL = "https://"+ applicationContext.registrationContext.serverHost + "/mobileservices/persistence/v1/json/"+appId
session = cmis.createSession(cmisURL+"/$metadata");
session.setCredentials(applicationContext.user, applicationContext.password).loadRepositories({
request : {
success : function(data) {
updateStatus1("Connected to Document Store");
//once the connection has been established, it gets the root object
getRootObject(fname);
},
error : function(e) {
if (e.responseJSON)
console.log( "Error during the request: " + e.responseJSON.message);
JavaScript
JavaScript
else
console.log( "Error during the request: " + e.statusText);
}
}
});
}

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 39

Push

Receiving notifications

Public
Push

Kapsel Push Plugin

Enables devices to receive push notifications
Registration via harmonized API across platforms
Mobile Platform provides harmonized API to push to clients
Allows event-driven, active notification of users

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 41

Push

Push to
Specific user Native
Specific device
Multiple devices Push
Users of an app Providers
APNS
Native Push Push via API
App
BPS
HCPms

Device GCM

WNS

Internet On Premise Network

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 42
Push
Code snippet

function registerForPush() {
var nTypes = sap.Push.notificationType.SOUNDS | sap.Push.notificationType.ALERT;
sap.Push.registerForNotificationTypes(nTypes, regSuccess, regFailure,
processNotification, null /* optional GCM Sender ID */);
}

function regSuccess(result) { alert("Successfully registered: " + JSON.stringify(result)); }

JavaScript
function regFailure(errorInfo) { alert("Error while registering. " + JSON.stringify(errorInfo)); }

function processNotification(notification) { alert(JSON.stringify(notification)); }

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 43

Updating deployed apps

Push out new changes to the app without using an app store

Public
Updating deployed apps

Kapsel AppUpdate Plugin

In a packaged Cordova/Hybrid app the HTML assets are included in the native app
The AppUpdate plugin can be added to a project and enables the updating of these resources
When the app starts it checks with the HCPms server to see if there is a newer revision of the app
The update can happen automatically or it can be Oked by the user
Another option is to deploy your app to an AppStore or use a Mobile Device Management solution to
push updates to enrolled devices

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 45

Updating deployed apps
Code snippet
function prepareAppUpdate() {
var appUpdateTimer = null;
var progress = null;

sap.AppUpdate.addEventListener("checking", function(e) {
console.log("Checking for update");
});

sap.AppUpdate.addEventListener("downloading", function(e) {
JavaScript
console.log("Downloading update");
navigator.notification.activityStart("Application Update", "Downloading...")
appUpdateTimer = setInterval(function() {
console.log('Downloading... ' + progress.toFixed(2) + '%');
}, 1000);
JavaScript
});

sap.AppUpdate.addEventListener("progress", function(e) {
if (e && e.lengthComputable) progress = e.loaded / e.total * 100;
});

sap.AppUpdate.addEventListener("noupdate", function(e) {
alert("No Update.");
});

// continued

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 46

Updating deployed apps
Code snippet
// continued

sap.AppUpdate.addEventListener("error", function(e) {
navigator.notification.activityStop();
clearTimeout(appUpdateTimer);
navigator.notification.confirm("Application update failed",
function(buttonIndex) {
if (buttonIndex === 2) location.reload();
},
"Update", ["Continue Anyway", "Relaunch App"]);
});

sap.AppUpdate.addEventListener("updateready", function(e) {
navigator.notification.activityStop();
JavaScript
clearTimeout(appUpdateTimer);
});

sap.AppUpdate.onupdateready = function() {
navigator.notification.confirm("New update available",
function(buttonIndex) {
if (buttonIndex === 2) sap.AppUpdate.reloadApp();
},
"Update", ["Later", "Relaunch Now"]);
};
}

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 47

SAP TechEd Online

Continue your SAP TechEd

education after the event!
Access replays of
Keynotes
Demo Jam
SAP TechEd live interviews
Select lecture sessions
Hands-on sessions

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 48

Further information

Related SAP TechEd sessions:

MOB101 - SAP and Apple: Revolutionize the Mobile Work Experience
MOB102 Next Stop: Enterprise Mobility in the Cloud
MOB160 - Agile Meets Mobile: Go from Prototype to SAP Fiori App in 15 Minutes
MOB202 - Agile Meets Mobile: Go from Prototype to SAP Fiori App in 15 Minutes
MOB260 - SAP S/4HANA to Go: Demystifying Offline for Mobile Apps
MOB305 - Identity Propagation in Mobile Services That Run on SAP HANA Cloud Platform
MOB600 - Build SAPUI5 Mobile Apps with SAP Web IDE and SAP HANA Cloud Platform
MOB840 - Road Map Q&A: SAP Mobile Platform

SAP Public Web

http://scn.sap.com/community/mobile
http://go.sap.com/product/technology-platform/mobile-app-development-platform.html
http://service.sap.com/roadmap

SAP Education and Certification Opportunities

www.sap.com/education

Watch SAP TechEd Online

www.sapteched.com/online

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 49

Feedback
Contact information:
Please complete your
Dan van Leeuwen
session evaluation for daniel.van.leeuwen@sap.com

MOB161. Claudia Pacheco

claudia.pacheco@sap.com
Micahel Jess
michael.jess@sap.com

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 50

 2016 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://www.sap.com/corporate-en/about/legal/copyright/index.html for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 51