把UI5程序打包成安卓App（英）

【博主SAP/ABAP交流群689746838】

This tutorial would introduce how to package UI5 application into a hybrid android mobile application by using SAP Mobile Platform(SMP) SDK.

Operating System: Windows 7/10 64bit

SMP SDK
https://developers.sap.com/trials-downloads.html

Download and install it, but before you run and build apps, the following tools are required to install as prerequisites, otherwise you would also be asked to install them when using SMP.

Java
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Set environment variables after installation, ensuring that java is globally available in Windows command line(CMD). You can input “java -version” to check.

Note: Java 8 is used in this tutorial.

Node.js & npm
https://nodejs.org/en/
After installation, please ensure that node and npm commands are globally available in CMD.
You can input “node -v” and “npm -v” to confirm.

Cordova
Input “npm install -g cordova” in CMD.
Check if Cordova is globally available in CMD by inputting “cordova -v”.

Note, you could get a proxy error if you are in “SAP-Corporate” network. Then you can try proxy http://proxy:8080/.

Android Studio
https://developer.android.com/studio/#downloads
Actually, we don’t need the whole Android Studio but just Android SDK and Gradle. However, there are some advantages to install Android Studio. Firstly, installing Android Studio is easier. You don’t need to install separated components and do configuration respectively. Secondly, Android Studio provides a more user-friendly GUI so that you don’t need to type any command in CMD.
Note, you may need to set proxy to download Android Studio and its relevant components during installation of Android Studio. The following is how to set proxy in Android Studio:
If you are using HTTP proxy, please set as below, just the same as the setting in browser.

If you are using proxy like Lantern or Shadowsocks, just choose “Auto-detect proxy setting”.

After installation, you can create a sample project and then you would see the following screen.

Go to SDK manager:

Android 9.0 was already installed, but Android 7.1.1 is what we need because the lasted API version that Cordova supports is 25. Thus, please install Android 7.1.1 as well.

Please go to Cordova official site to get the information of the latest Android package that Cordova supports. https://cordova.apache.org/docs/en/latest/guide/platforms/android/.

Go to AVD manager:

This would allow you to create a virtual device for emulating purpose.
Every step can just use default but please don’t forget to download Android 7.1.1 as system image, the reason is the same as above.

By so far everything needed for SMP was done, so now we can begin to use SMP.

Go to SMP Kapsel SDK “fiori_client” directory: “C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client”.

Open config.json and do configuration. I would take my directory and UI5 app as example.

“packageName”: application package name
“targetForlder”: folder name of project where UI5 application would export to
“appName”: application name
The above three items are all customized.
Set platforms to “android”.

Go to this folder in CMD.

Execute the following two commands in order: “npm install” and “node create_fiori_client.js”.

After executing completed, you will find that project “FioriClientDashboard” was created.

Go into “FioriClientDashboard” and “www”, open appConfig.js.

You just need to set the UI5 application URL. If you need to register this app to SMP server, set “fioriURLIsSMP” to true, but this tutorial won't cover that.

Go to “FioriClientDashboard” in CMD.

Execute “cordova prepare android” and “cordova emulate android”.

After building successfully, you can see that apk file was exported. The emulating would also open an Android emulator, but this tutorial won’t cover that.

Copying “android-armv7-debug.apk” into your mobile device and install it to see how it works.