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

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

＜前回の記事＞
[【CAP】CAPで作ったODataをUI5アプリで使う(1) CAPサービスの作成](https://qiita.com/tami/items/d1b69a93da14e288faf2)

##CAPサービスの利用方法について
CAPで作成したODataサービスをUIで利用するには、2通りの方法があります。
一つは、以下のように同じプロジェクトにODataサービスとUIを同居させる方法です。もう一つは、ODataサービスとは別のUI用のプロジェクトを作ってODataサービスを参照する方法です。
今回は、後者の方法で実装してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9f8b8276-edbc-4e50-543d-ee69e07ccd09.png)

##ステップ
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として登録しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/4aeee51e-fae8-57e8-c0fa-5306570ddb3d.png)


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

```
yo easy-ui5
```

プロジェクトの設定についていくつかの質問がされるので、以下のように回答します。画面はすべて回答し終わった後のものですが、実際は1ステップごとに選択肢が出てきて、その中から選ぶ形式です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/af574367-3ccf-3d25-cbd7-c5658104bde9.png)

以下のようなプロジェクトが生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5493c6ef-4a67-c905-abe5-beb837d2e6f7.png)
webappフォルダはuimoduleの下に入っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0c7e4a40-bc96-7f7e-105c-53e58d36bebd.png)

##2. ODataモデルを追加する
以下のコマンドを実行します。

```
yo easu-ui5:newmodel
```

以下のように質問に回答します。最後の"Overwrite uimodule\webapp\manifest\json?"という質問には、"a"と入力すると上書きがされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c586d06c-c38e-0886-9e4b-671cf78794a5.png)
manifest.jsonに以下の設定が追加されます。（※localUriのスラッシュが多いので修正しておきましょう）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f3bd16f9-14f6-9d53-6201-d8986669fbc1.png)

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

approuterフォルダの中にあるxs-app.jsonファイルに設定を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/17f6abe3-00e4-77b8-ffdf-d80db948e84b.png)

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

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

全体は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/694c46ae-4986-cf42-0140-55a5a3935128.png)

##4. ビューにデータを表示する
Main.view.xmlに以下を追加します。

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

全体では以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/6838a86d-8197-f4ae-37e9-05e53fe3e0be.png)

##5. ローカルでテスト
###ローカル実行用のdestination追加
ローカルでテストするためには、uimoduleの下にあるui5.yamlファイルにdestinationの設定を追加する必要があります。xs-app.jsonでcap-productsという宛先を指定しましたが、ローカルではcap-productsが何を指すのかがわからないからです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/584789b5-e8a2-408c-73d8-a55b59a34249.png)
もとは以下のようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/180d8878-6de1-66f9-76ac-a64188429dcd.png)
destinationsの下にcap-productsのURLを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1104e98d-9446-bcff-01f8-39385e5f5718.png)

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

```
npm start
```

※startスクリプトはpackage.jsonで定義されています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ba2b94dd-f5b7-9bfd-af30-8129424c407f.png)

しばらくするとブラウザが立ち上がり、データが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/6befb38a-2e85-814f-2cd4-e552d84bf40b.png)

###裏では
ui5-middleware-cfdestinationの設定をもう一度見てみると、portが1091となっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d0bbc2c7-c31f-3d67-4b42-69facec12177.png)
ブラウザにlocalhost:1091/cap-products/と入力すると、ODataサービスのトップ画面が表示されます。つまり、1091番ポートでapprouterが立ち上がり、リクエストを中継してくれているのです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9597f102-9f65-3a6a-f664-a9bbc01132d3.png)

##6. デプロイ
最後に、プロジェクトをCloud Foundryにデプロイします。package.jsonを見るとdeployというスクリプトがあるのでこれを使います。このスクリプトはビルドとデプロイを同時にやってくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/98ccbfef-c625-3d25-0031-23194fbc6fda.png)

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

```
npm run deploy
```

以下のメッセージが表示されればデプロイ完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/3b485248-f0ee-62ce-ff9f-1c678c7ca476.png)

URLをブラウザで実行してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/bca05b36-5514-5fd9-465f-69ad449f7b20.png)

アプリ画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/8715e76e-7217-a835-7832-48023646a8f4.png)