SAP HANA Cloud End-to-End-Development Scenarios. ESPM Mobile Shopping Scenario. Version 3.0

Transcription

1 SAP HANA Cloud Development Scenario (ESPM Mobile Shopping Scenario) SAP HANA Cloud End-to-End-Development Scenarios ESPM Mobile Shopping Scenario Version 3.0 1

2 Copyright 2014 SAP SE 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 SE. The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE 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 SE in Germany and other countries. Please see 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. 2

3 Table of Contents Table of Contents... 3 Introduction Installation Execute ESPM Installation Guide Android SDK and ADT Plugin Installation PhoneGap Installation Checkout scenario-mobileshop branch and import Maven Projects Develop SAPUI5 Mobile Shopping Application Run ESPM Mobile application on SAP HANA Cloud local runtime Development Details: espm-mobile-shopping-web application Development Details SAP Mobile Platform, enterprise edition, cloud version Configuration (Optional) Deploy and run the ESPM Mobile Shopping Application on an Android Device Android Project Creation Running the Android Project in an Android Emulator/Device Android Emulator Creation Run ESPM Mobile Application on Android Emulator Trouble Shooting Tutorial Documentation History

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 4

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

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-espmscenarios 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: as described in the following steps 1. Choose the option USE AN EXISTING IDE and then click on Download the SDK Tools for Windows 6

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

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 In the Add Repository dialog that appears, enter "ADT Plugin" as Name and the following URL as Location 8

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

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 10

11 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. 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 (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 11

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 12

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

14 1.3 PhoneGap Installation 1. Download PhoneGap from here: 2. Extract the downloaded contents into the folder C:\dev\phonegap 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 version. This tutorial should also work with an older version of PhoneGap from to

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

16 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. Execute the following steps: Delete all before imported ESPM Maven Projects 1. Select all ESPM project nodes in Project Explorer view 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. 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. 16

17 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

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

19 Confirm the opened dialog with Yes. With these steps you have reset the master branch to avoid conflict when the new Git branch. Create and check-out new scenario-mobileshop branch In the same way as the ESPM Installation Guide described in section 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: 19

20 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-espmscenarios (or where you downloaded before this Git Repository) 20

21 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 corresponding 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 21

22 1. In Eclipse Servers view select first SAP HANA Cloud local runtime node in Servers view 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. 22

23 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 23

24 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 Run ESPM Mobile Shopping Application on SAP HANA Cloud local server The ESPM Mobile Shopping project is the imported Maven Project with name espm-mobileshopping-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. 24

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-shoppingweb 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 and displays the initial page of the ESPM Mobile Shopping application. SAPUI5 Mobile applications launched as Web application 1. Use only the Chrome Web browser to render all the controls correctly. 2. Launch your Chrome Web browser with the following command (from Run ) chrome.exe --disable-web-security --allow-insecure-access 3. 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. 25

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

27 2.2 Development Details: espm-mobile-shopping-web application 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. SAPUI5 Developer Guide: SAPUI5 API Reference of controls specialized for mobile 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. Data Binding and Model View Controller Architecture 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. 27

28 Further details on SAP Mobile Platform HANA Cloud released version 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-mobileshopping/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. o Here we create an anonymous application connection by issuing a POST request to the URL " ng_cloud/connections" and include the application connection properties in the request payload. This is done in the code snippet specified below: 28

29 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); o Further details on SAP Mobile Platform HANA Cloud released version 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 " This is done in the function below: $(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")); }); Further details on the same can be found here 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 : 29

30 //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); }); Open espm-mobile-shopping-web/src/main/webapp/espm-mobileshopping/creditcarddetails.controller.js o Here we use the OData Model to create the Sales Order as shown in the code snippet below: //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 }); 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: p and a developer HANA Trial account: p trial (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 Launching SMP (SAP Mobile Platform, enterprise edition, cloud version) 1. Open your SAP HANA Cloud trial (developer) account and login by specifying your username and 30

31 password. 2. By default you will be first see the Account Dashboard tab. 3. To launch the SAP Mobile Platform, enterprise edition, cloud version (SMP) you have to choose the Services tab and then click on the SAP Mobile Platform as shown in the next picture 31

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

33 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 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. 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! 33

34 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: public user/password: ESPM_TEST/Espm1234 Note: Currently with ABAP backend when we try to create a new customer, we get an error CSRF token validation failed (which is a known issue). The workaround currently is to use an existing customer such as james.field@itelo.info. The issue is currently under investigation HANA Cloud backend: OData service(s) is coming from a HANA Cloud Application OData Service Url: 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. Create espm_shopping_cloud Application (for HANA Cloud backend) 1. In the SMP Admin Portal switch to APPLICATIONS tab 34

35 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 Name Vendor (optional) Version (optional) Description (optional) espm_shopping_cloud espm mobile shopping for cloud SAP 1.0 (default) 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

36 BACKEND tab parameters to be used Endpoint (see above Disclaimer info box): Connect to: Internet Rewrite URL: selected Allow anonymous connections: selected 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. c. Then switch to AUTHENTICATION tab to specify the Authentication URL/profile 36

37 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

38 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 Name Vendor (optional) Version (optional) Description (optional) espm_shopping_abap espm mobile shopping for ABAP SAP 1.0 (default) 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

39 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

40 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 Create Connections for reading Images Create Cloud Images Connection 1. Navigate to SETTINGS CONNECTIONS tab 40

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

42 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: Espm Choose Save to create the new connection with name espm_shopping_abap_img. 42

43 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: (Example for Lisa Gordan: 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 43

44 you would simple change it here) 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 2. Navigate to APPLICATIONS APPLICATIONS CONNENCTION Select the Applications you wish to delete and click on the Delete button Verify that the ESPM Mobile application works with your SMP Configuration 1. Re-publish and run espm-mobile-shopping-web application project on the already created local HANA Cloud server runtime Confirm that the ESPM Mobile Shopping application comes up and runs with your SMP configuration as before with the ESPM SMP default configuration. 44

45 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 In the opened New wizard expand Android Android Application Project and then choose Next 4. Enter application details as follows 45

46 Application Name: Project Name: Package Name: Espm_Shopping_Mobile_Android Espm_Shopping_Mobile_Android com.sap.espm.shopping.mobile.android 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. 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) 46

47 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 47

48 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 48

49 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 js from where you downloaded and extracted PhoneGap (e.g. C:\dev\phonegap-2.9.0\lib\android\cordova js if you downloaded in section 1.4 the version of PhoneGap otherwise adapt the versions here and below accordingly) earlier to Espm_Shopping_Mobile_Android/assets/www/ folder 49

50 4. Copy cordova jar from where you downloaded and extracted PhoneGap (e.g. C:\dev\phonegap-2.9.0\lib\android\cordova 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 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 jar is linked and choose OK. If library is not displayed try to refresh the Android project and check again. 50

51 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" /> 51

52 Support orientation changes by pasting the following inside the <activity> tag android:configchanges="orientation keyboardhidden keyboard screensize locale" 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 52

53 12. Download SAPUI5 resources Please download the proprietary SAPUI5 version and not OpenUI5 version a. Open 53

54 b. In Downloads section find link New version : Download Evaluation Package for UI Development Toolkit for HTML5 and click on it c. In the License Agreement page select the radio button for UI Development Toolkit for HTML5 Version SAPUI 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-static so that a resources folder is located there e. Copy the extracted C:/dev/sapui5-mobile-static /resouces folder to Espm_Shopping_Mobile_Android/assets/www 54

55 13. 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 b. 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) 14. Save Editor. <script type="text/javascript" src="cordova js"></script> 15. Open Espm_Shopping_Mobile_Android/assets/www/js/config.js and set the useweb flag to false as shown in the following picture 16. Save Editor 55

56 3.2 Running the Android Project in an Android Emulator/Device In this section you create the Android Emulator and configure a proxy(if necessary). In this emulator you will then run the ESPM Mobile Shopping application on it Android Emulator Creation The creation of Android Emulator needs to be done only once and then you can deploy and run any of your android projects with it. 1. Make sure that you opened Java perspective 2. In Eclipse toolbar choose Android Virtual Device Manager icon to open the Device Manage window. 3. On the opened Android Virtual Device Manager dialog choose New 56

57 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 (API 17) d. CPU/ABI: Intel Atom (x86) e. SD Card: Size: Choose OK to create a new AVD Setting proxy for the Android Emulator 57

58 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 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 The emulator may take some time to launch. 5. Click HOME button 58

59 Click Settings icon Click More Click Mobile networks 59

60 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 (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 60

61 Entered values here are just example values which you have to adapt to your values. 8. Close the emulator 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 61

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 62

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

64 4 Trouble Shooting # Issues 1 Application Error The connection to the server was unsuccessful. (file:///android_asset/www/index.html)' message appears Solution: This error mainly comes when the network proxy is not correctly set. Hence make sure your network proxy is correctly set. 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 (See section > Setting proxy for the Android Emulator for more details) 2 The emulator takes too long to launch. This is a known issue and generally the emulator is very slow when launched first time. From next time onwards it will be a bit faster. 3 "Failed to load properties file for project 'Espm_Shopping_Mobile_Android Solution: Right-clicking on the project folder Espm_Shopping_Mobile_Android > Android Tools > Fix Project Properties 64

65 5 Tutorial Documentation History This tutorial documentation history describes the changes of this document compared to the first document that was published on 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). 2.0 New snapshots and new SAPUI5 library details added 3.0 Destinations for abap and hana cloud backend removed 65