Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
takayuki_tanaka
Product and Topic Expert
Product and Topic Expert

はじめに


今回のブログでは、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の作成画面に遷移します。

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


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


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


エンティティの作成


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

  • id

  • message


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


プロパティを追加する


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

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


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

  • createMessage(メッセージを書き込む)

  • readAllMessage(すべてのメッセージを読み出す)



createMessageの作成


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


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


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


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


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


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


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


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


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


readAllMessagesの作成


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


データ処理の追加


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

  • Retrieve Record:idを指定して、特定のエンティティデータを読み取る

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


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


エンティティの指定


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


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


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


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



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


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


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


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


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



おわりに


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

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

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