CData Software Blog

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

CData APIServer と AppSheet でモバイルアプリを作成してみる

こんにちは、エンジニアの宮本です。

先日Google が買収したと発表したノーコードモバイルアプリ開発ができる AppSheet に、CData の APIServer 連携させることができましたので、APIServer を使ったモバイルアプリを作成してみます。

AppSheet とは?

f:id:sennanvolar44:20200121175109p:plain
AppSheetは、インテリジェントなコードなしプラットフォームです。データソースはデフォルトでは ExcelGoogle Sheets、クラウドDB、オンプレミスDB、Box、Salesforce、OData など数自体は少ない印象です。いくつかの記事を拝見しましたが、どれもかなりの短時間でアプリを開発しているようです。 そんなAppSheetですが、データベースや OData への接続ができるため、CData の製品を組み合わせることで対応データソースを一気に増やすことができます。
なお、今回は Free プランで試しています。

構成

f:id:sennanvolar44:20200124173700p:plain Appsheet の対応データソースに OData がありますので、APIServer と繋いでデータベースや SaaS のデータをAppSheet上で使う構成となります。
今回、APIServer ではAmazon RDS の MySQL をデータソースにしてAPIを公開し、その API を AppSheet から呼び出して使います。
なお、MySQL には数件の商品情報を入れたテーブルがあり、それをもとに商品一覧と詳細画面が表示できるアプリを作成していきます。

APIServer について

こちらはデータベースや SaaS から REST API をノーコードで作成できるアプリケーションになります。 詳しくは以下の記事を参照願います。

www.cdatablog.jp

準備するもの

  • AppSheet のアカウント:ない方は以下のリンクから公式サイトに飛べるので作成してください。 https://www.appsheet.com/

  • APIServer :先ほど紹介したAPIServer ハンズオン記事を参考にインストールしてください。評価版は30日間無料でご利用いただけます。

  • MySQL :今回はRDSに作成しています。

APIServer で MySQL のデータを公開

MySQL の接続情報を作成

APIServerを起動させ、以下の赤枠の順でボタンをクリックしコネクション画面を開きます。なお、今回は英語版の APIServer を使ってます。
f:id:sennanvolar44:20200126164855p:plain

Databases より MySQL を選択します。
f:id:sennanvolar44:20200126165515p:plain

各設定項目に MySQL の接続情報を入力し、右下の「Test Connection」ボタンをクリックし成功したあと、右上の「Save Changes」ボタンをクリックし保存します。
Name 項目はAPIServer 上で使うものなので任意の名前でOKです。
f:id:sennanvolar44:20200126170251p:plain

公開するリソースを設定

以下の赤枠の通りに「Resources」タブより設定していきます。
f:id:sennanvolar44:20200126171128p:plain

MySQL を選択後、次へをクリックします。
f:id:sennanvolar44:20200126171532p:plain

MySQL には Goods というテーブルで商品データを登録していますので、そのまま Goods にチェックを入れ次に進みます。
f:id:sennanvolar44:20200126171722p:plain

ここでは選択したテーブルのどの項目を公開対象にするか、リソースの CRUD 操作などを設定できます。リソース名を設定し、Operations では全てにチェックを入れて右下の「Save」ボタンをクリックします。これで公開リソースの設定が完了です。
f:id:sennanvolar44:20200126172643p:plain

接続可能なユーザを作成

以下のキャプチャの順でクリックし、ユーザを作成していきます。
f:id:sennanvolar44:20200126173902p:plain

ユーザ名を「User or Group」に入力します。また CRUD の制限もかけずにします。下のキャプチャのように全てにチャックを入れた後、「Save Changes」ボタンをクリックします。
f:id:sennanvolar44:20200126174130p:plain

以下のように Authtoken が発行されたユーザが作成されます。あとで Authtoken を使いますのでどこかに保持しときます。
f:id:sennanvolar44:20200126180412p:plain

接続可能な IPアドレス の制御

「Server」タブをクリックします。 f:id:sennanvolar44:20200126180845p:plain

一番下にスクロールすると、接続できる IPアドレスの設定箇所があります。「Add」ボタンをクリック後、全て許可の アスタリスク(*) を登録します。本来であれば AppSheet の IPアドレスだけを許可する設定の方が良いですが、今回は省きます。
f:id:sennanvolar44:20200126181043p:plain
以上で AppSheet から APIServer へ接続できる準備が整いました。

AppSheetでアプリ作成

データソース(APIServer のOData)の追加

AppSheet から APIServer への接続設定をしていきます。「My account」から「Sources」タブをクリックします。 f:id:sennanvolar44:20200127151554p:plain

一番下まで下がると「+Data Source」がありますのでクリックします。 f:id:sennanvolar44:20200127151802p:plain

AppSheet の対応データソースです。
今回は Beta 版ですが赤枠の OData を使いますので選択します。 f:id:sennanvolar44:20200127152042p:plain

APIServer への接続情報を入力します。
f:id:sennanvolar44:20200127154126p:plain

OData Service Root URL には、APIServer の以下の URL をセットしてください。他、パスワードの部分に APIServer で作成したユーザの Authtoken をセットします。
f:id:sennanvolar44:20200127155206p:plain

入力が完了したら、接続テストを行い、「Authorize Access」をクリックして保存します。


アプリの作成(自動生成まで)

MyAppsタブから、「New app」をクリックします。
f:id:sennanvolar44:20200127150232p:plain

「Start with your own data」を選択します。
f:id:sennanvolar44:20200127150353p:plain

アプリ名を設定します。入力後、「Next step: choose your data」をクリックします。
f:id:sennanvolar44:20200127150630p:plain

先ほど作成したものも含めて接続先が表示されます。私は事前に APIServer という名前に変更していましたが、変更していなければ odata-1 などの名前で表示されていると思います。
f:id:sennanvolar44:20200127160427p:plain

ここでは APIServer で公開設定したテーブルだけが表示されます。今回は Goods テーブルを選択します。
f:id:sennanvolar44:20200127160850p:plain

テーブル選択を行うとアプリ作成画面が表示されます。選択したデータソースをもとに自動的に右側にアプリが作成されます。
f:id:sennanvolar44:20200127161335p:plain

アプリの作成(修正)

自動的にテーブルの内容をリスト化されたアプリが作成されていますが、少し修正してみたいと思います。
写真を表示させたり、少しだけ UI を変更してみます。

画像ファイルを置いているパスの型変更

Goods テーブルには画像ファイルのパスが格納されています。 f:id:sennanvolar44:20200127164255p:plain

サイドメニューの「Data」→「View Columns」をクリックします。
f:id:sennanvolar44:20200127163010p:plain

テキスト型で入っている「url_code」カラムを、Image 型に変更します。 f:id:sennanvolar44:20200127165026p:plain

Image に変更すると即座にアプリのプレビュー側も反映され、画像が表示されました。
f:id:sennanvolar44:20200127165602p:plain

商品画像の表示タイプの変更

サイドメニューの「UX」をクリックします。View type では表示タイプを選択することができます。ちなみに、 gallay タイプに変更すると以下のようなアプリ画面に変更されます。
f:id:sennanvolar44:20200127170012p:plain

今回は、View type を deck で進めますので、変更された方は戻してください。

少し下にいくと、VIEW OPTIONS というエリアが表示されます。その下の方に、「Image shape」とい項目があります。ここでは、画像をどのような形で表示するかを設定できます。
f:id:sennanvolar44:20200127170943p:plain

Round Image を選択すると、このような表示になります。 f:id:sennanvolar44:20200127171346p:plain

表示項目を変更

Primary header と Secondary header 項目がありますので、商品名と価格を選択します。 f:id:sennanvolar44:20200127171952p:plain

商品名と価格が表示されましたが、価格に単位がついてないので Base_price カラムの方を変更します。
f:id:sennanvolar44:20200127172518p:plain

先ほどと同じようにサイドメニューの Data からカラムの型を変更します。金額なので Price を選択します。(単位を円にする方法はわかりませんでした。。。) f:id:sennanvolar44:20200127172858p:plain

アプリの共有

作成したアプリを保存した後、サイドメニューの「Share app」をクリックします。共有画面が表示されたら、ユーザのメールアドレスを入力し下のボタンで送信します。
f:id:sennanvolar44:20200127224741p:plain

先ほど指定したメアドをスマホで受け取り、メールにあるリンクをクリックすると、AppSheet アプリのインストールが促されますので、そのままインストールします。
インストールが完了したら、再度リンクからアプリを開いてください。開発画面で確認していた「GoodsList」アプリが表示されるようになります。

スマホでアプリを確認

スマホでアプリを開いた際の画面内容です。設定通りに商品一覧が表示されています。
f:id:sennanvolar44:20200127180530p:plain
アプリからデータの登録・修正・削除も可能です。

最後に

今回の記事の中では登場しませんでしたが、CData Sycn を使って SaaS データをクラウド上のデータベースにデータをレプリケートし、AppSheet からそこのデータベースを参照させることもできました。CData 製品を組み合わせることで、さまざまなデータソースに対応することができますので、是非一度お試しください。