mob260

MOB260

Mobilizing SAP HANA with SAP Mobile Platform

SAP TechEd 2013

2013 SAP AG or an SAP affiliate company. All rights reserved. 2

Agenda

Overview of the session

The Target Mobile Application

The Solution Architecture

The Exercise Steps

Overview of the session


Cordova

(PhoneGap) SAP UI5

SAP

Mobile

Platform

Session Overview

Goal of the session

Develop a mobile application based on SAP Mobile Platform and HANA

Scope of the session (technology)

SAP HANA SAP Mobile Platform

SAP UI5 Cordova / PhoneGap

SAP HANA


Cordova

(PhoneGap) SAP UI5

SAP

Mobile

Platform

Session Overview

Focus on the session

Learn how to integrate the different technologies in scope

Get familiar with the development process

This session is NOT a deep dive on HANA, SAP Mobile Platform, SAP UI5 or Cordova/PhoneGap.

SAP HANA


Hybrid

App

Theres more than one way to do this

HANA

SMP Native

App XS

HANA SMP Native

App

SAP

GW SMP

Hybrid

App

HANA

XS Sencha

HANA

UI5

Mobile

Browser

SMP

HANA

XS SAP UI5

Alternative 1

Alternative 3

Alternative 2

Alternative 4

Focus of this session

The Target Mobile Application


Mobile Solution Overview

Start Screen

SAP HANA

HA

NA

Ta

ble

s

HA

NA

Vie

ws

Top 10 Purchase Orders

.

Purchase Order Items

1M

Purchase

Orders

2M

Purchase

Order

Items


Flat Screens

Top 5 Purchase Order

Categories

Log in



Select Screen

SAP HANA

HA

NA

Ta

ble

s

HA

NA

Vie

ws

1M

Purchase

Orders

2M

Purchase

Order

Items

Show me the top 5 categories of Purchase Orders related to the Purchase Amount.


.



Flat Screens


Categories

Select

Category



Purchase Order List Screen

SAP HANA

HA

NA

Ta

ble

s

HA

NA

Vie

ws

1M

Purchase

Orders

2M

Purchase

Order

Items

Show me the top 10 invoices (related to the amount) for the selected Purchase Order Category


.



Flat Screens


Categories

Select

Purchase

Order



Purchase Order Detail Screen

SAP HANA

HA

NA

Ta

ble

s

HA

NA

Vie

ws

1M

Purchase

Orders

2M

Purchase

Order

Items

Show me the details of the selected Purchase Order.


.



Flat Screens


Categories

The Solution Architecture


SAP HANA

OData Service

Solution Architecture

Attribute

Views

Analytic

Views

Calculation

Views

SAP Mobile Platform

Mobile Application Connection Mobile Application Connection

Android App (with Cordova)

SAP UI5 Application

SAP UI5 Libraries

Models

Controllers

Views

Cordova

Libraries

Mobile Application Connection


SAP HANA

XS Engine

SAP HANA

Attribute View (Join)

Analytic View (OLAP)

Calculation View (Script or Graphical)

Data

Tables Data

Tables Data

Tables

OData

Service

HTTP

Service


SAP Mobile Platform

Mobile Application Connection Mobile Application Connection

SAP Mobile Platform

Mobile Application Connection

Application Settings

Proxy Settings

Security Settings

Device Settings Push Settings

Password Settings

OData

Service


Browser Component

SAP UI5 Application

SAP UI5

OData

Service Models Views

index.html

Other components (formatter, app,)

SAP UI5 Libraries

Models Controllers Views


HTML App

(f.e. SAP UI5 App)

Android

Application Project

Cordova / PhoneGap

Models

HTML App

HTML / JS /

CSS

Cordova Libraries

Windows Phone

Application Project

HTML App

Cordova Libraries

Android

App

Windows

Phone

App

The Exercise Steps


Student Image

Systems used in this session

The mobile solution of this session is developed in 4 steps.

Different systems and tools are used in each of these steps.

SAP HANA SAP Mobile

Platform

Eclipse SAP UI5

Eclipse Android

REST Client Tool

Browser

Cordova

Apache HTTP Server

SAP HANA Studio SAP Control Center


Step 1 : HANA

Overview

Goal of this step

Expose and test some HANA Views as an OData service

Systems/tools in scope

SAP HANA, Browser

Student Image

SAP HANA SAP Mobile

Platform

Eclipse SAP UI5

Eclipse Android

REST Client Tool

Browser

Cordova

Apache HTTP Server



SAP HANA

Repository

Step 1 : HANA

How do you develop an OData service on SAP HANA?

Packages

SAP HANA Studio

HANA Views

XS Objects

Repository Workspace

XS Project


SAP HANA

XS-project

Step 1 : HANA

How do you expose a SAP HANA View as an OData service?

In this session we use an a SAP HANA XS-project.

poinfo.xsodata

SAP HANA View Name

OData Collection Name

Name of the key


Step 2 : SAP Mobile Platform

Overview

Goal of this step

Configure and test mobile access to the OData service on the SAP Mobile Platform


SAP Mobile Platform, REST Client Tool

Student Image

SAP HANA SAP Mobile

Platform

Eclipse SAP UI5

Eclipse Android

REST Client Tool

Browser

Cordova

Apache HTTP Server



SAP Mobile Platform

Domain


How do you create a Mobile Application Connection with REST API?

Application Connection

LDAP

LDAP Security Configuration



How do you create a Mobile Application Connection with REST API?

SAP Mobile

Platform

/odata/applications/v1//Connections

HTTP Client

HTTP Body

HTTP Header

POST

Application Connection ID



How do you retrieve data from SMP using REST API?

SAP Mobile

Platform

/

HTTP Client

HTTP Body

HTTP Header

GET

X-SUP-APPCID = Application Connection ID

Response


Step 3 : SAP UI5

Overview

Goal of this step

Deploy and test a SAP UI5 application (that calls the OData service) on a local web server.


SAP HANA, SAP Mobile Platform, Apache HTTP Server, Eclipse SAP UI5, Browser

Student Image

SAP HANA SAP Mobile

Platform

Eclipse SAP UI5

Eclipse Android

REST Client Tool

Browser

Cordova

Apache HTTP Server



Step 3 : SAP UI5

How do you access an OData Service from a SAP UI5 Application?

SAP UI5 Application

Views

Controllers

Models OData

Service

var oModel = new sap.ui.model.odata.ODataModel(

",

true,

userName,

passWord);

SAP UI5 Libraries


Step 3 : SAP UI5

How do you test the SAP UI5 Application?

To avoid the same-origin policy of the browser, an Apache Web Server will be used to host the SAP

UI5 Application and to proxy the OData Web Service.

This way the SAP UI5 Application and the OData service seem to use the same host (for the browser)

SAP UI5 Application

Views

Controllers

Models

OData

Service

Apache Web Server

Proxy

Browser


Apache

Server

SAP UI5 Application SAP Mobile

Platform

Domain

SAP HANA

Step 3 : SAP UI5

How do you test the SAP UI5 Application?

Views

Controllers

Model

Browser OData

Service

Security

Configuration

Application

Connection

Apache Host

Apache Port

SMP Domain

SMP Security

Configuration

Proxy


Step 4 : Cordova

Overview

Goal of this step

Package the SAP UI5 application to an Android app using Cordova


Eclipse Android, Cordova

Student Image

SAP HANA SAP Mobile

Platform

Eclipse SAP UI5

Eclipse Android

REST Client Tool

Browser

Cordova

Apache HTTP Server



Step 4 : Cordova

How does do you use Cordova to package a web application to native?

Develop SAP UI5 as Web App

Test SAP UI5 App on server

Using Cordova, generate a native mobile OS

application project

Import native mobile OS application project into

native OS IDE

Import SAP UI5 libraries and SAP UI5 App Files

into native mobile OS application project

Compile native mobile OS application project into

native app and deploy

SAP UI5 Eclipse

Server

Cordova

Android Eclipse

SAP UI5

App Files

Android

Project

SAP UI5

App Files

SAP UI5

Libs

SAP UI5

App Files

SAP UI5

Libs

Android App

SAP UI5

Libs

SAP UI5 App

SAP UI5 Libs

Android

Project

1

2

3

4

5

1

2

3

5

6 4

6


Step 4 : Cordova

How does do you use Cordova to package a web application to native?

SAP UI5 Application Android Eclipse

HTML Start Page

Android Project

Index.html

Cordova Libraries

Android App

SAP UI5 Libs

SAP UI5

App

SAP UI5

Libraries

SAP UI5 JavaScript

Pages

Merge

Import

Import Cordova

Libraries


SAP TechEd Virtual Hands-on Workshops and SAP TechEd Online Continue your SAP TechEd education after the event!

SAP TechEd Virtual Hands-on Workshops

Access hands-on workshops post-event

Available January March 2014

Complementary with your SAP TechEd registration

SAP TechEd Online

Access replays of keynotes, Demo Jam, SAP TechEd LIVE interviews, select lecture sessions, and more!

View content only available online

http://saptechedhandson.sap.com/

http://sapteched.com/online

Feedback Please complete your session evaluation for MOB260.

Thanks for attending this SAP TechEd session.


2013 SAP AG 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 AG.

The information contained herein may be changed without prior notice.

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

National product specifications may vary.

These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and

SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group 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.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and

other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

mob260

Documents

sap ag

sap mobile platform

sap affiliate company

purchase order items

categories of purchase

purchase order categories

purchase orders flat

hana scope