SAP Cloud PlatformでカスタムFioriアプリを作ってODataと接続する-OData接続設定

## 目的
[Fioriデザイン](https://experience.sap.com/fiori-design-web/)なフロントエンドを実現するSAP UI5フレームワークを使った新規アプリケーションを作る
FioriアプリケーションをSAP Cloud Platform上のHANADBで作成したODataと接続する

##前提
####開発環境
SAP Cloud Platformのtrial環境（無償版）を利用する
https://account.hanatrial.ondemand.com/

####ODataサービスの公開
下記ブログを参考にODataサービスを作成
https://blogs.sap.com/2018/07/13/sap-cp-trial%E7%92%B0%E5%A2%83%E3%81%AEhana-db%E8%A8%AD%E5%AE%9A/

#####参考
ODataサービスの使い方は下記参考に
https://qiita.com/yonekura-h/items/29db429d91bbcc31edc4

## ODataサービスの接続設定
SAP Cloud Platform Cockpit でODataサービスの接続先設定を行う

+ SAP Cloud Platformにログインして、「Connectivity」->「Destinations」を押下
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/159467/dae16ef1-bb7b-43a7-865a-a11a0e96cb93.png)

+ 新規宛先を追加する
宛先一覧画面が開いたら下図赤枠部分の「New Destination」を押下
![てじゅん２.png](https://qiita-image-store.s3.amazonaws.com/0/159467/67032deb-c05e-a4f4-abc7-8a8e2850a0fd.png)

+ 以下の作成画面が開くので必要事項を入力する
<img width="1158" alt="スクリーンショット 2019-03-04 11.35.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/159467/2fec06ca-6469-b768-8f6e-313f50f8cce2.png">

| 項目 | 入力値 |
|:--|:--|
|  Name |  任意の名称 |
|  Type |  HTTP |
|  Description |  任意 |
|  URL |  https://\<HANA mdc\>.hanatrial.ondemand.com<br>（前提記載の手順で作成したODataサービスURL） |
|  Proxy Type | Internet  |
|  Authentication |  BasicAuthentication<br>(前提記載の手順でBasic認証に設定しているため) |

※入力例
<img width="1155" alt="スクリーンショット 2019-03-04 11.52.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/159467/85faa80d-266d-3ca1-94a1-65bc15c9cb77.png">

+ WebIDEでODataサービスを利用するためのプロパティを設定<br>「New Propety」を押下し、新規プロパティを追加する
![手順４.png](https://qiita-image-store.s3.amazonaws.com/0/159467/32ee221f-2796-bd64-c332-ebac3b5f5f29.png)

| プロパティ | 入力値 |
|:--|:--|
| WebIDEUsage  | odata_gen |
|  WebIDEEnabled | true  |
|  WebIDESystem | (任意の名称)  |

+ 「Save」押下後「Check Connection」を押下し、接続確認を行う
<br>成功時には「２００ OK」が表示される
![手順５.png](https://qiita-image-store.s3.amazonaws.com/0/159467/0a817fca-9d30-a1ca-666b-8498ac80b106.png)
<img width="488" alt="スクリーンショット 2019-03-04 13.02.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/159467/043ac7c6-b839-8cf1-dc5f-3d59ba038df0.png">

## WebIDEでの新規プロジェクト作成
SAP Cloud PlatformのWebIDEサービスを使ってカスタムFioriアプリを作成する

* コクピット画面で「Services」を押下->サービス一覧画面で「SAP Web IDE Full-Stack」を検索
<br>サービスのパネルを押下する
![手順６.png](https://qiita-image-store.s3.amazonaws.com/0/159467/baabcf93-4eaa-8438-554f-6e1b502f2d88.png)

* 「Go to Service」を押下
![手順７.png](https://qiita-image-store.s3.amazonaws.com/0/159467/b26353cc-af08-bbb7-b03b-54d03feb5574.png)

* SAP Web IDE Full-StackのTop画面から「New Project from Template」を押下
![tejunn8.png](https://qiita-image-store.s3.amazonaws.com/0/159467/f8cb5d9e-ad86-dbee-6999-ef674e23b88d.png)

* 新規プロジェクトのテンプレートを選択する
List ReportなどコーディングなしでODataの表示が行えるテンプレートも用意されているが、
今回は「SAPUI5 Application」を選択する
選択後「Next」押下
![てじゅん９.png](https://qiita-image-store.s3.amazonaws.com/0/159467/803fe6f5-d95b-0cf7-cc4e-c4941ad88e5d.png)


* プロジェクト名、NameSpace名に任意の名前を入力して「Next」押下
![てじゅん１０.png](https://qiita-image-store.s3.amazonaws.com/0/159467/a618acbf-c187-c35b-6e8f-3334b3b1a810.png)

* Viewファイル名に任意の名前を入力して「Finish」押下
![てじゅん１１.png](https://qiita-image-store.s3.amazonaws.com/0/159467/474c53fd-e391-8500-a962-eefbcb22510c.png)

## プロジェクトにOData設定を追加
上記手順を実行すると作成したプロジェクトのディレクトリが作成される
ツリーを展開し、webapp配下の「manifest.json」ファイルを開く
下部に表示される「Descripter Editer」を選択
![てじゅん１２.png](https://qiita-image-store.s3.amazonaws.com/0/159467/11307cca-d29f-8e7a-8e62-521db9b863a3.png)

「DataSource」タブを選択し、「＋」ボタンを押下
![てじゅん１３.png](https://qiita-image-store.s3.amazonaws.com/0/159467/0284c482-b72e-f076-563e-48567a1e7dee.png)

Data Connection設定で「Service URL」を選択
コンボボックス内に`ODataサービスの接続設定`で追加したConnectivityが存在するのを確認する
※Connectivityの反映には数分かかる場合があるので、選択肢に存在しない場合はWebIDEの再起動などをためすといいかも
![てじゅん１４.png](https://qiita-image-store.s3.amazonaws.com/0/159467/8e8bbcb7-39ac-d381-60c3-c1e3c85024f6.png)

Connectivityを選択し、ODataサービスのURLを入力する
「Test」ボタン押下でODataサービスのcollectionが確認できれば成功
「Next」を押下する

URLはSAP HANA Web-based Development Workbench: Editor画面で確認できるXS Engineのディレクトリ構造を参照し、.xsodataファイルのパスを指定する
![てじゅん１５.png](https://qiita-image-store.s3.amazonaws.com/0/159467/c96bbf99-2d1c-2db5-5e55-f5b165e43549.png)
※参考
![てじゅん１６.png](https://qiita-image-store.s3.amazonaws.com/0/159467/fe4c42b7-1c7d-043e-8fcf-bdeb093e744c.png)

モデル名の指定画面が表示されるが、特に指定がない場合は「Next」押下
次の画面で「Finish」を押下する
<img width="1219" alt="スクリーンショット 2019-03-04 15.03.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/159467/6d410054-6ac8-dab3-8fab-018d1085eb43.png">

作成が完了すると、Data SourceにOData設定が表示されている
![てじゅん１７.png](https://qiita-image-store.s3.amazonaws.com/0/159467/3dc8e2f0-8149-fd97-783e-c204776990c0.png)

上記設定を行うとneoapp.jsonとmanifest.jsonに下記のコードが追加される


```javascript:neoapp.json

"routes": [
    // 省略
    {
      "path": "/Sample",
      "target": {
        "type": "destination",
        "name": "Sample"
      },
      "description": "Sample Destination"
    }
]
```

```javascript:webapp/manifest.json

	"sap.app": {
		// 省略
		"dataSources": {
			"demo.xsodata": {
				"uri": "/Sample/demo/demo.xsodata/",
				"type": "OData",
				"settings": {
					"localUri": "localService/metadata.xml"
				}
			}
		}
	},
```

##さいごに
SAPUI5アプリからODataを呼び出すための設定は本投稿のとおり
次は画面からの呼び出し処理について