Skip to Content
Author's profile photo Jerry Wang

Step by step to package a Fiori application into your Android device using Cordova

There is a wonderful tutorial Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises written by Bertram Ganz
In this blog, I will show step by step how to package the UI5 application built by this tutorial as a native application into your Android device.
Here below are some screenshot of this UI5 running in my mobile phone.
1. install nodejs in your laptop, and add the installation folder to your environment variable.
2. Install Cordova via npm -g install cordova:
3. Create a new folder. And then go into this folder, create a new Cordova project via the following command:
Then a skeleton project with those files and folders are automatically created.
Platforms folder is empty so far since I don’t add any mobile platform yet.
4. Add android platform support via command: cordova platform add android
Once done, the necessary artifacts (Android platform specific) for APK generation are created under folder platforms/android.
Now you should have the folders with the following hierarchy:
5. By default there is a dummy index.html file existing in folder www. Using command cordova prepare, the index.html will be copied automatically to folder platforms\android\assets\www. So the general idea here is we always develop the artifacts of our web application in www folder. Once done, use cordova prepare to synchronize it to android platform related folder.
Then use command cordova compile, and you will see the APK file generated successfully.
You might meet with the error message below during compile:
In this case just download the binary version of gradle, unzip it and configure the executable file path in your PATH environment variable:
Install the APK into your mobile device and you should see the following picture:
6. I have uploaded my test Fiori application to my github.
Download folder scn_exercise and index.html from folder www, and copy it to your folder www in your local project.
7. Once done, execute cordova prepare and cordova compile once again, and the new APK will be created. Install it to your device to see final result.
Note: although the Fiori application itself can work offline with a mocked data model, in order to reduce the size of packaged APK file, I didn’t package UI5 library to the APK, but instead declare a reference to UI5 library with online version, which means when you test this application in your mobile phone, it is a must that your phone should have internet access.
If you don’t have an Android device, you can also test it in Emulator ( you have to install Android development studio first )
Create a new virtual device and launch it:
Then use the following command to install the APK into emulator:
Now you can test the application in emulator:

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Jerry

      Nice post on packaging.

      I have a query regarding the files that need to be added to the www folder considering that I use SAP WEBIDE for development.

      After copying all the files of the project (webapp, neo-app, projet.json and user.project.json) into the www folder and then making code changes in the index.html file.

      I am unsure where I am making the mistake.

      Reshma

       

       

      Author's profile photo Kalpesh Bhangale
      Kalpesh Bhangale

      Hi Jerry,

      Nice blog!

      Please help me with following error that I get when running command "cordova compile".

      However, when I run this URLs from browser,I can see the XML and also the "android-maven-gradle-plugin-1.5.pom" file is also getting downloaded, but from stand alone URL call, not from CLI.

      Note : I have also added path variables correctly as suggested in your blog

      Please suggest some solution.

      Thanks,

      Kalpesh B.

       

      Author's profile photo Blazenko Babic
      Blazenko Babic

      Hi Jerry

      Can you please re-upload the UI5 project on Github?

      Thanks,

      Blazenko

      Author's profile photo Subhabrata Mukhuti
      Subhabrata Mukhuti

      Hi Jerry,

      Can you please re-upload the project on Github?

      Thanks

      Subh

      Author's profile photo Fitha Zainab Zakkeer
      Fitha Zainab Zakkeer

      Hi Jerry,

      can you please upload that git project again.

      Thanks & Regards

      Fitha