SAP AppGyverを使ってみました ー実践編ー
2022年5月31日
- ノーコード・ローコード
- SAP AppGyver
HANA Cloud上のテーブルをODataサービスとして公開する
SAP Cloud Application Programming Modelを使用してSAP HANA Cloudにテーブルを作成し、そのテーブルをODataサービスとして公開します。
今回のブログはAppGyver上の操作説明を中心にしているため、ODataサービスの作成過程は割愛させていただきます。
今回利用するSAP HANA Cloud上のテーブル「MY_BOOKSHOP_BOOKS」は以下になります。2行のデータがすでに入っている状態です。
開発したODataサービスは以下になります。
エンティティ「Books」を開くと、SAP HANA Cloud上のテーブルデータが次のように表示されます。
SAP Business Technology PlatformにデプロイされたODataサービスは、インターネット上で利用が可能です。
2-1.UIの作成とプレビュー
SAP AppGyverにログインして、「HANA APP」というプロジェクトを作ります。
ビューキャンバスに下記のコンポーネントを配置します。
ここまで基本のUI画面ができました。”編集画面=実際の画面”になっているので、早速確認してみます。
画面上部のグローバルツールバーで「LAUNCH」をクリックします。
今回はApple社が提供するスマートフォンiPhoneからイメージの確認を行いたいため、App storeからSAP AppGyver Previewアプリのダウンロードを実行します。
アプリのダウンロード以外の方法では、「Reveal QR code」をクリックし、生成したQRコードよりスマートフォンのウェブサイトからログインして確認することも可能です。 なお本ブログではSAP AppGyver Previewアプリを利用していきます。
ご覧の通り、作成した画面がそのままスマートフォンで反映されました。
2-2.データリソースの設定
ステップ1で作ったODataサービスをデータリソースとして設定します。
グローバルツールバーから「DATA」をクリックしてデータ設定画面を開きます。右側の「ADD DATA RESOURCE」から「OData integration」を選択し設定画面を開きます。
ODataサービスのアドレスをBase API URLのところに貼り付けてから、「VERIFY URL」をクリックして有効化します。
有効化すると、エンティティ「Books」が設定画面の左側に表示されます。「create」をクリックして、「TEST」画面で連携先のODataに対する書き込む操作ができるかどうかをテストします。
テストを実行したら、ODataやSAP HANA Cloudからテストで入力したID3が反映されたことを確認します。
ここまで、SAP HANA Cloud上のテーブル「Books」をOData化してSAP AppGyverと連携しました。保存したら、「DATA」をクリックしてビューキャンバスの画面に戻ります。
2-3.データ変数の設定
「Input Filed」に入力された内容がデータリソースとつながるように、変数の設定を行います。
「VIEW–VARIABLES」スイッチで、変数エディターに切り替えます。左側のナビゲーションから「DATA VARIABLES」を選択してから、「ADD DATA VARIABLES」の「+」ボタンをクリックします。
まず、前のステップで作ったデータリソース「Books」を選びます。データリソースで定義されたスキーマがそのまま流用できます。
「Books1」というデータ変数が自動的に表示されますが、新に入力されたデータを定義する変数であるため、名前を「new-book」に、タイプを「New data record」に設定します。
変数を作成してから、「VIEW–VARIABLES」スイッチでビューキャンバスに戻り、設定した変数を入力フィールドと結びます。
「Input Filed」を選択し、右側のプロパティエディターから、「Value」をクリックします。
「Data and Variables」>「Data Variable」を選択して、 変数「new-book」をクリックし展開します。データリソースのスキーマが表示されて、その中からそれぞれ対応するスキーマを選択します。
2-4.ロジックの設定:レコードの作成
ここまで入力変数の設定を行いましたが、現時点で入力欄に内容を入力してもデータリソースには反映されません。反映するためのロジックを設定する必要があります。
ボタン「post」をクリックし、ロジックキャンバスを開きます。左側のフローファンクションライブラリーパネルから「Create record」をロジックキャンバスにドラッグ・アンド・ドロップします。デフォルトの「Component tap」と線引きで繋ぎます。
そして、追加された「Create record」でレコードをどこにどのように作成するかを定義します。
右側のプロパティエディターから「Resource name」をクリックして、前のステップで作ったデータリソース「Books」を選択することで、入力したレコードを保存するデータリソースと結びます。
次に「Record」をクリックし、下記のようにレコードのプロパティを入力フィールドで入力された変数と結びます。
これで入力したデータがデータリソースに書き込めるようになりました。スマートフォンで確認してみましょう。
入力欄にID:4、title:Snow White、stock:200を入力して「post」ボタンを押します。
ODataとDatabase Explorerからデータを更新すると、入力されたデータが予想通りに反映されました。
終わりに
以上、SAP HANA Cloud上のデータを追加(insert)する簡単な書籍管理アプリの作成過程を紹介しました。
SAP AppGyverを利用してノーコードでアプリを開発してみようと思っている方、開発中の方にとって、ご参考になれば幸いです。