製品をチェック

BigCommerce Data Provider の30日間無償トライアルをダウンロード

 30日間の無償トライアルへ

製品の詳細

BigCommerce アイコン BigCommerce ADO.NET Provider 相談したい

BigCommerce EC データに連携する.NET アプリケーションを素早く、簡単に開発できる便利なドライバー。

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

ASP.NET Core Blazor C# でBigCommerce にSQL でクエリ。

杉本和也
リードエンジニア

最終更新日:2021-11-03
bigcommerce ロゴ

CData

ado ロゴ画像
Blazor ロゴ

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

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

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

Blazor はADO.NET Provider の利用が可能

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

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

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

NuGet でADO.NET BigCommerce Provider をインストール

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

Blazor にADO.NET Provider for BigCommerce を接続

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

Blazor でBigCommerce のデータをSELECT

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

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

Hello, world!

Welcome to your Data app.
@using (BigCommerceConnection connection = new BigCommerceConnection( "OAuthClientId=YourClientId; OAuthClientSecret=YourClientSecret; StoreId='YourStoreID'; CallbackURL='http://localhost:33333'")) { var sql = "SELECT FirstName, LastName FROM Customers WHERE FirstName = 'Bob'"; var results = new DataTable(); BigCommerceDataAdapter dataAdapter = new BigCommerceDataAdapter(sql, connection); dataAdapter.Fill(results); @foreach (DataColumn item in results.Rows[0].Table.Columns) { } @foreach (DataRow row in results.Rows) { @foreach (var column in row.ItemArray) { } }
@item.ColumnName
@column.ToString()
}

BigCommerce 認証は標準のOAuth フローに基づいています。

Store ID の取得

BigCommerce Store に接続するには、StoreId が必要です。Store Id を確認するには、以下の手順に従ってください。

  1. BigCommerce アカウントにログインします。
  2. ホームページから「Advanced Settings」->「API Accounts」 を選択します。
  3. 「Create API Account」->「Create V2/V3 API Token」をクリックします。
  4. 画面にAPI Path という名前のテキストボックスが表示されます。
  5. テキストボックス内に、次の構造のURL が表示されます:https://api.bigcommerce.com/stores/{Store Id}/v3。
  6. 上記で示したように、Store Id は'stores/' と'/v3' パスパラメータの間にあります。
  7. Store Id を取得したら、「キャンセル」 をクリックするか、まだ持っていない場合はAPI Account の作成に進むことができます。

パーソナルアクセストークンの取得

加えて、自分のデータをテストおよびアクセスするには、個人用トークンを取得する必要があります。個人用トークンを取得する方法は次のとおりです。

  1. BigCommerce アカウントにログインします。
  2. ホームページから「Advanced Settings」->「API Accounts」 を選択します。
  3. 「Create API Account」->「Create V2/V3 API Token」をクリックします。
  4. アカウント名を入力します。
  5. 作成するAPI Account の「OAuth Scopes」を選択します。CData 製品 は"None" とマークされたデータにアクセスできません。また、"read-only" とマークされたデータを変更できません。
  6. 「保存」をクリックします。

BigCommerce への認証

次に、以下を設定してデータに接続できます。
  • StoreId:API Path テキストボックスから取得したStore ID に設定。
  • OAuthAccessToken:生成したトークンに設定。
  • InitiateOAuth:OFF に設定。

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

Blazor アプリからBigCommerce のデータをクエリ

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

まとめ

このようにサーバーサイドBlazor アプリから簡単にADO.NET Provider を使ってBigCommerce にリアルタイムでデータ取得を行うアプリを作ることができました。Blazor が.NET Core、フレームワークのツール群を使えるというメリットを活かすことができます。今回はSELECT * でしたが、フィルタリングやJOIN も可能です。INSERT、UPDATE、DELETE も標準SQL で書くことができます。是非、30日の無償評価版でシンプルかつパワフルなADO.NET Provider でのサーバーサイドBlazor 連携をお試しください。

関連コンテンツ

トライアル・お問い合わせ

30日間無償トライアルで、CData のリアルタイムデータ連携をフルにお試しいただけます。記事や製品についてのご質問があればお気軽にお問い合わせください。