CData Software Blog

クラウド連携のCData Software の技術ブログです。

Unifinity モバイルアプリプラットフォームで使えるクラウドDB / NoSQL アクセスのためのAPI Server 活用方法

こんにちは。CData Software Japan リードエンジニアの杉本です。

今回は普段とは趣向を変えて、モバイルアプリ開発プラットフォームである「Unifinity」と組み合わせた CData API Server の活用方法をお送りします。

Unifinity とは?

「Unifinity」はノンプログラミングでのモバイルアプリ開発を実現するプラットフォームサービスです。

iOS / Android / Windows のマルチOSで活用可能です。

https://www.unifinity.co.jp/

f:id:sugimomoto:20190906162436p:plain

Unifinity Studio という専用のツールで、UIをベースにアプリ画面をデザインしたり、DB・APIなどと連動した処理・ロジックを作成することができます。

f:id:sugimomoto:20190906162453p:plain

アーキテクチャとシナリオ

今回は問い合わせ管理用というシナリオでアプリを開発します。

通常、モバイルのバックエンドを構成する場合、REST APIを開発しモバイルクライアントサイドと連携させるのが一般的ですが、RDBの基本的なCRUD操作を実装するだけでも、それなりの開発コストが発生すると思います。

そこで今回はRDBからFul CURDなREST APIを生成可能な CData API Server を用いて、MySQLとの連携APIをバックエンドとして構成します。

クライアントサイドはこのAPIを通じて、データを取得して一覧を表示、また問い合わせを作成することができるようにします。

f:id:sugimomoto:20190906162602p:plain

最終的には以下のようなAPIとアプリを作成します。(GIF動画)

https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/unifinity.gif

API Server の構築

それではまず API Server を構成します。API Server は30日間トライアル版が提供されているので、以下のURLからダウンロードして、試すことが可能です。

https://www.cdata.com/jp/apiserver/

API Server の構築方法については、以下のBlogを参考にしてみてください。

www.cdatablog.jp

また、Amazon AMI を用いた構成も可能です。

www.cdatablog.jp

接続先DBのテーブルを構成

API Server を構築したら、次には問い合わせ管理ようのテーブルをMySQLで構成します。

「Inquiries」というテーブルで以下のような項目で進めます。

  • ユニークキー:No
  • 名前:Name
  • メールアドレス:MailAddress
  • 件名:Subject
  • 問い合わせ内容:Body
  • 問い合わせ日付:CreateDate

SQLは以下の通りになります。NoとCreateDateは自動生成される項目として構成しました。

CREATE TABLE `inquiries` (
  `No` INT NOT NULL AUTO_INCREMENT,
  `Name` VARCHAR(45) NULL,
  `MailAddress` VARCHAR(45) NULL,
  `Subject` VARCHAR(45) NULL,
  `Body` LONGTEXT NULL,
  `CreateDate` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`No`),
  UNIQUE INDEX `Id_UNIQUE` (`No` ASC));

あとは、API Server から作成したDBに接続し、テーブルをAPIとして公開します。

接続先として、MySQLを構成しておき

f:id:sugimomoto:20190906162640p:plain

リソースタブから「リソースの追加」をクリック

f:id:sugimomoto:20190906162648p:plain

接続先のMySQLを選択して、次へ進み

f:id:sugimomoto:20190906162656p:plain

予め作成しておいた、「inquiries」テーブルを選択します。

f:id:sugimomoto:20190906162703p:plain

項目はデフォルトのままで大丈夫です。必要に応じて許可する操作(CRUD)も選択できます。

f:id:sugimomoto:20190906162711p:plain

これで保存すれば、以下のようにAPIが自動的に生成されます。

f:id:sugimomoto:20190906162719p:plain

併せてアクセス用のユーザーも作成しておきましょう。ここで発行される認証トークンを後で使用します。

f:id:sugimomoto:20190906162729p:plain

Unifinity プロジェクトの作成

それでは、次にアプリケーション側を作成していきます。

まず、Unifinity Studioを立ち上げて

f:id:sugimomoto:20190906162735p:plain

新しくプロジェクトを作成します。今回は「inquiriesProject」としました。

f:id:sugimomoto:20190906162741p:plain

DBの作成

次に画面を作る前に、データを格納するためのDBを作ってしまいます。

DBタブを選んで、「+」ボタンでDBを追加します。名前は「inquiries」です。

f:id:sugimomoto:20190906162751p:plain

以下のように、ほぼMySQLと同じ構成でDBを作成しました。物理項目名をAPIの項目名と同じにしておくと、後々処理が楽になります。

f:id:sugimomoto:20190906162759p:plain

画面の作成

画面は一覧表示画面と入力画面と2種類を作成します。今回は以下のようなデザインで構成しました。

画面の詳しい作り方はUnifinity のリファレンスサイトを参考にしてみてください。

この記事ではポイントだけ解説しておきます。

一覧画面

f:id:sugimomoto:20190906162806p:plain

一覧画面に表示している「表」は先程作成したDBの「inquiries」と紐付けています。

f:id:sugimomoto:20190906162813p:plain

新規作成ボタンをクリックすることで、問い合わせ登録画面に移動するように設定しています。

f:id:sugimomoto:20190906162819p:plain

また画面本体のオープン時の処理として後ほど解説するデータ取得ロジックを指定しています。これによって、表にデータが表示されるようになります。

f:id:sugimomoto:20190906162825p:plain

# 登録画面

f:id:sugimomoto:20190906162833p:plain

登録画面では、各項目の入力フィールドを用意し、登録ボタンに後ほど紹介する「データ登録ロジック」を紐付けています。登録後、一覧画面に移動するように遷移先も設定しました。

この移動は戻るボタンにも同様に設定しています。

f:id:sugimomoto:20190906162842p:plain

ロジックの作成

最後にアプリの要となるロジック部分を構成します。

今回は一覧画面を表示するための「データ取得ロジック」と登録画面からAPIを経由してデータ登録処理を行うための「データ登録ロジック」の2つを作成します。

# データ取得ロジック

データ取得ロジックは以下のような処理で構成されています。Cdata API Serverにリクエストを送り、そのデータをデータベースに書き込むことで一覧表示を実現しています。

f:id:sugimomoto:20190906162849p:plain

API Serverへのリクエストには、ヘッダーで認証情報を指定する必要があります。そのため、ディクショナリー作成コンポーネントを使って、ContentTypeとともに、「x-cdata-authtoken」というプロパティで先程API Serverのユーザー作成画面で構成したToken情報を設定するようにします。

f:id:sugimomoto:20190906162855p:plain

HTTPリクエストには「ネットワーク/GET2」のコンポーネントを使用し、URIAPI Serverのinquiriesリソースエンドポイント「例:http://localhost:8387/api.rsc/sakila_inquiries」を指定し、ヘッダーオプションに先程作成したディクショナリを指定します。

f:id:sugimomoto:20190906162902p:plain

あとはJSON構造をディクショナリに格納し、配列構造を持っている「value」の部分を読み込んだ上で、データベースに書き込みます。

f:id:sugimomoto:20190906162908p:plain

f:id:sugimomoto:20190906162914p:plain

データベースに書き込む際には、予めデータクリアーをするように指定しておきましょう。

f:id:sugimomoto:20190906162919p:plain

# データ登録ロジック

データ登録ロジックは以下のような処理になっています。「登録」ボタンがクリックされたタイミングで各テキストボックスの入力値を取得し、リクエスト用のJSONディクショナリを構成し、API ServerにPOSTリクエストを送ります。

f:id:sugimomoto:20190906162927p:plain

コントロールの取得は「コントロール/内容取得」コンポーネントで簡単に取得できます。これを必要な項目分繰り返します。

f:id:sugimomoto:20190906162936p:plain

そして、JSONオブジェクトのベースとなるディクショナリを取得した項目を元に構成します。キーとなる名称はAPI側の各項目名称に合わせます。

f:id:sugimomoto:20190906162940p:plain

仕上げに作成したディクショナリをJSONとして書き出します。

f:id:sugimomoto:20190906162947p:plain

あとは「ネットワーク/POST2」コンポーネントを使用して、GETの時と同じURIに向けてリクエストを送ります。ヘッダーは同じ設定で、送信パラメーターに生成したJSONを指定します。

f:id:sugimomoto:20190906162952p:plain

実行

それでは実行してみましょう。Unifinity Studioの「▶」ボタンをクリックすることで、アプリの動作を確認できます。

f:id:sugimomoto:20190906162958p:plain

f:id:sugimomoto:20190906163017p:plain

終わりに

CData API Server と Unifinity Studioを使った、API連携のモバイルアプリ作成をお送りしました。

今回はMySQLでしたが、CData API Server は OracleSQL ServerPostgreSQLといったRDBはもちろん、MongoDBやRedisといったNoSQLからもAPIを生成できます。

また、API Server はRDB・NoSQL以外にも、各種クラウドサービス・SaaSAPIを部分的に公開したり、REST ful の規格であるODataに則った形で公開することも可能になっています。

クラウドサービス・SaaSの標準のAPIでは使いづらい、もしくはRDBなどと組み合わせてAPI化したいといった場合もぜひ試してみてください。

f:id:sugimomoto:20190910105115p:plain

普段使っているDB・NoSQLに合わせて活用してみてください。

Reference

Unitifinity Reference : Creative Lounge