MOB100 pdf

Public

MOB100 Develop Mobile Apps with SAP Web IDE, Hybrid App Toolkit Add-On

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

Speakers

Las Vegas, Oct 19 - 23

Matthias de la Roche

Barcelona, Nov 10 - 12

Matthias de la Roche


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.


Mobile application types

Native

Mobile App

Mobile Web

Web Browser

Hybrid

Mobile App

Kapsel


Building apps with SAP Web IDE

SAP Web IDEHybrid

Application

Toolkit

(SAP Fiori) hybrid mobile appSAP Fiori applicationSAPUI5 application


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

HAT has 3 components that are provided as a 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)

3. HAT Companion application

SAP HANA Cloud Platform

SAP Web IDE

HAT

(add-on)

Android SDK Tools

XCode

HAT Connector

HAT Companion app

Kapsel

Hybrid

Application

Toolkit

(plugin)


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


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

Companion

app

Kapsel


Simple steps to develop & deploy hybrid apps

New

project

Create Develop

Git integration

* not in current GA release, planned for future release

Build & Preview Package & Deploy

Create Develop Preview Deploy

Templates

Coding

WYSIWYG Design

Source Code Editor with code

completion, dynamic API reference, etc.

Additional support for Cordova &

Kapsel

Drag & Drop UI controls for layout

design

to

SAP HANA Cloud

to

iOS and Android

devices

to

SMP (SMP3/HCPms)


Templates for Hybrid apps

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


Create a new project

File > New > Project

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

* provided with core SAP Web IDE


Configuring devices

Basic app information

Platform (iOS, Android)

Plugins used in the application

Application icon

Application splash screen

SAP mobile services system for testing



Coding (assisted development)

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



Layout Editor (WYSIWYG)

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



Preview and test options

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



Preview in browser with Cordova Facade

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

Note: you must enable Cordova Faade previews in

Hybrid App Toolkit preferences


Browser


Live preview to test native device APIs

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


Emulator

Device


Run on emulator or 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


Emulator

Device


Preview vs. Run Create Develop Preview Deploy


SAP Web IDE

HAT Connector

App

Preview on

2

3

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


SAP Web IDE

HAT Connector

Run on

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

1Preview

2Run

4

Companion

app

URL

App

1

3

Hybrid

mobile app

App

Hybrid

mobile app

App

Companion

app

URL

HAT

Companion app

4Refresh

Scan QR code *


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 theproject

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


Deploy & publish the app

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


SAP

Mobile Secure

Server

SAP

Mobile Place

Publish

.apk file (Android)

.ipa file + profile (iOS)

Developer workstation

SAP Web IDE

Manual upload

Mobile

App

Mobile Device

App

Store

Install app


SAP TechEd OnlineContinue your SAP TechEd education after the event!

http://sapteched.com/online

Access replays of keynotes, Demo Jam, SAP TechEd live interviews, select lecture sessions, and more! Hands-on replays


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


Useful links

SAP Web IDE

SAP Web IDE at SAP Store: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

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 Gateway:http://help.sap.com/nwgateway20

SAPUI5

SAPUI5 Developer Center- Demo Kit (interactive doc on SAPUI5 / OpenUI5):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

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

SAP for Mobile:http://scn.sap.com/community/mobile

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

Please complete your session evaluation for

MOB100


Contact information:

Matthias de la RocheProduct [email protected]

Thanks for attending this SAP TechEd session.

Feedback


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

Documents

MOB100 pdf