Angular対応のIgnite UI for Angularを使ってXero のデータをグリッドに表示
Angularはデータバインディング、ルーティング、サービスなど業務用のモダンWebアプリケーション構築に適しているWebアプリケーションフレームワークです。
この記事ではCData Software Japanが提供するAPI Serverと連携し、取得したデータをAngular対応のIgnite UI for Angularデータグリッドに表示する方法をご紹介します。
Xero データ連携について
CData を使用すれば、Xero のライブデータへのアクセスと統合がこれまでになく簡単になります。お客様は CData の接続機能を以下の目的で利用しています：
- Xero Accounts と、米国およびオーストラリアの Payroll API の両方に接続できます。
- Customers、Transactions、Invoices、Sales Receipts などの Xero オブジェクトの読み取り、書き込み、更新、削除ができます。
- SQL ストアドプロシージャを使用して、カートへのアイテム追加、注文の送信、添付ファイルのダウンロードなどのアクションを実行できます。
- 会計、給与、ファイル、固定資産、プロジェクトデータを扱うことができます。
お客様は、Tableau、Qlik Sense、Excel などのお気に入りのツールと Xero データを定期的に統合し、Xero データをデータベースやデータウェアハウスに統合しています。
はじめに
API Server の設定
以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなXero OData サービスを作成していきましょう。
Xero への接続
Angular からXero のデータを操作するには、まずXero への接続を作成・設定します。
- API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
- 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Xero」を選択します。
- 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >> - それでは、Xero への接続設定を行っていきましょう！
-
接続には、認証用の値に加えてSchema 接続プロパティを設定してください。Xero はプライベートアプリケーション、 パブリックアプリケーション、パートナーアプリケーションに認証を提供します。設定したアプリケーションに応じて、XeroAppAuthentication プロパティを PUBLIC、PRIVATE、またはPARTNER に設定する必要があります。プライベートアプリケーションから接続するには、追加でOAuthAccessToken、OAuthClientId、 OAuthClientSecret、CertificateStoreType、CertificateStore、およびCertificateStorePassword を設定してください。
パブリックまたはパートナーアプリケーションから接続する場合は、埋め込みOAuthClientId、OAuthClientSecret、 およびCallbackURL を指定するか、アプリを登録してOAuth の値を入手できます。
Xero への認証については、ヘルプドキュメントの「はじめに」を参照してください。
- 接続情報の入力が完了したら、「保存およびテスト」をクリックします。
接続には、認証用の値に加えてSchema 接続プロパティを設定してください。Xero はプライベートアプリケーション、 パブリックアプリケーション、パートナーアプリケーションに認証を提供します。設定したアプリケーションに応じて、XeroAppAuthentication プロパティを PUBLIC、PRIVATE、またはPARTNER に設定する必要があります。プライベートアプリケーションから接続するには、追加でOAuthAccessToken、OAuthClientId、 OAuthClientSecret、CertificateStoreType、CertificateStore、およびCertificateStorePassword を設定してください。
パブリックまたはパートナーアプリケーションから接続する場合は、埋め込みOAuthClientId、OAuthClientSecret、 およびCallbackURL を指定するか、アプリを登録してOAuth の値を入手できます。
Xero への認証については、ヘルプドキュメントの「はじめに」を参照してください。
API Server のユーザー設定
次に、API Server 経由でXero にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。
- 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
-
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
-
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。
Xero 用のAPI エンドポイントの作成
ユーザーを作成したら、Xero のデータ用のAPI エンドポイントを作成していきます。
-
まず、「API」ページに移動し、
「 テーブルを追加」をクリックします。
-
アクセスしたい接続を選択し、次へをクリックします。
-
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。
OData のエンドポイントを取得
以上でXero への接続を設定してユーザーを作成し、API Server でXero データのAPI を追加しました。これで、OData 形式のXero データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。
クロスオリジンリソースシェアリング （CORS）
複数の異なるドメインへのアクセス・接続を行う場合、クロスサイトスクリプティングの制限に抵触する可能性があります。その場合は、「設定」→「サーバー」タブ内の「クロスオリジンリソースシェアリング （CORS）」の設定を行います。
Ignite UI for Angularを組み込んだAngularプロジェクトを準備
IgxGridを利用するためには、Ignite UI for Angularパッケージの組み込みやモジュールの参照が必要になります。下記に必要パッケージを組み込んだ状態のサンプルプロジェクトが公開されています。
GitHub - neri78/IgxGridBasicDemo
リポジトリをクローンしたのち、下記コマンドで現時点の実行結果を確認できます。
npm start
左側のナビゲーションからigxGrid1を選択するとローカルデータがバインドされたIgxGridが表示されます。
APIサーバーからデータを取得するサービスを作成
AngularではAPIサーバーのような外部リソースからデータを取得する場合、サービスを作成しViewとは直接関係のないデータアクセス部分を分離させることが一般的です。 ng generateコマンドを利用し、ApiServerServiceを作成します。
ng generate service service/ApiServer
serviceフォルダーとapi-server.service.spec.ts, api-server.sergice.tsファイルがそれぞれ作成されます。
レスポンスおよび Xero のデータのインターフェースを宣言
APIサーバーから Xero の情報がvalueに保存されたデータが返されるため、レスポンスおよび、 Xero のデータのインターフェースを作成された ApiServerServiceクラスのスコープの外側に宣言します。
api-server.service.ts
// response
interface CustomersResponse {
value: Customer[];
}
// Xero Data Excample
export interface Customer {
rowguid: string; // "3f5ae95e-b87d-4aed-95b4-c3797afcb74f"
LastName: string; // "Gee"
PasswordHash: string; // "L/Rlwxzp4w7RWmEgXX+/A7cXaePEPcp+KwQhl2fJL7w="
Suffix: string; // null
Title: string; // "Mr."
EmailAddress: string; // "orlando0@adventure-works.com"
Phone: string; // "245-555-0173"
CustomerID: string; // 1
PasswordSalt: string; // "1KjXYs4="
SalesPerson: string; // "adventure-works\pamela0"
GUID: string; // "3F5AE95EB87D4AED95B4C3797AFCB74F"
CompanyName: string; // "A Bike Store"
FirstName: string; // "Orlando"
NameStyle: boolean; // false
MiddleName: string; // "N."
ModifiedDate: Date; // "2005-08-01T00:00:00.0000+00:00"
}
必要なモジュールをインポート
api-server.service.tsファイルの先頭に戻り、通信、データ処理にに必要なモジュールをそれぞれインポートします。
api-server.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map} from 'rxjs/operators';
APIサーバーへの接続に必要なAuthToken、URL、リクエストヘッダを宣言
次に最初に設定したAPIサーバーに接続するためのAuthToken、URL、そして認証に必要なリクエストヘッダをApiServerServiceのプライベート変数として宣言します。
api-server.service.ts
// Auth Token
private authToken = '設定したAuthToken';
// APIサーバーRestAPIのURL、今回は Xero のデータを返すRest APIのURLに固定
private baseUrl = ' Xero のデータのRest API URL';
// リクエストヘッダ
private headers = new HttpHeaders({
'x-cdata-authtoken': this.authToken
});
コストラクタで依存関係の注入を利用し、HttpClientのインスタンスを取得
コンストラクタの引数として、HttpClientを受け取るように変更します。クラスインスタンスはAngularフレームワークにより作成されます。
api-server.service.ts
constructor(private httpClient: HttpClient) { }
リクエストの設定とレスポンスの処理
Xero のデータを取得するgetCustomers()メソッドを宣言し、HttpClient、pipeを利用してリクエストの設定と、レスポンスの処理、エラーハンドリングを実装します。
api-server.service.ts
public getCustomers() {
// HttpClientを利用し、APIサーバーにアクセス
return this.httpClient.get(
`${this.baseUrl}/`, {headers: this.headers})
.pipe(
// エラー時の処理
catchError(this.handleError('getData:Customer', [])),
// 返されたデータからCustomerの配列を取得
map(response => (response as CustomersResponse).value)
);
}
// Error時の処理。デモ用に簡略化
private handleError(operation = 'operation', result?: T) {
return (error: any): string => {
console.error('An error occurred', error);
return error;
};
}
これでサービスの準備が整いました。
グリッド画面でデータを取得
次にグリッドを表示している画面側のコードを実装します。
必要なモジュールをインポート
igxgrid1\igxgrid1.component.tsでは先ほど実装したApiServerServiceと、サービス呼び出しの結果返されるObservableを利用するため、必要なモジュールをインポートします。
igxgrid1\igxgrid1.component.ts
import { ApiServerService, Customer } from '../service/api-server.service';
import { Subscription } from 'rxjs';
購読を管理するためのSubScription変数を宣言
このApiServerServiceはデータを非同期で取得します。そのため、呼び出しが完了した後にロジックを実行するための購読処理を後ほど実装します。この購読は最終的には購読解除を行う必要があるtまえ、プライベート変数を宣言します。
igxgrid1\igxgrid1.component.ts
subscription: Subscription;
コストラクタで依存関係の注入を利用し、ApiServerServiceのインスタンスを取得
igxgrid1\igxgrid1.component.ts
constructor(private apiServerService: ApiServerService) { }
ngOnInitでデータを取得しグリッドにデータを表示
igxgrid1\igxgrid1.component.tsには、ngOnInit()メソッドが実装されており、データグリッド画面の初期化時に、あらかじめ用意されているサンプルデータを読み込むコードが実装されています。このlocalDataにコレクションを代入することでグリッドにデータが表示されます。このコードをコメントアウトします。
igxgrid1\igxgrid1.component.ts
ngOnInit() {
// コメントアウト
// this.localData = employeesData;
}
コメントアウトしたコードの代わりに、ApiServerServiceを利用してデータを取得し、localDataに割り当てるコードを実装します。
igxgrid1\igxgrid1.component.ts
ngOnInit() {
// APIServerを呼び出し、Xero のデータを取得
this.subscription = this.apiServerService.getCustomers()
.subscribe( (data: Customer[]) => {
this.localData = data;
});
}
ngOnDestoryで購読を解除
このコンポーネントが破棄されるタイミングでメモリーリークを防ぐため、購読を解除します。
igxgrid1\igxgrid1.component.ts
// unsubscribe
ngOnDestroy() {
if (this.subscription !== undefined) {
this.subscription.unsubscribe();
}
}
サービス、モジュールの登録
最後に作成したサービスや必要なモジュールをアプリケーションに登録します。
モジュール参照のインポート
app.module.tsにApiServerServiceおよびHttpClientModuleをインポートします。
app.module.ts
import { ApiServerService } from './service/api-server.service';
import { HttpClientModule } from '@angular/common/http';
importsセクションでHttpClientModuleをインポート
@NgModuleのimportsセクションにHttpClientModuleをインポートします。
app.module.ts
imports: [
...
,HttpClientModule
],
providersセクションでApiServerServiceを宣言
@NgModuleのimportsセクションにHttpClientModuleをインポートします。
app.module.ts
providers: [ApiServerService],
これで設定は完了です。再度 __npm start__ コマンドで実行してみましょう！
全てのコードはこちらのBranchでご覧いただけます（AuthToken、並びにURLは空白のため適宜設定してください）