Angular2 でデータベースアプリを簡単に構築


Angular2 は、Angular JS の原則を基に構築・拡張された、動的な Web アプリ向けのフレームワークです。CData API Server を使えば、オンプレミスおよびクラウドベースのデータベースを含む 80 以上のデータソースに対して REST API を生成できます。この記事では、 CData API Server をセットアップして SQLite データベース用の REST API を作成し、ライブでデータベースデータにアクセスできるシンプルなシングルページアプリケーション（SPA）を構築する方法を説明します。この SPA は、データベースデータに基づいて HTML テーブルを動的に構築・表示します。この記事ではコードの大部分を解説しますが、サンプルの Angular2 プロジェクトと SQLite データベースをダウンロードして、完全なソースコードを確認し、実際に機能をテストしてみてください。

API Server のセットアップ

まだインストールしていない場合は、CData API Server をダウンロードする必要があります。API Server をインストールしたら、アプリケーションを起動し、データへの接続を設定します（この記事では、付属のサンプルデータベースを使用します）。そして、SPA でアクセスしたいテーブル用の REST API を作成するように設定します。

CORS の有効化

Angular2 Web アプリと API Server が異なるドメインにある場合、Angular2 はクロスドメインリクエストを生成します。これは、Angular2 Web アプリがクエリするサーバーで CORS（クロスオリジンリソースシェアリング）を有効にする必要があることを意味します。API Server の CORS を有効にするには、API Server の SETTINGS ページにある Server タブに移動します。以下の設定を調整してください：

  • 「Enable cross-origin resource sharing (CORS)」のチェックボックスをオンにします。
  • 「Allow all domains without '*'」のチェックボックスをオンにするか、接続を許可するドメインを Access-Control-Allow-Origin に指定します。
  • Access-Control-Allow-Methods を「GET,PUT,POST,OPTIONS」に設定します。
  • Access-Control-Allow-Headers を「authorization」に設定します。
  • Save Changes をクリックします。

データベース接続の設定

API Server をデータベースに接続するには、SETTINGS ページの Connections タブに移動します。そこで Add Connection をクリックします。この記事では、SQLite データベースに接続します。接続を設定する際に、接続に名前を付け、データベースとして SQLite を選択し、Database フィールドに SQLite データベースへのフルパスを入力します（付属のデータベースは SQLite Tutorial の chinook.db です）。

ユーザーの設定

次に、API Server を通じてデータベースデータにアクセスするためのユーザーを作成します。SETTINGS ページの Users タブでユーザーを追加・設定できます。ここでは、データを表示するだけのシンプルな SPA を作成するため、読み取り専用アクセスを持つユーザーを作成します。 Add をクリックし、ユーザー名を入力し、Privileges で GET を選択して、Save Changes をクリックします。

スクリーンショットでわかるように、読み書きアクセス権を持つユーザーはすでに設定されています。この記事では、読み取り専用ユーザーと、関連する authtoken を使用して API Server にアクセスします。

テーブルへのアクセス

ユーザーを作成したら、データベーステーブルへのアクセスを有効にする準備が整いました。テーブルを有効にするには、SETTINGS ページの Resources タブで Add Resources ボタンをクリックします。アクセスしたいデータ接続を選択し、 Next をクリックします。接続を選択したら、テーブル名をクリックして Next をクリックすることでリソースの有効化を開始できます。リソースは一度に1つのテーブルずつ追加する必要があります。この例では、すべてのテーブルを有効にしました。

REST API のサンプル URL

データベースへの接続を設定し、ユーザーを作成し、API Server にリソースを追加したことで、OData プロトコルに基づいた、これらのリソース用の簡単にアクセスできる REST API が用意できました。以下に、テーブルとそれらにアクセスするための URL のリストを示します。テーブルへのアクセスに関する情報は、API Server の API ページで確認できます。URL には、API Server の address と port が必要です。Angular2 を使用しているため、デフォルトで JSON データを返さない URL の末尾に @json パラメータを追加します。

テーブル         URL
エンティティ（テーブル）リスト http://address:port/api.rsc/
albums テーブルのメタデータ http://address:port/api.rsc/albums/$metadata?@json
albums データ http://address:port/api.rsc/albums

標準の OData フィードと同様に、返されるフィールドを制限したい場合は、クエリに $select パラメータを追加できます。また、$filter、$orderby、$skip、$top などの標準 URL パラメータも使用できます。

シングルページアプリケーションの構築

API Server のセットアップが完了したら、SPA を構築する準備が整いました。.zip ファイルに含まれる SPA のソースファイルを順に説明し、関連するコードセクションについて解説していきます。いくつかのソースファイルは、angular.io の Angular2 チュートリアルを参考にしています。

index.html

これは SPA のホームページであり、ソースコードは主に必要な Angular2 ライブラリをインポートするための script 要素で構成されています。

app/main.ts

この TypeScript ファイルは、アプリをブートストラップするために使用されます。

app/rxjs-extensions.ts

この TypeScript ファイルは、必要な Observable の拡張機能と演算子をインポートするために使用されます。

app/app.module.ts

この TypeScript ファイルは、SPA を作成・実行するために必要なモジュールをインポートするためのクラスを作成するために使用されます。

app/app.component.css

このファイルは、HTML の h1、h2、th、td 要素を変更するための CSS ルールセットを作成します。

app/app.component.html

このファイルは SPA のテンプレートです。テンプレートは、タイトル、利用可能なテーブルを選択するドロップダウン、表示するカラムを（複数）選択するドロップダウン、データを取得するボタン、データ用のテーブルで構成されています。*ngIf ディレクティブの条件に基づいて各セクションが有効/無効になり、メニューとテーブルは API Server への呼び出し結果に基づいて動的に構築されます。*ngFor ディレクティブを使用して返されたデータをループ処理します。

API Server へのすべての呼び出しと変数への値の割り当ては、AppComponent クラスと AppService クラスで行われます。

<h1>{{title}}</h1>
<br>
<label>Select a Table</label>
<br>
<select [(ngModel)]="selectedTable" (change)="tableChanged()">
  <option *ngFor="let sel_table of availableTables" [value]="sel_table">{{sel_table}}</option>
</select>
<br>
<br>
<label>Select Columns</label>
<br>
<select *ngIf="selectedTable" [(ngModel)]="selectedColumns" (change)="columnsChanged()" multiple>
  <option *ngFor="let sel_column of availableColumns" [value]="sel_column">{{sel_column}}</option>
</select>
<br>
<br>
<button *ngIf="selectedTable && selectedColumns" (click)="dataButtonClicked()">Get [{{selectedTable}}] Data</button>
<br>
<br>
<table *ngIf="selectedTable && selectedColumns">
  <thead>
  <tr>
    <th *ngFor="let column of selectedColumns">{{ column }}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let row of tableData">
    <td *ngFor="let column of selectedColumns">{{ row[column] }}</td>
  </tr>
  </tbody>
</table>

app/app.service.ts

この TypeScript ファイルは、API Server からデータを取得するためのサービスを構築します。テーブルのリストを取得する関数、特定のテーブルのカラムリストを取得する関数、テーブルからデータを取得する関数があります。また、API Server が返すテーブルのメタデータを表すクラスもあります。

API_Table

API Server が返すテーブルのメタデータには、テーブルの名前、種類、URL が含まれます。ここでは name フィールドのみを使用しますが、SPA を拡張する場合に備えて、オブジェクト全体を渡しています。

export class API_Table {
  name: string;
  kind: string;
  url: string;
}

constructor()

コンストラクタでは、Http クラスのプライベートインスタンスを作成し、先ほど作成したユーザーの user/authtoken 資格情報に基づいて Authorization HTTP ヘッダーを設定します。そして、このヘッダーを HTTP リクエストに含めます。

constructor(private http: Http) {
  this.headers.append('Authorization', 'Basic ' + btoa(this.userName+":"+this.authToken));
}

getTables()

この関数はテーブルのリストを返します。リストは、Authorization ヘッダーを含む HTTP GET リクエストを API Server のベース URL（http://localhost:8153/api.rsc）に送信することで取得されます。

getTables(): Promise&lt;API_Table[]&gt; {
  return this.http.get(this.baseUrl, {headers: this.headers})
    .toPromise()
    .then(response => response.json().value )
    .catch(this.handleError);
}

getColumns()

この関数は、tableName で指定されたテーブルのカラムリストを返します。$metadata エンドポイントはデフォルトで XML 形式のデータを返すため、URL に @json パラメータを渡して、API Server から JSON データを取得するようにします。JSON データを取得したら、ドリルダウンしてカラム名のリストを取得できます。

getColumns(tableName: string): Promise&lt;string[]&gt; {
  return this.http.get(`${this.baseUrl}/${tableName}/$metadata?@json`, {headers: this.headers})
    .toPromise()
    .then(response => response = response.json().items[0]["odata:cname"] )
    .catch(this.handleError);
}

getTableData()

この関数は、指定されたテーブルとカラムのデータ行を返します。URL で tableName を渡し、カラムのリスト（カンマ区切りの文字列）を $select URL パラメータの値として渡します。

getTableData(tableName:string, columnList: string): Promise&lt;Object[]&gt; {
  return this.http.get(`${this.baseUrl}/${tableName}/?$select=${columnList}`, {headers: this.headers})
    .toPromise()
    .then(response => response = response.json().value )
    .catch(this.handleError);
}

app/app.component.ts

この TypeScript ファイルでは、SPA のイベントに反応する関数を定義しています。これらの関数内で、AppService の関数を呼び出し、結果を使用して SPA のさまざまな要素を設定します。これらの関数は比較的シンプルで、必要に応じて変数に値を割り当てています。

ngOnInit()

この関数では、AppService の getTables 関数を呼び出します。getTables は API Server のテーブルクエリから生データオブジェクトを返すため、各結果の name フィールドのみを利用可能なテーブルの配列にプッシュし、オブジェクト全体をプッシュしないようにする必要があります。

ngOnInit(): void {
    this.appService
      .getTables()
      .then( tables => {
        for (let tableObj of tables) {
          this.availableTables.push( tableObj.name )
        }
      });
  }

tableChanged()

この関数は、ユーザーが SPA のドロップダウンメニューから別のテーブルを選択するたびに呼び出されます。この関数は、API Server を呼び出して指定されたテーブルのカラムリストを取得し、別のドロップダウンメニューに表示します。

tableChanged(): void {
    this.appService
      .getColumns(this.selectedTable)
      .then( columns => this.availableColumns = columns );

    this.selectedColumns = [];
  }

columnsChanged()

この関数は、ユーザーがドロップダウンメニューで選択するカラムを変更するたびに呼び出されます。ボタンをクリックした後に選択されたカラムが元々選択されていたものと異なる場合に、空のテーブルが表示されないように、テーブルデータをクリアします。

columnsChanged(): void {
    this.tableData = [];
  }

dataButtonClicked()

この関数は、選択されたカラムの配列を OData クエリの $select パラメータで必要なカンマ区切りの文字列に結合し、テーブル名とリストを AppService の getTableData 関数に渡します。結果のデータは、HTML テーブルの表示に使用されます。

dataButtonClicked(columnList: string): void {
    columnList = this.selectedColumns.join(',');
    this.appService
      .getTableData( this.selectedTable, columnList )
      .then( data => this.tableData = data );
  }

シングルページアプリケーションの実行

データへの接続を設定し、SPA のソースファイルを確認したので、シングルページアプリケーションを実行する準備が整いました。SPA を実行するには、マシンに node.js と npm がインストールされている必要があります。サンプルのダウンロードには、事前に設定された package.json ファイルが含まれています。SPA のルートディレクトリでコマンドラインから npm install を実行して、必要なモジュールをインストールできます。SPA を起動するには、同じディレクトリで npm start を実行するだけです。

SPA が起動すると、タイトルとテーブルを選択するドロップダウンメニューが表示されます。テーブルのリストは API Server から取得され、API Server を設定するときにリソースとして追加したすべてのテーブルが含まれます。

テーブルを選択すると、カラムを選択するための複数選択可能なドロップダウンメニューが表示され、テーブルに表示したいカラムを選択できます。カラムを選択すると、テーブルヘッダーが表示されることがわかります。

テーブルとカラムを選択したら、Get [table] Data ボタンをクリックして、API Server を介してデータベースからデータを取得できます。HTML テーブルには、ボタンをクリックする前に選択したテーブルとカラムに基づいてデータが表示されます。

無料トライアルと詳細情報

動的な Web ページでデータベースデータに接続する基本的な例を確認しました。API Server ページにアクセスして、API Server の詳細情報を確認し、API Server をダウンロードしてください。SQLite、MySQL、SQL Server、Oracle、PostgreSQL など、オンプレミスおよびクラウドベースのデータベースからのライブデータを使用して、動的な Web ページの構築を始めましょう。いつものように、ワールドクラスのサポートチームが、ご質問にお答えします。

In this article

Related articles