LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@tami(Yasutake Mio)

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

Last updated at Posted at 2020-07-25

はじめに

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

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

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

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

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

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

yo easy-ui5

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

以下のようなプロジェクトが生成されます。
image.png
webappフォルダはuimoduleの下に入っています。
image.png

2. ODataモデルを追加する

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

yo easu-ui5:newmodel

以下のように質問に回答します。最後の"Overwrite uimodule\webapp\manifest\json?"という質問には、"a"と入力すると上書きがされます。
image.png
manifest.jsonに以下の設定が追加されます。（※localUriのスラッシュが多いので修正しておきましょう）
image.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

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

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

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

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

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

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

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

5. ローカルでテスト

ローカル実行用のdestination追加

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

実行

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

npm start

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

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

裏では

ui5-middleware-cfdestinationの設定をもう一度見てみると、portが1091となっています。
image.png
ブラウザにlocalhost:1091/cap-products/と入力すると、ODataサービスのトップ画面が表示されます。つまり、1091番ポートでapprouterが立ち上がり、リクエストを中継してくれているのです。
image.png

6. デプロイ

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

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

npm run deploy

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?