SAP CP Trial環境で簡単にODataが作りたかったのでBackend Service(beta)を試してみた


この記事は [chillSAP 夏の自由研究2020](https://note.com/chillsap/n/n66e12ef65d11?fbclid=IwAR3REd19CLNDvQHZDNjQaE_2Cki4bqGln4pVk7UJjHYEq39yUtF_5Xch1BQ) の記事として執筆しています

# はじめに

業務では主にフロントエンドの開発をしているので、ちょっとした検証やFiori Elementsを作りたかったりする際に
単純なものでいいのでちょうどいいODataServiceがころがってないかな。。と思うことがあります。

とくにTrial環境がCloud FoundryだけになってからODataServiceを公開する=[Javaとかでコーディングが必要？](https://qiita.com/yonekura-h/items/62abe8b4ff1a747bd2e9)とハードルが高くなっていたのですが、実は簡単にODataを公開する方法があるとのことなので試してみました。

当記事ではODataService公開 → HTML5モジュール(MTA)から参照できるまでを実践しています。
今回は「むずかしいことを考えずにODataを作りたい」という目的なので、CDSビューなどを作らずにやってみました。

[参考URL]
https://www.sapsumikko.jp/entry/2020/03/25/sap-cloud-platform-backend-service
https://blogs.sap.com/2019/02/19/sap-cloud-platform-backend-service-overview-of-blogs/

# SAP Cloud Platform Backend service (Beta)の初期設定
利用するサービスは「Backend Service」です。名前の通りです。
[公式ドキュメントはこちら](https://help.sap.com/viewer/70dea311943a4ab99f903ccc584225f6/Cloud/en-US/94ac27d8df444e6eab8cce6b0a0fe90c.html)
あまり記載は多くなかったです。ベータ版だからでしょうか。

SAP Cloud PlatformのTrial環境を使って進めていきます。
今回の使いたい機能がベータなので、環境作成時にできているサブアカウント（Trial）ではBackend service は利用できません。

## Feature機能を有効にしたサブアカウントの追加
そのため、まずはTrial環境にサブアカウントを追加します。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/01e3dcf2-3a75-47e2-a2d6-5e7f50be7580.png)
グローバルアカウントのサブアカウント一覧から「New Subaccount」を押下して、
新規サブアカウントの設定をします。

<img width="400" alt="図2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/0d308233-8201-3c60-8e79-344985310849.png">
入力値は任意ですが、「Enable beta features」にチェックを入れます。

![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/f6d7f724-23af-cb5c-569e-97d0aa7a5236.png)
新しいサブアカウントが作成できたらサブアカウントの概要ページに移動し、「Enable Cloud Foundry」を押下します。
※Org Nameは任意です。

有効化できたら忘れずにSpaceを作成します
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/4e523f33-0153-1725-0dcc-cf6767ea6ba3.png)

Spaceの設定値は以下の通り。
名称だけつけて後は規定値のままです。
<img width="400" alt="図7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/5976d409-8f04-97e4-a841-596e36f4face.png">

## Backend service (Beta)の有効化
Spaceまで作成できたら、追加したサブアカウントでBackend service (Beta)を使用できるようにします。
サブアカウントの左側メニューから「Entitlements」を押下します。
![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/4a2cd3a2-3e41-f0be-729d-336815f8745e.png)

「Configure Entitlements」を押下すると下記の「Add Service Plans」が表示されるので押下
![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/a543b90a-ae05-8533-e940-60a5ee4ae153.png)

追加できるサービス（Entitlements）の一覧が出てきます。
Backend service (Beta)を探してPlanを選択、追加します。
![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/765f7fab-71f7-c3bd-a3d3-32338297114d.png)

うまくいくと下記のように追加されます。
（忘れずにSaveをしましょう）
![図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/b4aa3919-3ab6-74c1-19d9-a727f650a817.png)

「Entitlements」を追加すると「Subscriptions」の一覧に追加したサービスが表示されるようになります。
左側メニューから「Subscriptions」を押下するとこんな感じになります。
![図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/146dbf2f-72ba-9e9f-c7f3-7737399f9f5b.png)

「Not Subscribed」になっているので詳細ページから「Subscribe」を押下しましょう。
![図14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/3f645261-e1dd-582b-181a-e017a71db8a7.png)

ステータスが「Subscribed」になると「Go to Application」が押下できるようになるので、
とりあえずBackend Serveceにアクセスしてみます。

<img width="960" alt="図15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/0ef25a96-d760-a1e6-68a6-dcb0b4332fda.png">

何やら使えなさそう。。。
メッセージからして権限周りらしいので、サービスの詳細ページに戻って権限を確認してみます。
![図16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/7aa973f3-8e85-9228-653a-88684c2d8d1a.png)
　↓↓↓↓↓↓↓↓
![図17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/df90f8da-c887-4335-40bb-dacdbab1934f.png)

Backend Serviceにはデフォルトで以下の権限が存在するため、これらを自分のユーザーに割り当てます。

 - Admin
 - AllAccess
 
サブアカウントのメニューから「Security」→「Roll Collections」から新しいロールコレクションを追加します。
![図18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/24619c41-d009-76dd-b47e-d3300ab5c5a7.png)


「＋」ボタンを押下し、任意の名称を設定します。


![図19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/1e3d5167-2190-aa52-1b3e-bdf4dd721c17.png)

ロールコレクションが作成されたら詳細ページに移動します。

![図20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/e5fa307c-5c6d-8a1a-b0d2-42de3f149dda.png)

詳細ページで右上の「Edit」を押下し、
「Role」に先ほど確認した「Admin」「AllAccess」を追加します。
「Users」には自分のIDのメールアドレスを指定します。

![図22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/f18b8957-4d2d-3ae5-0ef3-a9061d1129f0.png)

権限の割り当てが完了したら、もう一度Backend Serveceにアクセスしてみます。
※権限設定が反映されるまで少し時間がかかるかもしれないので、
　すぐにアクセスしても先ほど同様のエラーが出ることがあります。

無事にBackend Serviceの画面が表示されました。
![図23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/2efe81a3-c8a5-c039-0296-064f009e3ffb.png)


# SAP Cloud Platform Backend service (Beta)でODataServiceの作成

ようやく本題のBackend serviceです。
左側メニューの「APIs」からAPIの管理画面に遷移し、「create APIs」を押下します。
![図24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/3d85b070-7bb1-bfc4-2b92-873a90066138.png)

押下すると作成するAPIの設定ダイアログ（下図）が表示されます。

<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/26bd9ac5-d854-ca3e-dc73-86203a9e8880.png">

指定できるModel Typeは以下の3種類です。

 - CDS
 - Open API
 - EDMX(V2)

WebIDE等からCDSを作成することもできますが、OData V2用のmetadata.xmlを偶然持っていたので
今回はEDMX(V2)を選択しました。

使用したmetadataは以下です。

```xml:demoService.xml
<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
    <edmx:DataServices m:DataServiceVersion="2.0">
        <Schema Namespace="demo" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
            <EntityType Name="Person">
                <Key>
                    <PropertyRef Name="UniqueId" />
                </Key>
                <Property Name="UniqueId" Type="Edm.Int32" />
                <Property Name="Name" Type="Edm.String" />
            </EntityType>
            <EntityContainer Name="container" m:IsDefaultEntityContainer="true">
                <EntitySet Name="People" EntityType="demo.Person" />
            </EntityContainer>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>
```
上記のmetadataファイルを使用して、以下のように設定しました。
※version等は任意の値です

<img width="800" alt="図25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/e6055e91-cbb3-95e8-b108-973d953956d2.png">

「Create API」を押下するとAPIが作成され、詳細ページでAPIのURLを確認することができます。

![図28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/1925d05a-1465-4e17-637a-8433a5295ffd.png)


上記URLの末尾に **$metadata**を追加してアクセスするとODataServiceとして動作できていることが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/26ab6a71-ac0c-a7dc-7117-cb5d44d035ef.png)

metadataファイルを作ってアップロードするだけで簡単にODataServiceを作成することができました！


#Backend service (Beta)で作成したODataServiceの利用

## データの投入
ODataServiceをつくったものの、この時点ではつくっただけなので中身が何もない状態です。
データ投入はOData経由でしかできなさそうだったので、Restクライアントからデータを投入してみます。
※[参考:ODataServiceのCRUD操作](https://qiita.com/yonekura-h/items/29db429d91bbcc31edc4)
※Cookieを設定しておかないと権限エラーになるので、
　開発者ツール等からCookieを確認してRestクライアントに設定しておく必要があります。

【Cookieの確認】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/8977bc36-c6b6-8c3d-78ad-91659ac0b2e3.png)

【POSTでデータ投入】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/98e84980-375e-9dde-a7d9-d7b961beb6b5.png)


## FioriアプリからODataServiceを参照してみる

ODataServiceをつくった目的はFioriアプリから呼び出したいということなので、
trialサブアカウントのFioriアプリから作成したOData `DEMOSERVICE` を呼び出せるようにします。

### ODataServiceの認証設定
Backend serviceで作成したODataは、OAuth 2.0認証のみをサポートしているらしく、Basic認証などの方法ではアクセス不可とのこと。。
そのため、まずはBETA機能を有効にしているサブアカウント（今回の例では`trial_feature`）で認証サービス（xsuaa）を作成する必要があります。

初期設定時に作成していたSpaceへ移動し、「Service」→「Service Marketplace」を表示します。
その中にある「Authorization & Trust Management」を選択します。

![図33-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/73d43827-f680-e9ee-1e15-ac723abe1d7f.png)

詳細ページの左メニューから「Instances」→「New Instance」を押下します。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/0b5cf401-02a9-c7d8-4661-509114aa6211.png)

Planは「application」を選択

<img width="600" alt="図2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/ccc57930-c3d5-6ef0-0052-eccb0e995761.png">

Specify Parametersでは以下のJsonを貼り付けます。
※xsappnameは任意です、
　それ以外は変更しなくて問題ないはずです。

```json
{
	"xsappname": "xsuaaFeatureApp",
	"tenant-mode": "dedicated",
	"foreign-scope-references": [
		"$XSAPPNAME(application,4bf2d51c-1973-470e-a2bd-9053b761c69c,Backend-service).AllAccess"
	]
}
```
<img width="600" alt="図3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/831d28cd-7bbf-cf43-f8a8-339c170a3357.png">

Assign Applicationは指定せずNext、最後にInstance Nameに任意の名称を指定してFinishを押下します。

<img width="600" alt="図4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/33a080d9-f070-d9cc-be9f-fe5b1c32bf3f.png">

xsuaaのインスタンスが作成できたらインスタンスの詳細ページから「Service Keys」に遷移し、
「Create Servece Keys」を押下します。

![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/4a8bc635-bf4b-59bb-7faf-7eeeebc7616d.png)
　↓↓↓↓↓↓↓↓
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/0577b65e-4320-c356-5f04-0b212a61ac32.png)

ServiceKeyに任意の名称をつけてSaveします。
<img width="400" alt="図7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/807a0daf-af03-ff9f-da5f-1639bf166075.png">


そうすると下記のようなキーができました。
このキー情報を使用するのでテキスト等で控えておきます。
![図8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/0e2f2b26-1959-bb85-2e8c-e5d8f7427bd0.png)

そしてこのService Keyをちゃんと設定できたかどうかを確認します。
使うのは以下の赤枠部分です。
【Service Key】
![図12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/3e3c7876-2a53-b92b-3fda-2f15cb33b06f.png)

ブラウザで以下のURLにアクセスします。
**\<Service Keyのurl\>/oauth/token?grant_type=password&username=\<trial環境のログインID\>&password=\<trial環境のパスワード\>**
`※上の画像だと<Service Keyのurl> = https://testkyoso.authentication.eu10.hana.ondemand.com`



![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/3f055abe-7228-0bb2-0c6d-d248f6e895c0.png)



アクセスするとユーザとパスワードを求められるので、以下を入力します。

|項目|入力値|
|---|---|
|ユーザー名|Service Keyのclientid|
|パスワード|Service Keyのclientsecret|

![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/f30165e2-874c-c3fe-db16-3654d829848d.png)

うまくいったら`access_token`が取得できると思います。
この`access_token`を使ってRestクライアントからODataServiceを実行してみます。
※先ほどCookieを設定した場合はCookieなしで実行できること確認するためにCookieを削除しておきます。

先ほど実行したURL（Backend Serviceで確認できるAPIエンドポイント）を以下のように変更します。
【変更前】
**https:// <font color="Red">\<subAccount\>-backend-service</font>.cfapps.eu10.hana.ondemand.com/odatav2/\<NAMESPACE\>/\<SRV\>**
【変更後】
**https://<font color="Red">backend-service-api</font>.cfapps.eu10.hana.ondemand.com/odatav2/\<NAMESPACE\>/\<SRV\>**

![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/e5c8087a-d781-5de1-79b4-c7be00171356.png)

上記画像のように、
　認証タイプ → Bearer Token
　Token     → 先ほど取得した`access_token`
を設定し、リクエストをしてODataServiceを実行できたら認証設定が正常に機能しています。


### MTAプロジェクト＋Fioriアプリ作成
BETA機能を有効にしているサブアカウントでOData呼出の認証関連設定が完了したら、
（認証さえ通れば）外部から呼び出せるODataServiceになっているはずです。

それをTrial環境に元々あるサブアカウント:`trial`のSpace：`dev`にデプロイするFioriから呼び出せるように設定していきます。

WebIDEにアクセスをして、MTAプロジェクトとHTML5モジュールを作成します。
　→具体的な手順は[こちら](https://qiita.com/yonekura-h/items/3c53d8129a2cf25ab939)を参照

MTAプロジェクトを作成する際は以下赤枠箇所の通り、「Use HTML5 Application Repository」にはチェックを入れておきます。

![図13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/7a7bf88c-4678-01ca-2271-975f845316d2.png)

以下のようにMTAプロジェクト`CallBackendService`とその配下のHTML5モジュール`UI_CallBackend`を作成しました。

![図15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/f460c4da-368d-3a37-bd1c-4b88e4dd2706.png)




### ODataServiceの宛先設定

作成したMTAプロジェクトをBuild→デプロイします。
デプロイ完了後のdevスペースのサービスインスタンスは以下の通りです。
その中にあるサービス`destination`(下図の`dest_CallBackendService`)の詳細ページに移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/7449bbc8-123b-002f-dfa1-1d54d5245a7d.png)

メニューの「Destinations」を選択し、新規宛先設定を追加します。
![図19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/cffc01d6-dcd0-d892-bb7e-7a6622774275.png)

設定値は以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/c2bd3ecb-b83e-7435-706d-4e5891d988bd.png)

|項目|入力値|
|---|---|
|Name|任意の名称|
|Type|HTTP|
|URL|**https://<font color="Red">backend-service-api</font>.cfapps.eu10.hana.ondemand.com/odatav2/\<NAMESPACE\>/\<SRV\>**|
|Proxy Type|Internet|
|Authentication|OAuth2ClientCredentials|
|Client ID|\<Service Keyのclientid\>|
|Client Secret|\<Service Keyのclientsecret\>|
|Token Service URL|**\<Service Keyのurl\>/oauth/token?grant_type=password&username=\<trial環境のログインID\>&password=\<trial環境のパスワード\>**|
|Token Service User|※空でOK|
|Token Service Password|※空でOK|

**※URLは認証設定確認時にRESTクライアントでリクエストしたURLです。**
**※Token Service URLはアクセストークン取得時のURLです。**


上記宛先設定が完了したらSaveをします。
設定完了後、Check Connectionで接続確認ができますが、以下のように成功のような感じで`401: Unauthorized`が出ている状態で問題ないです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/43816ff5-8cc9-4922-793e-8c841ee51ffb.png)



### MTA+Fioriアプリの設定

先ほど作成した宛先からODataを呼び出せるよう、MTA＋Fioriアプリ側の設定を変更します。

mta.yamlを開き、以下2点を変更します
１．`modules`->`approuter`->`requires`に以下を追加します。

```yaml:mta.yaml
      - name: dest_CallBackendService
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/440809d4-7385-ee21-51d0-9781225f921f.png)


２．`resources`設定の末尾に以下を追加します。

```yaml:mta.yaml
  - name: distinationBackend
    parameters:
      service-plan: lite
      service: destination
    type: org.cloudfoundry.managed-service
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/90862cda-5a81-7f44-0a80-6d21b9e287ce.png)

`name: distinationBackend`の部分は先ほど設定した宛先設定（Destination）の`Name`と同じ値を指定します。

次に、HTML5モジュール配下のxs-app.jsonに以下のroute設定を追加します。

```json:xs-app.json
  	{
      "source": "^/backend/(.*)$",
      "target": "$1",
      "destination": "distinationBackend",
      "authenticationType": "xsuaa"
    },

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/be190bfa-69ca-f598-7ff7-c3b191a038a3.png)

こちらも先ほどと同様、`"destination": "distinationBackend",`の値は`name: distinationBackend`と一致するように設定します。

これらの設定が完了したら、`Run Index.html`でテスト実行をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/47d4202a-531c-471d-73f6-308d5b305bb7.png)

とりあえずTitleのみ表示された画面が動くと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/0a80d82a-580b-bf7c-763a-8516c380190e.png)

Cockpit画面のサービスインスタンス一覧に戻ると、テスト実行用インスタンスが増えていると思います。
テスト実行用の`destination`インスタンスがいるので、こちらにも先ほどと同様の宛先設定を行っておきます。
※先ほどの設定をExport→Importすると楽です。

![図20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/9944625f-8606-5634-5f39-cc6f7e62c594.png)

上記の設定が完了したら、再度テスト実行したブラウザ画面に戻ります。
URLを以下のように変更します。
【変更前】
**https://\<approuter-host\>/comkyosodemoUICallBackend-1.0.0/<font color="Red">index.html</font>**

【変更後】
**https://\<approuter-host\>/comkyosodemoUICallBackend-1.0.0/<font color="Red">backend/$metadata</font>**

変更後のURLでアクセスすると、ようやくBackend Serviceで定義したmetadataが参照できるはずです。
※宛先設定の反映までに時間がかかる可能があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/09d043cc-bf6c-e354-991f-52faf3a67e3e.png)

### FioriアプリでODataServiceの呼出
上記まででODataServiceとの疎通確認は取れていますが、いちおう画面表示まで。
HTML5モジュール配下に存在するwebapp/manifest.jsonとwebapp/view/View1.view.xmlを編集します。

```javascript:webapp/manifest.json
{
	"_version": "1.12.0",
	"sap.app": {
		"id": "com.kyoso.demo.UI_CallBackend",
		"type": "application",
		"i18n": "i18n/i18n.properties",
                 // 省略 
		"sourceTemplate": {
			"id": "html5moduletemplates.basicSAPUI5ApplicationProjectModule",
			"version": "1.40.12"
		},
		"dataSources": {
			"demoService": {
				"uri": "/backend/",
				"type": "OData",
				"settings": {
					"localUri": "localService/metadata.xml",
					"annotations": []
				}
			}
		}
	},

	"sap.ui": {
		// 省略
	},

	"sap.ui5": {
                 // 省略
		"dependencies": {
                   // 省略
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "com.kyoso.demo.UI_CallBackend.i18n.i18n"
				}
			},
			"demoService": {
				"type": "sap.ui.model.odata.v2.ODataModel",
				"settings": {
					"defaultOperationMode": "Server",
					"defaultBindingMode": "OneWay"
				},
				"dataSource": "demoService",
				"preload": true
			}
		},
		// 省略
		"routing": {
                  // 省略
		}
	}
}
```

```xml:webapp/view/View1.view.xml
<mvc:View controllerName="com.kyoso.demo.UI_CallBackend.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="{i18n>title}">
					<content>
						
					<List
						id="ProductList"
						items="{demoService>/Person}">
						<items>
							<StandardListItem
								title="{demoService>Name}" />
						</items>
					</List>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>
```

webapp/manifest.jsonでModelを定義し、webapp/view/View1.view.xmlで定義したModelをもとにsap.m.Listでリストにしました。
結果は以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/cb56a45d-4438-346b-5357-86f708a469ae.png)

問題なくODataServiceが参照できています。

### 余談

上記まで作成してデプロイをするとTrial環境のQuota制限を超えてしまうらしく、デプロイが失敗します。
destinationのplanがLiteであることが問題みたいです。


![図21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/354c6f3c-cf54-8200-5eb4-3bb5bad9a5a7.png)


テスト実行用のDestinationインスタンスを削除してデプロイすると正常に反映できました。

![図22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/92b32820-3ae1-1a32-34a6-8aec59d10445.png)

テスト実行時は
https://<テストインスタンスapprouter-host>//comkyosodemoUICallBackend-1.0.0/index.html
で実行される（_抜きでも動く）けれど、デプロイ後は
https://\<approuter-host\>/comkyosodemoUI_CallBackend-1.0.0/index.html
じゃないと動かない（_抜きだとNotFound）なのが少し不思議でした。

# おわりに

ODataServiceがすぐに作れるといいなと思っていたので、Backend Serviceは非常に便利でした。
簡単なODataであれば、metadata.xmlの設定をを変えるだけで作成可能です。

ODataの作成までは悩むことなく進められましたが、その後の認証関連やFioriアプリで呼び出すまでの設定周りは思った以上にややこしかったので、整理しきれていない部分があります。
そのあたりは個別にもう少し整理していきたいと思いました。