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
- For the latest Android Studio, see http://developer.android.com/tools/studio/index.html.
- Gradle version 2.4+, for more information about the Gradle with android studio see https://gradle.org/getting-started-android/
- Android SDK API level (minimum 14, recommended 21)
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.
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
And you need to set the Android SDK path in the file “local.properties”
Now the project is ready to import using Android Studio. Start Android Studio and choose the option “Open an existing Android Studio Project”
A popup will ask you if you would like to Sync the Gradle; choose OK. Make sure you are connected to the Internet.
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:
The application is ready to be deployed on the simulator or device which will look like this on simulator
STEP 4: Understanding the project structure
Location of the UI resources is under the www folder as it is depicted in the following screenshot:
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
Click “inspect” to start the developer tool.
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:
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.
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.
- SAP Managed Tags:
1 Comment
