In part 1, you will learn how to build an android app for the ESPM Webshop html5/helium app using SAP FIORI Mobile service

Step 1: Create account in SAP Cloud platform by registering in the following link https://account.hanatrial.ondemand.com/#/home/welcome

Skip the above step, if you already have an account.

Step2: Enable the Portal and Fiori mobile service

• In the cockpit, go to Services in the left Pane and search for Fiori Mobile, Enable the service if it’s not already enabled.

• Similarly, search for Portal and enable it.

Step3: Configure the Fiori Launch Pad (FLP)

• Go inside the portal service and click on Go to service to open the adminspace of Fiori launch pad.

• Click on Create a new site button

• Enter Site name as ESPM

Select the FIORI Launchpad template

Click on the Create button. This will open the FIORI configuration cockpit

• In the Site directory browser tab, hover over the ESPM tile. In the Edit drop-down, click on Publish   

• Click on Publish button

• Hover over the ESPM tile and from the Edit dropdown, click Set as Default.

 

Step 4: Configure Fiori Mobile Admin console with Signing profiles

• Go inside Fiori mobile service in the SAP cloud platform cockpit and click on Go to Admin Console.

• In the left pane, go to Applications > Manage Signing Profiles

• Click on add New Profile button

• In case of Android, you can directly generate the signing profiles, and in case of iOS you need to upload the signing certificate and provisioning profiles. Here we shall showcase for the Android platform

• Fill in the form fields and click on Generate button

• The Profile should be created successfully.

• Also, make sure whether the Fiori server is available by clicking Account > Fiori Mobile in the left pane

Step 5: Enable Hybrid App Toolkit in SAP WebIDE

• Open the SAP WebIDE from the SAP Cloud platform Cockpit (Services > SAP Web IDE)

• Click on the link Go to Service

• In the left pane, go to Preferences > Plugins. Search for Hybrid App Toolkit and Enable it.

• Refresh the webIDE for the changes to effect.

Build ESPM Mobile app using Fiori Mobile service

Step1: Clone ESPM mobile app (webshop) in the WebIDE

• In the left pane of SAP Web IDE, choose the Development icon

• Clone the ESPM project from the github https://github.com/SAP/cloud-espm-v2
  • From the Menu bar, select File > Git > Clone Repository

 

• • Enter url https://github.com/SAP/cloud-espm-v2.git
• 
• • When the “Git ignore System files” notification popups up, click the button “Do it later”

Step2: Switch to HTML5-Webshop branch

• In the right pane, select Git Pane. Click on the + button to switch branch

• Select HTML5-Webshop from the dropdown and click on OK button.

• Click on Reset & Checkout from the notification.

• In the confirmation needed screen, click on the OK button
• Now, we have the ESPM Mobile (webshop) in our SAP web IDE

Step3: Deploy the application to SAP Cloud Platform

• Right click the project and select Deploy > Deploy to SAP Cloud Platform

• In case you get the popup to enter the login credentials for SAP Cloud platform, please fill in the details and click Login button

• Select Deploy new application, Enter the Application name and Click Deploy button.

Step4: Register to Fiori Launchpad

• Once successfully deployed to SAP cloud platform, notification box will give option to Register to the Fiori Launchpad

• In case, if you closed it Right click the project and select Deploy > Register to SAP Fiori Launchpad

• In the next popup, give application name and click next button

• In the Tile configuration, choose the type static and enter Title and Subtitle for the tile and click Next button.

• In the assignment, choose the Site, that you have created and published in the portal service. Click next button

• Click Finish.
• Now you have successfully, registered to the Fiori Launch Pad. Click on OK button.

Step5: Creating Destination in the SAP Cloud platform

• By following the previous steps, we have setup the ESPM front-end UI, now we need to connect this with the backend service through the Destinations
• Open SAP Cloud Platform Cockpit. In the left pane, select connectivity > Destinations

• Export the destination from the SAP Web IDE ESPM project to your local system

• Click on Import Destination in the cockpit and browse for the ESPM destination file

• Replace the URL with the ESPM java application url that is running in your SAP cloud platform account and click on Save

Demo URL for test purpose – https://espmrefapps.hana.ondemand.com

For more details refer the Week 3 section of openSAP course “Developing Java-Based Apps on SAP Cloud Platform” – https://open.sap.com/courses/hcp2-1

In brief, we need to clone/download the master branch from the github (https://github.com/SAP/cloud-espm-v2), build the app with Apache Maven (mvn clean install) and deploy as Java application in SAP cloud platform by uploading the espm-cloud-web.war file that will be located in the espm-cloud-web/target folder

 

• Click on the Check connection button to make sure whether the destination works.

 

Step 6: Enable Subscription for the application

• In SAP Cloud Platform Cockpit, In the left pane, select Applications > Subscriptions

• Under Subscribed HTML5 applications, click New subscription button.

• Select provider account to the account name in which we have deployed the application.

Select Application (webshop) from the dropdown.

Give subscription name by adding sub at the end of the application name (webshopsub).

Click Save button.

Step 7: Build packaged app (APK(Android build), IPA(iOS build) for the ESPM application

• In SAP Web IDE, right click the project and select Fiori Mobile >  Build Packaged app

• In the next popup, Provide the app info as shown in the screen shot and click on Next button
  • Enter App name, this is the application name for packaged app.
  • (optional) enter description
  • (optional) provide application icon and splash screen

Select the Signing profiles for Android and iOS, that we have already generated/uploaded in the Fiori Mobile Admin console and click on Next button

• (optional) Select Build debug enabled binaries, to debug the app from chrome console
• (optional) Select Clear cached SAPUI5 library prior to initiating build, to clear the cache

• (optional) Push notification configuration. Click next button

• (optional) In case if you need multiple tile application, you can select Include additional Fiori applications in this packaged app. Click next button

• Click Build button. This build process will take some minutes. Please be patient.

 

Step 8: Download the packaged app binaries (APK, IPA)

• Once the build is successful, you will get the popup with QR code to download the file. Scan the QR code from your mobile to install the app on your device.

Note: Also, you would receive E-mail with the link to download the binaries

Step 9: (optional) Alternatively, you can also download the binaries from Fiori Mobile Admin console

• Open Fiori Mobile Admin console (In SAP Cloud Platform – Services > Fiori Mobile)
• Click on Go to Admin console link

• In the left pane, select Applications > Manage Apps

• Click on the App ESPM

• Choose platforms in the navigation bar

• You can see the new Signed app for Android & iOS. In the Actions menu, you can find the option to download binary.

• Alternatively, you can also give build from the admin console itself, instead of going to the WebIDE (note: This will take the last version of the application that is deployed to SAP Cloud platform and Registered to Fiori Launchpad)

In this blog, we learnt how to build an android app for the ESPM Webshop app using SAP FIORI Mobile service.

We will continue the discussion further, in the next part of the blog https://blogs.sap.com/2017/05/04/part-2-enabling-odata-offline-capability-in-enterprise-sales-and-procurement-model-espm-using-fiori-mobile-service/ , where you get to learn how to build offline OData capabilities for our ESPM app.