I would like to share how to control the SAP Analytics Cloud, Analytics Designer app remotely from the mobile device. Imagine you have a big display board showing the analytical apps and people can interact with it with their mobile phones. Or during presentation, you can control remotely the analytical apps with your mobile phone or even with your voice command. That sounds cool isn’t it!
In this tutorial, we are going to build a simple Analytics Designer app that is showing the gross margin per location or per product with the dummy data from BestRunJuice company.
We will create two charts: Indicator: Bullet chart and Comparison: Combination Column & Line. We will also add the QR code information for the user to interact with the charts via a mobile device.
Once the QR code is generated, user uses their mobile device to scan the QR code on the app to open the control page and then interact with the control page on the mobile phone to remotely control the app on the big screen
On the mobile phone screen, we will create two buttons: Location and Product for user to filter the chart based on these two inputs.
In order to build, we need to have:
SAP HANA 2 XS Advanced (XSA) SAP Analytics Cloud, Analytics Designer socket.io qrcode.js
Based on the above diagram, there are four modules as follow:
Okay, enough with theory, now let’s get started to build the app with these steps.
Logon to SAP Web IDE for HANA 2 XS Advanced (XSA) and create a new project from the template.
Select SAP Cloud Platform Business Application and click Next. Enter the project name and click Next. At this page, just click Next. Set Service(srv) and Database(db) to Not included. Click Next. Click Finish to complete the setup. You will see the project structure is created in the workplace.
Create the NodeJS app in SAP HANA XS Advanced Module with NodeJS and HTML module.
Right click on the project folder and select New > Node.js Module. Enter the module name srv and click Next. At this page, click Next. Click Finish to complete. You will see the srv folder in the project folder. Open server.js in srv folder and insert the following codes: /*eslint no-console: 0, no-unused-vars: 0, no-undef:0, no-process-exit:0*/ /*eslint-env node, es6 */ "use strict"; const port = process.env.PORT || 3000; const server = require("http").createServer(); const cds = require("@sap/cds"); //Initialize Express App for XSA UAA and HDBEXT Middleware const xsenv = require("@sap/xsenv"); const passport = require("passport"); const xssec = require("@sap/xssec"); const xsHDBConn = require("@sap/hdbext"); const express = require("express"); global.__base = __dirname + "/"; //logging var logging = require("@sap/logging"); var appContext = logging.createAppContext(); //Initialize Express App for XS UAA and HDBEXT Middleware var app = express(); //Compression app.use(require("compression")({ threshold: "1b" })); //Helmet for Security Policy Headers const helmet = require("helmet"); // ... app.use(helmet()); app.use(helmet.contentSecurityPolicy({ directives: { defaultSrc: 'self'"], styleSrc: 'self'", "sapui5.hana.ondemand.com"], scriptSrc: 'self'", "sapui5.hana.ondemand.com"] } })); // Sets "Referrer-Policy: no-referrer". app.use(helmet.referrerPolicy({ policy: "no-referrer" })); //Start the Server server.on("request", app); // use socket.io var io = require("socket.io").listen(server); // define interactions with client io.sockets.on("connection", function (socket) { //listen on new_message from GUI socket.on("cmd_req", (data) => { console.log(data.message + ":" + data.uid); if(data.message === "Product") { socket.broadcast.to(data.uid).emit("req", {message : "Product"}); } if(data.message === "Location") { socket.broadcast.to(data.uid).emit("req", {message : "Location"}); } }); }); server.listen(port, function () { console.info(`HTTP Server: ${server.address().port}`); }); Open package.json in srv folder and insert the following codes: { "name": "serve", "description": "Generated from ../package.json, do not change!", "version": "1.0.0", "dependencies": { "@sap/cds": "^3.10.0", "express": "^4.17.1", "@sap/xssec": "^2.1.17", "@sap/xsenv": "^2.0.0", "hdb": "^0.17.0", "@sap/hdbext": "^6.0.0", "@sap/hana-client": "^2.4.139", "@sap/textbundle": "latest", "@sap/logging": "^5.0.1", "@sap/audit-logging": "^3.0.0", "nodemailer": "^6.2.1", "passport": "~0.4.0", "async": "^3.0.1", "ws": "^7.0.0", "accept-language-parser": "latest", "node-xlsx": "^0.15.0", "node-zip": "~1.1.1", "xmldoc": "~1.1.2", "winston": "^3.2.1", "body-parser": "^1.19.0", "elementtree": "latest", "then-request": "latest", "compression": "~1.7", "helmet": "^3.18.0", "socket.io": "^2.2.0", "socket.io-client": "^2.2.0" }, "engines": { "node": "^8.9", "npm": "^6" }, "devDependencies": {}, "scripts": { "postinstall": "cds build/all --project .. --clean", "start": "node server.js" }, "i18n": { "folders": [ "_i18n" ] }, "cds": { "data": { "driver": "hana" } } }
