From b50c14124008e99c29f91e93207e9382423b71d3 Mon Sep 17 00:00:00 2001 From: anuabarnab4 Date: Mon, 15 Jul 2024 12:57:12 +0530 Subject: [PATCH 1/2] updated sample with readme --- .../NodeJS/embed.js | 63 +++++++++++++++++ .../NodeJS/package.json | 20 ++++++ .../React Native/app.js | 44 ++++++++++++ .../React Native/package.json | 25 +++++++ .../Readme.md | 70 +++++++++++++++++++ 5 files changed, 222 insertions(+) create mode 100644 Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/embed.js create mode 100644 Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/package.json create mode 100644 Scenario Based Samples/Dashboard Embedding React Native sample/React Native/app.js create mode 100644 Scenario Based Samples/Dashboard Embedding React Native sample/React Native/package.json create mode 100644 Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md diff --git a/Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/embed.js b/Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/embed.js new file mode 100644 index 0000000..68b287e --- /dev/null +++ b/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}`); +}); \ No newline at end of file diff --git a/Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/package.json b/Scenario Based Samples/Dashboard Embedding React Native sample/NodeJS/package.json new file mode 100644 index 0000000..c02bff3 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/Scenario Based Samples/Dashboard Embedding React Native sample/React Native/app.js b/Scenario Based Samples/Dashboard Embedding React Native sample/React Native/app.js new file mode 100644 index 0000000..0e682fd --- /dev/null +++ b/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 ( + + ); +}; + +const styles = StyleSheet.create({ +}); + +export default App; \ No newline at end of file diff --git a/Scenario Based Samples/Dashboard Embedding React Native sample/React Native/package.json b/Scenario Based Samples/Dashboard Embedding React Native sample/React Native/package.json new file mode 100644 index 0000000..f1a05b7 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md b/Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md new file mode 100644 index 0000000..87ff394 --- /dev/null +++ b/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/boldbi/react-with-nodejs-sample/assets/129486688/9608f9e1-99f8-4375-9724-d15820cb690f) + +## 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/react-with-nodejs-sample/tree/master) within the application. Please ensure that you have placed it in the application as shown in the following image. + + ![EmbedConfig image](https://github.com/boldbi/react-with-nodejs-sample/assets/129486688/6dc248bc-306c-497f-9aed-421abb2ca710) + + ### 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/boldbi/react-with-nodejs-sample/assets/129486688/9608f9e1-99f8-4375-9724-d15820cb690f) + +> **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/). \ No newline at end of file From ded17624c33dc741253a38913395f757625111fd Mon Sep 17 00:00:00 2001 From: anuabarnabsf4019 <129487075+anuabarnabsf4019@users.noreply.github.com> Date: Mon, 15 Jul 2024 14:07:55 +0530 Subject: [PATCH 2/2] Update Readme.md --- .../Readme.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md b/Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md index 87ff394..34219bc 100644 --- a/Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md +++ b/Scenario Based Samples/Dashboard Embedding React Native sample/Readme.md @@ -4,8 +4,8 @@ This project was created using NodeJS 14.16. This application aims to demonstrat ## Dashboard view - ![Dashboard view](https://github.com/boldbi/react-with-nodejs-sample/assets/129486688/9608f9e1-99f8-4375-9724-d15820cb690f) - + ![Dashboard view](https://github.com/user-attachments/assets/dd394d75-06ec-4b67-955e-85e4ba619c3b) + ## Prerequisites The samples require the following to run. @@ -35,26 +35,26 @@ The samples require the following to run. ![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/react-with-nodejs-sample/tree/master) within the application. Please ensure that you have placed it in the application as shown in the following image. + * 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/boldbi/react-with-nodejs-sample/assets/129486688/6dc248bc-306c-497f-9aed-421abb2ca710) + ![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 `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 `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/boldbi/react-with-nodejs-sample/assets/129486688/9608f9e1-99f8-4375-9724-d15820cb690f) - + ![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 @@ -67,4 +67,4 @@ Look at the Bold BI Embedding sample to live demo [here](https://samples.boldbi. ## Documentation -A complete Bold BI Embedding documentation can be found on [Bold BI Embedding Help](https://help.boldbi.com/embedded-bi/javascript-based/). \ No newline at end of file +A complete Bold BI Embedding documentation can be found on [Bold BI Embedding Help](https://help.boldbi.com/embedded-bi/javascript-based/).