Академический Документы
Профессиональный Документы
Культура Документы
Introduction
What do you get here?
This end-to-end tutorial offers a walk through of the SAPUI5 based Mobile Retailing application for any developer. This application is
based on the Enterprise Procurement Model (EPM).
It guides you through the ready-to-run Mobile Retailing development scenario which includes:
Set up of your Development Environment from scratch (Section 1)
Setting up the Application on SMP(SAP Mobile Platform, enterprise edition, cloud version) and Gateway services (Section 2)
Retrieval of data using SMP from an ABAP backend using OData Services (Section2)
Deploy and run the Mobile Retailing application on an Android device (Section 3)
Walk through the important parts/code snippets in the Mobile Retailing application developed using SAPUI5 mobile libraries
(Section 4)
Scenario Overview
Architecture of the SAPUI5 Mobile Retailing Application
1. Installations
1.1 Java 7 JDK
1.2 Register for SAP HANA Cloud Developer Account
1.3 Install Eclipse IDE
1.4 Eclipse SAP HANA Cloud Tools Installation
1.5 Download and install Android sdk and ADT Plugin
1.6 Download PhoneGap
Overview
Before developing the SAPUI5 Mobile Retailing Application, 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.
Note: Make sure that the programs and tools are installed and configured as described in the following sections. If you use the
recommended default configurations (locations, paths, etc.) it is best guaranteeded that the applications will build and run without any
errors.
Section
Type
What is
needed
by this
Tutorial
Version
Configuration
Comment
1.1
program
Java SE 7
jdk1.7.0_21
set
JAVA_HOME=C:\Java\jdk1.7.0_21
and %JAVA_HOME%\bin added
to PATH
1.2
account
SAP HANA
Cloud
Developer
Account
1.3
program
Juno 4.2
SR2
1.4
tool
HANA Cloud
Tools
Installation
SAPUI5:
1.10.4
(Minimum)
1.5
SDK
Android SDK
and ADT
Plugin
latest
version
C:\dev\android-sdk
(default location used in this
tutorial)
1.6
program
PhoneGap
2.7.0
(Minimum)
C:\dev\phonegap-2.7.0
(default location used in this
tutorial)
Choose download link (e.g. jdk-7u21-windows-x64.exe for Windows x64) which corresponds to your operating system.
The version of the JDK displayed in the screenshot might already be higher.
The tutorial should work with any higher version as well.
2. Execute the jdk-7u21-windows-x64.exe you downloaded (the "u21" version might already be higher in your case) and install
the JDK to <jdk 7 local installation directory> (for example located at C:\Java\jdk1.7.0_21).
3. Set the system environment variable JAVA_HOME=<jdk 7 local installation directory> (for example C:\Java\jdk1.7.0_21)
In Windows choose Start --> Control Panel --> System and Security --> System --> Advanced system settings.
5. An e-mail which contains the activation link of your cloud developer account will be sent to you.
Open the mail which was sent to your e-mail account
6. Choose the Click here to activate your account button and an Account Successfully Activated message will appear.
7. Choose Continue to launch the SAP HANA Cloud Cockpit of your newly created developer account.
8. As you launch your Cloud Cockpit the first time you have to decide which type of database your account should use.
Choose SAP HANA Database as Default Database Type for your newly created developer account and choose Continue.
If a welcome page for the SAP HANA Cloud is displayed. Choose OK to hide it.
10. You will now see the initial HANA Cloud Cockpit for your developer account.
10
As there are no applications the HANA Cloud cockpit provides some suggestions in the Try, View, Develop and Read
sections what one could do next.
Also for more details regarding the SAP HANA Cloud cockpit you might read the corresponding HANA Cloud
documentation here
During the SAP HANA Cloud Developer Account creation an SCN user account has been created with which you can
deploy your applications to your HANA Cloud Trial developer account. But you can also log on to SAP Community
Network where e.g. developers share their knowledge or ask questions in the SCN Developer Center
11
Mobile Retailing
Scenario- SAPUI5
4.
This ensures that the workspace is created in the eclipse installation folder C:/dev/eclipse/workspace
5. Confirm the dialog with OK
6. From the Eclipse main menu, choose Window --> Preferences (the Preferences dialog box opens).
12
Choose OK.
b. Case 2: Execute the following sub steps if you are working in a network which uses a proxy:
(example proxy settings: host: proxy; port: 8080; bypass proxy for '*.corp'; Adapt values according to your network)
Active Provider: Manual
Proxy entries for HTTP and HTTPS: proxy:8080, no proxy authentication
(In Proxy entries group: Select line with Schema HTTP and Provider Manual --> Choose Edit... --> Enter the
proxy as the Host and 8080 as the Port --> Confirm by choosing OK. --> Do the same for HTTPS.)
Proxy bypass: *.corp
(Choose Add Host..., enter string "*.corp" (without the double quotes) and confirm with OK.)
13
Choose OK.
Install SAP HANA Cloud Tools
1. In your Eclipse IDE, choose Help --> Install New Software.
2. Enter the following URL
https://tools.hana.ondemand.com/juno
If the Secure Storage dialog box asks for a new master password, choose No.
3. Select all categories as shown in the next screenshot and choose Next.
14
The versions of the installed features displayed in the screenshot might already be higher.
The tutorial should work with any higher version as well.
15
2. Accept the teams and conditions and then choose Download the SDK Tools for Windows
16
5. Once the installation completes, the installer offers to start the Android SDK Manager.
Do not start the Android SDK Manager now. Uncheck the check box for Start SDK Manager and click on Finish Next move on to Installing
the Eclipse Plugin
6. If your eclipse has not been started, restart eclipse. Then select Help --> Install New Software.
7. Click Add...
8. 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/
17
9. Click OK.
10. In the Available Software dialog, select the checkbox next to Developer Tools and click Next.
10. In the next window, you'll see a list of the tools to be downloaded. Click Next.
11. 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.
12. When the installation completes, restart eclipse.
18
Once eclipse restarts,you might get a pop up to open Android SDK Manager. Do not open the Android SDK Manager.
Instead choose the Close button to close the pop up.
13. Now once eclipse restarts, you must specify the location of your Android SDK directory.
Select Windows --> Preferences --> Android --> Browse..., navigate to the location where you downloaded the Android SDK --> Click
Apply --> Click Ok
14. In eclipse open the Java perspective (Windows --> Open Perspective --> Java)
15. Open Android SDK Manager.
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 on Tools --> Options
Google APIs, MIPS system Image, Intel x86 Atom System Image are optional for installation
19
17.Once the download completes close the Android SDK Manager and restart your eclipse. If the eclipse is not restarted then the eclipse
might not respond in the expected way.
20
21
You can access the metadata of the existing public gateway service from the link here
Username: ESPM_TEST
Password: Espm1234
2.2. SMP (SAP Mobile Platform, enterprise edition, cloud version) Configuration for
your trial account(Optional)
You can run the Mobile Retailing project using the default settings of the SMP. If you want to set up your own applications in SMP, follow
the below steps:
22
2. In the First screen a pop with the name SAP HANA Cloud will appear. Click SAP Mobile Platform, enterprise edition, cloud version.
In case a pop up does not appear then click on Services > SAP Mobile Platform, enterprise edition, cloud version
The SAP Mobile Platform Administration and Monitoring portal is displayed in a new window.
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
23
Disclaimer
In this scenario the developed application connects to an ABAP backend system via OData connectivity.
For testing this connectivity there is a publicly available system:
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
Terms of Use:
The OData service for the ABAP backend 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.
24
ID
Name
Vendor
Version
Description
3. Click Save.
ID
mobile_retailing_abap
Name
Vendor
SAP
Version
Description
25
26
2. In the Connection Name specify the connection for name for the connection
3. In the Endpoint specify the URL from where the images should be read
27
4. In the Import pop up, select General > Existing Projects into Workspace
5. Click Next
28
6. Browse through the Root Directory and select the location of the Android project as
C:\dev\eclipse\workspace\Mobile_retailing_sapui5_android
7. Click Finish
29
At this point you might see errors in in your project. These errors will get resolved in the subsequent steps
30
12. Now copy the resources folder (which contains the SAPUI5 mobile libraries) into the folder assets\www
31
Open Mobile_retailing_sapui5_android\assets\www\js\config.js
Change the smpUrl property to point to your SMP in the trail account
Format https://smp-<account>trial.hanatrial.ondemand.com
Also change the name of abapAppName, abapImgName as per the one created by you for your trial account.
Save your settings
1. In the eclipse goto the Java perspective(Windows --> Open Perspective --> Java), Click on the Android Virtual Device
Manager
2. In the Android Virtual Device Manager pop up click New
32
3. In the Create new AVD pop up specify the AVD Name, Device type, Target = Android 4.2.2 (API 17) and also specify the SD
Card size and click Ok.
1. In the Android Virtual Device Manager select the emulator newly created and click Start
33
5. Select the menu More... --> Mobile networks --> Access Point Names --> Select the available mobile network --> set the
proxy and the port --> Click Menu --> Click Save
34
35
To run the same as in your Android device, make sure your device is connected to your machine and then again right click on
your Android Project --> Run as --> Android Application
The same SAPUI5 Mobile Shopping Project can also be deployed on an IOS device, but this is currently out of scope of this tutorial.
Note:
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.
36
4.1. Overview
Once the application is running on the emulator it is also necessary to understand the code running behind the screen. In this section we
will not explain the full code but only the most important code snippets.
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 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:
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.
Further details on SAP Mobile Platform HANA Cloud released version can be found here:
https://help.hana.ondemand.com/mobile/frameset.htm?SMP_welcome.html
37
This app reads data from an ABAP backend - using ABAP Gateway OData Service
Open Mobile_retailing_sapui5_android/assets/www/mobile-retailing-sapui5/Category.controller.js
The first step, to read the data from an OData service via SMP, is that we explicitly register the application connection
using the SMP (SAP Mobile Platform).
Here 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.
Here we create an anonymous application connection by issuing a POST request to the URL
"https://smpmaas-refapps.hana.ondemand.com/public/odata/applications/latest/MobileRetailingNoCaptcha/Connections"
and include the application connection properties in the request payload.
This is done in the code snippet specified below
38
$(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);
});
Open Mobile_retailing_sapui5_android/assets/www/mobile-retailing-sapui5/CreditCardDetails.controller.js
Here we use the OData Model to create the Sales Order as shown in the code snippent below
39