Enhance user experience using SAP BTP Mobile Services Part 4

[nhatdoan]

My name is Nhat Doan. I am currently in SAP Student Training and Rotation (STAR) Program. In my first rotation, I have a chance to join CoE Mobile & UX team. I have learned a lot of things especially about current developments in mobile technology. Today, smartphones become essential for daily life. Businesses are using mobile applications to serve their clients and they will see many benefits such as brand building, customer connection, and profit boosts. I would like to share some topics concerning mobile development.

1. Build ProductCatalog application with AppGyver and Northwind OData service.


2. Build ProductCatalog application with SAP MDK and Northwind OData service.


3. How to style the MDK application.


4. How to run MDK application on virtual device and override resources.


5. How to reads log, traces issue, and measures performance for MDK application.

How to run MDK application on virtual device and override resources

Download Mobile development kit client

Go to this page https://developers.sap.com/trials-downloads.html?search=Mobile%20development%20kit to download Mobile development kit client.

Install MDK

Copy the downloaded file to home folder. Extract the downloaded file. We will have these files like the picture below.

Figure 1: The content of the downloaded file

Extract MDKDependenciesInstallerWindows.zip. We will have a new folder MDK Dependencies Installer-win32-ia32. Go to this folder and double click MDK_Dependencies_Installer.exe to install MDK dependencies. The MDK Dependencies Installer will check all the dependencies that need to be installed in order to use Mobile development kit client.

Figure 1: The content of the downloaded file

Extract MDKDependenciesInstallerWindows.zip. We will have a new folder MDK Dependencies Installer-win32-ia32. Go to this folder and double click MDK_Dependencies_Installer.exe to install MDK dependencies. The MDK Dependencies Installer will check all the dependencies that need to be installed in order to use Mobile development kit client.

Figure 3: create-client.cmd file after installing MDKClient_SDK

Create an mdkproject folder

Clone template.mdkproject to ProductCatalog.mdkproject. Open ProductCatalog.mdkproject. We will have these files below.

Figure 4: The content of ProductCatalog.mdkproject

Config to run ProductCatalog on the virtual device

Open MDKProject.json. Change AppDisplayName to “Product Catalog”. Change AppName to “ProductCatalog”. Change BundleID to “com.sap.mdk.productcatalog”. The BundleID is the ID of the application inside Mobile Services.

Figure 5: The ID of the application can be found inside Mobile Service

Here is the content of MKDProject.json after our modification.

Figure 6: The content of MDKProject.json

Open BrandedSettings.json. Set ApplicationDisplayName to “Product Catalog”. For the other field like: AppId, ClientId, ServerUrl, AuthorizationEndpointUrl, RedirecUrl, TockenUrl. We can find the information of these fields by opening the Product Catalog app in Mobile Services and click on Mobile Settings Exchange.

Figure 7: Click on Mobile Settings Exchange to see all the information that need for BrandedSetting.json

Click Info tab inside Mobile Settings Exchange to see the Connection Settings for BrandedSettings.json

Figure 8: The ConnectionSettings that can be used for BrandedSettings.json

Beside that we can customize the value of DetailLabelViewText and SigninButtonText for the label and the Signin button of the application.

 Run create-client.cmd

Open Windows PowerShell. Go to the folder that contents create-client.cmd file. Type the command ./create-client.cmd. And enter ProductCatalog.mdkproject. This is the folder that we have just cloned from template.mdkproject. We will have a new ProductCatalog folder.

Run the application on virtual device

Go to ProductCatalog using this command cd ProductCatalog. Use this command to run the application on virtual device tns run android. Now the application can run on the virtual device.

Figure 9: The application is running on the virtual device

Override the resource of the application

Currently, the color of the systems icons is black. These icons can be changed to white by overriding the styles.xml of the application. Go to .mdkproject folder and find folder App_Resources/Android and create folders src/main/res/values-v29. Create new styles.xml file inside folder values-v29 with the content below.

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->

    <style name="MDKAppTheme" parent="FioriTheme.Onboarding">

      <item name="android:windowLightStatusBar">false</item>

	</style>

	<style name="MDKSearchViewStyle" parent="Widget.AppCompat.SearchView">

        <item name="searchHintIcon">@null</item>

    </style>

	<style name="LaunchScreenTheme" parent="FioriTheme.Onboarding">

		<item name="android:windowLightStatusBar">false</item>

	</style>

</resources>

Run the command ./create-client.cmd. Go to folder ProductCatalog and run the application with command tns run android. Now, the color of system icons is changed to white.

Figure 10: The color of system icons is changed to white

Reference

This blog base on:

Build Your Mobile Development Kit Client Using MDK SDK: https://developers.sap.com/tutorials/cp-mobile-dev-kit-build-client.html

Conclusion

We have just finished running the application using virtual device. We can also change the color of system icons by overriding styles.xml.

Please let me know your feedback, questions in the comments. I would be happy to get back to you.