【SAPUI5】UI5 Tooling：ODataへの接続

##はじめに
本記事は、UI5 Toolingを使ってみるシリーズの2回目です。（1回目は[こちら](https://qiita.com/tami/items/9f6b573aefce12dfc626)）
今回は、以下のブログを参考にODataとの接続を行います。
[End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code](https://blogs.sap.com/2019/11/05/end-to-end-setup-of-local-development-environment-with-ui5-tooling-part-3-vs-code/comment-page-1/#comment-498832)

##内容
1. 認証不要なODataの場合
2. 認証が必要ながODataの場合


##1. 認証不要なODataの場合
まずは、NorthwindのサンプルODataを使います。

###1.1. データソースを追加
manifest.jsonにODataの接続設定を追加します。

```json
	"sap.app": {
		...
			"mainService": {
				"uri": "/Northwind/V2/Northwind/Northwind.svc/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			}
		}	
```

```json
		"models": {
			...
			"": {
				"dataSource": "mainService",
				"preload": true
			}
		}
```

ビューにリストを追加します。

```xml:App.view.xml
			<Page title="{i18n>title}">
				<content>
					<List items="{/Products}" growing="true" growingScrollToLoad="true">
						<items>
							<ObjectListItem type="Navigation" title="{ProductID}" number="{UnitsInStock}" />
						</items>
					</List>	
				</content>
			</Page>
```

この段階で実行すると、404のエラーになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1fc5741a-a7ec-ea57-8748-9ec22891a9fd.png)

###1.2. ui5-middleware-simpleproxyをインストール
[ui5-middleware-simpleproxy](https://www.npmjs.com/package/ui5-middleware-simpleproxy)を入れると、プロキシが使えるようになります。アプリとODataとのやり取りの間にプロキシを間に入れることによってCORSのエラーを回避できます。

参考：[CORS and Fiori/UI5 – Everything you need to know](https://blogs.sap.com/2019/01/07/cors-and-fioriui5-everything-you-need-to-know/)


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

```
npm install ui5-middleware-simpleproxy --save-dev
```

package.jsonに以下を追加します。

```json
"ui5": {
  "dependencies": [
    "ui5-middleware-simpleproxy"
  ]
}
```

全体は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/3cd550f6-2018-d236-0cff-6c88f3ee1d2b.png)

ui5.yamlに以下を追加します。mountPathはmanifest.jsonに追加したuriの先頭部分と一致させます。この部分がbaseUriに置き換わります。

```yaml
  - name: ui5-middleware-simpleproxy
    afterMiddleware: compression
    mountPath: /Northwind
    configuration:
      baseUri: "https://services.odata.org/"  
```

全体は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/cde4ed59-d95a-08cc-30f6-ca2b28b3a294.png)

###1.3. 実行してみる
レイアウトがあまりよくないですが、一応データはロードできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e7ebaa81-5644-47de-1dfb-e855f51cb7a2.png)

ネットワークタブを見るとリクエストURLの先頭が`http://localhost:8080`となっていて、これ自体はさきほどと変わりません。プロキシがui5.yamlに追加したbaseUriを使って正しいサーバにアクセスしてくれていると思われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a89ebb00-d562-f630-273e-b8d54bad33ee.png)


##2. 認証が必要なODataの場合
通常、バックエンドのODataサービスに接続する際は認証が必要です。今回はES5というSAPが用意したGateway Demoサーバーを使って認証が必要なパターンを試してみます。

ES5のアカウントは以下のリンクから作成できます。
https://developers.sap.com/tutorials/gateway-demo-signup.html

###2.1. データソースを追加
manifest.jsonにES5の宛先を追加します。Northwindの宛先は今回使いませんが、残しておきたかったので"Northwind"と名前を変えてあります。
なお、先頭についている"ES5"などの識別子はデプロイする前に外す必要があります。

```json
		"dataSources": {
			"mainService": {
				"uri": "ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			},
			"Northwind": {
				"uri": "/Northwind/V2/Northwind/Northwind.svc/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			}	
```
```json
		"models": {
			...
			"": {
				"dataSource": "mainService",
				"preload": true
			}
		}
```

ビューを変更します。

```xml:App.view.xml
			<Page title="{i18n>title}">
				<content>
					<List items="{/ProductSet}" growing="true" growingScrollToLoad="true">
						<items>
							<ObjectListItem type="Navigation" title="{ProductID}" number="{Price}" />
						</items>
					</List>
					<!-- <List items="{/Products}" growing="true" growingScrollToLoad="true">
						<items>
							<ObjectListItem type="Navigation" title="{ProductID}" number="{UnitsInStock}" />
						</items>
					</List>					 -->
				</content>
			</Page>
```

###2.2. ui5-middleware-proxy-basicauthをインストール
[ui5-middleware-proxy-basicauth](https://www.npmjs.com/package/ui5-middleware-proxy-basicauth)はui5-middleware-simpleproxyと大体同じ役割ですが、Basic認証にユーザID、パスワードを渡すことができます。

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

```
npm install ui5-middleware-proxy-basicauth --save-dev
```

package.jsonに以下を追加します。前のステップで追加したui5-middleware-simpleproxyは削除します。

```json
"ui5": {
  "dependencies": [
    "ui5-middleware-proxy-basicauth"
  ]
}
```

全体は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/206d4a03-ddc3-0491-792f-02d2a7d00c3e.png)

ui5.yamlに以下を追加します。

```yaml
  - name: ui5-middleware-proxy-basicauth
    afterMiddleware: compression
    mountPath: /ES5
    configuration:
      baseUri: "https://sapes5.sapdevcenter.com/" 
      client: "002"
```

全体は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/8f576359-4946-9ea1-07dc-cee34e74864b.png)

プロジェクト直下に.envファイルを作成し、ユーザID、パスワードを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/201cd253-e74b-f813-46df-68f03fc12e2f.png)


```:.env
PROXY_USERNAME=<ユーザID>
PROXY_PASSWORD=<パスワード>
```

###2.3. 実行してみる
さきほどと内容が変わって、Gateway Demoサーバーのデータがロードされました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/50784f7d-be26-f3d5-515c-a05fde2da7d9.png)

##参考
[End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code](https://blogs.sap.com/2019/11/05/end-to-end-setup-of-local-development-environment-with-ui5-tooling-part-3-vs-code/comment-page-1/#comment-498832)
[CORS and Fiori/UI5 – Everything you need to know](https://blogs.sap.com/2019/01/07/cors-and-fioriui5-everything-you-need-to-know/)
[UI5 Tooling – Custom Server Middleware Proxy Extension](https://blogs.sap.com/2019/08/26/ui5-tooling-custom-server-middleware-proxy-extension/)