SAPのソリューション

デジタルトランスフォーメーション(DX)を推進などの経営課題の解決に向けて、ERPソリューション、クラウドアプリケーションや開発・運用基盤を組み合わせて、グローバルなエコシステムを構築のためのソリューションです。

お客様の課題

業種や規模によって企業の課題は経営課題、業務課題、システム課題など多様です。さらにそれぞれ課題は単一分野の課題だけではなく、相互に関連することで複雑になっています。

GSLが提供するサービス

様々な業種に関する技術・ノウハウに裏付けられたソリューション力をベースにした豊富な SAP Business-all-in-one テンプレートワンストップサービス体制で、導入から保守までをサポートします。

お役立ち情報

NTTデータGSLは日本企業のDX推進やグローバルビジネス展開の支援を提供しています。
GSL Tech Blogでは、最新技術に関するノウハウやナレッジをまとめています。
GSLコラムでは、製品情報だけではなく、トレンドや基本的な用語の解説などをまとめています。
関連資料ダウンロードでは、お客様の課題やソリューションをまとめた資料を用意しています。
GSLニュースは、SAPソリューションをはじめ周辺系システムとの連携を通じたDX推進など、最新の情報をメールマガジンでお届けします。
GSL University Journalは、企業内大学である「GSL University」における各研究室の教授等によるインサイトや成果報告、社員からの寄稿をまとめております。
ぜひご覧いただき、お役立てください。

企業情報

日系企業のグローバル展開に伴う、システムのグローバル化需要に応えるために、NTTデータグループにおけるSAP事業の中核会社を設立し、国内のグループ会社に分散しているSAPソリューション、業務ノウハウの一体化を図り、戦略的な事業経営を目指します。

SAP AppGyverを使ってみました ー実践編ー

2022年5月31日

  • ノーコード・ローコード
  • SAP AppGyver
前回のブログでノーコード・ローコード開発プラットフォームSAP AppGyverの概要と開発画面を紹介しました。
今回のブログでは、実際アプリの作成過程を紹介したいと思います。今回作成するのは、SAP AppGyverからSAP HANA Cloud上のテーブルに対してデータを追加(insert)できる簡単な書籍管理アプリです。ぜひ、ご一読ください。

完成イメージ

GSL_Tech_Blog_8-1.png

開発の流れ

今回は、下記の流れに従って開発しました。

  1. HANA Cloud上のテーブルをODataサービスとして公開する
  2. SAP AppGyverを利用した
    1. 2-1. UIの作成とプレビュー
    2. 2-2. データリソースの設定
    3. 2-3. データ変数の設定
    4. 2-4. ロジックの設定:レコードの作成

HANA Cloud上のテーブルをODataサービスとして公開する

SAP Cloud Application Programming Modelを使用してSAP HANA Cloudにテーブルを作成し、そのテーブルをODataサービスとして公開します。

今回のブログはAppGyver上の操作説明を中心にしているため、ODataサービスの作成過程は割愛させていただきます。

今回利用するSAP HANA Cloud上のテーブル「MY_BOOKSHOP_BOOKS」は以下になります。2行のデータがすでに入っている状態です。

GSL_Tech_Blog_8-2.png

開発したODataサービスは以下になります。

GSL_Tech_Blog_8-3.png

エンティティ「Books」を開くと、SAP HANA Cloud上のテーブルデータが次のように表示されます。

SAP Business Technology PlatformにデプロイされたODataサービスは、インターネット上で利用が可能です。

GSL_Tech_Blog_8-4.png

2-1.UIの作成とプレビュー

SAP AppGyverにログインして、「HANA APP」というプロジェクトを作ります。

GSL_Tech_Blog_8-5.png

ビューキャンバスに下記のコンポーネントを配置します。

  • 「Title」:Post to HANA Cloudと名付けます。
  • 「Input filed」:HANA Cloud上のデータに合わせて、ID, title, stockという3つの「Input filed」を入れています。
  • 「Button」:表示名をpostに変更します。このボタンを押すと、入力された内容をSAP HANA Cloudに書き込む設定です。
  • GSL_Tech_Blog_8-6.png

    ここまで基本のUI画面ができました。”編集画面=実際の画面”になっているので、早速確認してみます。

    画面上部のグローバルツールバーで「LAUNCH」をクリックします。

    今回はApple社が提供するスマートフォンiPhoneからイメージの確認を行いたいため、App storeからSAP AppGyver Previewアプリのダウンロードを実行します。

    アプリのダウンロード以外の方法では、「Reveal QR code」をクリックし、生成したQRコードよりスマートフォンのウェブサイトからログインして確認することも可能です。 なお本ブログではSAP AppGyver Previewアプリを利用していきます。

    GSL_Tech_Blog_8-7.png

    ご覧の通り、作成した画面がそのままスマートフォンで反映されました。

    GSL_Tech_Blog_8-8.png

    2-2.データリソースの設定

    ステップ1で作ったODataサービスをデータリソースとして設定します。

    グローバルツールバーから「DATA」をクリックしてデータ設定画面を開きます。右側の「ADD DATA RESOURCE」から「OData integration」を選択し設定画面を開きます。

    ODataサービスのアドレスをBase API URLのところに貼り付けてから、「VERIFY URL」をクリックして有効化します。

    GSL_Tech_Blog_8-9.png

    有効化すると、エンティティ「Books」が設定画面の左側に表示されます。「create」をクリックして、「TEST」画面で連携先のODataに対する書き込む操作ができるかどうかをテストします。

    GSL_Tech_Blog_8-10.png

    テストを実行したら、ODataやSAP HANA Cloudからテストで入力したID3が反映されたことを確認します。

    GSL_Tech_Blog_8-11.png

    GSL_Tech_Blog_8-12.png

    ここまで、SAP HANA Cloud上のテーブル「Books」をOData化してSAP AppGyverと連携しました。保存したら、「DATA」をクリックしてビューキャンバスの画面に戻ります。

    GSL_Tech_Blog_8-13.png

    2-3.データ変数の設定

    「Input Filed」に入力された内容がデータリソースとつながるように、変数の設定を行います。

    「VIEW–VARIABLES」スイッチで、変数エディターに切り替えます。左側のナビゲーションから「DATA VARIABLES」を選択してから、「ADD DATA VARIABLES」の「+」ボタンをクリックします。

    GSL_Tech_Blog_8-14.png

    まず、前のステップで作ったデータリソース「Books」を選びます。データリソースで定義されたスキーマがそのまま流用できます。

    「Books1」というデータ変数が自動的に表示されますが、新に入力されたデータを定義する変数であるため、名前を「new-book」に、タイプを「New data record」に設定します。

    GSL_Tech_Blog_8-15.png

    変数を作成してから、「VIEW–VARIABLES」スイッチでビューキャンバスに戻り、設定した変数を入力フィールドと結びます。

    「Input Filed」を選択し、右側のプロパティエディターから、「Value」をクリックします。

    「Data and Variables」>「Data Variable」を選択して、 変数「new-book」をクリックし展開します。データリソースのスキーマが表示されて、その中からそれぞれ対応するスキーマを選択します。

    GSL_Tech_Blog_8-16.png

    GSL_Tech_Blog_8-17.png

    GSL_Tech_Blog_8-18.png

    2-4.ロジックの設定:レコードの作成

    ここまで入力変数の設定を行いましたが、現時点で入力欄に内容を入力してもデータリソースには反映されません。反映するためのロジックを設定する必要があります。

    ボタン「post」をクリックし、ロジックキャンバスを開きます。左側のフローファンクションライブラリーパネルから「Create record」をロジックキャンバスにドラッグ・アンド・ドロップします。デフォルトの「Component tap」と線引きで繋ぎます。

    GSL_Tech_Blog_8-19.png

    そして、追加された「Create record」でレコードをどこにどのように作成するかを定義します。

    右側のプロパティエディターから「Resource name」をクリックして、前のステップで作ったデータリソース「Books」を選択することで、入力したレコードを保存するデータリソースと結びます。

    GSL_Tech_Blog_8-20.png

    次に「Record」をクリックし、下記のようにレコードのプロパティを入力フィールドで入力された変数と結びます。

    GSL_Tech_Blog_8-21.png

    これで入力したデータがデータリソースに書き込めるようになりました。スマートフォンで確認してみましょう。

    入力欄にID:4、title:Snow White、stock:200を入力して「post」ボタンを押します。

    ODataとDatabase Explorerからデータを更新すると、入力されたデータが予想通りに反映されました。

    GSL_Tech_Blog_8-22.png

    終わりに

    以上、SAP HANA Cloud上のデータを追加(insert)する簡単な書籍管理アプリの作成過程を紹介しました。

    SAP AppGyverを利用してノーコードでアプリを開発してみようと思っている方、開発中の方にとって、ご参考になれば幸いです。