Vercel のデータをDevExpress Data Grid にデータバインドする。

CData API Driver for ADO.NET は、サードパーティ製コントロールと組み合わせて使える標準的なADO.NET データアクセスコンポーネントを備えています。通常のADO.NET データバインドの手順に沿って進めるだけで、UI コントロールからリアルタイムデータへの双方向アクセスを実現できます。この記事では、CData のコンポーネントを使って DevExpress UI コントロール（Windows Forms およびWeb コントロール） にデータバインドする方法を紹介します。今回は、リアルタイムのデータを可視化するチャートにデータバインドしていきます。

API キー認証の設定

Vercel は Bearer トークン認証を使用します。API キーとして、パーソナルアクセストークンまたは OAuth アクセストークンのいずれかを使用できます。

パーソナルアクセストークンを取得するには、以下のステップで進めます：

1. https://vercel.com/ で Vercel アカウントにログインします
2. Account Settings > Tokens に移動します。
3. Create Token をクリックし、名前と有効期限を入力して Create をクリックします。
4. 生成されたトークンをコピーします（一度しか表示されません）。

トークンを取得したら、以下の接続プロパティを設定します：

• AuthScheme：APIKey に設定します。
• APIKey：Vercel のパーソナルアクセストークンまたは OAuth アクセストークンに設定します。

接続文字列の例

Profile=C:\profiles\Vercel.apip;AuthScheme=APIKey;APIKey=your_access_token;

チームの利用

Vercel のリソースの多くは、チームにスコープされています。すべてのリクエストを特定のチームにスコープするには、TeamId 接続プロパティにチームの ID を設定します。チーム ID は、Teams テーブルをクエリするか、Vercel ダッシュボードで確認できます。あるいは、サポートされている場合は SQL クエリの WHERE 句で TeamId を指定することもできます。

Vercel への接続

認証を設定すると、Vercel に接続して、Projects、Deployments、Teams、Domains などの利用可能なテーブルからデータをクエリできます。

Windows Forms コントロール

下のコードでは、Vercel でDevExpress のチャートに追加する方法を説明します。APIDataAdapter はチャートコントロールのSeries プロパティにバインドします。コントロールのDiagram プロパティはx 軸とy 軸をカラム名として定義します。

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Vercel.apip;AuthScheme=APIKey;APIKey=your_access_token;")) {
  APIDataAdapter dataAdapter = new APIDataAdapter(
  "SELECT ,  FROM User WHERE  = ''", connection);

  DataTable table = new DataTable();
  dataAdapter.Fill(table);
  DevExpress.XtraCharts.Series series = new DevExpress.XtraCharts.Series();
  chartControl1.Series.Add(series);
  DataTable table = new DataTable();
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
  chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}

Web コントロール

下のコードではVercel でDevExpress Web を操作するための設定方法を説明します。APIDataAdapter はチャートのSeries プロパティにバインドします。Diagram プロパティはx 軸とy 軸をカラム名として定義します。

using DevExpress.XtraCharts;

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Vercel.apip;AuthScheme=APIKey;APIKey=your_access_token;"))
{
  APIDataAdapter APIDataAdapter1 = new APIDataAdapter("SELECT ,  FROM User WHERE  = ''", connection);
  DataTable table = new DataTable();
  APIDataAdapter1.Fill(table);
  DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
  WebChartControl1.Series.Add(series);
  DataTable table = new DataTable();
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = ScaleType.Numerical;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}