こんにちは！インフラジスティックス・ジャパン ソリューションコンサルタントの滝元です。
今回はCData API ServerとApp Builderを使ってローコードでAngular アプリケーションを作っていきます。
はじめに
App BuilderはWYSIWYGドラッグ＆ドロップでAngular , Blazorプロジェクトを作成できるローコードツールです。
App Builderの機能としてOpenAPI Specの取り込みやAPIサーバーとの接続（ローカルホストも◎）をサポートしております。
データベースと接続するようなWebアプリケーションの場合、App Builder単体ではアプリケーションとしては完成しないので、別途APIサーバーの準備をする必要があります。
私自身もこれまでApp Builderのデモ用にAPIサーバーをコーディングで実装してきました。
今回の記事ではそのAPIサーバーの実装もローコードでしたい！ということで、 CData社が提供している「CData API Server」を使ってAPIサーバー構築を行います。
そして、そのAPIサーバーに接続するアプリケーションをApp Builderで作成します。
今回は画像のように左側に社員一覧のデータグリッド、右側に給与推移チャートを表示するアプリケーションを作成します。
CData API Serverとは？
CData社が提供しているローコードでAPIが自動生成できる製品です。
CData API Server を利用することで、SQL Server・MySQL、Oracleといった様々なRDB・データソースから使いやすいRESTful APIを自動生成することができます。
AngularやBlazorのようなSPAアプリケーション開発ではAPIサーバーは必須です。
デスクトップアプリやMVCで開発されてきたシステムをモダンWebフレームワークに移行したい場合には API サーバーの構築が必須となりますが、CData API Server を利用することで効率良く開発できます。
APIサーバー構築
CData API Server を使ってAPIサーバーに構築します。
APIサーバー構築前にデータベースを準備します。
データベースの準備
今回はDockerでサンプルデータの入ったMySQLのイメージが公開されているので、使用します。
https://hub.docker.com/r/genschsa/mysql-employees
（PCにDockerをインストール済み） ターミナルで以下を実行するとlocalhost:3306にMySQLが作成されます。
docker run -d \ --name mysql-employees \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD=college \ -v $PWD/data:/var/lib/mysql \ genschsa/mysql-employees
データベースクライアントで接続するとデータベースemployeesができていることが 確認できます。
接続情報
ホスト名：localhost ユーザーID：root パスワード：college
CData API Serverのセットアップ
今回は以下のURLからトライアル版をダウンロードしてローカルホストのWindows Desktop環境に構築しました。
API Server: データベースから簡単にREST API を開発・運用
ローカルホストだけでなく、Azure・AWS・GCPなどの任意のクラウドサービスやオンプレミス上にホスティングできるのがいいですね。
AWS EC2で構成するブログ記事も書かれています。 CData API Server を AWS EC2 Amazon Linux2 で構成する - CData Software Blog
インストールして、ログインまで完了しました。
MySQLに接続する
Dockerで構築したMySQLの接続情報を追加していきます。
「設定」＞「接続」 からMySQLを選択します。
接続情報を入力後、変更を保存で追加されます。
Web APIの追加
先ほど追加したMySQLの接続情報からAPIとして公開するテーブルを選びます。
「設定」＞「リソース」に移動し「リソースを追加」をクリックします。
先ほどのMySQLを選択し「次」
今回はemployeesテーブルとsalariesテーブルのAPIを作成します。
リソースが追加されました。
メニューの「API」に移動すると、APIリファレンスが表示されます。
ポチポチとしただけで、CRUDのAPIパスが作成されました！最高ですね！
ユーザーの追加
APIをリクエストするために使うトークンを取得します。
「設定」＞「ユーザー」からユーザーを追加します。
実際にリクエストしてみる
Postmanを使って実際にリクエストしてみます。
GET http://localhost:8153/api.rsc/employees_employees/
認証情報として
ヘッダーにx-cdata-authtokenをキーとして先ほど作成したユーザーのTokenを設定
今回データ量が多いのでデータ量を減らすために取得するデータ数を50にします。 CData API Server では標準でページングが提供されています。
クエリパラメータに $topをキーとして50を設定
実行してみると、
JSONデータが返ってくることが確認できました。
簡単にemployeesテーブルのAPIが作成できましたね！
App BuilderでAngularプロジェクトを作成する
画面テンプレートの選択
App Builderにログイン後プロジェクトから「新しいアプリ」を選択します。
今回は 「Nav + content」のテンプレートから始めてみます。
テンプレートを選択して出来上がったページはこちらです。
サイドバーのMaster ViewはVeiw 1,2,3 のページ共通で表示される親レイアウトとなります。 各ページに共通して表示したいコンテンツ （例えば ヘッダーやフッター）はMaster View にレイアウトを作成してください。
画面をドラッグアンドドロップで作成する
それでは View2 にグラフとチャートを配置していきます。
View2 を選択すると、「レイアウトの選択」が表示されます。
「レイアウトの選択」をクリックすると、
レイアウトのテンプレートが選べるので、今回は2つ目の「2列」を選択します。
データグリッドを配置する
左半分のレイアウトの中にデータグリッドを配置します。
左サイドメニューの「コンポーネント」から「Grid」 を選び View２の左のレイアウトの中にドラッグアンドドロップで配置してください。
データグリッドから表示されました。
データはサンプルデータとなっています。このあと先ほど作成したAPIと接続しますが、今はこのまま次の作業に移ります。
チャートを配置する
左サイドメニューの「コンポーネント」から 「Category Chart」 を選び View２の右のレイアウトの中にドラッグアンドドロップで配置してください。
チャートの種類は右メニューの 「Type」 より選択できます。
今回は線グラフを表示しようと思うので、「Line」を選択しました。
CDATA API Serverと接続しデータベースの情報をコンポーネントで表示する
ここまででデータグリッドとチャートを表示することができました。
今表示されていてるデータはサンプルデータとなっているので実際に前半で作成したCDATA API Serverと接続してデータベースの情報を表示するようにします。
CDATA API Serverと接続する
左サイドメニューの「データ」の⊕ボタンをクリックします。
「REST API」をクリック
名前と説明を入力、「URLの追加」をクリックします。
App Builder では localhost のAPIサーバーに直接リクエストを送ることができます。
GET http://localhost:8153/api.rsc/employees_employees/?$top=50
ヘッダーにx-cdata-authtokenをキーとしてCDATAユーザーのTokenを設定します。
「完了」をクリック
「データの選択」をクリック
データフィールドの「value」の下に画面に表示したい配列があるので 「value 」の ＞をクリック
今回はすべての情報を表示させるので「すべて選択」をクリックして「完了」
左のメニューにemployeesが追加されました。
データグリッドにemployeesのデータを表示する
レイアウト内のGridを選択すると、右メニューに「GRIDプロパティの設定」が表示されます。
ここからデータグリッド内で表示するデータソースを選択できるので、
「Data」に employees Table1.value を設定します。
設定が完了すると実際にAPIでリクエストした employees データが表示されることが確認できました！
チャートもCDATA API Serverと接続する
チャートにはsalariesのAPIを設定していきます。 左サイドメニューの「データ」から先ほどと同じ方法でデータソースを追加していきます。
GET http://localhost:8153/api.rsc/employees_salaries/?$top=10
チャートには from_date と salaryを 表示します。
レイアウト内の Category Chart を選択すると、右メニューに「 CATEGORY CHART プロパティの設定」が表示されます。 「Data」に salaries Table1.value を設定します。
設定が完了すると実際にAPIでリクエストした salary データが表示されることが確認できました！
Angular のプロジェクトとしてダウンロードする
プレビューで動きを確認する
右上のプレビューから実際にアプリケーションの動きを確認できます。
グリッドであれば、ソートやフィルターの動きを確認できますし、
チャートであれば、ズームやツールチップの動きも確認できます。
コードビューをオンにすると、実際に生成されるAngularのコードも確認できます。
コードをダウンロードしてローカルで起動する
編集画面に戻り右上のメニューから「ZIPのダウンロード」を選択すると、コードのダウンロードが可能となります。
※コード生成したいフレームワークを選択しておいてください。今回は「Angular」
App Builder では ZIPでダウンロードするだけでなく、GitHubにブランチを作成しプルリクエストを作成することも可能です。
ZIPでダウンロードでしたものを解凍し、Visual Studio Codeで開きます。
ターミナルから以下のコマンドでnpmのパッケージをインストールします。
npm i
インストールが終わったら、以下のコマンドでAngularのアプリケーションを起動します。
npm start
http://localhost:4200/view2 にアクセスすると先ほど作成した データグリッド とチャート が表示されていることが確認できました。
※AngularアプリケーションからCDATA API ServerにリクエストするにはCDATA API ServerでCORSの許可が必要です。
今回はCDATA API Serverの［設定］->［サーバー］より 「すべてのドメインを '*' なしで許可」をチェックしています。
コードを確認してみます。
src\app\services\salaries.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SalariesService {
constructor(private http: HttpClient) { }
public getTable1(): Observable<any> {
const options = {
headers: {
'x-cdata-authtoken': '2l7M0p8z0S8a9c6Z4t9y',
}
};
return this.http.get(`http://localhost:8153/api.rsc/employees_salaries/?$top=10`, options);
}
}
APIをリクエストするURLが
http://localhost:8153/api.rsc/employees_salaries/?$top=10
となっています。実際に APIサーバーにアクセスしていることが確認できました！
まとめ
CData API ServerとApp Builderを使って実際のデータベースのデータを表示するアプリケーションを作成することができました！
コーディングでなしでデータグリッドやチャートを表示できるので高機能なUIが求められる業務アプリケーション開発にも使える構成となっております。
バックエンドのローコードツール 「CData API Server」
フロントエンドのローコードツール 「App Builder」
是非ご活用ください！
技術サポート・無料オンライン相談会をご利用ください
今回の記事についてより詳細を知りたい場合や、デモをご覧になりたいという場合には無料オンライン相談会をご活用ください。
