React Native with Node JS Dashboard embedding sample

Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/embed.js

@@ -0,0 +1,63 @@
+var fs = require("fs");
+var http = require("http");
+var https = require("https");
+var url = require("url");
+var express = require('express');
+var cors = require('cors');
+var app = express();
+var crypto = require('crypto');
+const path = require('path');
+app.use(cors());
+//Parse JSON bodies (as sent by API clients).
+app.use(express.json());
+
+//Assign a port number for an API to run.
+const port = 8080;
+let appconfig;
+try {
+  appconfig = JSON.parse(fs.readFileSync('embedConfig.json'));
+} catch (error) {
+  console.error('Error: embedConfig.json file not found.');
+  process.exit(1); //Exit the program with a non-zero exit code to indicate an error.
+}
+
+var embedSecret = appconfig.EmbedSecret;
+var userEmail = appconfig.UserEmail;
+
+app.post('/authorizationserver',  async function (request, response) {
+    var embedQuerString = request.body.embedQuerString;
+    var dashboardServerApiUrl = request.body.dashboardServerApiUrl;
+    embedQuerString += "&embed_user_email=" + userEmail;
+    embedQuerString += "&embed_server_timestamp=" + Math.round((new Date()).getTime() / 1000);
+    var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);
+    var embedDetailsUrl = "/embed/authorize?" + embedQuerString + embedSignature;
+    var serverProtocol = new URL(dashboardServerApiUrl).protocol === 'https:' ? https : http;
+    serverProtocol.get(dashboardServerApiUrl+embedDetailsUrl, function(res){
+      var str = '';
+      res.on('data', function (chunk) {
+              str += chunk;
+        });
+      res.on('end', function () {
+            response.send(str);
+      });
+    });
+})
+
+function GetSignatureUrl(embedQueryString) {
+  const hmac = crypto.createHmac('sha256', embedSecret);
+  return hmac.update(embedQueryString).digest('base64');
+}
+
+app.get('/GetData', (req, res) => {
+  const serverEmbedConfigData = path.join(__dirname, 'embedConfig.json');
+  const jsonData = fs.readFileSync(serverEmbedConfigData, 'utf8');
+  const parsedData = JSON.parse(jsonData);
+  const clientEmbedConfigData = {
+    DashboardId: parsedData.DashboardId, ServerUrl: parsedData.ServerUrl, SiteIdentifier: parsedData.SiteIdentifier, EmbedType: parsedData.EmbedType, Environment: parsedData.Environment
+  };
+  res.send(clientEmbedConfigData);
+});
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`);
+});

Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "ReactNativeWithNodeJS",
+    "version": "1.0.0",
+    "description": "",
+    "main": "embed.js",
+    "dependencies": {
+        "@boldbi/boldbi-embedded-sdk": "^7.10.16",
+        "cors": "^2.8.5",
+        "express": "^4.18.2"
+    },
+    "devDependencies": {
+    "npm-run-all": "^4.1.5"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+     },
+    "keywords": [],
+    "author": "",
+    "license": "ISC"
+}

Scenario Based Samples/Dashboard Embedding React Native sample/React Native/app.js

@@ -0,0 +1,44 @@
+import { View, StyleSheet } from "react-native";
+import { BoldBI } from "@boldbi/boldbi-embedded-sdk";
+import axios from "axios";
+import React, { useEffect } from "react";
+
+const App = () => {
+  let apiHost = "http://localhost:8080"; //Nodejs Application URL
+  let authorizationUrl = "/authorizationserver"; // Authorization server API end-point in the Node.js Application
+  let getDetailsUrl = "/GetData"; // GetData API end-point in the Node.js Application to read the embedConfig.json details
+  let result;
+  useEffect(() => {
+    axios
+      .get(apiHost + getDetailsUrl)
+      .then((response) => {
+        result = response.data;
+        renderDashboard();
+      })
+      .catch((error) => {
+        console.error("Error:", error.message);
+      });
+  }, []); // Empty dependency array to execute the effect only once
+
+  const renderDashboard = () => {
+    const dashboard = BoldBI.create({
+      serverUrl: result.ServerUrl + "/" + result.SiteIdentifier,
+      dashboardId: result.DashboardId,
+      embedContainerId: "dashboard",
+      width: "100%",
+      height: window.innerHeight + 'px',
+      authorizationServer: {
+        url: apiHost + authorizationUrl,
+      },
+    });
+    dashboard.loadDashboard();
+  };
+  return (
+    <View id="dashboard"></View>
+  );
+};
+
+const styles = StyleSheet.create({
+});
+
+export default App;

Scenario Based Samples/Dashboard Embedding React Native sample/React Native/package.json

@@ -0,0 +1,25 @@
+{
+  "dependencies": {
+    "@boldbi/boldbi-embedded-sdk": "^7.10.16",
+    "@expo/webpack-config": "^19.0.0",
+    "axios": "^1.6.2",
+    "expo": "^49.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.10",
+    "react-native-web": "~0.19.6",
+    "expo-status-bar": "~1.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.3"
+  },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "version": "1.0.0",
+  "private": true,
+  "name": "test"
+}

Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md

@@ -0,0 +1,70 @@
+# BoldBI Embedding React Native with NodeJS Sample
+
+This project was created using NodeJS 14.16. This application aims to demonstrate how to render the dashboard available on your Bold BI server.
+
+## Dashboard view
+
+   ![Dashboard view](https://github.com/user-attachments/assets/dd394d75-06ec-4b67-955e-85e4ba619c3b)
+
+## Prerequisites
+
+The samples require the following to run.
+
+ * [Node.js](https://nodejs.org/en/)
+ * [Visual Studio Code](https://code.visualstudio.com/download)
+ * [Android Studio](https://developer.android.com/studio)
+
+> **NOTE:** Node.js v14.16 to v20.15 are supported.
+
+#### Help link
+
+ * https://help.boldbi.com/embedded-bi/faq/where-can-i-find-the-product-version/
+
+ #### Supported browsers
+
+  * Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari.
+
+ ## Configuration
+
+ * Please ensure that you have enabled embed authentication on the `embed settings` page. If it is not currently enabled, please refer to the following image or detailed [instructions](https://help.boldbi.com/site-administration/embed-settings/#get-embed-secret-code) to enable it.
+
+    ![Embed Settings](https://github.com/boldbi/aspnet-core-sample/assets/91586758/b3a81978-9eb4-42b2-92bb-d1e2735ab007)
+
+ * To download the `embedConfig.json` file, please follow this [link](https://help.boldbi.com/site-administration/embed-settings/#get-embed-configuration-file) for reference. Additionally, you can refer to the following image for visual guidance.
+
+    ![Embed Settings Download](https://github.com/boldbi/aspnet-core-sample/assets/91586758/d27d4cfc-6a3e-4c34-975e-f5f22dea6172)
+    ![EmbedConfig Properties](https://github.com/boldbi/aspnet-core-sample/assets/91586758/d6ce925a-0d4c-45d2-817e-24d6d59e0d63)
+
+ * Copy the downloaded `embedConfig.json` file and paste it into the designated [location](https://github.com/boldbi/samples/tree/master/Scenario%20Based%20Samples/Dashboard%20Embedding%20React%20Native%20sample/NodeJS) within the application. Please ensure that you have placed it in the application as shown in the following image.
+
+   ![EmbedConfig_image](https://github.com/user-attachments/assets/6ff3c73c-9378-433d-b07d-14766c750d49)
+
+ ### Run a Sample Using Visual Studio Code
+
+  * Open the `NodeJS` folder in **Visual Studio Code**.  
+
+  * Open the terminal and install all dependent packages by executing the following command `npm install`.
+
+  * To run the application, use the command `node embed.js` in the terminal. After the backend application has started, it will display a URL in the command line interface, typically something like (e.g., http://localhost:8080/).
+
+  * Open the `React Native` folder in **Android Studio**.  
+
+  * Open the terminal and install all dependent packages by executing the following command `npm install`.
+
+  * To run the application, use the command `npm run web` in the terminal. After the application has started, it will display a URL in the command line interface, typically something like (e.g., http://localhost:19006/). Copy this URL and paste it into your default web browser.
+
+    ![Dashboard view](https://github.com/user-attachments/assets/bc7a3339-265b-4cbf-84a4-e778105d047c)
+
+> **NOTE:** If the API host is already in use, modify the port number as per your preference in embed.js and update that in App.js file.
+
+## Important notes
+
+In a real-world application, it is recommended not to store passwords and sensitive information in configuration files for security reasons. Instead, you should consider using a secure application, such as Key Vault, to safeguard your credentials.
+
+## Online demos
+
+Look at the Bold BI Embedding sample to live demo [here](https://samples.boldbi.com/embed).
+
+## Documentation
+
+A complete Bold BI Embedding documentation can be found on [Bold BI Embedding Help](https://help.boldbi.com/embedded-bi/javascript-based/).