OutSystemsでSAP ES5からデータ取得するアプリを作成する

本記事は[Web API Advent Calendar 2021](https://qiita.com/advent-calendar/2021/webapi)の11日目の記事です
SAP ES5からOutSystemsでデータ取得するアプリを作成方法について説明します。
今回はOdataでES5からデータ取得していますが、Odata≒RestAPIなんで普通のAPIもほぼ同じ方法で実装できます。

##OutSystems
ローコードの開発ツールです。
https://www.outsystems.com/ja-jp/
無償の環境で殆どの機能を使うことができ、リアクティブなSPAアプリケーションはフルスクラッチの数倍のスピードで開発することができます。
一部制約はありますがノーコードでなくローコードなので一部プログラムを書いて開発もでき比較的自由度が高い製品です。

##SAP ES5とは？
SAP Netweaver Gatewayのデモシステムです。
ES5で公開されているOdata（API）をサンプルデータとして使うことでアプリケーションを作る事ができます。

#今回の主な流れ
・OutSystemsの無償環境を登録
・SAP ES5に登録
・Rest APIでES5からOdataを取得するサーバー処理を作成
・取得データを一覧で表示する画面を作成
##OutSystemsの無償環境を登録
[OutSystemsのローコードプラットフォーム](
https://www.outsystems.com/p/modern-development/?utm_source=google&utm_medium=cpc&utm_campaign=Aquisition_G_APAC-Japan_Search_Brand&utm_term=outsystems&utm_content=Content&gclid=Cj0KCQiA-qGNBhD3ARIsAO_o7ynUwnr-imgKr7JHl00pXTH4da_pR-pO1ceQwQrNBeevyH3HPSkg-PcaAuwbEALw_wcB)
上記リンクの無償トライアルボタンから登録してください。
無償環境はクラウド環境で長期間ログインが無いと警告メール後環境がダウンされます（作ったアプリとか消えちゃう）
またローカルにエクセルなどでデータをインポートすることが可能でそれらのデータとアプリ本体のデータなど全部で2GB 程度使うことが可能です。
前は5GBくらい使えた気がしたんですが、いまLifetimeで確認したら2GBになっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/364d5a35-85cb-088a-26cb-411be8255323.png)

##SAP ES5に登録
[Create an Account on the SAP Gateway Demo　System](https://developers.sap.com/tutorials/gateway-demo-signup.html)
上記リンクに従って登録ください。

##Rest APIでES5からOdataを取得するサーバー処理を作成
OutSystemsで新規のアプリを作ったら
Logicタブ→Integrationに開いていき**REST**を右クリック、**Consume REST API**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/cc3d0c8e-b48c-4480-fe57-85f5c2d4b174.png)

**ADD SINGLE METHOD**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/39c978ff-cde1-a036-dbad-5019d2cdf250.png)

今回は一覧表示するアプリを作るのでURLを以下のように設定
ES5に登録されているProductSetというEntityを10件だけとってきます


```
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet?$top=10
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/13c8de53-d937-b17c-aece-c53af8c3d1ed.png)

Headers/AuthのタブでES5に登録したusernameとPasswordを設定
JsonでデータがほしいのでContent-Typeも設定しておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/ccaf0a1c-de10-b2ed-e79a-2298dcab83e6.png)


TESTタブを押してテスト実行
問題なくデータが取れてきたらOKです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/91d0b3fd-9e91-8dd9-a41b-029ccfd33bbf.png)

FINISHボタンで閉じたあと以下の画像の下の方にある**On Before Request**と**On After Request**を設定します。

これらの処理は今回はいじらないですが
On Before Request：API実行前に動く処理。主に画面からもらってきた検索条件の設定などを行う。
On After Request：API実行実行後に動く処理。返却値の設定やエラー処理を行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/03258cb9-52b5-6672-077d-00629527a2cd.png)

##取得データを一覧で表示する画面を作成
interfaceタブ→UI Flow→MainFlowを右クリックで**Add Screen**します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/2ffb44e8-7ceb-9a10-bbeb-57cfe928b696.png)

Empty画面をクリックしてCreate Screenします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/6106944a-05b2-eec2-356d-03290089c4af.png)

新しく作ったScreenを右クリックして**Add Local Variable**をします。
これで画面内で使うローカル変数が作れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/97f08565-41ad-4a6d-a12f-1692a5956251.png)

###ローカル変数の型を変更します
デフォルトだとTextになっています
Data TypeのタブをList→ResuitItemを選択します
これでListのResuitItem型に設定できます。
ResuitItem型はOdataのResponsをOutsystemsが自動で解釈して
Dataタブ→Structures→Sapes5Sapdevcenterに作ってくれたEntityになります
以下のjsonの**results**部分と同じ形になっています

```Respons.json
{
  "d": {
    "results": [
      {
        "__metadata": {
          "id": "https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1000')",
          "uri": "https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1000')",
          "type": "GWSAMPLE_BASIC.Product",
          "etag": "W/\"datetime'2021-12-02T00%3A00%3A53.0000000'\""
        },
        "ProductID": "HT-1000",
        "TypeCode": "PR",
        "Category": "Notebooks",
        "Name": "Notebook Basic 15",
        "NameLanguage": "EN",
        "Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
        "DescriptionLanguage": "EN",
        "SupplierID": "0100000046",
        "SupplierName": "SAP",
        "TaxTarifCode": 1,
        "MeasureUnit": "EA",
        "WeightMeasure": "4.200",
        "WeightUnit": "KG",
        "CurrencyCode": "USD",
        "Price": "956.00",
        "Width": "30.000",
        "Depth": "18.000",
        "Height": "3.000",
        "DimUnit": "CM",
        "CreatedAt": "2021-12-02T00:00:53Z",
        "ChangedAt": "2021-12-02T00:00:53Z",
        "ToSupplier": {
          "__deferred": {
            "uri": "https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1000')/ToSupplier"
          }
        },
        "ToSalesOrderLineItems": {
          "__deferred": {
            "uri": "https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet('HT-1000')/ToSalesOrderLineItems"
          }
        }
      }
    ]
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/8bb6d4b0-c241-2ad6-925a-5c88c266bd78.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/2f5a6b7e-55a5-2b2b-5438-478b619b84a4.png)

###画面からREST APIの処理を呼び出す
画面の左端の一覧からBuutonオブジェクトをScreenの右上のあたりにドラックアンドドロップします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/a190dc8e-2b3d-6e38-a240-fa09d4bafde3.png)

On Clickイベントが未設定でエラーになっているので新しいクライントActionを作ります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/24899a8b-d743-d6f3-c05d-bb73a62cc80d.png)

StartとEndの間に先程作った**GetProductSet**をドラックアンドドロップします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/ceb55d90-7471-15a4-8b09-b5f6529fdf78.png)

左端の一覧からassignを次にドラックアンドドロップして左のように設定します
これでRESTでとってきたデータを画面のローカル変数に代入できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/34dabafa-b9d7-1410-e280-893954e2c03d.png)

Screen画面に戻って画面の真ん中あたりにTableオブジェクトをドラックアンドドロップします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/a94fc4a1-bed4-d677-a761-ee6ee839acfe.png)

テーブルオブジェクトのSouceにローカル変数を設定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/ac2664d5-8763-0657-9e14-c9347414695e.png)

画面に出したいカラムを選んでドラックアンドドロップします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/b4a4c760-3687-b774-b21c-b8a6307e24d2.png)

あとこれをパブリッシュすればボタンを押すとES5から取得したデータを一覧表示するアプリが作れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/aa3f28f2-ebbc-d640-8305-698034641380.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137987/c3ae396b-92c7-9143-b2a5-38738a170c9b.png)


※参考
[OutSystemsでのSAP ODataサービスの利用](https://success.outsystems.com/ja-jp/Documentation/How-to_Guides/Integrations/How_to_consume_an_SAP_OData_service_in_OutSystems)