ReactアプリにNode.jsで組み込みセルフサービスBIを実装する方法

今日のデータ駆動型の世界において、SaaSアプリケーション内にダッシュボードと分析機能を直接統合すること(/blog/embedded-analytics-for-saas-companies)は必須です。分析の組み込み(/blog/benefits-of-embedded-analytics)には、市場投入までの時間の短縮、生産性とパフォーマンスの向上、利益の成長など、多くの利点があります。

Reactアプリケーションに分析を組み込むことで、ユーザーのワークフロー内に関連性が高くタイムリーなインサイトを直接提供し、データ駆動型文化(/whitepapers/creating-data-driven-culture)を促進し、より分析的な思考を促します。

組み込み分析(/embedded-analytics)ソリューションとして、Revealがそれを実現するのに役立ちます。

Revealは、インコンテキスト編集、データブレンド、ダッシュボードリンク、計算フィールドなど、分析機能(/blog/embedded-analytics-features)を備えたインタラクティブなダッシュボードやレポートを、Reactアプリケーションに簡単かつ迅速に組み込むのに役立ちます。

この記事では、Node.jsを使用してReactベースのアプリにRevealをどのように実装できるかを紹介します。

無料PDFコピーを入手

フォームに記入してアクセス権を取得してください。

申し訳ございませんが、フォームに問題が発生したようです。数分後に再度お試しください。引き続き問題が発生する場合は、support@revealbi.ioまでご連絡いただき、問題をお知らせください。

必須

残念ながら、Googleはあなたをボットと判断しました。お探しの資産を入手するには、support@revealbi.ioまでお気軽にご連絡いただくか、製品のデモを予約してください。 正常に送信するには、フォームの規約に同意する必要があります。 このメールアドレスは有効ではありません。更新して再度お試しください。 ビジネスメールアドレスを使用してください。

国

ビジネスメール

名

姓

Infragisticsの利用規約およびプライバシーポリシーに同意します

このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。

PDFをダウンロード

PDFをダウンロード中です！

お楽しみいただき、学んでください。

PDF: 戦略的計画、選択、開発、および継続的な改善フェーズなど、成功的な実装に必要な詳細を記した無料の「エンドツーエンドの組み込みBIデプロイメントガイド」を入手してください。こちらからPDFをダウンロード！

なぜReactアプリにBIを組み込むべきなのか？

Reactアプリの目的が何であれ、組み込み分析機能は、ワークフローの合理化、リソース管理、パフォーマンスの最適化のための計り知れない機会を提供します。グラフ、チャート、ダッシュボードのようなBIツールは、組織全体のデータリテラシーを向上させる能力も持っています。データリテラシーとは、データを読み取り、理解し、作成し、情報として伝達する能力であり、ユーザーがより良く、より賢明な意思決定を行うのに役立ちます。データ駆動型の意思決定は、推測や勘ではなく事実に基づいているため、非常に重要です。分析にアクセスすることで、誰もが自信を持って、影響の瞬間に、よりインテリジェントな意思決定を行うことができます。

Node.jsを使用したReveal Reactアプリへの分析の組み込み

Revealの組み込み分析は、インタラクティブなレポート、ダッシュボードなどをReactアプリに簡単に組み込むのに役立ちます。機械学習(/glossary/machine-learning)、ダッシュボードリンク、統計関数、計算フィールド、リッチなデータ分析、セルフサービス、ホワイトラベリング、データブレンドなど、さまざまな機能により、RevealはあらゆるReactベースのアプリケーションに大きな価値を加えることができます。

さらに、RevealのネイティブSDKを使用すると、ReactアプリにBIを統合することは非常に簡単であり、追加の要件なしにアプリケーションに分析を組み込むことができます。Revealの柔軟なアーキテクチャと豊富なAPIは、アプリ内の機能に対する制御を提供し、ユーザーエクスペリエンスのシームレスな一部となります。

それでは、Reveal SDKを使用して、Reactアプリに分析を組み込んでいきましょう。

このチュートリアルでは、Node.jsサーバーを使用します。

*すでにNode.jsサーバーがあります。ご自身で作成する方法を学ぶには、Node.jsを使用してReveal SDKサーバーを設定する方法に関するこのステップバイステップのチュートリアルをご覧ください。

1. index.htmlに必要なスクリプト参照を追加する

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" type="text/css">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> 
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script> 
<script src="https://dl.revealbi.io/reveal/libs/1.3.1/infragistics.reveal.js"></script>

2. app.tsxにRevealViewをレンダリングするために使用する

function App() {

return (

<div id="revealView" style={{height: "100vh", width: "100%"}}></div>

);

}

useEffect(() => {

$.ig.RVDashboard.loadDashboard(dashboardId).then((dashboard: any) => {

var revealView = new $.ig.RevealView("#revealView");

revealView.dashboard = dashboard;

});

}, [dashboardId]);