Blazor アプリケーションへのセルフサービス BI の埋め込み

Blazor アプリケーションへのセルフサービス BI の埋め込み

アプリの一部として分析機能を提供し始める組織が増えるにつれ、Blazor アプリケーションへの分析の埋め込みは必須ではなくなりました。

7 分で読めます

豊富なデータにより、ユーザーは意思決定プロセスを導くためにデータファーストのアプローチに移行しました。

その理由は簡単にわかります。

完全にインタラクティブなビジュアルとレポートを備えた強力な BI を Blazor アプリケーションに統合すると、すべてのエンド ユーザーがデータ分析にアクセスできるようになります。コンテキスト内のアクセス可能なデータにより、ユーザーは、アプリケーションの切り替えやデータのシャッフルによって引き起こされる中断や混乱がなく、必要なときに関連する洞察を迅速に抽出できます。

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

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

この記事では、Revealを使用して Blazor アプリに埋め込み分析を正常に統合する方法について説明します。

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

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

Blazor アプリに分析を埋め込むと、自然なワークフローで主要なビジネス データを表示できるようになります。これにより、見逃していたであろうデータの傾向やパターンを簡単に見つけることができます。リアルタイムの洞察にアクセスできるため、あなた (およびすべてのユーザー) は、より多くの情報に基づいてビジネスの成功につながる意思決定を行うことができます。

データ分析は、企業がワークフローを合理化し、リソースを管理し、プロセスとパフォーマンスを最適化して収益性を最大化するのにも役立ちます。適切なデータがあれば、収益を増やすための新しい製品/サービスの機会を特定することもできます。

Reveal BI を使用して Blazor アプリにセルフサービス分析を埋め込む 

次の 7 つの手順では、Blazor アプリケーションで豊富なデータの視覚化とダッシュボードを有効にすることがいかに簡単に開始できるかを示します。クライアントとサーバーの両方の構成を行う必要があります。始めるには、SDK をダウンロードしてください

それが完了したら、7 つの簡単な手順で Blazor アプリに埋め込みセルフサービス BI を作成して有効にしましょう。

ステップ 1: Blazor サーバー アプリを作成する 

これは Blazor サーバー アプリであるため、Visual Studio を開き、既定値で新しい Blazor サーバー アプリを作成します。完了すると、アプリケーションが作成されます。プロジェクトを右クリックし、[Nuget パッケージの管理] を選択し、nuget.org でReveal.Sdk.AspNetCore nuget パッケージを検索し、プロジェクトにインストールします。

ステップ 2: フォルダーのセットアップ / ダッシュボードの追加 

Reveal SDK クライアントをテストするために、構成が正しいことを確認するために使用できるサンプル ダッシュボードが同梱されています。Reveal既知のフォルダー構造を使用して、ダッシュボードを自動的に読み込み、保存します。プロジェクトのルートにある Dashboards という名前のフォルダーを使用する場合、追加の読み込み/保存コードを記述する必要はありません。

  1. ​「Dashboards」という名前のフォルダーを作成します 
  1. サンプル ダッシュボード (マーケティング、販売、キャンペーン、製造) を解凍し、次の zip ファイルから新しく作成したダッシュボード フォルダーにコピーします: https://users.infragistics.com/ Reveal /sample-dashboards.zip 

ステップ 3: Program.cs を更新する 

In Program.cs: 

  1. コード ウィンドウの先頭に次の内容を追加します。

Reveal.Sdk を使用します。 
 

  1. このコードでReveal SDK を使用するようにアプリに指示し、それをbuilder.buildステートメントの前に配置します。

builder.Services.AddControllers().AddReveal();

ステップ 4: クライアント SDK の依存関係を追加する 

Revealクライアントの JavaScript 依存関係を有効にするには、Pages\_layout.cshtmlファイルを更新する必要があります。終了</Body>タグの終わりの前に次のコードを追加します。

<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://dl.revealbi.io/reveal/libs/1.5.0/infragistics.reveal.js"></script> 
 
<script type="module"> 
    import "./js/revealview.js"; 
</script>

ステップ 5: Reveal Client Configuration JavaScript を追加する 

SDKクライアントが使用するRevealは、RevealViewを使用して設定します。RevealViewをロードするには、クライアントにJavaScript関数を追加する必要があります。これは、ダッシュボードのレンダリング時に有効にする必要があるプロパティを構成する場所でもあります。

  1. ​\wwwroot\フォルダーにjsフォルダーを追加します  
  1. ​jsフォルダーに、次のコードを含むreplaceview.jsという名前の JavaScript ファイルを追加します。

window.loadRevealView = function (viewId, dashboardName) { 

 $.ig.RevealSdkSettings.setBaseUrl('https://samples.revealbi.io/upmedia-backend/reveal-api/');     

 $.ig.RVDashboard.loadDashboard(dashboardName, (dashboard) => { 

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

        revealView.dashboard = dashboard; 

    }); 

}

ステップ 6: ダッシュボードをロードする 

この Blazor アプリケーションでは、revealViewという名前の<div>にダッシュボードを読み込みます。次の手順に従って、アプリケーションのDashboardsフォルダーからサンプル ダッシュボードを読み込みます。

  1. ​Pages\Index.Razorに、次の using ステートメントを追加します。
@inject IJSRuntime JSRuntime
  1. ロードするダッシュボードを選択するために使用するドロップダウンのコードを追加します。

<select @onchange="selectedDashboardChanged"> 
    <option>Campaigns</option> 
    <option>Healthcare</option> 
    <option>Manufacturing</option> 
    <option>Marketing</option> 
    <option>Sales</option> 
</select>
  1. replaceView div を追加します。
<div id="revealView" style="width:100%; height:750px"></div>
  1. 最初の読み込み時にキャンペーン ダッシュボードを読み込むコードを追加します。
@code { 
    protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (firstRender) 
        { 
            await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", "Campaigns"); 
        } 
    }
}
  1. [選択] の変更を監視して、正しいダッシュボードをロードします。
async void selectedDashboardChanged(ChangeEventArgs e) 
    { 
        await JSRuntime.InvokeVoidAsync("loadRevealView", "revealView", e.Value!.ToString()); 
    } 
} 

ステップ 7: アプリケーションを実行する

この時点で、Blazor アプリケーションで強力な BI 機能を有効にするためのすべての手順が完了しました。アプリケーションを実行して結果を確認してください。

Blazor アプリケーションへのセルフサービス BI の埋め込み

完全なチュートリアルについては、Revealを使用して Blazor アプリに分析を埋め込む手順を説明するこのビデオをご覧ください。

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

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

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

組み込み型分析ツール ビジネスインテリジェンス

その他のトピック

分析の使用例 ビジネス インテリジェンス データ駆動型の意思決定 データの視覚化 組み込み 分析
デモを予約