Node.js を使用したReact Apps へのセルフサービス BI の埋め込み

今日のデータ主導の世界では、ダッシュボードと分析機能を SaaS アプリケーション内に直接統合することが必須です。分析を組み込むことには、市場投入までの時間の短縮、生産性とパフォーマンスの向上、利益の増加など、多くのメリットがあります。

Reactアプリケーションに分析を組み込むと、ユーザーのワークフロー内に関連性のあるタイムリーな洞察がもたらされ、データ駆動型の文化が促進され、より分析的な思考が促進されます。

​組み込み分析ソリューションとして、Revealそれを達成するのに役立ちます。

Reveal使用すると、インコンテキスト編集、データ ブレンディング、ダッシュボードのリンク、計算フィールドなどの分析機能を備えたインタラクティブなダッシュボードとレポートをReactアプリケーションに簡単かつ迅速に埋め込むことができます。

この記事では、Node.js を使用してReactベースのアプリにRevealを実装する方法を説明します。

Revealを初めて使用する場合は、Web サイトのツアーに参加するか、Reveal製品概要ビデオを視聴することで、製品について詳しく学ぶことができます。

Reactアプリに BI を埋め込む必要があるのはなぜですか?

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

Node.js を使用したReveal React Apps への分析の埋め込み

Reveal埋め込み分析を使用すると、インタラクティブなレポート、ダッシュボードなどをReactアプリに簡単に埋め込むことができます。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. RevealView のレンダリングに使用される <div> を app.tsx に追加します。

function App() { 

  return ( 

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

  ); 

}

3. app.tsx で RevealView オブジェクトを初期化し、ダッシュボードをロードします

useEffect(() => {     

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

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

      revealView.dashboard = dashboard; 

    }); 

  }, [dashboardId]);

わずか 3 つの簡単な手順で、Revealにダッシュボードを読み込む基本を習得できます。完全なチュートリアルについては、開発者ツール担当シニア バイス プレジデントの Jason Beres がReactアプリからダッシュボードを読み込み、取得する方法を段階的に説明しているこのビデオをご覧ください。

組み込み分析とビジネス インテリジェンス、およびビジネスにおけるデータの重要性に関する詳細情報については、YouTube チャンネルの他のビデオを必ずご覧ください。Angular、Blazor、および JavaScript HTML アプリへの分析の埋め込み、埋め込み BI ダッシュボードの作成方法などのトピックを取り上げています。専門家による今後のビデオを見逃さないように、忘れずに購読してください。

Node.js を使用してReveal Reactアプリに分析を埋め込もうとしているが、途中で問題が発生した場合は、Discord チャネル経由で製品チームにご連絡ください。

​無料の製品ツアーをスケジュールすることで、Revealとその仕組みについて詳しく学ぶこともできます。あるいは、SDK をダウンロードして自分で試すこともできます。