【CAP】CAPで作ったODataをUI5アプリで使う(2) UI5アプリの作成

はじめに

この記事は、「CAPで作ったODataをUI5アプリで使う」シリーズの2回目です。
今回は、前回作成したODataサービスを利用するUI5アプリを作成してCloud Foundryにデプロイします。

＜前回の記事＞
【CAP】CAPで作ったODataをUI5アプリで使う(1) CAPサービスの作成

CAPサービスの利用方法について

CAPで作成したODataサービスをUIで利用するには、2通りの方法があります。
一つは、以下のように同じプロジェクトにODataサービスとUIを同居させる方法です。もう一つは、ODataサービスとは別のUI用のプロジェクトを作ってODataサービスを参照する方法です。
今回は、後者の方法で実装してみます。

ステップ

1. UI5プロジェクトを作成
2. ODataモデルを追加する
3. App Routerの設定
4. ビューにデータを表示する
5. ローカルでテスト
6. デプロイ

事前準備

generator-easy-ui5をインストール

https://www.npmjs.com/package/generator-easy-ui5
これは、UI5プロジェクトのテンプレートを生成してくれるツールです。

Cloud FoundryのサブアカウントにDestinationを登録

前回作成したODataサービスのURLをDestinationとして登録しておきます。

1. UI5プロジェクトを作成

プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。

yo easy-ui5

プロジェクトの設定についていくつかの質問がされるので、以下のように回答します。画面はすべて回答し終わった後のものですが、実際は1ステップごとに選択肢が出てきて、その中から選ぶ形式です。

以下のようなプロジェクトが生成されます。

webappフォルダはuimoduleの下に入っています。

2. ODataモデルを追加する

以下のコマンドを実行します。

yo easu-ui5:newmodel

以下のように質問に回答します。最後の"Overwrite uimodule\webapp\manifest\json?"という質問には、"a"と入力すると上書きがされます。

manifest.jsonに以下の設定が追加されます。（※localUriのスラッシュが多いので修正しておきましょう）

3. App Routerの設定

App Routerはアプリケーションの入り口になり、リクエストを適切な宛先に振り分ける役割があります。App Routerについて詳しくは以下のSAP Blogをご参照ください。
https://blogs.sap.com/2020/04/03/sap-application-router/

approuterフォルダの中にあるxs-app.jsonファイルに設定を追加します。

routesに以下を追加します。これの意味するところは、/cap-products/を含むリクエストが来たら、cap-productsという宛先に転送するということです。cap-productsは事前準備で登録したDestinationの名前です。

    {
      "source": "^/cap-products/(.*)$",
      "target": "$1",
      "authenticationType": "xsuaa",
      "destination": "cap-products",
      "csrfProtection": false
    }

全体は以下のようになります。

4. ビューにデータを表示する

Main.view.xmlに以下を追加します。

          <List
            headerText="Products"
            items="{
              path: '/Products'
            }" >
            <StandardListItem
              title="{product}"
              description="{description}"/>
          </List>  

全体では以下のようになります。

5. ローカルでテスト

ローカル実行用のdestination追加

ローカルでテストするためには、uimoduleの下にあるui5.yamlファイルにdestinationの設定を追加する必要があります。xs-app.jsonでcap-productsという宛先を指定しましたが、ローカルではcap-productsが何を指すのかがわからないからです。

もとは以下のようになっています。

destinationsの下にcap-productsのURLを追加します。

実行

以下のコマンドを入力します。

npm start

※startスクリプトはpackage.jsonで定義されています

しばらくするとブラウザが立ち上がり、データが表示されました。

裏では

ui5-middleware-cfdestinationの設定をもう一度見てみると、portが1091となっています。

ブラウザにlocalhost:1091/cap-products/と入力すると、ODataサービスのトップ画面が表示されます。つまり、1091番ポートでapprouterが立ち上がり、リクエストを中継してくれているのです。

6. デプロイ

最後に、プロジェクトをCloud Foundryにデプロイします。package.jsonを見るとdeployというスクリプトがあるのでこれを使います。このスクリプトはビルドとデプロイを同時にやってくれます。

以下のコマンドを入力します。（※事前にcf loginしておきます）

npm run deploy

以下のメッセージが表示されればデプロイ完了です。

URLをブラウザで実行してみます。

アプリ画面が表示されました。