MOB160 Agile Meets Mobile: Go

from Prototype to SAP Fiori App in 15

Minutes

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

Speakers

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

Matthias de la Roche Vasu Kesiraju Matthias de la Roche

Jeff Gebo Vinay Kumar Martin Grasshoff

Shiney Sooraj

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

Hands-on session flow

Low
Clone App Import /
fidelity from gallery extend app
prototype webide/
HAT

Splash / Build HCP Cockpit / Web IDE

Prototype Developer

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

Mobile application types

Kapsel

Mobile Web Hybrid Native

Web Browser Mobile App Mobile App

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

Building apps with SAP Web IDE

Hybrid
SAP Web IDE Application
Toolkit

SAPUI5 application SAP Fiori application (SAP Fiori) hybrid mobile app

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

What is Hybrid Application Toolkit (HAT)?

SAP HANA Cloud Platform

Enables developers to develop and build Apache
Cordova hybrid apps in SAP Web IDE & to add
Hybrid
native device functionalities to SAP Fiori
Application
applications SAP Web IDE Toolkit
HAT has 3 components that are provided as a (plugin)
plugin and an add-on to SAP Web IDE:
1. The SAP Web IDE plugin for Hybrid App Toolkit
2. HAT Connector to local build environment
(Cordova CLI) HAT Connector
HAT
3. HAT Companion application HAT Companion app (add-on)

Android SDK Tools

Kapsel XCode

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

Hybrid App Toolkit Connector

HAT Connector will be setup by the HAT

Installer
Startup the HAT Connector
On Windows, double-click run.cmd
On Mac, (first chmod +x *.sh) run ./run.sh
Strengthen the connection security with the
API key
Menu Tools > Preferences
Replace the default <apiKey> value in
the project config.json file with an
alphanumeric string
Test connection from SAP Web IDE to the
HAT Connector running locally on the
developer workstation

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

Hybrid App Toolkit Companion app

The Hybrid App Toolkit Companion app is a mobile application

that runs on a mobile device or device emulator.
Enables a live preview of a Web application created with
SAP Web IDE
Cordova based mobile app
Contains Cordova, SAP mobile (Kapsel) and SAPUI5
libraries
Kapsel
Automatically built during HAT installation
for iOS and Android
You may also use a QR code to load the corresponding Companion
application onto the mobile device. (double-click on app
Companion app and select Scan)

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

Simple steps to develop & deploy hybrid apps Create Develop Preview Deploy

Create Develop Build & Preview Package & Deploy

Source Code Editor with code to

completion, dynamic API reference, etc.
Coding SAP HANA Cloud
New Additional support for Cordova &
project Kapsel

to
SMP (SMP3/HCPms)
Templates Drag & Drop UI controls for layout
WYSIWYG Design design

to
iOS and Android
devices

Git integration
* not in current GA release, planned for future release

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

Templates for Hybrid apps Create Develop Preview Deploy

Create a new project

File > New > Project

Hybrid templates are provided

SAPUI5 Mobile Kapsel Application Project
SAPUI5 Master Detail Kapsel Application
SAPUI5 Master Detail Kapsel Offline Application
SAPUI5 Master Detail with Photos *
SAPUI5 Master Detail with Photos (Annotations) *
* provided with core SAP Web IDE

Additional templates of any kind can be created, added and managed

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 11
Configuring devices Create Develop Preview Deploy

Basic app information

Platform (iOS, Android)
Plugins used in the application
Application icon
Application splash screen
SAP mobile services system for testing

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

Coding (assisted development) Create Develop Preview Deploy

Ctrl + Space to activate code

completion
Additional code completion
For Cordova plugins
For Kapsel plugins
API Reference pane
For Cordova plugins
For Kapsel plugins

* not in current GA release, planned for future release

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

Layout Editor (WYSIWYG) Create Develop Preview Deploy

Design your view graphically in the

Layout Editor and display the content of
the XML view
Right-click the XML file and open with Layout
Editor

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

Preview and test options
SAP Web IDE and HAT provide multiple options to preview the hybrid application
Option
Preview in browser with Cordova
Facade
Preview on device emulator or
device connected via USB to
developer workstation
Preview from device using
Companion App and scan QR-code
of application URL
Run on device emulator or device
connected via USB to developer
workstation
2016 SAP SE or an SAP affiliate company. All rights reserved.
Create Develop Preview Deploy
Short description
The hybrid application runs in a normal browser window within a
Cordova container. Some functions/plugins might not work due to
missing capabilities of the desktop browser.
The HAT Companion app is installed to the emulator or device and
the hybrid app is pulled via URL into the Companion app.
The HAT Companion app installed on the device is used to scan a
barcode from the browser that displays the URL to the application
as QR-code. No cables required.
The complete hybrid app is built into a Cordova container and
installed to the emulator or device.
The next slides describe these options
Public 15
Preview in browser with Cordova Facade Create Develop Preview Deploy

Live Preview & Testing

Use browser with Cordova Facade
Quickly validate hybrid app functionality without
deploying to an emulator or device Browser
Allow/Deny access to mobile features, i.e. camera of
laptop

Note: you must enable Cordova Faade previews in

Hybrid App Toolkit preferences

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

Live preview to test native device APIs Create Develop Preview Deploy

Emulator

Device

Live Preview & Testing

Use pre-built hybrid companion app
Test native device APIs
Double-click the app and refresh
Give instant response without build the project

Note: you must configure device settings so the

application can properly consume native APIs

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

Run on emulator or device Create Develop Preview Deploy

Emulator

Device

Run on Emulator or Device does

Download the project to local machine
Fetches the specified Cordova plugins to create
a Cordova project
Build mobile app for Android or iOS
Install it on emulator or mobile device
Run the app

Note: You must also have configured device properties,

otherwise you will not have any contexts displayed for
the Run on menu command

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

Preview vs. Run Create Develop Preview Deploy

Preview on Run on

SAP HANA Cloud Platform

4 SAP HANA Cloud Platform
3 Refresh

1 SAP Web IDE URL 2 SAP Web IDE

Preview App Run App
Scan QR code *
Companion Hybrid
app URL 1 mobile app
App
HAT Connector HAT Connector 4
2 Companion
app
Hybrid
mobile app

App
HAT
Companion app
3
1. In SAP Web IDE: Preview on simulator or device 1. In SAP Web IDE: Deploy to local HAT
(download the application to local workstation)
2. Install and launch the Companion app
2. In SAP Web IDE: Run on simulator or device
3. Load application from HCP by URL to the application
3. Build hybrid app into Cordova container
4. Possibility to refresh the application after modifications have been
made to the application in SAP Web IDE 4. Install and launch hybrid mobile app
* You may also scan a QR code in the Companion app to load the If changes are made to application, repeat steps 1 4
application (double-tap in Companion app and scan) pull instead of push
2016 SAP SE or an SAP affiliate company. All rights reserved. Public 19
Deploy the application Create Develop Preview Deploy

When the optional plugin of HAT is activated, multiple options are

available for the developer to deploy the application:
Deploy the application to the local Hybrid App Toolkit. The package can then be
built locally and run on the simulator or device.
Deploy to SAP Mobile Platform (SMP 3.0)
Deploy to HCP Mobiles Services (HCPms)
Deploy a hybrid app to HCPms or SMP so that application updates can be
pushed to a registered device with the Kapsel AppUpdate mechanism.
The plugin AppUpdate must be configured in the Device Configuration of the
project
Only the HTML5 part of the application will be updated in the mobile app. No
need to reinstall or update the entire mobile app.
The mobile app must be installed on the device and registered in HCPms/SMP
prior to be able to deploy

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

Deploy & publish the app Create Develop Preview Deploy

SAP Publish SAP App

Manually send your app (with profile for iOS)
to the Administrator of the SAP Mobile
Mobile Secure Store
Mobile Place
Secure server Server
Upload and Sign the app
Manual upload Install app
Publish it to SAP Mobile Place for
distribution
User selects the app in the store and installs .apk file (Android)
it to the mobile device .ipa file + profile (iOS)

Mobile
App

SAP Web IDE

Mobile Device
Developer workstation

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

 SPLASH & BUILD

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

SPLASH: A new HCP Solution

SAP SPLASH: Inspire, Learn & Do

UI Theme Designer Discover & Design

related
SAP Web IDE

SAPUI5

SAP HANA Cloud Portal / Fiori Launchpad

HCP Mobile Services/ SAP Fiori Mobile

Develop & Deploy
SAP Jam related

SAP Web Analytics

SAP HANA Cloud Platform (HCP)

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 23
SPLASH & DESIGN THINKING JOURNEY

DISCOVER DESIGN DEVELOP DEPLOY

SPLAS H & BUILD WEB IDE

Business Analyst Dev el op er

in HCP: the Digital Transformation platform leveraging Design Thinking

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 24
 INSPIRE
Gallery of app prototypes and
design artifacts

LEARN
Method cards, online
learning, best practices

Business Analyst

DO
Integrated research and
prototyping tools to validate
requirements

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

 LEARN
METHOD CARDS, ONLINE LEARNING, BEST PRACTICES

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

 Up skill your UX knowledge
with:

Online learning on
design thinking
methodologies

Method cards which

include guided steps
and templates

Best practices for each

step of process

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

 INSPIRE
GALLERY OF APP PROTOTYPES
AND DESIGN ARTIFACTS

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

 Explore and leverage:

Inspiring application designs

e.g. SAP Fiori

Growing gallery of application

prototypes to build your own

Comprehensive design-
thinking artifacts for the above

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

 DO
SIMPLE INTEGRATED DESIGN TOOLS

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

 A collaborative design tool which makes it easy for anyone to:
Create interactive prototypes
Get feedback from users
Jumpstart development without writing a single line of code

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

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

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

 EMMA
Business Analyst Cost Accounting Manager

Emma has been talking with the Cost

Accounting Manager about an app
that would list the equipment per
employee

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

Demo Synopsis

1. TeamWork: Hand-sketch a prototype with colleagues & take photos

2. BUILD: Create a Low Fidelity prototype based on whiteboard photos

3. BUILD: Gather users feedback & learn from Feedback

4. BUILD: Create a High Fidelity prototype by cloning an app in Gallery

5. Handover to Linda, a Developer in WEBIDE

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

Import sketches of the idea
Quickly get feedback from users

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

Conclusions

SPLASH: LEARN, INSPIRE, DO

DO with BUILD

A collaborative design tool which makes it easy for anyone to:

Create interactive prototypes
Get feedback from users
Jumpstart development without writing a single line of code

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

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 38

Further information
Related SAP TechEd sessions:

MOB202 - Agile Meets Mobile: Go from Prototype to SAP Fiori App in 15 Minutes (Lecture)
MOB160 - Agile Meets Mobile: Go from Prototype to SAP Fiori App in 15 Minutes (2-hr Hands-On)
MOB261 - Build SAP Fiori Apps Using SAP HANA Cloud Platform and SAP API Management (2-hr Hands-On)

SAP Public Web

https://www.experiencesplash.com/splashapp/
Hybrid Application Toolkit
www.sap.com

SAP Education and Certification Opportunities

open.sap.com Build Your Own SAP Fiori App in the Cloud

Watch SAP TechEd Online

www.sapteched.com/online

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

Feedback
Please complete your
session evaluation for
MOB160.

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

 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 41