【SAPUI5】OData(7) ODataを使ったSAPUI5アプリケーションの作り方 準備編

##概要
SAP Gateway Demo SystemのODataサービスを使って、SAPUI5のアプリを作ってみたいと思います。今回は、準備編としてSAP Gateway Demo Systemへの接続設定をおこないます。

※OData関連の投稿一覧は以下の記事をご参照ください。
[【SAPUI5】OData(1) ODataとは](https://qiita.com/tami/items/411a226d1ea6bb25b5f1)

###今回やること
1. SAP Gateway Demo Systemにユーザ登録する
2. サービスのmetadataを確認する
3. SAP Cloud Platform Cockpitで宛先を設定する
4. WebIDEから接続を確認する

##1. SAP Gateway Demo Systemにログインする
以下のページを参考に、SAP Gateway Demo Systemにユーザ登録します。
https://developers.sap.com/tutorials/gateway-demo-signup.html

前提として、SAP Cloud Platform Cockpitのアカウントが必要です。アカウントの作成方法については以下を参考にしてください。
[【SAPUI5】Hello World](https://qiita.com/tami/items/05014dd40577cc92ccca)

ログインすると、以下のようにwebguiの画面が立ち上がります。
ここから開発等はできないようです。ユーザ登録するのは、SAP Gateway Demo Systemのサービスを使用できるようにするためです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/d0d5861b-616c-e459-6447-69685d651533.png)

##2. サービスのmetadataを確認する
SAP Gateway Demo SystemがどのようなODataサービスを提供しているのか見てみましょう。
ブラウザに以下のように入力してください。ログインを求められたら、ステップ1で設定したユーザID、パスワードを入力してください。
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata
meatadataが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/68365d9a-64d0-2188-bbc7-d9b0b529ea7c.png)

以下のEntity Set, Navigation Propertyが用意されていることがわかりました。

|Entity Set  |Navigation Property  |
|---|---|
|BusinessPartnerSet  |ToSalesOrders, ToContacts, ToProducts  |
|ProductSet  |ToSalesOrderLineItems, ToSupplier  |
|SalesOrderSet  |ToBusinessPartner, ToLineItems  |
|SalesOrderLineItemSet  |ToHeader, ToProduct  |
|ContactSet  |ToBusinessPartner  |

図で表すと、こんな感じです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/9bcd028b-120a-8312-8dd7-1cd17a797504.png)

##3. SAP Cloud Platform Cockpitで宛先を設定する
1.で登録したSAP Gateway Demo Systemを、SAP Cloud Platform Cockpitに登録します。これにより、Web IDEでアプリを作る際にODataサービスを選択できるようになります。
参考：https://developers.sap.com/tutorials/gateway-demo-signup.html

下記URLからSAP Cloud Platform Cockpitにログインします。
https://account.hanatrial.ondemand.com/cockpit

"Neo Trial"を選択します。
<img width="700" alt="hcp_4-2.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/276021/bbf48c37-9e8d-0050-efe0-bfaaa9730cb6.png">

"Connectivity"のメニューを開いて"Destinations"を選択します。
<img width="491" alt="destinations.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/16dd5b8d-ee07-0340-5b16-97b9196278fc.png">


"New Destination"をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/4fa6d20d-2610-69b8-be22-49f2073319e7.png)

以下の内容を入力します。
URL：https://sapes5.sapdevcenter.com
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/320ad5d5-26fa-c3da-1278-e9607ffbecaa.png)

"New Property"ボタンを押して、追加で以下の内容を入力します。
WebIDEでこの宛先を使えるようにするための設定です。
WebIDEUsage: odata_gen, odata_abap, bsp_execute_abap
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/5cfae1eb-f6a0-0cdc-9be8-e8a9140b7c67.png)


入力し終わったら"SAVE"ボタンを押します。

##4. WebIDEから接続を確認する
最後に、WebIDEから接続がうまくいっているか確認してみます。
WebIDEにログインして、"New Project from Template"を選択します。
<img width="532" alt="newproject.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/8a7edb56-f4ff-1ed7-5b9b-3cd31801e882.png">

"SAP Fiori Master-Detail Application"を選択して、"Next"を押します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/91792295-ac80-9191-ba0d-c0d3966c888f.png)

Project Name, Titleを入力します。（接続確認が目的なので、名前は適当です）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/af7e0d47-fa8a-30b5-1264-06844d4689e6.png)

接続先の設定で、"Service URL"を選択し、プルダウンから"ES5"を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/57f1215a-e4c9-cdb3-75d8-4ec956232b35.png)

サービスURLに、以下を入力します。
sap/opu/odata/IWBEP/GWSAMPLE_BASIC
<img width="640" alt="serviceurl.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/76305be5-dbf7-6123-2630-01f1eb24f44e.png">

"Test"ボタンを押して、Entity Setが表示されれば成功です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/36e7dc54-bf88-e0ec-1b6a-8b6c0e73c02e.png)

##関連記事
[OData(6) SAPでのODataサービスの作り方 開発編-2](https://qiita.com/tami/items/81dd4e185ffbc42113fa)
[OData(8) ODataを使ったSAPUI5アプリケーションの作り方 開発編-1](https://qiita.com/tami/items/3990f98f5cb10818be52)