SAP AppGyverでSAP BTPのDestinationサービスが使えるようになりました

NaotoSakai · ‎2022 Jul 05

＊この記事はまだ検証途中のものがあります。速報＆簡単な解説として扱って下さい。

SAP AppGyverでODataやREST APIなどを利用する際の問題として「CORS（オリジン間リソース共有）」があります。

*CORSに関しては各種ドキュメントを参照していただければと思います。ごく簡単にいうとhttps://www.aaa.comで提供されているウェブアプリケーションのフロントエンドのJavaScriptコード内でhttps://www.bbb.comというwww.aaa.comとは違う場...オリジン）に存在するリソースにアクセスする場合、www.bbb.com側でそれを許可しなければならないというものです。

この問題はSAP AppGyverからSAP BTP上で動作しているサービス・アプリケーションに対してのアクセスでも発生していました。SAP BTP上のサービス・アプリケーション側でCORSを許可しなければならないのです。

私が以前書いた記事ではCAPで作成したODataサービスへSAP AppGyverからアクセスさせるため、server.jsにCORSを許可するコードを入れて対処しています。

今回、SAP AppGyverの新機能としてSAP BTPのDestinationサービスが使えるようになりました。これで（BTP上のサービスに対しては）CORSの設定は不要になります。

それでは簡単ですが、どのような感じかテスト＆ご紹介します。

前提：

現状この機能はSAP AppGyverのEnterprise版でのみ利用可能です。（SAP BTP上で動作させているAppGyverのことです。）

Community版では使用できません。（https://www.appgyver.com/からログインして使用する方ではこの機能は使用できません。）

また、テストで使用する環境ですが、急遽ということで前回ブログの環境を利用したいと思います。CORSの問題を発生させたいので、記事中で追加したserver.jsは削除し、再デプロイして下さい。

CORS問題が発生する場合、Composer Pro上でもデータリソースの設定時にその旨が表示されますし、WebPreviewでの実行時にブラウザのコンソールを確認すると上記のようなエラーが表示されます。この記事はこのようにCORSの問題が発生する環境で行っています。

BTP側での作業：

新機能のキモとなるDestinationを作成します。今回は前提で紹介した環境のCAPで作成したODataサービスを設定します。
Blank Templateを使用して

・TypeはHTTP

・URLは前提で作成したODataサービスのURL

*これはメタデータのURLではありません。今回は「https://xxxxxxxxxxxx.hana.ondemand.com/incident」と/incidentまで入力して下さい。

・Proxy TypeはInternet

・AuthenticationはNoAuthentication

と設定します。Additional Propertiesの欄で、

WebIDEEnabled=true
HTML5.DynamicDestination=true

を必ず設定して下さい。（この2つの設定が無いとSAP AppGyver側でそのDestinationが表示されなかったり、アプリでの実行時にそのDestinationにアクセスできずエラーが発生するという現象が発生します。）

SAP AppGyver側での作業：

今回は新規のプロジェクトを使用しています。

認証の追加

まず、上部のAUTHをクリックし、

ENABLE AUTHENTICATIONをクリックして次に進みます。

「SAP BTP authentication」をクリックします。下記の画面が表示されます。

これで認証のセットアップは完了です。

ページ一覧を見ると

このように1ページ増えています。

BTP Destinationを経由するデータリソースの追加

次に画面上部の「DATA」をクリックします。（この部分の表示は大きく変わりました。）

「No systems integrated」のところにある「ADD INTEGRATION」ボタンをクリックします。

「BTP DESTINATIONS」ボタンをクリックします。（AUTHENTICATIONの設定を先に行っておかないとこのボタンは有効化されません）

そのサブアカウント上で設定されていてAppGyver側で使用可能なDestinationの一覧が表示されます。もしここで先程設定したDestinationが表示されない場合はDestination側のAdditional Propertiesの設定を確認して下さい。

先程作成したcap_projectをクリックし、次に進みます。

下記の画面でデータエンティティ一覧や、「BROWSE DATA」でそのDestinationに間違いがないことを確認したら右上の「INSTALL INTEGRATION」ボタンをクリックします。

*「BROWSE DATA」ボタンをクリックすると下記のようにデータの表示が可能です。

使用したいデータエンティティを選択し、「ENABLE DATA ENTITY」をクリックすると

そのエンティティがデータリソースとして有効化されます。

一覧に戻ると

このように有効化したエンティティがデータリソースとして使用できるようになりました。

テスト

このリソースのテストのため簡単に画面を作ってみます。Emptyページに「Basic List」を追加します。

プロパティのList ResourceのConfigureボタンをクリックし

先程追加したデータリソースを選択し、

カラムを適当にバインドしましょう。

SaveしてWeb Previewで確認してみます。

このようにDestinationを使用してデータを取得し、表示することが出来ました。

（アプリ起動時に一瞬AUTHENTICATION設定で自動で追加されたページが表示されます。）

いかがでしょうか？SAP AppGyverでBTPのDestinationが使用できるようになりました。まだ特定の認証機構を使用していると使用できないなど制限があるようですが、今後機能が追加されるものと思われます。よりBTPに近づいたSAP AppGyverを是非試して下さい。