今回のブログでは、SAP Build Appsの中に新たに登場したVisual Cloud Functionsを利用して、バックエンド側の機能を備えたフルスタックアプリケーションの開発をハンズオン形式でお伝えします。ぜひ一緒に手を動かしながらご覧ください。

Visual Cloud Functionsとは

Visual Cloud Functionsは、SAP Build Appsの中に搭載された機能です。視覚的に(Visual)、クラウドでの(Cloud)、バックエンド機能(Functions)を作成できるツールになっています。

Introduction | SAP Help Portal

今まではあくまでフロントエンドでのUI構築や変数操作を提供していたSAP Build Appsですが、このVisual Cloud Functionsの登場により、フロントエンドとバックエンドを両方開発する、いわゆるフルスタックアプリの開発が行えるようになりました。

今回作成するアプリケーション

今回は、メッセージを登録するだけの簡易掲示板のようなアプリケーションを作成します。

【1】SAP Build Apps Visual Cloud Functionsでデータエンティティを作る

まずはバックエンド側で扱うデータを用意していきます。SAP Build Appsのロビーから「アプリケーションの構築」を選択し、その後「Webおよびモバイルアプリケーション」を選択すると従来のSAP Build AppsのUI構築画面に、「アプリケーションバックエンド」を選択するとVisual Cloud Functionの作成画面に遷移します。

今回は、まず「アプリケーションバックエンド」を選択しましょう。

%u30D0%u30C3%u30AF%u30A8%u30F3%u30C9%u30A2%u30D7%u30EA%u30B1%u30FC%u30B7%u30E7%u30F3%u306E%u30D7%u30ED%u30B8%u30A7%u30AF%u30C8%u4F5C%u6210

バックエンドアプリケーションのプロジェクト作成

プロジェクトが作成出来たら、エンティティを作成しましょう。

%u30A8%u30F3%u30C6%u30A3%u30C6%u30A3%u306E%u4F5C%u6210

エンティティの作成

これは複数のプロパティを有するデータの定義、すなわちオブジェクトのようなものです。今回はMessagesというエンティティを作成します。このエンティティは、レコードごとに

  • id
  • message

という2つのプロパティを有しています。

%u30D7%u30ED%u30D1%u30C6%u30A3%u3092%u8FFD%u52A0%u3059%u308B

プロパティを追加する

以上で、データの設定が完了しました。

【2】SAP Build Apps Visual Cloud Functionsでデータ処理のファンクションを作る

次に、この定義したデータをどのように扱うのかというファンクションを定義していきます。今回は以下の2つのファンクションを定義します。

  • createMessage(メッセージを書き込む)
  • readAllMessage(すべてのメッセージを読み出す)

createMessage%u306E%u4F5C%u6210

createMessageの作成

createMessageの詳細な仕様を決めていきます。こちらのファンクションは引数としてメッセージの内容を取り込む必要がありますので、インプットパラメータを設定します。

%u30A4%u30F3%u30D7%u30C3%u30C8%u30D1%u30E9%u30E1%u30FC%u30BF%u306E%u8A2D%u5B9A

インプットパラメータの設定

今回はmessageという文字列(String)型の引数を取っておきます。引数の設定が完了したら、次はデータを書き込む処理を実装します。

%u30C7%u30FC%u30BF%u51E6%u7406%u306E%u8FFD%u52A0

データ処理の追加(1/2)

操作対処のエンティティにMessagesを指定します。これにより、このファンクション内ではメッセージエンティティに対する書き込み処理が行われるようになります。

%u30C7%u30FC%u30BF%u51E6%u7406%u306E%u8FFD%u52A0%282/2%29

データ処理の追加(2/2)

最後に、インプットパラメータをこの処理に渡すと設定は完了です。
Function inputs -> inputs.message とクリックすると、インプットパラメータとして指定したmessageという文字列にアクセスすることができます。

%u30A4%u30F3%u30D7%u30C3%u30C8%u30D1%u30E9%u30E1%u30FC%u30BF%u306E%u30DE%u30C3%u30D4%u30F3%u30B0

インプットパラメータのマッピング

同様に、readAllMessagesというファンクションを作成します。

readAllMessages%u306E%u4F5C%u6210

readAllMessagesの作成

このファンクションは読み取り用のファンクションなので、引数を取る必要はありません。したがって、早速、直接レコードに対する操作の設定に入りましょう。

%u30C7%u30FC%u30BF%u51E6%u7406%u306E%u8FFD%u52A0

データ処理の追加

read系の操作には、以下のように紛らわしい操作がありますが、違いに注意しましょう。

  • Retrieve Record:idを指定して、特定のエンティティデータを読み取る
  • List records:エンティティ内のデータをすべて読み取る(こちらには複数形のsがついているのでそこで覚えると間違えないかもしれません)

エンティティには、Messagesを指定します。

%u30A8%u30F3%u30C6%u30A3%u30C6%u30A3%u306E%u6307%u5B9A

エンティティの指定

最後に読み出したデータを、どのようなデータ形式でフロントエンド側に渡すのかという部分を定義します。FORMULAを用いて定義を行うことが可能です。

アウトプットパラメータの設定(1/2)

そうはいっても、今回は特殊な操作をすることはなく、読み出した情報をそのままアウトプットパラメータとして定義しています。

%u30A2%u30A6%u30C8%u30D7%u30C3%u30C8%u30D1%u30E9%u30E1%u30FC%u30BF%u306E%u8A2D%u5B9A%uFF081/2%uFF09

アウトプットパラメータの設定(2/2)

【3】SAP Build Apps Visual Cloud Functionsでデプロイをする

設定が完了したら、Deploymentsタブからデプロイを行いましょう。

Visual%20Cloud%20Functions%u3092%u30C7%u30D7%u30ED%u30A4%uFF081/2%uFF09

Visual Cloud Functionsをデプロイ(1/2)

しばらく待つと、デプロイが完了します。

Visual%20Cloud%20Functions%u3092%u30C7%u30D7%u30ED%u30A4%uFF082/2%uFF09

Visual Cloud Functionsをデプロイ(2/2)

おわりに

今回はSAP Build Appsバックエンド側のUIや変数の定義を扱いました。今回初めて、Visual Cloud Functionsに触りましたが、非常に直感的に構成されているおかげで、ものの15分程度でデプロイまでこぎつけることができました。これはすごい、、

次回はフロントエンド側と接続していきます!

続きのブログ記事:
【SAP探検記】SAP Build Appsで簡単なフルスタックアプリを作ってみた フロントエンド編 | SAP Blogs

Sara Sampaio

Sara Sampaio

Author Since: March 10, 2022

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x