How to use SAP HCP, mobile service for SAP Fiori - part 3

[dhimantpatel]

This blog post is continuation of a 4-part series on How to use SAP HCP, mobile service for SAP Fiori.

Part 3: Configure Fiori Mobile and build Fiori app

In this third part, we'll configure Fiori Mobile and test our app on a live device.  You'll learn how to...

1. Subcribe your Fiori app in HCP
2. Create Android Signing Profile
3. Create your Avanced Configuration File
4. Use Fiori mobile build process (application wizard, application workflow, etc.)
5. Executing the app on the device (new work-around in step 22)

Pre-req:

1. Subscribe Fiori app in SAP HANA Cloud Platform - At the moment, packaged SAP Fiori apps can only be created if subscribed as an HTML5 application in HCP.  In future, this will be automated.

1. Open SAP HANA Cloud Platform Cockpit
2. Click Subscriptions + add New Subscription
   1. Provider Account - click drop-down and select your account (e.g. P12345trial)
   2. Application - select your application (e.g. productlisting)
   3. Subscription Name - append "sub" at end of pre-populated appname (e.g. productlistingsub); note that this subcription name is your cloudComponentId in Fiori Mobile Advanced Configuration File
3. Click Save

Step-by-step guide:

1. Open Fiori Mobile Admin Console

1. Open HCP Cockpit
2. Browse to Services > select Fiori Mobile
3. Click Go to Admin Console

2. Add Android Signing Profile

NOTE: If you using Apple Signing Profile, you will need to have an iOS Developer Account and must upload your Signing Certificate, private key pass-phrase, and provisioning profile.  Here is an KB article that shows you how you can create your own iOS Certificate.

1. Open Account tab > Signing Profile
2. Add New Profile (or use existing profile if you have one)
   1. You can create a signing profile if you have JAVA installed on your computer.  You can either use Windows Command or Android Studio (if installed) to generate the keystore file.  In the example below, I'll use Windows Command.
      1. Open Windows Command Prompt and type the next line (feel free to change values but ensure you use same alias and keypass password)
      2. keytool -genkeypair -alias password123 -keypass password123 -keystore productlisting.keystore -storepass password123 -dname "CN=Bill Joy, OU=IT O=ACME, L=Palo Alto, S=CA, C=US" -sigalg MD5withRSA -keyalg RSA -keysize 2048 -validity 99
3. Select Android
4. Click OK

3. Provide signing profile details and click Save

4. Fiori mobile

1. Select Fiori Cloud Edition and click Ping (typically status will let you know if server is available)
2. Click OK on Ping Successful window (not pictured)

5. Add Fiori Mobile Application

1. Click Applications tab
2. Manage Apps
3. New Application (NOTE - you will not see Application Type menu unless you have App & Device Management Service enabled)
4. Select Application Type - Fiori Mobile

6. Click Get Started to start the App Wizard

7. Select your Fiori app scenario > select (default) - local launchpad (click Next)

• Scenario 1 - "I want to create..." All HTML/JavaScript resources are packaged into binary and are located on device when installed; an app re-build is required when making changes to the app and notification is triggered on Admin Console
• Scenario 2 - "I want to mobilize..." This is an optimized Fiori Client build with all HTML/JavaScript are accessed via cloud; re-build of app is not required for this scenario

8. Select your Fiori Server (click Next)

9. Upload an Advanced Configuration File (ACF) - The advanced configuration file is a .json file (you can create one in notepad) that describes an array of components (using properties) that should be packaged with the app. Your ability to create an advanced configuration file is dependent on selecting "I want to create a local launchpad with only the apps I want to mobilize" on the Fiori App Scenario page.

1. Browse to upload ACF (please note that fields in ACF are case sensitive)
   1. Here's what your sample ACF file code should look like
      1. id = your app id (it's located in webide > app_project folder >webapp > manifest.json
      2. cloudComponentId = app subscription in HCP
      3. url = the location under which the application is registered in Fiori Launchpad. By default when deploying the app via SAP WebIDE it is /sap/fiori/[heliumhtml5appname] ... it is NOT the subscription name but the name of the app that you subscribe to.
      4. Click Next
         

{

     "applications":[

          {

               "id":"com.sap.fiori.products",

               "cloudComponentId":"productlistingsub",

               "url": "/sap/fiori/productlisting"

          }

     ]

}

NOTE: Currently there is no integration with SAP Demo Cloud, therefore if you try to select and build the available Fiori Application, the apps will not execute on mobile device.

10. Finish your application - Here, you can build your application or further configure application.  In this example, uncheck the option and click Finish.

Application Workflow - After running through the App Creation Wizard, you can modify app information to control your app's usability and appearance on SAP Mobile Place.

11. Details - no change; here you can modify the app selection, add app description, and provide more app context.  In addition, if you need to re-upload your ACF, you can start your workflow again by click "Select Fiori Appliations"

12. Insight - Once application is deployed and consumed, Administrator can monitor application inisight such as usage charts, registration information, and user logs

13. Groups - If using SAP Mobile Place, Administrator can assign application to an individual group or multiple group(s)

14. Multimedia - For a better user experience, upload an app icon, a splash screen, and optionally a banner image (if using SAP Mobile Place)

1. Application - upload Application Icon, Splash Screen, and optionally a Banner Image for SAP Mobile Place
2. Screenshot and Videos - optionally add these elements for better usage experience (supported types include jpg, jpeg, png, and mp4)
3. Documents - optionally add application usage documentation (supported types include ppt/x, doc/x, txt, pdf)

15. App Settings - no change; Use the SAP Fiori mobile service app settings to define, deploy, and monitor your app

1. Application Security - When setting app security, consider the sensitivity of the data in the app. If the data is highly sensitive, requiring a complex password is recommended.
2. Feature management - Control which device features (for example: Calendar, Camera, Barcode Scanner) can be used by the application running on the device
3. Notifications - Send notifications to iOS and Android devices by using the Notification URL and Application ID under Notification Information
4. Logging - Admin can capture log information for review; collect performance metrics and identify performance issues as they occur

16. Categories - no change; Use the Categories tab to sort apps so they appear in logical groupings within SAP Mobile Place

17. Owners - no change; Use the Owner info tab to view the apps you created and therefore own, and to select co-owners for the app.

18. Platforms - Use the Platforms tab to build your app; if you made changes to any of the above settings, please click Save before continuing

1. Click Action and select Build

19. Build Summary

NOTE: "debug-enabled" mode is only supported in trial and can only be tested with a physical device.  In order to use this feature, you will need Chrome installed as well as the Android SDK (I think).  Once your device is connected to your computer, open Chrome and select More Tools > Developer Tools (from Menu).  Then, from Console menu, select More tools > Inspect devices.  Now run the app on device to debug it.

1. Turn off iOS (unless you are building for this platform then leave it on and select your profile)
2. For Android - Select your Signing Profile from drop-down
3. Click Build
   

19. Your New Signed app is available for consumption; no actions are required

20. As a developer, we've made it easy to test your app.  Simply login to SAP Mobile Place and go to Menu > My Profile > Fiori Mobile Apps

NOTE: Your SAP Mobile Place URL is available via HCP Cockpit > Services > Fiori Mobile > "Go to Mobile Place" or try https://<trial-p#trial>.sapmobileplace.com/ (only replace p# which is your trial id)

21. Click download button to immediately download app to your device (and start install process); else, you can view details of your app by clicking app icon (and download and install app from that page)

22. Once the app is installed, you can run the app (first time authentication will be required)

IMPORTANT NOTE: In order to run the app on your mobile or virtual device, please fix destination path in your SAP Web IDE project's /neo-app.json and /webapp/manifest.json file by appending "/sap" in front of "/northwind" in destination field.

MyApp/neo-app.json:

Before "path":"/Northwind"...

After: "path": "/sap/Northwind"... (do not change casing of northwind)

MyApp/webapp/manifest.json: (open with code editor)

Before: "datasources"... "/Northwind/V*/northwind/northwind.svc/",...

After: "datasources"... "/sap/Northwind/...",... (do not change casing of northwind)

This concludes part 3 of this blog... On to part 4, adding push notification.