Packaging the cordova ui5 apps with cli and local/cloud HAT

Intro

The aim of this post is to describe two major options (I came up) with of packaging your ui5 based apps into real mobile applications.

In the previous post I talked about designing some ui5 app that we would like to have on a mobile devices as well.

So, it would be cool to somehow do this right inside the webide where we most probably do our development.

And it turns out, there is a cool feature for this.

Option1: Enter Hybrid Application Toolkit

It is currently a Cloud Build feature that is a part of a Sap Cloud Platform Mobile Services.

And recently they also made it possible to “enable” any of your ui5 apps and then just make it build your package for you.

I’m not going to repeat walkthrough posts you can find yourself on scn, but this is a really cool feature which you would maybe like to try.

And in the app from my previous post the “mobile” folder is already being added, so you can just clone the repo into WebIde, and then press “mobile -> build packaged app” to get your android build in like 5 minutes.

For android you can just generate the keychain, while for ios you’d need to have a proper cert and a provisioning profile.

Sure, to use this for production you need to have proper license.

Please note that as I do not use this feature to distribute my app, there is going to be a barcode scanner plugin issue and possibly some other minor stuff as webide .che/project.json “hybrid” section/settings are not aligned with current app state.

But what is actually happening there while it prepares a build for you?

Well, you can find more details in the build log that is available for each of your builds in the mobile services.

Currently it seem to be cloud only webide feature, but before it was added into webide (and I believe it was used earlier for portal services to create your own fiori client apps which are actually just cordova apps), to create your own ui5 mobile app you would need to install Local HAT (as well as lots of other stuff) onto your machine.

And it (HAT) actually was just a bunch of nodejs scripts that prepared and built the cordova project for you (and app companion which I never used to be honest).

So, in the earlier days you would need to perform some configuration steps inside the WebIDE, and then trigger the local build.

Basically, what it would then do for you:

• It would download the project zip file from web ide (to which it was connected)
• It would prepare the cordova project with platforms and plugins you
• It would add SAP MobileSDK Kapsel plugins in case you needed those
• It would create app icons and other stuff for your selected platforms
• It would put SAPUI5 runtime into the project directory
• And it would create a magic bootstrap index.html file to init the cordova and Kapsel related stuff (cloud build actually just uses the contents of the mobile folder for that)
• And then run “cordova build”

So, the thing is, I believe, it does pretty much the same now in cloud build scenario, but you are not able to tweak the build process anyhow.

Why would you need this?

Well, for example, I was working on a project with SAP partner company, where we encountered some missing features that we were able to resolve by modifying the nodejs scripts of local HAT:

• add some special iOS preferences (like UILaunchStoryboardName=CDVLaunchScreen to support iphone X screen ) and plugins into cordova config.xml
• tweak the bootstrap index.html file itself so that the mobile services configuration and other parameters would not be static, but otherwise obtained from the qr code, so that a single app build would allow multitenancy via proper Kapsel logon context configuration
• trigger the build via Jenkins job and perform the build from the git repo instead of manual webide button press

And at least last two major features were something that Cloud Build is yet to deliver as far as I know.

Btw in case you’re interested, those guys are hiring.

Option2: vanilla cordova cli

But in case you know what is happening under the hood, you can prepare all the stuff yourself and even automate it.

BTW I’d definitely recommend this blog series https://blogs.sap.com/2016/10/20/getting-started-kapsel-part-1-sp13 no matter which option of packaging you would pick

Sure in case you use Kapsel plugins from SAP Mobile SDK (which is a really cool stuff which saves you a lot of time and effort at least required for implementing the proper authentication flows for basic or sso scenarios) you still need licenses, so maybe using vanilla cli is not a real benefit for you.

But as my app relies on open source openui5 runtime and does not perform backend authentication, I hope I do not violate any licenses here.

So, to go this way you would definitely need to install the required IDEs and other Dev tools on your local machine, as well as cordova itself, and then use the cordova cli to prepare and manage your project.

And instead of having HAT dealing with your app resources and config.xml file (cordova project descriptor), you would need to do that yourself.

For example, you would need something like this to create app icons and launch images

You would download and copy the openui5 runtime into the resources directory.

And you would handle the cordova init process yourself like this:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>ui5client</title>
        <script id="sap-ui-bootstrap"
        	src="resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-resourceroots='{"com.minesnf.ui5client":"./"}'>
        </script>
        <script type="text/javascript">
			var app = {
				initialize: function() { document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); },
				onDeviceReady: function() {
					var oScript = document.createElement("script");
					oScript.text = "\
                        jQuery.sap.registerModulePath(\"libs\/nowjs\", \".\");\
                        sap.ui.getCore().attachInit(function() {\
                        	new sap.m.Shell({\
                        		app: new sap.ui.core.ComponentContainer({\
                        			height : \"100%\",\
                        			name : \"com.minesnf.ui5client\"\
                        		})\
                        	}).placeAt(\"content\");\
                        });\
					";
					document.head.appendChild(oScript);
				}
			};
			app.initialize();
		</script>
        <script type="text/javascript" src="cordova.js"></script>
    </head>
    <body class="sapUiBody" id="content"></body>
</html>

The bad thing is that it can be hard enough when you do not have enough expertise, but the good thing is in case you change your “mobile” settings or resources not so often, you would probably just write some bash script to deal with pulling the code from git and running a simple “cordova prepare && cordova build” commands

#!/bin/bash
cd ui5client
git pull
branch="master"
if [ "$1" != "" ]; then
  branch=$1
fi
git checkout $branch
cd ../
rm -rf www
mkdir www
cp ui5client/mobile/now.js www/
cp -rp ui5client/webapp/* www/
cp -rp resources www/
mv www/index_cordova.html www/index.html
cordova prepare

Conclusion

Hope this post helps somebody understand under the hood magic of packaging the ui5 apps.

Thanks for reading this.