この記事は、2部構成の記事の後編になっています。ご覧になっていない方は前編からご覧ください。
【SAP探検記】SAP Build Appsで簡単なフルスタックアプリを作ってみた バックエンド編 | SAP Blogs
【1】SAP Build Apps Web&MobileでアプリのUIを作る
まずはアプリケーションのUIを作っていきましょう。「Webおよびモバイルアプリケーション」をクリックしてプロジェクトを生成します。
プロジェクトの作成
SAP Build AppsにおけるUI構築の細かい操作の説明は省きますが、タイトルコンポーネント・インプットコンポーネント。ボタンコンポーネント・テキストコンポーネントを組み合わせて図のようなUIを構築します。
UIの全体像
変数に対する紐づけは後ほど扱います。
【2】SAP Build Apps Web&Mobileでアプリ内変数を作る
次にVARIABLESビューに切り替え、今回のフロントエンドアプリケーションの中で用いる変数を定義します。今回は以下の2つの変数を用意します。
- Message（text型）：入力欄から入力したメッセージを割り当てる変数
- messageList（list of objects型）：バックエンドから読み出したメッセージの一覧を格納する変数
アプリ内変数
【2】SAP Build Apps Web&MobileとSAP Build Apps Visual Cloud Functionsを接続する
SAP Build Apps Visual Cloud Functionsを接続するためには、SAP BTP認証を有効化する必要があります。上部のAuthタブからSAP BTP authenticationをクリックし、SAP BTP認証を有効化します。
SAP BTP認証の有効化
認証を有効化したら、実際にデータの接続を行っていきます。上部のDATAタブより、ADD INTEGRATIONボタンをクリックします。
Integrationの追加
今回の接続先であるVisual Cloud Functionsをクリックします。
Visual Cloud Funcitonsへの接続
バックエンド編のブログでデプロイしたVisual Cloud Functionsが表示されるので、そのプロジェクトをクリックします。
作成したVisual Cloud Functionsに接続する（1/2）
INSTALL INTEGRATIONボタンをクリックすることで、このVisual Cloud Functionsプロジェクトに対する接続を利用できるようになります。
作成したVisual Cloud Functionsに接続する（2/2）
インストールが完了すると、データエンティティ、クラウドファンクションを個別に有効化できるようになりますので、それらをすべて有効化しましょう。
データエンティティの有効化
クラウドファンクションの有効化
これでVisual Cloud Functionsのプロジェクトに含まれるデータエンティティとクラウドファンクションをフロントエンド側で利用できるようになりました。
それではさっそくUIのロジック内に組み込んでいきます。まずはUIのインプットコンポーネントに対して、Value属性にアプリ内変数のmessageを指定します。これにより、インプットコンポーネントに入力された値はアプリ内変数のmessageに格納されます。
インプットコンポーネントにアプリ内変数を割当てる
次に、アプリ内変数messageに格納したメッセージをVisual Cloud Functionsに送る部分のロジックを構築していきます。ボタンコンポーネントをクリックし、右下からロジックコンポーザを開きます。DATA領域から「Execute Cloud」をドラッグ&ドロップで追加し、実行対称のファンクションにcreateMessageを指定します。加えて、引数のmessageにアプリ内変数のmessageを割り当てます。これによってVisual Cloud Functionsにメッセージが渡され、バックエンドにメッセージのデータが保存されるようになりました。
送信ボタンにデータの保存ロジックを追加する
次に、バックエンドに保存したメッセージの一覧を読み込む部分のロジックを構築していきます。ページの何もない部分をクリックしてロジックコンポーザを開きます。
Page Mountedのコンポーネントに対して、先ほどと同様の手順で「Execute Cloud」を接続します。Page Mountedにつながれたロジックはページがロードされた時点で実行されます。
今回は実行対称のクラウドファンクションとして、readAllMessagesを指定します。このファンクションからはバックエンド編で設定した通り、メッセージの配列が返ってきます。その配列をSet App Variablesコンポーネントを用いてアプリ内変数のmessageListに格納します。
ページのロード時に実行されるロジックを追加する
格納する際には、Assigned Valueを開き、下図のように「Mapping」を選択します。
変数のマッピング（1/3）
このマッピング機能を利用すると、バックエンドから取得した値の内、どの値をどのアプリ内変数に割り当てるのかという設定を行うことができます。
次に現れる画面では、このロジックコンポーネントに対するインプットパラメータを聞かれますが、そこではExecute Cloud function -> messageList を選択しましょう。
変数のマッピング（2/3）
左側にバックエンドから得られたプロパティが、右側にアプリ内変数のとして定義した変数内のプロパティが表示されます。こちらは同じ値をドラッグ&ドロップして対応させましょう。
変数のマッピング（3/3）
これで、メッセージデータの取り込みは完了です。最後に、取り込んだデータを画面に表示させる部分の実装を行います。
テキストを選択し、Repeated Withにアプリ内変数のmessageListを選択し、Contentにcurrent.messageを指定します。これにより、messageListとして取得されたメッセージの数だけテキストコンポーネントが繰り返し表示されるようになります。
以上で一通りのアプリケーションは完成です。ただしこのままだと、新しく入力したメッセージを登録しても、バックエンドに保存されるだけで画面内に反映されないため、送信後に再びメッセージを取得するロジックを追加します。
Pageがロードされた際に実装したバックエンドからのデータ読み込みのロジックと同じものを追加していきます。この際、ページ内にExecute Cloudコンポーネントが2つ存在しており紛らわしいため、Set App Variableコンポーネントのインプット元を間違えないよう気を付けましょう。この後プレビューして動かない場合にはこの部分の見直しが有力です。
送信ボタンへの読み込みロジック追加
また、送信後に入力欄をクリアしておくとよりUIとして優れた動作になると思います。
入力したメッセージのクリア
開発は以上で終了になります。上部のタブLaunch -> Previewからプレビューしてみましょう。
デモ
完成したアプリケーションのデモです。
おわりに
今回はバックエンド・フロントエンドの2部に分けてSAP Build Appsを用いたフルスタックアプリケーションの開発についてお伝えしました。バックエンド・フロントエンド間でAPIなどを明示的に用意する必要もなく、非常に直感的な操作で実装を進められる点が個人的には驚いた部分です。皆さんもぜひ試してみてください。
