Blazor でPipedrive のデータにリアルタイムで連携するアプリを構築

こんにちは！リードエンジニアの杉本です。

Blazor は、.NET を使って対話型のクライアント側Web UI を構築するためのフレームワークです。JavaScript の代わりにC# を使って、UI を作れるところが魅力です。また、既存の.NET ライブラリや.NET エコシステムを使うことができる利点があります。

CData ADO.NET Provider for Pipedrive は、LINQ やEntity Framework などの標準のADO.NET インターフェースを使ってPipedrive を操作可能にします。Blazor が.NET Core 対応をしているため、Server Side Blazor からADO.NET Provider を使うことができます。この記事では、Server Side Blazor からPipedrive に接続して直接SQL クエリを実行する方法を説明します。

CData ADO.NET Provider for Pipedrive のインストール

CData ADO.NET Provider は、通常であればRDB に接続するフレームワークである ADO.NET DataAdapter やLinqToSQL（もしくはDapper などのORM を挟んでもいいです）であり、Pipedrive のデータへもRDB と同感覚でアクセスが可能になります。

CData のWebsite からProvider をダウンロードして、マシンにインストールします。NuGet からインストールすることも可能です。Pipedrive ADO.NET Data Provider で検索してください。

Blazor でPipedrive にデータ連携するアプリを構築

Blazor にADO.NET Provider for Pipedrive を接続

• Visual Studio を立ち上げて、Blazor アプリのプロジェクトを作成します。

• ソリューションエクスプローラーで「依存関係」から右クリックで「プロジェクト参照の追加」をクリック。
• 参照マネージャーが開くので、「参照」ボタンをクリックして、先ほどインストールしたADO.NET Provider の.dll を選択します。「C:\Program Files\CData\CData ADO.NET Provider for Pipedrive 2019J\lib etstandard2.0」内のSystem.Data.CData.Pipedrive.dll」を参照に選びます。

Blazor でPipedrive のデータをSELECT

サンプルプロジェクトの「Page」→「Index.razor」を開きます。

以下のコードを書きます。使っているクエリはおなじみの標準SQL です。Pipedrive 固有のAPI を書かなくてもRDB と同感覚でSQL が書けるところがADO.NET Prover for Pipedrive の強味です。

      @page "/"
      @using System.Data;
      @using System.Data.CData.Pipedrive;

      <h1>Hello, world!</h1>

      Welcome to your Data app.

      <div class="row">
          <div class="col-12">

              @using (PipedriveConnection connection = new PipedriveConnection(
                "AuthScheme=Basic;CompanyDomain=MyCompanyDomain;APIToken=MyAPIToken;"))
              {
                  var sql = "SELECT PersonName, UserEmail FROM Deals WHERE Value > 50000";
                  var results = new DataTable();

                  PipedriveDataAdapter dataAdapter = new PipedriveDataAdapter(sql, connection);
                  dataAdapter.Fill(results);

                  <table class="table table-bordered">
                      <thead class="thead-light">
                          <tr>
                              @foreach (DataColumn item in results.Rows[0].Table.Columns)
                              {
                                  <th scope="col">@item.ColumnName</th>
                              }
                          </tr>
                      </thead>
                      <tbody>
                          @foreach (DataRow row in results.Rows)
                          {
                              <tr>
                                  @foreach (var column in row.ItemArray)
                                  {
                                      <td>@column.ToString()</td>
                                  }
                              </tr>
                          }
                      </tbody>
                  </table>
              }
          </div>
      </div>
    

Pipedrive 接続プロパティの取得・設定方法

Pipedrive には、接続および認証する2つの方法があります。Basic およびOAuth です。

Basic 認証

1. API トークンを取得します。
   1. Pipedrive ポータルを開きます。
   2. ページ右上のアカウント名をクリックします。Pipedrive はドロップダウンリストを表示します。
   3. 会社設定 -> Personal Preferences -> API -> Generate Token に移動します。
   4. 生成されたAPI トークンの値を記録します。また、CompanyDomain を控えておきます。これは、PipeDrive ホームページのURL に表示されます。（これは会社の開発者用サンドボックスのURL です。）
2. 次の接続プロパティを設定します。
   • APIToken：取得したAPI トークンの値。
   • CompanyDomain：開発者サンドボックスURL のCompanyDomain。
   • AuthScheme：Basic。
3. 承認されたユーザー名とパスワードでログインします。

API トークンはPipedrive ポータルに保存されます。これを取得するには、会社名をクリックし、ドロップダウンリストを使用して会社設定 -> Personal Preferences -> API に移動します。

OAuth 認証

ユーザー名やパスワードへのアクセスを保有していない場合や、それらを使いたくない場合にはOAuth ユーザー同意フローを使用します。認証方法については、ヘルプドキュメントの「OAuth 認証」セクションを参照してください。

プロジェクトをリビルドして実行します。このようにPipedrive からデータを直接取得し、HTML テーブル形式にレンダリングしています。

もちろんSaaS データソースへの接続の場合には、RDB 向けのドライバーと違い最終的にはHTTP リクエストが行われるので、サーバーサイド Blazor としてサーバーサイドから実行されるのか、クライアントサイド Blazor として、実行中のブラウザからHTTPリクエストが行われるのかの違いはあります。そのあたりはネットワークやプロキシの設定として注意が必要でしょう。設定はコード内の接続プロパティで可能です。

まとめ