Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member
6,737

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 cordova

on Windows:

C:\>npm install -g cordova
C:\> 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 build

More information can be found at the following url : PhoneGap API Documentation

Importing project and integrating SAPUI5 code:

  1. Launch the Eclipse application.
  2. Select the New Project menu item.
  3. Choose Android Project from Existing Code from the resulting dialog box, and press Next:
  4. If you're using the CLI, navigate to the hello directory you created for the project, then to the platforms/androidsubdirectory. Alternately, if you use the create shell utility, simply navigate to the hello directory.
  5. 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

4 Comments
Labels in this area