Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Process to Wrap a UI5 Web App in an Android Container Using Cordova

Former Member
‎06-17-2016 2:07 PM
0 Kudos

     Apache Cordova is a technology whose purpose serves to create a mobile app from an already-created web application. It is a useful tool to create apps that seem native on mobile platforms without having to develop the apps individually. See here for more overview information. This guide will step you through the process for creating an Android app based on a pre-created SAPUI5 app using a Windows computer. The method of creating a Cordova project aimed at a different mobile platform (iOS, Windows, even BlackBerry) is similar, but not equivalent. The same can be said for the steps taken if developing on a Mac versus a Windows machine, as the command line interface/terminal is different for the different operating systems.


What You Need

  • See the Version Specs section towards the end of this document for information on software compatibility
  • A web application you would like to convert into an Android app
  • Eclipse
  • Android Plugin for Eclipse. From Eclipse, do the following:
  • Latest Version of SAP Mobile Platform (SMP)
  • Latest version of Node.js
  • Plugman
    • This is sometimes installed with node.js. Type “plugman” as a command. If it is installed, term documentation will be output. If not, install it globally with the command:

npm install –g plugman

  • Apache Cordova
    • Open a command line as an Administrator and type:

npm install –g cordova@latest


Create a Cordova Project

  • Use the following command to initialize a new cordova project directory

cordova -d create C:\KapselProjects\OfflineDemo com.mycompany.offline OfflineDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"

  • The path listed after “create” should not yet exist. Anywhere “Offline Demo” is referred to in the example above should be replaced with the name of your project.
  • Make sure in File Explorer that the path to your Kapsel plugins is correct.

Add Android Platform to Project

  • In the command line, navigate to your newly created folder.
  • Use the following command to add android:

cordova –d platform add android@5.X.X

  • Realize that Cordova and the Cordova-Android platform you just added to your project are two different entities. Being so, the versions of both will likely be different. Make sure that your platform version is > 3.X.X by checking:

cordova platform ls

  • In addition, take note of the Android Target field in the command line output after adding the platform, and make sure that this matches the Android API you downloaded earlier. If they do not, try using the platform install command again but replace 5.X.X with “latest”.

  • By following the steps above, you will have specified to your Cordova project that your destination mobile platform is Android. Now, you must add any required plugins, as well as the SAPUI5 code of the source application.


Add Plugins

plugman install --platform android --project .\platforms\android --plugin C:\SAP\MobileSDK3\KapselSDK\plugins\<plugin name>

  • Again, make sure that this is the correct path for the location of the plugins
  • Replace <plugin name> with the name of the desired plugin, like odata or logon.
  • Cordova plugins:

plugman install --platform android --project .\platforms\android --plugin <plugin name>

  • Here, replace <plugin name> with the name of the Cordova plugin separated by hyphens, like “cordova-plugin-network-information” or “cordova-plugin-push”


Add Web App Source Folders

  • At this point, you must replace the default Cordova javascript, css, and html files in the project with those of the web application you are trying to convert.
  • Navigate to the “www” folder of your newly created project folder in File Explorer. You should see the following:

  • These folders contain the resources to produce a default Cordova android application, which, when run, will simply display a screen.
  • Delete these folders/files, and replace them with all of the resources from your web app, including your web app’s index.html file.
  • Prepare your project by typing the following into the command line: cordova –d prepare
  • This command creates an android project and moves the new contents of the “www” folder to the appropriate folder in the native project directory.
  • The android project is now located under [App name] > platforms > android, and the resources are in > assets > www. The resource folder now contains Cordova files in addition to the original web app’s source files, as seen below.

Import Project into Eclipse

  • Open a clear Eclipse workspace.
  • File > Import > Android > Existing Android Code into Workspace
  • Here, browse to /platforms/android of your project folder, and select that directory to import. After selection, the window should pick up both your project and the Cordova library.


  • Make sure the window looks like the example above, and select Finish. It might take a minute to complete the import.
  • Customize your Run Configurations by right clicking on the MainActivity folder and hovering over Run As... Here is where you can choose your options for running the project on and AVD or your own device.
  • Run your project (as an Android Application if it prompts you), and see what happens. Depending on the complexity of your original web app, you might receive error messages, or your app might run perfectly right out of the gate. If your app falls into the former category, it could be difficult to accurately ascertain where the problems are because they could stem from either the wrapper implementation or possibly the original web app. 

Drawables

  • Obviously, make sure to replace all Cordova icons, images, and screens with files that correspond to your app.

Manifest

  • AndroidManifest.xml might need to be updated with certain permissions based on the functionality of your app. Below are some examples that might be required without you realizing. They should be positioned just before the application element.


Index.html

  • This file is the starting point for your web app, and should be located directly in assets/www.
  • This file will have been configured before this process in accordance with your web app. However, there might be a difference in how you would like to call any needed UI5 libraries. For example, in my case, the original web app included all of these resources within the app, while my container called them from a URL to keep the app size down.

Hopefully, by now you have a running Android representation of your web app. If not, run through the procedure again to make sure you’ve followed the instructions correctly. If you still experience trouble, Google most likely has the answers!

Version Specs

  • Cordova vs. SAP SDK
    • Cordova 3.0.6 (or the latest 3.0.x version) should be used if using SMP 3.0 SDK.
    • Cordova 3.1.0-0.2.0 (or the latest 3.1.x version) should be used if using SMP 3.0 SP01 SDK.
    • Cordova 3.3.1-0.1.2 (or the latest 3.3.x version) should be used if using SMP 3.0 SP02 SDK.
    • Cordova 3.4.0-0.1.3 should be used if using SMP 3.0 SP03 SDK.
    • Cordova 3.4.1-0.1.0 should be used if using SMP 3.0 SP04 SDK.
    • Cordova 3.5.0-0.2.7 (or the latest 3.5.x version) should be used if using SMP 3.0 SP05 SDK.
    • Cordova 3.6.3-0.2.13 (or the latest 3.6.x version) should be used if using SMP 3.0 SP05 PL03 or SP06 SDK
    • Cordova 4.2.0 should be used if using SMP 3.0 SP07 SDK.
    • Cordova 4.2.0 should be used if using SMP 3.0 SP08 SDK.
    • Cordova 5.1.1 should be used if using SMP 3.0 SP09 SDK.
    • Cordova 5.1.1 should be used if using SMP 3.0 SP10 SDK.
    • Cordova 5.4.1 should be used if using SMP 3.0 SP11 SDK.
    • Cordova 6.0.0 should be used if using SMP 3.0 SP12 SDK.
  • Cordova-Android Platform vs. Android SDK
    • Cordova-Android 5.X.X supports Android 14-23
    • Cordova-Android 4.1.X supports Android 14-22
    • Cordova-Android 4.0.X supports Android 10-22
    • Cordova-Android 3.7.X supports Android 10-21
Labels in this area
Popular Blog Posts