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

詳細情報をご希望ですか?

無償トライアル:

ダウンロードへ

製品の詳細情報へ:

Ponparemall ADO.NET Provider

在庫、商品、受注などのPonparemall アカウントデータを組み込んだ強力な.NET アプリケーションを迅速に作成して配布できます。



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



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

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

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

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

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

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

Blazor にADO.NET Provider for Ponparemall を接続

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

Blazor でPonparemall データをSELECT

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

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

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

Hello, world!

Welcome to your Data app.
@using (PonparemallConnection connection = new PonparemallConnection( "InventoryUserId=Inventory UserId;InventoryPassword=Invetory Password;")) { var sql = "SELECT OrderNumber, OrderStatus FROM Orders"; var results = new DataTable(); PonparemallDataAdapter dataAdapter = new PonparemallDataAdapter(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()
}

Ponparemall に接続するには、ShopUrl、InventoryUserId、InventoryPassword、OrderUserId、OrderPassword、PaymentUserId、およびPaymentPassword が必要です。

Ponparemall へのアクセスの設定

Ponparemall には各API のId とPassword が必要です。取得するには、以下の手順に従ってください。

  • Ponparemall Manager にログインし、メニューの「各種申請」の「WebAPI利用申請」をクリックします。
  • Web API メニューの「WebAPIサービス利用申請」をクリックし、利用申請を行います。
  • 後日、Ponparemall から必要なId とPassword が送られてきます。

Ponparemall アカウントの認証

次の接続プロパティを設定して接続します。

  • ShopUrl:接続先のPonparemall Shop URL を設定。「http://storetst4.ponparemall.com/sample/」に含まれる「sample」の部分を入力します。
  • InventoryUserId:「在庫API」のユーザID を設定。このプロパティは、Inventory テーブルにアクセスする場合に必要です。
  • InventoryPassword:「在庫API」のパスワードを設定。このプロパティは、Inventory テーブルにアクセスする場合に必要です。
  • OrderUserId:「受注API」のユーザID を設定。このプロパティは、Orders テーブルにアクセスする場合に必要です。
  • OrderPassword:「受注API」のパスワードを設定。このプロパティは、Orders テーブルにアクセスする場合に必要です。
  • PaymentUserId:「決済API」のユーザID を設定。このプロパティは、Payments テーブルにアクセスする場合に必要です。
  • PaymentPassword:「決済API」のパスワードを設定。このプロパティは、Payments テーブルにアクセスする場合に必要です。

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

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

まとめ

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