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 SAPs Support Services and may not be modified or
altered in any way.
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
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.
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.
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

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

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);
});
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 havent 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.

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

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

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

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

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

Mobile Shopping SAP

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mobile Shopping SAP

Uploaded by

Copyright:

Available Formats

SAP HANA Cloud Development Scenario (ESPM Mobile Shopping Scenario)

You might also like