LoginSignup
1
1

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アプリで使う(4) V2版ElementsアプリをFiori Toolsで

Last updated at Posted at 2020-07-26

はじめに

この記事は、「CAPで作ったODataをUI5アプリで使う」シリーズの4回目です。
前回の記事ではCAPのOData V4のサービスElementsアプリから利用しました。今回は、V2のサービスをElementsアプリから利用する方法について調べます。

V2版ElementsアプリをMTA + Approuter方式で作るには？

Cloud Foundry用のアプリとして作成するので、前回までと同様にMTA + Approuter方式を採用したいと思いました。

私は通常、ABAPのODataサービスを使ってElementsアプリを作るときはWebIDEのテンプレートを使用しています。CAPのサービスも、Neo環境にDestinationを作ってやればWebIDEから利用することができるようです。
参考：Developing Fiori Element Application (List Report and Object Page) consuming the OData service created using SAP Cloud Application Programming model

ですが、CAPサービスがCloud FoundryにあるのにわざわざNeoにDestinationを作るのもな～～と思い、別の方法でできないか検討してみました。

Fiori Toolsは使える？

そこで浮かんだのがFiori Toolsです。Fiori Toolsは2020年6月に公開されたツールで、SAP Business Application StudioやVS CodeでFiori Elementsのテンプレートを選んでアプリを作成できます。ただ現在のところ、ABAPシステム（クラウド or オンプレ）へのデプロイにしか対応していません。そこで、Fiori Toolsで生成したアプリを色々いじってCloud Foundryにデプロイするという作戦で行くことにしました。
あまりきれいなやり方ではないし、これがベストではないと思いますが、「やってみた」シリーズということでご容赦ください。

今回やること

  1. Elementsプロジェクトを作成
  2. Fiori ToolsでUIモジュールを生成
  3. Cloud Foundryで動かすための調整
  4. Cloud Foundryにデプロイするための調整
  5. デプロイ
  6. ローカルアノテーションを追加

前提

開発環境はVS Codeです。
以下からFiori Toolsをインストールしておきます。
https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-fiori-tools-extension-pack

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

おなじみのyomanのgeneratorを使ってプロジェクトを生成します。

yo easy-ui5

image.png

uimoduleをFiori Toolsで生成するプロジェクトに置き換えたいので、uimoduleフォルダはバッサリと削除してしまいます。
image.png

2. Fiori ToolsでUIモジュールを生成

Ctrl + Shift + Pでコマンドパレットを出して、SAP Fiori tools - Application Generator: Launchを選択します。
image.png

SAP Fiori tools - Application Generatorを選択して次に進みます。
image.png
List Report Object Page V2を選択します。
image.png
Data Sourceに"Connect to an OData Service"を選択します。URLには、CAPで作ったODataサービスのURLを入力します。Main EntityにはProductsを指定します。
image.png
モジュール名、タイトル、名前空間、説明を入力し、最後にプロジェクトフォルダを選択します。ここではステップ1で作成したフォルダを指定します。
image.png
結果、以下のようにプロジェクトフォルダが生成されました。
image.png
フォルダ名をuimoduleに変更します。
image.png

実行してみる

uimoduleに移動して、npm startと入力します。
すると、ブラウザが立ち上がりFiori Elementsアプリが表示されました。
image.png

3. Cloud Foundryで動かすための調整

ローカルで実行した場合、uimoduleの中の設定だけで動いている状態なので、Cloud Foundryに持って行ったときにちゃんと動くように調整します。

3.1. Approuterの設定

まず、webappフォルダの中にxs-app.jsonファイルを作成します。
image.png

以下を入力します。UIモジュールはHTML5リポジトリにデプロイされるので、実行時にそこを見に行くための設定です。welcomeFileとして指定したindex.htmlはこのあと作ります。

uimodule/webapp/xs-app.jton
{
  "welcomeFile": "/index.html",
  "routes": [
    {
      "source": "^(.*)",
      "target": "$1",
      "authenticationType": "xsuaa",
      "service": "html5-apps-repo-rt"
    }
  ]
}

続いて、このアプリの入り口になるほうのApprouterの設定です。ここでは、ODataサービスへのルーティングの設定を行います。
image.png
その前に、manifest.jsonを見てみましょう。ODataのuriが/v2/product/となっています。

uimodule/webapp/manifest.json
        "dataSources": {
            "mainService": {
                "uri": "/v2/product/",
                "type": "OData",
                "settings": {
                    "annotations": [
                        "annotation"
                    ],
                    "localUri": "localService/metadata.xml"
                }
            },

以下はui5.yamlの設定です。ローカルで実行した場合、/v2で始まるurlがfiori-tools-proxyというミドルウェアによって本来の宛先に中継されるようになっています。
image.png
Approuterでも同様に、/v2/で始まるurlを中継するように設定します。ルーティングされる際にv2をつけたままにしたいので、targetを"/v2/$1"としています。

approuter/xs-app.json
{
  "welcomeFile": "demoproductsv2elements/",
  "authenticationMethod": "none",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/v2/(.*)$",
      "target": "/v2/$1",
      "authenticationType": "xsuaa",
      "destination": "cap-products",
      "csrfProtection": false
    }
  ]
}

3.2. index.htmlファイルの作成

webapp直下にindex.htmlファイルを作成します。これがアプリ実行時に呼ばれる画面になります。内容はV4版Elementsアプリと同じです。

webapp/index.html
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bookshop</title>

    <script>
        window["sap-ushell-config"] = {
            defaultRenderer: "fiori2",
            applications: {
                "browse-products": {
                    title: "Browse Products",
                    description: "list",
                    additionalInformation: "SAPUI5.Component=demo.productsv2elements",
                    applicationType : "URL",
                    url: ".",
                    navigationMode: "embedded"
                }
            }
        };
    </script>

    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-theme="sap_fiori_3"
        data-sap-ui-frameOptions="allow"
    ></script>
    <script>
        sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
    </script>

</head>
<body class="sapUiBody" id="content"></body>
</html>

4. Cloud Foundryにデプロイするための調整

そのままビルド、デプロイしようとしたところ色々なエラーが起きました。問題は結局、ui5.yamlファイルの設定に起因していました。修正後のui5.yamlは以下のようになりました。
image.png

uimodule/ui5.yaml
specVersion: '2.0'
metadata:
  name: 'productsv2elements'
type: application
resources:
  configuration:
    paths:
      webapp: uimodule/webapp
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
        backend:
          - path: /v2
            url: https://65d11c82trial-mio-trial-dev-products-srv.cfapps.eu10.hana.ondemand.com
        ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
          version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        port: 35729
        path: webapp
builder:
  customTasks:
    - name: "ui5-task-zipper"
      afterTask: "uglify"
      configuration:
        archiveName: "uimodule"
        additionalFiles:
        - approuter/xs-app.json

5. デプロイ

プロジェクトのルートに移動し、以下のコマンドでデプロイします。

npm run deploy

全てうまくいけば、アプリケーションのURLが表示されます。
image.png
実行結果
image.png
image.png

6. ローカルアノテーションを追加

せっかくFiori Toolsを使っているので、ツールを使ってローカルアノテーションをでテーブル列を追加してみましょう。

Ctrl + Shift + Pでコマンドパレットを出して、SAP Fiori tools - Service Modeloer選択します。（対象のプロジェクトが複数でてきたら、今のプロジェクトのuimoduleフォルダを選択します）
image.png
ProductService.Productsの横にある@マークをクリックしてアノテーションを表示します。
image.png
Ui.LineItemの横にあるコピーボタンを押すと、アノテーションがローカルにコピーされます。
image.png
image.png

productTypeの列を追加します。入力中にCtrl + Shiftを押すと候補を表示してくれます。
image.png

                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="product"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="description"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="productType"/>
                        </Record>
                    </Collection>
                </Annotation>

以下はローカル実行の結果ですが、Product Typeが追加されました。
image.png

おわりに

これまで、CAPで作ったODataサービスをフリースタイルのUI5アプリ、V4版Elementsアプリ、そしてV2版Elementsアプリから利用する方法について見てきました。UI編の最後として、次回はCAPプロジェクトの中にUIモジュールがあるMTAのパターンを実装してみたいと思います。
UIはやはりODataとの結びつきが強いので、CAPプロジェクトの中で作ったほうがいいかも、と思い始めています。CAPプロジェクトの中にFiori ToolsでUIモジュールを作るのが最強な気がしています。（アノテーションを活用するという意味で）

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?