Phonegap + OpenUI5 = App published on Play store [Packaging SAPUI5 application]
This blog will help you quickly understand the end-to-end packaging and publishing of SAPUI5 / OPENUI5 apps .This blog will be using Demokit Icon Explorer as the sample UI5 project to be packaged and published to Play Store. Here is a quick outline of the content :
- Node / Phonegap / Cordova installation .
- Android project creation using command line.
- Importing project and integrating SAPUI5 code.
- Build apk and publish on Play Store.
Node / Phonegap / Cordova installation
To start the development process of making a using a hybrid app using phone gap . Node js installation is required . You can download and install the node from the following link : node.js . Once the installation is done, install the cordova and phonegap using the following commands
on OS X and Linux:
$ sudo npm install -g cordovaon Windows:
C:\>npm install -g cordovaC:\> npm install -g phonegap Once installation completes, you can invoke phonegap on command line for further help.
Android project creation using command line:
To create a project for android platform use the follwing set of commands :
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add android
$ cordova buildMore information can be found at the following url : PhoneGap API Documentation
Importing project and integrating SAPUI5 code:
- Launch the Eclipse application.
- Select the New Project menu item.
- Choose Android Project from Existing Code from the resulting dialog box, and press Next:
- If you’re using the CLI, navigate to the
hellodirectory you created for the project, then to theplatforms/androidsubdirectory. Alternately, if you use thecreateshell utility, simply navigate to thehellodirectory. - Press Finish.
Now that the Phonegap project is ready and imported into the Eclipse IDE , time for some SAPUI5 action .
Set-up UI5 Resources :
The most basic requirement for UI5 application is to have resources in place . Download the resources from OpenUI5 site and place in your imported project in the folowing hierarchy .
Once the resources are available , adjust the index file to load the UI5 Bootlader.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta charset=”UTF-8″>
<title>OpenUI5 Icon Explorer</title>
<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript” src=”js/index.js”></script>
<script id=”sap-ui-bootstrap”
src=”resources/sap-ui-core.js”
data-sap-ui-xx-bindingSyntax=”complex”
data-sap-ui-theme=”sap_bluecrystal”
data-sap-ui-libs=”sap.m”>
</script>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>
<body class=”sapUiBody” id=”content”>
</body>
</html>
Load the application after the phonegap is ready (deviceready event ) . You incorporate this by modifying the index.js file
onDeviceReady: function() {
app.receivedEvent(‘deviceready’);
},
// Update DOM on a Received Event
receivedEvent: function(id) {
// Tell UI5 where to find application content
sap.ui.localResources(“view”);
sap.ui.localResources(“model”);
sap.ui.localResources(“util”);
jQuery.sap.registerModulePath(‘Application’, ‘Application’);
// Launch application
jQuery.sap.require(“Application”);
var oApp = new Application({
root : “content”
});
console.log(‘Received Event: ‘ + id);
}
Build apk and publish on Play Store
Follow the link to publish the application Play Store : Publishing Overview | Android Developers
I will share the code on GitHub Shortly .
You can get the Icon Explorer app on Play Store (UI5 Icon Explorer – Android-Apps auf Google Play ) or scanning the QR Code below
Nice one !! and Pretty helpful for Mobile Apps Developers.
Hi, could you give the link to sources?
Hi,
I haven't put it on github yet. Will upload and share the link. If it is urgently required inbox me your email address , I will mail it to you .
Regards
Mayank
hi mayank,
Please send the project to mail: abhijeetavaidya [at] gmail [dot] com
regards,
abhijeet.