MOB100 Develop Mobile Apps with SAP Web

IDE, Hybrid App Toolkit Add-On

Public

Speakers
Las Vegas, Oct 19 - 23

Barcelona, Nov 10 - 12

Matthias de la Roche

Matthias de la Roche

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

Public

Disclaimer
This presentation outlines our general product direction and should not be relied on in making a
purchase decision. This presentation is not subject to your license agreement or any other agreement
with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to
develop or release any functionality mentioned in this presentation. This presentation and SAP's
strategy and possible future developments are subject to change and may be changed by SAP at any
time for any reason without notice. This document 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. SAP assumes no responsibility for errors or omissions in this
document, except if such damages were caused by SAP intentionally or grossly negligent.

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

Public

Mobile application types

Kapsel

Mobile Web
Web Browser
2015 SAP SE or an SAP affiliate company. All rights reserved.

Hybrid

Native

Mobile App

Mobile App
Public

Building apps with SAP Web IDE

SAP Web IDE

Hybrid
Application
Toolkit

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

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

Public

What is Hybrid Application Toolkit (HAT)?

Enables developers to develop and build Apache
Cordova hybrid apps in SAP Web IDE & to add
native device functionalities to SAP Fiori
applications

SAP HANA Cloud Platform

SAP Web IDE

HAT has 3 components that are provided as a

plugin and an add-on to SAP Web IDE:

Hybrid
Application
Toolkit
(plugin)

1. The SAP Web IDE plugin for Hybrid App Toolkit

2. HAT Connector to local build environment
(Cordova CLI)

HAT Connector

HAT
HAT Companion app (add-on)

3. HAT Companion application

Android SDK Tools

Kapsel
2015 SAP SE or an SAP affiliate company. All rights reserved.

XCode
Public

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
2015 SAP SE or an SAP affiliate company. All rights reserved.

Public

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

Automatically built during HAT installation

for iOS and Android
You may also use a QR code to load the corresponding
application onto the mobile device. (double-click on
Companion app and select Scan)

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

Kapsel

Companion
app

Public

Simple steps to develop & deploy hybrid apps

Create

Build & Preview

Develop

Coding

New
project

Create

Source Code Editor with code

completion, dynamic API reference, etc.
Additional support for Cordova &
Kapsel

Develop

Preview

Deploy

Package & Deploy

to
SAP HANA Cloud

to
SMP (SMP3/HCPms)
Templates

WYSIWYG Design

Drag & Drop UI controls for layout

design

to
iOS and Android
devices

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

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

Public

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

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

Public

10

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

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

Public

11

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

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

Public

12

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

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

Public

13

Preview and test options

Create

Develop

Preview

Deploy

SAP Web IDE and HAT provide multiple options to preview the hybrid application
Option

Short description

Preview in browser with Cordova

Facade

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.

Preview on device emulator or

device connected via USB to
developer workstation

The HAT Companion app is installed to the emulator or device and

the hybrid app is pulled via URL into the Companion app.

Preview from device using

Companion App and scan QR-code
of application URL

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.

Run on device emulator or device

connected via USB to developer
workstation

The complete hybrid app is built into a Cordova container and

installed to the emulator or device.

The next slides describe these options

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

Public

14

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
Allow/Deny access to mobile features, i.e. camera of
laptop

Browser

Note: you must enable Cordova Faade previews in

Hybrid App Toolkit preferences

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

Public

15

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

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

Public

16

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
2015 SAP SE or an SAP affiliate company. All rights reserved.

Public

17

Preview vs. Run

Create

Preview on
SAP HANA Cloud Platform

1 SAP Web IDE

Preview

App

Develop

Preview

Deploy

Run on

SAP HANA Cloud Platform

Refresh

2 SAP Web IDE

URL

App

Run
Scan QR code *

Companion
app

Hybrid
mobile app

URL

HAT Connector

HAT Connector

Companion
app

App
Hybrid
mobile app

App

HAT
Companion app
1.

In SAP Web IDE: Preview on simulator or device

2.

Install and launch the Companion app

3.

Load application from HCP by URL to the application

4.

Possibility to refresh the application after modifications have been

made to the application in SAP Web IDE

* You may also scan a QR code in the Companion app to load the
application (double-tap in Companion app and scan) pull instead of push
2015 SAP SE or an SAP affiliate company. All rights reserved.

1.

In SAP Web IDE: Deploy to local HAT

(download the application to local workstation)

2.

In SAP Web IDE: Run on simulator or device

3.

Build hybrid app into Cordova container

4.

Install and launch hybrid mobile app

If changes are made to application, repeat steps 1 4

Public

18

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

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

Public

19

Deploy & publish the app

Create

SAP
Manually send your app (with profile for iOS)
to the Administrator of the SAP Mobile
Secure server
Upload and Sign the app
Publish it to SAP Mobile Place for
distribution
User selects the app in the store and installs
it to the mobile device

Publish

Mobile Secure
Server
Manual upload

Develop

Preview

SAP
Mobile Place

Deploy

App
Store

Install app

.apk file (Android)

.ipa file + profile (iOS)
Mobile
App

SAP Web IDE

Mobile Device
Developer workstation
2015 SAP SE or an SAP affiliate company. All rights reserved.

Public

20

Demo

Demo
Title of the demo

2015
2015SAP
SAPSE
SEororananSAP
SAPaffiliate
affiliatecompany.
company.AllAllrights
rightsreserved.
reserved.

2121

SAP TechEd Online

Continue your SAP TechEd education after the event!
Access replays of keynotes, Demo Jam, SAP TechEd live interviews, select lecture sessions, and more!
Hands-on replays

http://sapteched.com/online

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

Public

22

Further information
Related SAP TechEd sessions:
MOB160 - Develop Hybrid Mobile Apps with SAP Web IDE, Hybrid App Toolkit Add-On ( Hands-On)
MOB602 - Develop an SAP Fiori App with SAP Web IDE and Hybrid Application Toolkit ( CodeJam)
MOB162- Fiori style App development E2E (Hands-On)

SAP Public Web

scn.sap.com/community/mobile
sapmobilesecure.com
sapmobile-platform.com

SAP Education and Certification Opportunities

scn.sap.com/community/developer-center/mobility-platform
http://scn.sap.com/community/uac/mobile
www.sap.com/education

Watch SAP TechEd Online

www.sapteched.com/online
2015 SAP SE or an SAP affiliate company. All rights reserved.

Public

23

Useful links
SAP Web IDE

SAPUI5

SAP Web IDE at SAP Store:

SAPUI5 Developer Center- Demo Kit (interactive doc on SAPUI5

/ OpenUI5):

https://www.sapstore.com/solutions/60009/Web-IDE

SAP HANA Cloud Platform:

http://hcp.sap.com/index.html

SAP HANA Cloud Platform (SAP Web IDE trial beta):

https://account.hanatrial.ondemand.com/

Official documentation:
https://help.hana.ondemand.com/
under Platform Solutions choose SAP SAP Web IDE

Documentation within SAP Web IDE:

Choose Help > Documentation

https://sapui5.hana.ondemand.com/sdk/

OpenUI5:
http://sap.github.io/openui5/

UI Development with SAPUI5 documentation:

https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de
02b150bce3.html

SCN (SAP Community Network)

SAPUI5 & SAP Web IDE:
http://scn.sap.com/community/developer-center/front-end

Additional related information to SAP Web IDE

SAP HANA Cloud Platform:
https://help.hana.ondemand.com/
Go to SAP HANA Cloud Platform > Getting Started

SAP Fiori:
http://scn.sap.com/docs/DOC-41598

SAP for Mobile:

http://scn.sap.com/community/mobile

SAP Gateway:
http://help.sap.com/nwgateway20

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

Public

24

Feedback
Please complete your session evaluation for

MOB100
Contact information:
Matthias de la Roche
Product Manager
m.de.la.roche@sap.com

Thanks for attending this SAP TechEd session.

2015
2015
SAP
SAP
SESE
oror
anan
SAP
SAP
affiliate
affiliate
company.
company.
AllAll
rights
rights
reserved.
reserved.

Public

2525

 2015 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://global12.sap.com/corporate-en/legal/copyright/index.epx 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 forwardlooking 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.

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

Public

26