Mobile Shopping SAP

SAP HANA Cloud Development Scenario (ESPM Mobile Shopping Scenario)

1

SAP HANA Cloud End-to-End-Development Scenarios

ESPM Mobile Shopping Scenario

Version 1.0


2

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

This tutorial intends to complement SAP product documentation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting. Any software coding and/or code lines / strings (“Code”) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

Disclaimer: Some components of this product are based on Java™. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components. Any Java™ Source Code delivered with this product is only to be used by SAP’s Support Services and may not be modified or altered in any way.

http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark

http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark


3

Table of Contents

Introduction ................................................................................................................................. 4

1 Installation ........................................................................................................................ 6

1.1 Execute ESPM Installation Guide................................................................................................. 6

1.2 Android SDK and ADT Plugin Installation .................................................................................... 6

1.3 PhoneGap Installation ............................................................................................................... 13

1.4 Checkout scenario-mobileshop branch and import Maven Projects ........................................ 14

2 Develop SAPUI5 Mobile Shopping Application ................................................................. 21

2.1 Run ESPM Mobile application on SAP HANA Cloud local runtime ............................................ 21

2.2 Development Details: espm-mobile-shopping-web application ............................................... 27

2.2.1 Development Details ............................................................................................................. 27

2.2.2 SAP Mobile Platform, enterprise edition, cloud version Configuration (Optional) .............. 30

3 Deploy and run the ESPM Mobile Shopping Application on an Android Device .................. 46

3.1 Android Project Creation ........................................................................................................... 46

3.2 Running the Android Project in an Android Emulator/Device .................................................. 56

3.2.1 Android Emulator Creation ................................................................................................... 56

3.2.2 Run ESPM Mobile Application on Android Emulator ............................................................ 61

4 Tutorial Documentation History ....................................................................................... 64


4

Introduction

What do you get here?

This end-to-end tutorial offers a walk-through of the ESPM Mobile Shopping application scenario for a developer. The Mobile Shopping application is based on an Enterprise Sales and Procurement Model (ESPM).

It guides you through the ready-to-run ESPM Mobile Shopping development scenario which includes:

Set up of your HANA Cloud Development Environment from scratch (Section 1) Walk through the various Mobile Shopping UI components developed using SAPUI5 mobile

libraries (Section 2) Retrieval of data using SMP(SAP Mobile Platform, enterprise edition, cloud version) from two

different backend systems i.e. HANA Cloud and ABAP backend using OData Services (Section2)

Publish and run the Mobile Shopping application on SAP HANA Cloud local runtime for testing (Section 2)

Finally it is explained, how the developed SAPUI5 Mobile Application can be deployed and run on your Android device (Section 3)

Scenario Overview

The End to End Development Scenario in one picture


5

Scenario Walk through Details

Here the customer can browse through the various products available, view its details and then shop for the products online using a mobile device.

Now you can try out the tutorial by executing the steps of the following chapters:

1. Various installation details required to develop the app (see chapter 1)

2. Walk through the source code and run the SAPUI5 mobile application on Web Browser (see chapter 2)

3. Deploy and run the application on an Android device (see chapter 3)


6

1 Installation

Overview

Before you walk through and develop the ESPM Mobile Shopping Scenario, you need to download

and set up the necessary tools, which include e.g. Eclipse IDE for Java EE Developers and Eclipse Tools

for SAP HANA Cloud. Furthermore you need to download the ready-to-run ESPM sources.

1.1 Execute ESPM Installation Guide

Make sure that you have executed all steps of chapter 1 and 2 of the ESPM Installation Guide before

continuing with this tutorial:

Download ESPM Scenarios Installation Guide from here:

SCN Cross-Technology Developer Center documents list (SAP Community Network)

After you have executed these two chapters, you have to execute two additional installation steps to

deploy and run finally (see chapter 3) the ESPM Mobile shopping application on an Android device.

1.2 Android SDK and ADT Plugin Installation (as described in section 1.2)

1.3 PhoneGap Installation (as described in section 1.3)

For starting then in chapter 2 with the walk through of the ESPM Mobile Shopping application you

have to check out then the scenario-mobileshop branch of the already downloaded cloud-espm-

scenarios Git repository and then import the corresponding projects.

1.4 Checkout scenario-mobileshop branch and import Maven Projects (see section 1.4)

Execute these additional steps as described in the following three sections.

1.2 Android SDK and ADT Plugin Installation

Download the Android SDK from here: http://developer.android.com/sdk/index.html as described in the following steps

1. Choose the option USE AN EXISTING IDE and then click on Download the SDK Tools for Windows

http://scn.sap.com/community/developer-center/cross-technology/content?filterID=content~objecttype~objecttype%5Bdocument%5D

http://developer.android.com/sdk/index.html


7

2. Accept the teams and conditions and then choose Download the SDK Tools for Windows

3. Double-click the executable (.exe file) to start the installation.


8

4. Follow the steps to download the android SDK. Make sure you specify the path for the download as C:\dev\android-sdk

5. Once the installation completes, the installer offers to start the Android SDK Manager. 6. Uncheck the checkbox for “Start SDK Manager” and choose Finish.

Installing Eclipse ADT Plugin

1. If your eclipse has not been started, start eclipse. Then select Help Install New Software. 2. Click Add... 3. In the Add Repository dialog that appears, enter "ADT Plugin" as Name and the following URL

as Location

https://dl-ssl.google.com/android/eclipse/


9

4. Click OK. 5. In the Available Software dialog, select the checkbox next to Developer Tools and click Next.

6. In the next window, you'll see a list of the tools to be downloaded. Click Next. 7. Read and accept the license agreements, then click Finish.

If you get a security warning saying that the authenticity or validity of the software can't be established, click OK.

8. When the installation completes, restart eclipse. Once eclipse restarts, you might get one or more pop ups to open Android SDK Manager. Do not open the Android SDK Manager. Instead choose the Close button to close the pop up.


10

9. After Eclipse restarted you have to specify the location where you downloaded before the

Android SDK. a) Select Windows Preferences Android Browse... b) Navigate to the location where you downloaded the Android SDK Click Apply

Click Ok

At this stage you might get 2 pop ups saying “SDK Platform Tools component is missing” and “The Android SDK requires the new Build Tools component to be installed”. Do not open the SDK Manager and click on the Close button to close the pop up.


11

10. In eclipse open the Java perspective (Windows Open Perspective Java) 11. Open Android SDK Manager by choosing the corresponding toolbar button with tooltip

Android SDK Manager.

12. Select Android SDK Platform Tools, Android 4.2.2 (API 17) and click Install Packages

In case you are working behind a proxy, set your proxy by clicking in the menu bar of the Android SDK Manager window Tools Options

Google APIs, MIPS system Image, Intel x86 Atom System Image are optional for installation


12

13. In the Next page Accept License and click Install

14. Once the download completes the SDK Manage displays the corresponding packages as

Installed

15. Close the Android SDK Manager 16. Then restart your Eclipse IDE.


13

1.3 PhoneGap Installation

1. Download PhoneGap from here: http://phonegap.com/download/#

2. Extract the downloaded contents into the folder C:\dev\phonegap-2.9.0 3. Read and accept the license agreements, then click Finish.

If you get a security warning saying that the authenticity or validity of the software can't be established, click OK.

This application has been built and tested using PhoneGap 2.9.0 version.

This tutorial should also work with a newer version of PhoneGap.

http://phonegap.com/download/


14

1.4 Checkout scenario-mobileshop branch and import Maven Projects

After you have executed chapter 1 and 2 of the installation guide you have the following situation in

your Eclipse IDE:

1. Make sure that you use again Java EE perspective

Then your Project Explore and Git Repository should look similar as in the following picture

2. You have a checked out master branch (see checked icon in the Git Repositories view) and a

scenario-webshop branch in cloud-espm-scenarios/Branches/Local (created in section 2.1.2 of the ESPM Installation Guide)

3. You have the corresponding Maven Projects imported in Eclipse Project Explorer view (imported in section 2.2 of the ESPM Installation Guide)

Now you want to check out the new branch scenario-mobileshop and import the corresponding Maven projects so that you can start with chapter 2 of this tutorial.

The ESPM Mobile Shopping application sources are also part of the master branch so that you could work in this tutorial also with the master branch.

But we want to focus in this tutorial only on the ESPM mobile application and not the other ESPM applications which are part of the master branch. Especially for beginners it might be easier to have only those sources checked-out and imported as Maven projects which are relevant for the tutorial. That is what we describe here.


15

Execute the following steps:

Delete all before imported ESPM Maven Projects

1. Select all ESPM project nodes in Project Explorer view

2. Open context menu and choose Delete to open Delete Resources dialog

3. Make sure that the option Delete project contents on disk is not selected and then choose OK

4. In case a Delete Resources dialog comes up and complains about “not in sync” resources then confirm with Continue.

In case you have already a Servers project in your Project Explorer view then do not select and delete it with the ESPM projects.

The Servers node appears as soon as you run an ESPM web application on the local SAP HANA Cloud runtime. This you might have already done when you executed the optional chapter 3 of the ESPM Installation Guide.


16

After this all ESPM projects are removed from Projects Explorer view (just the Servers

project node still exists).

Reset master branch

To avoid any problem when creating a new branch scenario-mobileshop you delete all folders from

Working Directory and then reset the master branch as follows

1. In Git Repositories view expand Workspace Directory node of the cloud-espm-scenarios Git repository

a. Select all folders but not the .git folder b. Open context menu and choose Delete


17

c. Confirm Delete Resource dialog with OK so that all folder are deleted from Working Directory (i.e. file system)

2. In Git Repositories view select master branch node

3. Open context menu and choose Reset…

4. In the opened Reset dialog select the option Hard and then press Finish. Confirm the opened dialog with Yes.

With these steps you have reset the master branch to avoid conflict when the new Git branch.


18

Create and check-out new scenario-mobileshop branch

In the same way as the ESPM Installation Guide described in section 2.1.2 how to check out the

scenario-webshop branch you should now check out scenario-mobileshop branch so that your

Eclipse Git Repository view looks similar to the following picture:

Import ESPM Maven Projects of checked-out branch

In the same way as the ESPM Installation Guide describes in section 2.2 how to import the ESPM

Maven Projects of the checked out master branch you now import the corresponding ESPM Maven

projects for the checked-out scenario-mobileshop branch

In short

1. In the Eclipse main menu: File Import... ; Maven Existing Maven Projects 2. Choose Next and then choose Browse... and navigate to location C:\dev\git\cloud-espm-

scenarios (or where you downloaded before this Git Repository)


19

3. Choose Finish to import all ESPM projects as Maven projects 4. Four projects should be imported into your Eclipse Project Explorer view. They should not

have any compile error.

Delete server nodes in Servers view

In case you have already a Servers project in your Project Explorer view then delete now the corres-

ponding SAP HANA Cloud server runtime(s) otherwise just skip the following server deletion steps

If you have e.g. executed the entire chapter 3 of the ESPM Installation Guide then you have one local

SAP HANA Cloud server runtime and one SAP HANA Cloud server as server nodes in your Servers

view. Execute the following steps to delete them both

1. In Eclipse Servers view select first SAP HANA Cloud local runtime node in Servers view


20

a) Open context menu and choose Delete

The Delete Server dialog opens. b) Keep the default settings and confirm with OK to delete the local server

2. Then select SAP HANA Cloud node (espm.<p-user>trial at hanatrial.ondemand.com) in Service view (were the espm cloud application is still running on)

a) Open context menu and choose Delete

The Delete Server dialog opens. b) Deselect the option Stop server(s) before deleting c) Choose OK to remove your HANA Cloud server node from servers view without

deleting your running espm application

After this your Servers view does not contain a server node any more.

Having now imported the two ESPM projects espm-mobile and espm-mobile-shopping-web which corresponds to the sources of the mobile shopping scenario you can now start with chapter 2 of this tutorial.


21

2 Develop SAPUI5 Mobile Shopping Application

Overview

In this section you run the ESPM Mobile Shopping application in a Chrome Web browser and get all

the details about how this application technically works.

What have you got so far?

After executing the installation chapter 1 you have installed and configured you Development

Environment to develop SAP HANA Cloud mobile applications. Also you have already downloaded all

ESPM sources as Git repository to location C:\dev\git and you have imported the ESPM Mobile

Shopping application projects into your Eclipse workspace.

To walk through and describe the developed ESPM Mobile Shopping application this chapter has

been structured as follows:

1. Run ESPM Mobile application on SAP HANA Cloud local runtime (see section 2.1)

2. Technical details about the Mobile application (see section 2.2)

2.1 Run ESPM Mobile application on SAP HANA Cloud local runtime

SAP HANA Cloud local server

With the following steps you create a local SAP HANA Cloud server runtime. First the server is created and then the connectivity destinations are imported so that the applications know from connectivity service which backend they have to use to read and write business application data.

Create SAP HANA Cloud local server

1. In Eclipse select Servers view (If not already open: Eclipse menu Window Show View Others...)

2. On the Servers view open right mouse context menu and choose New Server (or if this is the first server you create in the view choose instead the No servers are available. Click this link to create a new server… link). New Server wizard opens


22

3. Select SAP SAP HANA Cloud local runtime 4. Choose Finish to create a new local SAP HANA Cloud server which is visualized as a new

node in Eclipse Servers view

Configure SAP HANA Cloud local server

1. In Servers view double-click on newly created server node to open server editor 2. If you are working in a Network where a proxy is defined (otherwise skip this step 6):

Make sure that the following proxy settings are defined according to your values a. In opened server editor find the 'Open launch configuration' link and choose it

b. Switch to Arguments tab and Add the following string as vm Arguments (adapt

the proxy values to the one you have to use)

-Dhttp.proxyHost=proxy -Dhttp.proxyPort=8080 -Dhttps.proxyHost=proxy -Dhttps.proxyPort=8080 -Dhttp.nonProxyHosts=*.corp


23

c. Confirm configuration dialog with OK

3. Back on the server editor: Switch to Connectivity tab 4. Import the existing ESPM connectivity destinations from project espm/destinations

5. Choose import icon of the Connectivity Destinations editor to open a file system explorer. Navigate to <local-gitrepo-path>/cloud-espm-scenarios/destinations

Select the first destination abapmobilebackend (unfortunately multi selection is not working so far) and then choose Open.


24

6. Save the connectivity editor

7. Do the same for the 'cloudmobilebackend' destination.

Run ESPM Mobile Shopping Application on SAP HANA Cloud local server

The ESPM Mobile Shopping project is the imported Maven Project with name espm-mobile-shopping-web. This is the web project you will run now on the before created and configured local server. Execute the following steps:

1. In Eclipse Project Explorer view select project node espm-mobile-shopping-web 2. On the selected project node open context menu and choose Run As Run on Server.


25

3. Window Run On Server opens. Make sure that the Choose an existing server option is

selected.

4. Choose localhost SAP HANA Cloud local runtime 5. Choose Finish.

The local runtime starts up in the background and the espm-mobile-shopping-web Application is installed, started and ready to serve requests. After about a minute the application is launched with the external Web browser (as you configured this in ESPM Installation Guide in section 1.8)

The initially launched URL is http://localhost:8080/espm-mobile-shopping-web/ and displays the initial page of the ESPM Mobile Shopping application.

http://localhost:8080/espm-mobile-shopping-web/


26

What you see is the ESPM Mobile Shopping application developed with SAPUI5 UI control library and launched as a Web application. It is using the new Fiori design theme (technically sap_bluecrystal).

You can play around with this application an buy products with it.

In the next section 2.2 you will get the development details how this ESPM Mobile Shopping application is built up.

SAPUI5 Mobile applications launched as Web application

1. Use only the Chrome Web browser to render all the controls correctly.

2. At the end of the initially launched URL append ?sap-ui-xx-fakeOS=android

to run the application as an android application where all controls will be

rendered as android controls as shown in the following picture.


27

2.2 Development Details: espm-mobile-shopping-web application

2.2.1 Development Details

This app is built using SAPUI5. SAPUI5 provides dedicated control library for mobile devices like tablets and smartphones with the technical name sap.m. Both sap.m and the control libraries for the desktop (sap.ui) are based on the same Runtime which provides a common infrastructure for Data Binding, Model View Controller Concepts, Localization and other topics. In addition both control sets have a harmonized API for the common parts. This makes it easy for the application developer to efficiently build applications for both scenarios. As SAPUI5 is based on web standards like HTML, CSS and JavaScript you can run the application on multiple platforms while the Mobile Visual Identity theme makes users feel comfortable on both Android and Apple devices.

This app is built using the Model View Controller concept for mobile. According to the MVC paradigm, the View is responsible for defining and rendering the UI, the Model manages the application data, and the Controller reacts to View events and user interaction by modifying View and Model.

The app also uses OData Model which enables binding of controls to data from OData services.

The app reads data via SMP (SAP Mobile Platform, enterprise edition, cloud version).

SAP Mobile Platform, enterprise edition, cloud version provides a single comprehensive Web administration and monitoring portal for configuring and managing mobile applications. The SAP Mobile Platform, enterprise edition, cloud version (mobile platform) REST Services API enables standard HTTP client applications running in any platform to access mobile platform REST services. The mobile platform services are exposed as REST services that can be consumed from any HTTP enabled client. This development approach supports:

Create your own Gateway service:

Trial Editions of SAP NetWeaver Application Server ABAP 7.4 are available in SCN. Please refer

the the Link about using the trial editions. The document talks about the setup and running of

the ABAP 7.4 trial instances.

You can use these trial editions to build your own OData services. You can use the Enterprise

Procurement Model(EPM) model as your demo data. This model is part of every SAP NetWeaver

ABAP server from 7.02.

Please refer the Link for detailed tutorial on developing the OData services.

Data Binding and Model View Controller Architecture

https://sapui5.hana.ondemand.com/sdk/#docs/guide/Introduction.1.html

SAPUI5 API Reference of controls specialized for mobile devices

https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.m.html

http://scn.sap.com/docs/DOC-41566



https://sapui5.hana.ondemand.com/sdk/#docs/guide/Introduction.1.html

https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.m.html


28

Registration (creating an application connection) Authentication Native push notification Configuration

You can build your client applications using third party developer tools. The mobile platform provides

the ability to consume REST services that are hosted on cloud or on premise.

This app reads data from two different backend types: o HANA Cloud backend - using Java OData Service o ABAP backend - using ABAP Gateway OData Service

Open espm-mobile-shopping-web/src/main/webapp/espm-mobile-shopping/Category.controller.js

o The first step, to read the data from an OData service via SMP, is that we explicitly register the application connection using the mobile platform. We specify customized application properties for the client with the request. We provide the application connection ID, X-SUP-APPCID, using an explicit request header or a cookie.

Further details on SAP Mobile Platform HANA Cloud released version

https://help.hana.ondemand.com/mobile/frameset.htm?SMP_welcome.html



29

o Here we create an anonymous application connection by issuing a POST request to the URL "https://smpmaas-espmhana.netweaver.ondemand.com/public/odata/applications/latest/espm_shopping_cloud/Connections" and include the application connection properties in the request payload. This is done in the code snippet specified below:

o The second step is that after we have successfully registered the application

connection using the X-SUP-APPCID, we can then read the actual data by accessing your OData service through a Proxy URL as "https://smpmaas-espmhana.netweaver.ondemand.com/public/espm_shopping_cloud/". This is done in the function below:

Open espm-mobile-shopping-web/src/main/webapp/espm-mobile -shopping/ShippingDetails.controller.js

o Here we use the OData Model to create the customer as shown in the code snippet below :

Further details on the same can be found here https://help.hana.ondemand.com/mobile/frameset.htm?doc/html/mdw1350899982857

.html

$(function(){

jQuery.sap.require("sap.ui.model.odata.ODataModel");

mHeaders = { "X-SUP-APPCID" : appC.appCID};

appC.oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,false, null,

null,mHeaders);

appC.oModel.refreshSecurityToken();

appC.oModel.setSizeLimit(100);

appC.oModel.attachRequestFailed(function(evt) {

alert("Server error: " + evt.getParameter("message") + " - " +

evt.getParameter("statusText"));

});

jQuery.sap.log.debug(appC.oModel);

sap.ui.getCore().setModel(appC.oModel);

});

mHeaders = { "X-SUP-APPCID" : appC.appCID};

this.loginModel = new sap.ui.model.odata.ODataModel(newUrl, false, null,

null, mHeaders);

var oEntry = {};

oEntry.DeviceType = sap.app.config.deviceType;

this.loginModel.create(sap.app.config.connection, oEntry, null,null);

Further details on SAP Mobile Platform HANA Cloud released version

https://help.hana.ondemand.com/mobile/frameset.htm?SMP_welcome.htm

l

https://help.hana.ondemand.com/mobile/frameset.htm?doc/html/mdw1350899982857.html

https://help.hana.ondemand.com/mobile/frameset.htm?doc/html/mdw1350899982857.html




30

Open espm-mobile-shopping-web/src/main/webapp/espm-mobile-

shopping/CreditCardDetails.controller.js o Here we use the OData Model to create the Sales Order as shown in the code snippet

below:

2.2.2 SAP Mobile Platform, enterprise edition, cloud version Configuration

(Optional)

You can run the espm-mobile-shopping-web project using the default settings of the SAP Mobile Platform, enterprise edition, cloud version (SMP). If you want to set up your own applications in SMP, follow the below sections till the end of this chapter 2.

In the following we describe how the developer, Lisa Gordan, makes use of the SMP (SAP Mobile Platform, enterprise edition, cloud version) to run the ESPM Mobile Shopping application with it.

Lisa Gordan has an SCN user account for p-user: p1940112634 and a developer HANA Trial account: p1940112634trial (which she created as described in the ESPM Installation Guide, see there section 2.1)

In all steps described below use your own SCN user account (p-user/password) and SAP HANA Cloud trial account instead of the one of Lisa Gordan. Make sure that you have this account data available here.

2.2.2.1 Launching SMP (SAP Mobile Platform, enterprise edition, cloud

version)

1. Open your SAP HANA Cloud trial (developer) account

https://account.hanatrial.ondemand.com/ and login by specifying your username and

//creating sales order using OData model

appC.oModel.create(sap.app.config.salesOrderHeaderCollection, oEntrySo, null, function(oData, oResponse){ //Sales Order Creation successful

appC.salesOrderId = oResponse.data.SalesOrderId; }, function(oError){ //Sales Order Creation failed

});

//using OData model for Customer creation

appC.oModel.create(sap.app.config.customerCollection, oEntry, null,

function(oData, oResponse){

//Customer Creation successful

sap.m.MessageToast.show(successMsg);

var param = { details : oResponse.data };

appC.navTo("CreditCardDetails", false, undefined, param);

},function(oError){

//Customer Creation Failed

sap.m.MessageToast.show(errorMsg);

});

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


31

password.

2. By default the Application are displayed in the SAP HANA Cloud account after Log On.

3. To launch the SAP Mobile Platform, enterprise edition, cloud version (SMP) you have to

choose the Services tab and then click on the corresponding SMP service as shown in the

next picture

Beside the welcome application (which every developer has in its account) Lisa Gordan has a second application named espm in her application list. She has the application because she executed already the optional chapter 3 of the ESPM Installation Guide. You might only see the welcome application if you haven’t executed it.


32

4. This SMP service is launched in another Web browser window

SAP Mobile Platform Administration and Monitoring portal

The direct URL to access SAP Mobile Platform Administration and Monitoring portal for a trial (developer) account is https://smp-<account_name>.hanatrial.ondemand.com/Admin


33

2.2.2.2 Create Applications via SMP Admin Portal

Now you create two applications, each of it connects to a different backend for retrieving the business data of the Mobile Shopping application

First application for reading the data from the HANA Cloud backend (espm_shopping_cloud) Second application for reading the data from the ABAP Cloud backend

(espm_shopping_abap)

Read first the disclaimer and then execute the below steps to create these both applications by mean of your SMP Administration portal.

Create espm_shopping_cloud Application (for HANA Cloud backend)

1. In the SMP Admin Portal switch to APPLICATIONS tab

SMP Admin Portal: Avoid entering whitespaces

When you create as described below the two applications then make sure that you do not

enter whitespaces, i.e. a SPACE character, in any of the value fields. By copying a string

from this document to the value field this happens easily and then you have to remove the

space character from the end of the copied string!

Disclaimer: Usage of public ESPM OData services (ABAP and SAP HANA Cloud)

In this scenario the developed Cloud applications connect either to an ABAP backend system or an HANA Cloud system via OData connectivity. For testing this connectivity there are two publically available systems:

ABAP backend: OData service is coming from a cloud hosted ABAP 7.4 SP2 system can be used:

OData Service Url: http://54.225.119.138:50000/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/

public user/password: ESPM_TEST/Espm1234

HANA Cloud backend: OData service(s) is coming from a HANA Cloud Application

OData Service Url: https://cloudmodelespmhana.hana.ondemand.com/espm-cloud-web/espm.svc/

Terms of Use The OData service of both backend systems ABAP and HANA Cloud shall only be used for test purposes of the described development scenario. The OData service must not be used in any productive application. It is planned to reset the systems once a week and there is no guarantee that the system is always available.

http://54.225.119.138:50000/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/

https://cloudmodelespmhana.hana.ondemand.com/espm-cloud-web/espm.svc/


34

2. Choose New to open a New Application dialog for specifying the application to be created.

a. Enter the following values for the application which connects to the SAP HANA Cloud

backend

ID espm_shopping_cloud

Name espm mobile shopping for cloud

Vendor (optional) SAP

Version (optional) 1.0 (default)

Description (optional) espm mobile shopping for cloud

b. Choose Save to create the application

After saving an Application window for configuring Backend, Authentication, etc. comes up. The Status in the lower left area of the window says that Endpoint and Authentication (URL, profile) for the application needs to be specified.

Do this by executing the following steps


35

BACKEND tab parameters to be used

Endpoint (see above Disclaimer info box):

Connect to: Internet Rewrite URL: selected Allow anonymous connections: selected

c. Then switch to AUTHENTICATION tab to specify the Authentication URL/profile

Connect to field

Internet - indicates that the EIS (Enterprise Information System) is in the same network as Cloud

OnPremise - indicates that the EIS is beyond the security firewall.



36

AUTHENTICATION tab parameters to be used

Profile Security Profile: New Security Profile Name: espm_shopping_cloud_sec

Type Authentication Type: Basic Authentication Authentication URL (see above Disclaimer info box):

Connect to: Internet

d. Choose Save and confirm the Confirm Update dialog with Yes.

Then you will see newly created espm_shopping_cloud application in the list of applications on the APPLICATIONS tab.



37

Create espm_shopping_abap Application (for ABAP backend)

1. In the SMP Admin Portal make sure the APPLICATIONS tab is selected

2. Choose New to open a New Application dialog for specifying the application to be created.

a. Enter the following values for the application which connects to the SAP HANA Cloud

backend

ID espm_shopping_abap

Name espm mobile shopping for ABAP

Vendor (optional) SAP

Version (optional) 1.0 (default)

Description (optional) espm mobile shopping for ABAP

b. Choose Save to create the application

After saving an Application window for configuring Backend, Authentication, etc. comes up. The Status in the lower left area of the window says that Endpoint and Authentication (URL, profile) for the application needs to be specified.


38

Do this by executing the following steps

BACKEND tab parameters to be used

Endpoint (see above Disclaimer info box):

Connect to: Internet Rewrite URL: selected Allow anonymous connections: selected User name: ESPM_TEST Password: Espm1234

c. Then switch to AUTHENTICATION tab to specify the Authentication URL/profile



39

AUTHENTICATION tab parameters to be used

Profile Security Profile: New Security Profile Name: espm_shopping_abap_sec

Type Authentication Type: Basic Authentication Authentication URL (see above Disclaimer info box):

Connect to: Internet

e. Choose Save and confirm the Confirm Update dialog with Yes.

Then you will see newly created espm_shopping_abap application in the list of applications on the APPLICATIONS tab.

2.2.2.3 Create Connections for reading Images

Create Cloud Images Connection

1. Navigate to SETTINGS CONNECTIONS tab



40

2. Choose New to open New Connection dialog

3. Enter the following values for the new espm_shopping_cloud_img connection

a. Connection Name: espm_shopping_cloud_img b. Endpoint (for images of the ESPM HANA Cloud OData service):

c. Connect to: Internet d. Rewrite URL: selected e. Allow anonymous connections: selected

4. Choose Save to create the new connection with name espm_shopping_cloud_img.

https://cloudmodelespmhana.hana.ondemand.com/espm-cloud-web/images/


41

Create ABAP Images Connection

1. Choose again New to open New Connection dialog

2. Enter the following values for the new espm_shopping_abap_img connection

a. Connection Name: espm_shopping_abap_img b. Endpoint (for images of the ESPM HANA Cloud OData service):

c. Connect to: Internet d. Rewrite URL: selected e. Allow anonymous connections: selected f. User name: ESPM_TEST g. Password: Espm1234

3. Choose Save to create the new connection with name espm_shopping_abap_img.

http://54.225.119.138:50000/SAP/PUBLIC/BC/NWDEMO_MODEL/IMAGES/


42

2.2.2.4 Configure your ESPM Mobile Application to use the before defined

SMP Applications

You now change the ready-to-run ESPM Mobile application sources so that it makes use of

the applications you created before via the SMP Administration Portal.

Execute the following steps to do this.

1. In Eclipse Project Explorer view open JavaScript file espm-mobile-shopping-web\src\main\webapp\js\config.js

2. Change the JavaScript smpUrl variable to point to your SMP in Trial account

Format of the smpUrl: https://smp-<SCN-p-user>trial.hanatrial.ondemand.com (Example for Lisa Gordan: https://smp-p1940112634trial.hanatrial.ondemand.com, as in the above picture)

3. Save config.js editor. 4. The JavaScript variables cloudAppName, cloudImgName, abapAppName, abapImgName you need not

to change because you created your cloud and abap SMP applications and images connections already with the correct names (but in case you would have named it different you would simple change it here)

5. Open espm-mobile\destinations\cloudmobilebackend with Text editor


43

6. Open espm-mobile\destinations\abapmobilebackend Change the URL to point to your SMP in the trial account as shown in the following picture URL Format (replace p1234567890 with your p-User) https://smp-p1234567890trial.hanatrial.ondemand.com/public/espm_shopping_cloud

7. Save cloudmobilebackend text editor.

8. Open espm-mobile\destinations\abapmobilebackend Change the abap destination in a similar way. Point the URL to your SMP in the trial account as shown in the following picture but this time ending with espm_shopping_abap URL Format (replace p1234567890 with your p-User) https://smp-p1234567890trial.hanatrial.ondemand.com/public/espm_shopping_abap

9. Save abapmobilebackend text editor.

2.2.2.5 Verify that the ESPM Mobile application works with your SMP

Configuration

In short: Delete the two existing connectivity destinations you configured your local server with, then

import the two change connectivity destinations and finally re-publish and run espm-mobile-

shopping-web project (with the change config.js file) on the existing local SAP HANA Cloud server

runtime.

Trial Account – Maximum allowed connection for SAP Mobile Platform

In a trial account, for the SAP Mobile Platform, the maximum number of allowed connections at a time is only 10.

Hence while running the application and you get the error “The connection to the server was unsuccessful” you will have to delete some existing application connections. To do so follow the below steps:

1. Login to your SMP trial account https://smp-<account_name>.hanatrial.ondemand.com/Admin

2. Navigate to APPLICATIONS APPLICATIONS CONNENCTION Select the Applications you wish to delete and click on the Delete button.


44

1. Double click on existing server node in Servers view.

2. Select one destination and choose delete icon to delete them. 3. Save editor. 4. Do the same for the other destination. 5. Import both changed cloudmobilebackend and abapmobilebackend destinations

6. Save both imported destinations which contains the URL pointing to your SMP account

applications 7. Re-publish and run espm-mobile-shopping-web application project on the already created

local HANA Cloud server runtime


45

Confirm that the ESPM Mobile Shopping application comes up and runs with your SMP configuration as before with the ESPM SMP default configuration.


46

3 Deploy and run the ESPM Mobile Shopping Application on

an Android Device

Overview

In this chapter you will find the steps to deploy the ESPM Mobile Shopping Application on an Android device using PhoneGap.

3.1 Android Project Creation

Create you ESPM Android Project as described in the following steps.

1. Select Eclipse Java Perspective

2. In Eclipse main menu open File New Others...

3. In the opened New wizard expand Android Android Application Project and then choose Next

4. Enter application details as follows


47

Application Name: Espm_Shopping_Mobile_Android Project Name: Espm_Shopping_Mobile_Android Package Name: com.sap.espm.shopping.mobile.android

5. In the next screen select the option Create activity and choose the option Create Project in Workspace (which is C:\dev\eclipse\workspace\Espm_Shopping_Mobile_Android if you used the default path suggested in the ESPM Installation Guide before)

If entered application name contains underscore(s) ‘_’, as suggested above, then the wizard generates a Package Name with underscore(s).

Do not use this but replace these underscore characters with dot ‘.’ characters. Otherwise the android project will show warnings.


48

6. In the next Configure Launcher Icon screen keep the default and choose again Next 7. In the next screen, select the option for creating a Blank activity and choose Next

8. In the next screen leave the Activity Name as the default MainActivity .

Choose Finish to create your Android project


49

By default the activity_main.xml and MainActivity.java files will both opened. You can close them as we do not need to modify anything in this file.

Modify created Android Project to use PhoneGap

1. The Espm_Shopping_Mobile_Android/libs folder is usually created automatically, but in case this folder is not yet created in your project, then create the libs folder manually as follows. Otherwise skip the first step.

Create a libs folder in the newly created Android Project

a) Select Espm_Shopping_Mobile_Android project

b) Open context menu and choose New Folder

c) In New Folder dialog enter libs and choose Finish


50

New libs folder is created in the Project

2. In the same way create an new www folder und at location

Espm_Shopping_Mobile_Android/assets as shown in the following picture

3. Copy cordova-2.9.0.js from where you downloaded and extracted PhoneGap (e.g.

C:\dev\phonegap-2.9.0\lib\android\cordova-2.9.0.js if you downloaded in section 1.4 the version 2.9.0 of PhoneGap otherwise adapt the versions here and below accordingly) earlier to Espm_Shopping_Mobile_Android/assets/www/ folder


51

4. Copy cordova-2.9.0.jar from where you downloaded and extracted PhoneGap (e.g. C:\dev\phonegap-2.9.0\lib\android\cordova-2.9.0.jar) earlier to Espm_Shopping_Mobile_Android/libs/ folder

5. Copy xml folder and its contents from where you downloaded and extracted PhoneGap (e.g. C:\dev\phonegap-2.9.0\lib\android\xml) to Espm_Shopping_Mobile_Android/res/

After executing the before three steps you Android project looks as in the following picture

6. Verify that cordova-2.9.0.jar is listed in the Build Path for your project.

a. Select Right click on the Espm_Shopping_Mobile_Android//libs folder b. Open context menu and choose Build Path Configure Build Path.... c. On the Libraries tab, under Android Private Libraries check that cordova-

2.9.0.jar is linked and choose OK.

If library is not displayed try to refresh the Android project and check again.


52

7. Open MainActivity.java located in Espm_Shopping_Mobile_Android/src/com/sap/espm/shopping/mobile/android with Java Editor and do the following changes

a. Add import org.apache.cordova.*; statement in the header b. Change the class's extend from Activity to DroidGap c. Replace the setContentView() line with

super.loadUrl("file:///android_asset/www/index.html"); d. (Optional) In case your network is very slow then you can add the statement

super.setIntegerProperty("loadUrlTimeoutValue", 60000); before the super.loadUrl statement.

e. If the onCreate() method is a protected method, change it to public

8. Save editor.

9. Select Espm_Shopping_Mobile_Android/AndroidManifest.xml and choose from context menu Open With XML Editor Copy and paste the following two xml snippets (<supports-screens>, <uses-permission> and android:configChanges) as shown in the below AndroidManifest.xml editor picture

<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />


53

Support orientation changes by pasting the following inside the <activity> tag

10. Save editor.

11. Copy the entire contents of folder espm-mobile-shopping-web/src/main/webapp/ from the espm-mobile-shopping-web project to the folder assets/www of project Espm_Shopping_Mobile_Android as shown in the following picture

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"


54

12. Copy also the folder espm-mobile-shopping-web/src/main/webapp/ from the espm-mobile-shopping-web project to the folder assets/www of project Espm_Shopping_Mobile_Android as shown in the following picture

13. Download SAPUI5 resources a. Open http://scn.sap.com/community/developer-center/front-end b. In Downloads section find link “New version 1.12.1:” Download Evaluation

Package for UI Development Toolkit for HTML5 and click on it

http://scn.sap.com/community/developer-center/front-end


55

c. In the License Agreement page select the radio button for “UI Development Toolkit for HTML5 Version SAPUI5 1.12.1” and go through the licence agreement and choose I Agree button to download the file.

d. From the downloaded zip package extract the contained sapui5-mobile-static.zip into location C:/dev/sapui5-mobile-1.12.1 so that a resources folder is located there

e. Copy the before extracted C:/dev/sapui5-mobile-1.12.1/resouces folder to Espm_Shopping_Mobile_Android/assets/www

14. Select Espm_Shopping_Mobile_Android/assets/www/index.html and open context menu. Choose Open With HTML Editor and make the following changes in the index.html file as highlighted in the below picture:

a. Uncomment the two script code as marked in the above picture


56

b. Replace the script src with resources/sap-ui-core-nojQuery.js as marked in the above picture

c. Add the following script line to the file to point to the version of cordova library you are using. Adjust, if necessary! (see also in the above picture)

15. Save Editor.

16. Open espm-mobile-shopping-web/src/main/webapp/js/config.js and set the useWeb flag to false as shown in the following picture

17. Save Editor

3.2 Running the Android Project in an Android Emulator/Device

In this section you create the Android Emulator and configure if necessary a proxy. With this

emulator you will run then the ESPM Mobile Shopping application on it

3.2.1 Android Emulator Creation

1. Make sure that you opened Java perspective 2. In Eclipse toolbar choose “Android Virtual Device Manager” icon to open the Device

Manage window.

<script type="text/javascript" src="cordova-2.9.0.js"></script>

The creation of Android Emulator needs only to be done once and then you can always deploy and run any of you android projects with it.


57

3. On the opened Android Virtual Device Manager dialog choose New…

On the opened Create new Android Virtual Device (AVD) dialog specify as follows

a. AVD Name: emulator

b. Device: Nexus One (3.7’’, 480 x 800: hdpi)

c. Target: Android 4.2.2 (API 17)

d. CPU/ABI: Intel Atom (x86)

e. SD Card: Size: 1024


58

4. Choose OK to create a new AVD

Setting proxy for the Android Emulator

The following steps you need only to execute if you are working in a network which uses a proxy (e.g. host: “proxy” and port: “8080”)

1. Make sure that the Android Virtual Device Manager is open

2. Select the before created Emulator with name emulator and choose Start…


59

3. Confirm the opened Launch options pop up click Launch

4. Once the emulator starts unlock the emulator and click on the Main Menu button

5. Click HOME button

Click Settings icon

The emulator may take some time to launch.


60

Click More…

Click Mobile networks

6. From Mobile networks: Access Point Names Select the available mobile network

set the proxy and the port (click on corresponding value in the list and the field to enter the values comes up)

You can identify your IP address by running the command ping <proxy-server-name> (e.g. ping proxy) in your command shell window. Enter the Proxy as your IP address and Port with your relevant proxy port number


61

(e.g. click on Proxy, enter proxy IP and then choose OK. Do the same for the port.

7. After this click on HOME button and you have finished your proxy settings

Entered values here are just example values which you have to adapt to your values.

3.2.2 Run ESPM Mobile Application on Android Emulator

Execute the below steps to run the ESPM Mobile Shopping Application on the Android Emulator.

1. In Eclipse Project Explorer select the Android Project Espm_Shopping_Mobile_Android


62

2. Open context menu and choose Run As Android Application 3. Emulator window is launched and the running ESPM Mobile Shopping application is

displayed.

Parallel to the launched Emulator window Eclipse is launching a second window asking if you want display logs

Choose Yes and OK


63

Play around with the application and verify that it works also in the emulator.


64

4 Tutorial Documentation History This tutorial documentation history describes the changes of this document compared to the first

document that was published on http://scn.sap.com/community/developer-center/cross-technology

The first published tutorial document had no version and the next published started with version 1.0

Version Main Changes compared to version before

1.0 The general HANA Cloud Development installation part and the ESPM Sources retrieval before located in chapter 1 has been moved to a commonly used ESPM Installation Guide which most of the ESPM Scenarios tutorials use.

The ESPM Mobile application is now using the new Fiori design theme (technically sap_bluecrystal).

http://scn.sap.com/community/developer-center/cross-technology

Mobile Shopping SAP

Documents

Transcript of Mobile Shopping SAP