ODataV4のODataをMockServerで確認する

この記事は [chillSAP 夏の自由研究2021](https://note.com/chillsap/n/n08ef5ec73b4c) の記事として執筆しています。

#はじめに
SAPUI5にてODataV4を使ったMockserverを利用する手順を記事として投稿させていただきます。
mockserver.jsはODataV4に対応していないため、下記を用います。
https://www.npmjs.com/package/@sap/ux-ui5-fe-mockserver-middleware

#package.jsonを変更する
package.jsonに@sap/ux-ui5-fe-mockserver-middlewareが含まれていることを確認する

```package.json
	"devDependencies": {
		"@ui5/cli": "^2.10.1",
		"@ui5/fs": "^2.0.6",
		"@ui5/logger": "^2.0.1",
		"@sap/ux-ui5-tooling": "1",
		"rimraf": "3.0.2",
		"@sap/ux-ui5-fe-mockserver-middleware": "^1"
	},
	"ui5": {
		"dependencies": [
			"@sap/ux-ui5-tooling",
			"@sap/ux-ui5-fe-mockserver-middleware"
		]
	}
```

#ui5.yamlを変更する
ui5.yamlでsap-fe-mockserverを設定します

```ui5.yaml
server:
  customMiddleware:
  - name: sap-fe-mockserver
    mountPath: /
    afterMiddleware: compression
    configuration:
      service:
        urlBasePath: '/sap/opu/odata'
        name: 'testSRV'
        metadataXmlPath: './webapp/localService/metadata.xml'
        mockdataRootPath: './webapp/localService/data'
```
<dl>
  <dt>urlBasePath</dt>
  <dd>ODataのURL(サービス名の前まで)</dd>
  <dt>name</dt>
  <dd>ODataのサービス名</dd>
  <dt>metadataXmlPath</dt>
  <dd>metadata.xmlのパス</dd>
  <dt>mockdataRootPath</dt>
  <dd>モックデータのパス</dd>
</dl>

　例：/sap/opu/odata/testSRVの場合
　　　urlBasePath ：/sap/opu/odata
　　　name ：testSRV

#metadata.xml
ui5.yamlにてmockdataRootPathで設定したディレクトリにmatadata.xmlを保存します。
今回は適当にProductsという以下のようなEntityを用意しています。

```metadata.xml
            <EntityType Name="Products">
                <Key>
                    <PropertyRef Name="productId"/>
                </Key>
                <Property Name="productId" Type="Edm.String" MaxLength="10" Nullable="false"/>
                <Property Name="productName" Type="Edm.String" MaxLength="20"/>
                <Property Name="productCategory" Type="Edm.String" MaxLength="20"/>
            </EntityType>
```

#データを作成する
ui5.yamlにてmockdataRootPathで設定したディレクトリに対応したEntity名のjsonファイルを保存します。

```Products.json
 [{
         "productId": "1",
         "productName": "テスト1",
         "productCategory": "Cat1"
     },
     {
         "productId": "2",
         "productName": "テスト2",
         "productCategory": "Cat2"
     },
     {
         "productId": "3",
         "productName": "テスト3",
         "productCategory": "Cat3"
     }
 ]
```

現段階では以下のようなファイル構造になっています。
![スクリーンショット 2021-08-19 18.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/1781f355-5f99-2708-d98e-129e20a4472a.png)


#Tableでデータが表示できることを確認する
コンテンツ部分には以下のようなテーブルを配置します。

```Main.view.xml
						<Table id="sampleTable" inset="false" items="{
                        　　　　　path: 'V4Model>/Products'
                    　　　　　　　　　　　　}" class="sapFDynamicPageAlignContent" width="auto">
							<columns>
								<!-- ID -->
								<Column >
									<Text text="ID"/>
								</Column>
								<!-- 名前 -->
								<Column >
									<Text text="名前"/>
								</Column>
								<!-- カテゴリ -->
								<Column >
									<Text text="カテゴリ"/>
								</Column>
							</columns>
							<items>
								<ColumnListItem>
									<cells>
										<!-- ID -->
										<ObjectIdentifier text="{V4Model>productId}" />
										<!-- 名前 -->
										<Text text="{V4Model>productName}" wrapping="false" />
										<!-- カテゴリ -->
										<Text text="{V4Model>productCategory}" wrapping="false" />
									</cells>
								</ColumnListItem>
							</items>
						</Table>
```
その後、画面を起動してみます。

![スクリーンショット 2021-08-19 18.40.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/0d2657a8-8d5d-7aee-29ef-be8f4097fe1a.png)

無事データが確認できました。


#まとめ
MockServerにてOdataV4の動作を確認することができました。
訳あってバック側のAPIを抜きにUI側のデータ動作をデバッグしたいときに便利なのでご参考までに。