In June of 2015, we released our consumer self-service mobile application for utilities, SAP Self-Service for Utilities (SAP SSU ) 1.0 for Android and iOS. SAP SSU is a hybrid mobile application, meaning it is an HTML5+Cordova application.

The app released on iTunes and Google Play is only for demo purposes and cannot be use productively by a utility.  To put it to productive use, a utility company would need to make use of the app source code delivered by SAP to make the necessary modifications to it.  As part of the implementation, a utility company would first need to set up SAP Multichannel Foundation for Utilities and Public Sector to enable the integration of the mobile app with the SAP utilities backend (SAP ERP IS-Utilities and SAP CRM for Utilities).

Once this prerequisite is fulfilled, the utility company can download the delivered source code of the mobile app from SAP Service Market Place – See SAP note 2165708 and make the desired modifications to the app before making a branded version available on the Apple and Android app stores for its consumers.

In this blog, I will walk you through the steps of importing the app source code downloaded from SAP Service Market Place into your Android development environment to enable you to make the desired modifications to the app, test them and debug the code.

Before proceeding with the steps listed below, make sure you have the following prerequisites in place:

  • SAP Multichannel Foundation for Utilities and Public Sector is installed and setup.
  • SAP SSU mobile app leverages SAP Mobile Platform (SMP) 3.0 for the push notification scenario. All the communication between the app and the SAP utilities backend passes through SMP.  The app first connects to SMP which then forwards each request to SAP Gateway.  Therefore, it is important to make sure that SAP Mobile Platform 3.0 is configured for OData consumption.

For further information on how to configure the server for our app, please follow the steps in Chapter 5 of the SAP SSU. For more information on SMP 3.0 Server, visit http://help.sap.com/smp305svr

Note: the current version of the source code of the mobile app is based on the code line of UMCUI501 SP5. And the source code of android application is to help our customers, Utilities companies, updating SSU www resources, note building the application from scratch.

After the prerequisites are fulfilled, proceed with the steps below

STEP 1: Download application source code

Go to SAP Service Market Place and download the source code artifact of the android release. See SAP Note 2165708 for details on how to obtain app source code.  The content of the artifact contains all the files that are needed to build and deploy the mobile app for the android platform.

/wp-content/uploads/2016/01/android_001_868336.jpg

STEP 2: Import source code project into Android Studio

Gradle is used as a building tool, so you can find all the Gradle scripts and settings necessary for the build.

If your development environment is running behind a proxy, edit the file “gradle.properties” using any text editor and set the proper proxy values

/wp-content/uploads/2016/01/android_002_868349.jpg

And you need to set the Android SDK path in the file “local.properties”

/wp-content/uploads/2016/01/android_003_868350.jpg

Now the project is ready to import using Android Studio. Start Android Studio and choose the option “Open an existing Android Studio Project”
/wp-content/uploads/2016/01/android_004_868351.png

A popup will ask you if you would like to Sync the Gradle; choose OK. Make sure you are connected to the Internet.

/wp-content/uploads/2016/01/android_005_868352.jpg

STEP 3: Running the project in the Android Simulator

After the import, you will find some files and folders have been added as part of the project settings in Android Studio and you don’t need to commit them to version control system; keep them locally. The structure is going to look like this:

/wp-content/uploads/2016/01/android_006_868353.jpg

The application is ready to be deployed on the simulator or device which will look like this on simulator

/wp-content/uploads/2016/01/android_007_868354.jpg

STEP 4: Understanding the project structure

Location of the UI resources is under the www folder as it is depicted in the following screenshot:

/wp-content/uploads/2016/01/android_008_868355.jpg

As you have noticed, there is an extra library smp added to SAP SSU for both Android and iOS to play a glue role between SAP SSU resources and Cordova plugins (including SMP Kapsel plugins). For more information about SMP Kapsel plugins and SMP3, see http://scn.sap.com/docs/DOC-49592 .

STEP 5: Debugging

You could deploy the application on the device but make sure that the developer mode is active on the device. After deploying the application you can debug the static resource using Chrome developer tools, since the application is hybrid. For more information about how you can debug, please visit this link: https://developer.chrome.com/devtools/docs/remote-debugging

On your desktop Chrome browser, navigate to chrome://inspect

/wp-content/uploads/2016/01/android_009_868356.jpg

Click “inspect” to start the developer tool.

/wp-content/uploads/2016/01/android_010_868357.jpg

Add custom theme

It is highly recommended to use the theme designer tool to modify the theme for SAP SSU responsive application. The following pic shows where to locate the custom theme:

/wp-content/uploads/2016/01/android_011_868358.jpg

Add custom logic and functionalities

If you have any custom logic or functionalities you need to place them in the corresponding folder (foundation, private, public). You need to pay special attention to those hooks, which are used to call methods in the package context. For example, some functionalities are handled different in the context of package app for example login and logout.

/wp-content/uploads/2016/01/android_012_868359.jpg

Summary:

In this blog, I described the steps to import the mobile app’s source code from SAP Service Market place, run it, debug it and also explained the folder structure.  In a separated related blog, I will explain the same steps for iOS platform.

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Jagadish Gudla

    Thank You For the nice blog! I have one basic question- To configure this do we need to instal SMP or the NW gateway server with MCF add-on is fine?

     

    (0) 

Leave a Reply