August 2015

SAP Web IDEDeveloping and Deploying Hybrid Mobile Applications

Provided by Technology RIG

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 2

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. 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 document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation 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 document is not a commitment, promise or legal obligation to deliver any material, code or functionality. 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. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP´s willful misconduct 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.

Legal disclaimer

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 3

Agenda

Developing and deploying hybrid mobile applications

Getting started

Additional information

* This presentation is based on SAP Web IDE up to release 1.9

Developing and deploying hybrid mobile applications

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 5

Mobile application types

NativeMobile App

Mobile Web

Web Browser

Hybrid

Mobile App

Kapsel

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 6

Mobile Qualities (Cordova and Kapsel plug-ins and APIs)

Hybrid app

*

* in future release

CameraCaptureGeolocationContactsAccelerometerDevice InformationNetwork ConnectionBattery StatusCompassMedia PlaybackAccess FileFile TransferDialog NotificationVibration NotificationGlobalizationSplash ScreenIn-App BrowserDebug ConsoleStatus Bar

Logon ManagerOffline ODataPushApp UpdateLoggerE2E TracingSettingsAuth Proxy Barcode ScanningCalendarEncrypted StorageVoice RecordingIn-App MessageApp PreferencesAttachment ViewerCache ManagerPrinterOnline Apps Toolbar

Kap

sel

Cor

dovaBarcode Reader

Offline Capability

Mobile Printing

Device Calendar

Device Tasks

Device Contacts

Camera

GPS

Voice Recording

Biometric Identification

Notifications

Digital Signature

OCR

...

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 7

SAP Fiori Runtimes

Fiori in browser Browser based apps Runs on all devices No installation required Coherent UX across devices

SAP Fiori Client Downloadable ‘native’ app Pre-packaged with commonly used Cordova

plug-ins for native device integration Improved performance Full screen operation Attachment viewing Native device integration Notification App Updates

Selected Mobile Platform Services can be used

Fiori Mobile with ‘Kapsel’ SDK Custom packaged & branded app Can be delivered on company store Native device integration Offers App Administration & Reporting Push Notifications* Offline application data* Use additional SAP Mobile Platform

services

Mobile Platform required

ONE ACCESS

Browser (Desktop or Mobile) Mobile only

*requires adapting Fiori app

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 8

SAP Fiori Runtime Context

URL

Fiori front-end server

App

e.g. SAP Gateway,Fiori Cloud (HCP)

OData

Fiori in browser

SAP Fiori (UI)launchpad

and applications

any browser * in future release

Fiori front-end server

App

SAP Fiori Client

URL

e.g. SAP Gateway,Fiori Cloud (HCP)

HCPms orSMP 3.0 SP03 PL02+OData

SAP Mobile Platform

SAP Fiori Clientor custom Fiori Client

SAP Fiori (UI)launchpad

and applications

*

Fiori front-end server

e.g. SAP Gateway,Fiori Cloud (HCP)

HCPms orSMP 3.0 SP03 PL02+OData

SAP Mobile Platform

Fiori Mobile app

App

Fiori Mobilewith ‘Kapsel’ SDK

*

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 9

Building apps with SAP Web IDE

SAP Web IDEHybrid

Application Toolkit

(SAP Fiori) hybrid mobile appSAP Fiori applicationSAPUI5 application

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 10

What is Hybrid Application Toolkit (HAT)?

Enables developers to develop and build Apache Cordova hybrid apps in SAP Web IDE

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 Command-Line Interface (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)

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 11

Enabling the Plugin

Choose the menu option Tools -> Preferences -> Optional Plugins

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 16

Templates for Hybrid apps

Hybrid templates are provided SAPUI5 Master Detail Kapsel Application SAPUI5 Mobile Kapsel Application Project SAPUI5 Master Detail with Photos

(provided with core SAP Web IDE) SAPUI5 Master Detail Kapsel Offline

Application

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

Create Develop Preview Deploy

Create a new projectFile > New > Project

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 17

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

Create Develop Preview Deploy

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 18

Configuring devices

Right mouse click on index.html file Device Configuration menu only

appears to Hybrid apps

Create Develop Preview Deploy

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 19

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 Façade previews in Hybrid App Toolkit preferences

Create Develop Preview Deploy

Browser

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 20

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

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

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 24

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

Create Develop Preview Deploy

Emulator

Device

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 25

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

Create Develop Preview Deploy

Emulator

Device

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 26

Preview vs. Run Create Develop Preview Deploy

SAP HANA Cloud Platform

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 HANA Cloud Platform

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 *

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 27

Deploy 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 App updates can then be deployed to

SMP/HCPms

Create Develop Preview Deploy

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

AppStore

Install app

SAP

SMP/HCPms

App update

Getting started

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 30

Getting started with SAP Web IDE

SAP Web IDE prerequisite: HCP account Web IDE on HCP Trial

https://account.hanatrial.ondemand.comafter logon, open subscription tab to subscript sapwebide

SAP Web IDE SAP Web IDE online help

https://help.hana.ondemand.com/SAP_RDE/frameset.htm?6284a94889db4f3cad001ba674282f20.html

This will explain:– opening SAP Web IDE– entering the Git settings– connecting remote systems,

including installation and setup of HANA Cloud Connector– setting SAP Web IDE preferences– enabling external plugins

Additional resources:

How to setup your SAP Web IDE on HCPhttp://scn.sap.com/community/developer-center/front-end/blog/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1

Prerequisites for HANA Cloud Connectorhttps://help.hana.ondemand.com/help/frameset.htm?e23f776e4d594fdbaeeb1196d47bbcc0.html

Download SAP HANA Cloud Connectorhttps://tools.hana.ondemand.com/#cloud

On SCN:http://scn.sap.com/docs/DOC-55465

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 31

Getting started with Hybrid Application Toolkit

Additional resources:

How to enable HCPms trialhttp://scn.sap.com/community/developer-center/mobility-platform/blog/2014/12/18/how-to-enable-hana-cloud-platform-mobile-services-trial

How to use SAP HCPms with an ABAP systemhttp://scn.sap.com/community/developer-center/mobility-platform/blog/2015/02/03/how-to-use-hcpms-with-an-abap-system

Get HAT package in SAP Storehttps://store.sap.com/sap/cp/ui/resources/store/html/SolutionDetails.html?pid=0000013586

Hybrid Application Toolkit (HAT) HAT online help

https://help.hana.ondemand.com/webide_hat/frameset.htmgo to Installing and Setting Up

The online help contains:– What’s new in the latest release– Installing and setting up– Getting started– Testing– Delivering and deploying– Troubleshooting

On SCN:http://scn.sap.com/docs/DOC-62033

Additional information

© 2015 SAP AG or an SAP affiliate company. All rights reserved. 33

Useful links

SAP Web IDE SAP Web IDE on HANA Marketplace:

http://marketplace.saphana.com/p/3334 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 UI Development Toolkit for HTML5 - 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?e8fdaa44bb5710148368de02b150bce3.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

© 2015 SAP AG or an SAP affiliate company. All rights reserved.

Thank You!

Provided by Technology RIG