【SAP】NW AS ABAP Developer Editionで開発環境を作る（3）Fioriアプリの開発とデプロイ

##はじめに
この記事では、Business Application Studio(BAS)で簡単なFioriアプリを作成し、NW AS ABAP Developer Edition環境にデプロイします。

###前提
①NW AS ABAP Developer EditionがCloud Connector経由でCloud Platformに接続されていること
参考：[【SAP】NW AS ABAP Developer Editionで開発環境を作る（2）Cloud Platformとの接続](https://qiita.com/tami/items/c1af0948f6d501a06875)
②Business Application Studioがセットアップ済であること
参考：[Set Up SAP Business Application Studio for Development](https://developers.sap.com/tutorials/appstudio-onboarding.html)

##NW AS ABAP Developer EditionでODataは使えるのか？
トランザクション：/IWFND/MAINT_SERVICEを見るといくつかのODataサービスが利用可能になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/edd4981f-3708-d440-f1a4-048e4d29faf4.png)
ブラウザに`http://<host>:<port>/sap/opu/odata/sap/SEPMRA_PO_MAN/$metadata`と打ってみると、メタデータが取得できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d38d9d3e-977c-6f7c-ec0b-384d9f8653ea.png)
さらに、`http://<host>:<port>/sap/opu/odata/sap/SEPMRA_PO_MAN/SEPMRA_C_PO_Product`と打つと製品のコード、テキストが取れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/02eeaeaf-0800-016c-c8c8-a5f257c74d48.png)

###問題
実は、BASでFioriアプリを開発⇒デプロイを行うにあたっては1つ問題があります。それは、NW AS ABAP Developer Editionにはデプロイに必要な**'ABAP_REPOSITORY_SRV'というODataサービスが存在しない**ということです。
ではどうするかというと、ビルド済のフォルダをダウンロードして、[/UI5/UI5_REPOSITORY_LOAD](https://sapui5.hana.ondemand.com/#/topic/a560bd6ed4654fd1b338df065d331872)というプログラムを使ってアップロードする方法があります。今回はそれを使ってやってみます。

##Fioriアプリの作成
1. Yoman UI Generatorを起動し、SAP Fiori Freestyle Projectを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/70e48e3c-accd-d44c-a1f6-85d2667dab70.png)

2. ターゲットの環境にABAP、テンプレートにSAPUI5 Applicationを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/757731ec-b270-99dc-c262-2adc70102628.png)

3. プロジェクト名と名前空間を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/828ba228-ab3d-7e25-a681-562ad56ab780.png)

4. データサービスを追加するに"Yes"を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/64934545-3359-fc85-bfb6-a8ade4356fb9.png)

5. 接続する宛先とODataサービスを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/96fd5080-79da-a0a6-3923-275ac4a751cb.png)

6. Viewを以下のように設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/97d091b5-e72c-a9a6-7bef-d1017eb0c737.png)

7. テスト実行用の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/8b76f58a-ea47-0017-9b07-1b6c628b42f1.png)

8. 実行結果を確認
バックエンドから取得したデータが表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/09e63094-a81d-dc03-b7c7-3b04c9db930d.png)

##デプロイ
BASから直接デプロイすることができないので、ビルドしたのちdistフォルダをダウンロードします。

1. `npm run build`でビルド
2. distフォルダをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/93b10df7-c6b9-f410-eb7d-76803af13f00.png)
3. tarファイルを解凍して一つのフォルダに格納する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/19e6d345-8ce0-8603-6b93-ecefdec96cc8.png)
4. GUIからNW AS ABAPにログインし、プログラム`/UI5/UI5_REPOSITORY_LOAD`を実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/65f6e218-b8a5-97ea-0e60-e858d80a9ff9.png)
5. トランザクション：SE80でBSPアプリケーションが登録されたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/37a7fbce-7664-ff4b-8980-65316fe0dcf8.png)

##ここまででできたこと
- NW AS ABAPをバックエンドに持つFioriアプリを作成し、BASでプレビューすることができました。
- 開発したアプリをNW AS ABAPに取り込むことができました。

次回はこのアプリをFiori Launchpadから実行できるようにします。

##感想
BASから直接デプロイできないということで、効率が落ちるのは否めません。ならば、ABAPサーバにデプロイしなくても、Cloud Platorm上で動かすようにすればいいでしょう。今後はABAP CDSを作ってODataとして公開し、それをCloud Platform上のアプリから利用する、といった形でこの環境を使っていこうかと考えています。