【SAPUI5】UI5 Tooling：ODataへの接続

##はじめに
本記事は、UI5 Toolingを使ってみるシリーズの2回目です。（1回目はこちら）
今回は、以下のブログを参考にODataとの接続を行います。
End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code

##内容

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

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

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

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

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

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

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のエラーになります。

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

参考：CORS and Fiori/UI5 – Everything you need to know

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

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

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

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

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

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

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

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

###1.3. 実行してみる
レイアウトがあまりよくないですが、一応データはロードできました。

ネットワークタブを見るとリクエストURLの先頭がhttp://localhost:8080となっていて、これ自体はさきほどと変わりません。プロキシがui5.yamlに追加したbaseUriを使って正しいサーバにアクセスしてくれていると思われます。

##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"などの識別子はデプロイする前に外す必要があります。

		"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"
				}
			}	

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

ビューを変更します。

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はui5-middleware-simpleproxyと大体同じ役割ですが、Basic認証にユーザID、パスワードを渡すことができます。

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

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

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

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

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

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

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

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

プロジェクト直下に.envファイルを作成し、ユーザID、パスワードを設定します。

.env

PROXY_USERNAME=<ユーザID>
PROXY_PASSWORD=<パスワード>

###2.3. 実行してみる
さきほどと内容が変わって、Gateway Demoサーバーのデータがロードされました。

##参考
End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code
CORS and Fiori/UI5 – Everything you need to know
UI5 Tooling – Custom Server Middleware Proxy Extension