SAP Business Application StudioでFioriアプリを作成、deployを行う

# はじめに
[SAP Portalのコンテンツ管理について](https://qiita.com/again_qt/items/967b5e360723e2f33c44)
[SAPFioriLaunchPadのロール設定を行う(1)](https://qiita.com/again_qt/items/3bf07c19235ab5410c23)
[SAPFioriLaunchPadのロール設定を行う(2)](https://qiita.com/again_qt/items/e5a01123f6a4343c58ac)
以前これらの記事を書いておりましたが、SAP Cloud PlatfromからSAP BTPに変わりましたのでSAP BTP環境での作業手順を、以下の目次に沿ってまとめていきたいと思います。

## 目次
1. SAP Business Application StudioでFioriアプリを作成、deployを行う
1. Launchpad Serviceの作成
1. Launchpad ServiceからBTPに公開したFioriアプリにアクセスする

本記事では「1. SAP Business Application StudioでFioriアプリを作成、deployを行う」について記載していきます。

# SAP Business Application StudioでFioriアプリを作成、deployを行う

## SAP Business Application Studio(BAS)の初期セットアップ
[【SAPCP CF】Business Application Studioの使い方](https://qiita.com/yonekura-h/items/5d897da57d0215361b70#%E5%88%9D%E6%9C%9F%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)
こちらの記事を参考に、Dev Spaceを作成します。
今回は「Full Stack Cloud Application」を選択しました。
![devspace01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/bf5f0a41-d024-00ac-78ca-2567a07570ee.png)

## SAPUI5プロジェクトの作成
CloudFoundry向けのSAPUI5プロジェクトを作成します。

作成したDev Spaceに入り、上のメニューから「View」＞「Find　Command」を選択します。
![createDeploy01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/dd5d2212-ffda-6068-c647-235e1ea25d15.png)

「generator」で検索をかけ、「Fiori:Open CF Application Router Generator」を選択します。
![createDeploy02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/54895fbc-f567-e065-382d-4056310495b3.png)

以下の画面が開きますので、項目を入力し「Finish」を押下してプロジェクトを作成します
![createDeploy03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/6b8d42de-35d8-aa7d-4b1d-6da2ec1987c0.png)

## 作成したプロジェクトを開く
上記手順で作成したプロジェクトを開きます。
画面上のメニューから「File」＞「Open Worksrace」を選択します。
![createDeploy04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/3d846680-7942-910a-a7d6-2716ecdf20b9.png)

上記手順で作成したプロジェクトを選択し、「Open」を押下するとプロジェクトが開きます。
![createDeploy05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/4e3d5de4-6b7f-9d08-b651-4694b10f2dc0.png)
![createDeploy06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/f8ff807a-1007-0d00-8355-4c5b09c0df79.png)

## HTML5モジュールの追加
プロジェクトにHTML5モジュールを追加します。
今回はサンプルなので簡単なモジュールで行います。

「Start from template」を選択します。
![createDeploy06_copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/bab01098-2eae-e0d0-211f-93c79489aac9.png)

「SAP Fiori application」を選択します。
![createDeploy07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/348e06d6-efd8-6b89-dca4-30f4f9bf690a.png)

「SAPUI5 Application」を選択します。
![createDeploy08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/c8b72ac9-bd0f-8911-abdf-826fe976f5a6.png)

今回は特にデータを使用しないので、「None」を選択します。
![createDeploy09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/771a24d5-60f9-79eb-8bad-0bfabb025ec9.png)

Viewファイル名を設定します。
![createDeploy10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/d7a863ab-ff1a-9889-ed04-fc83ac0648b0.png)

画像の通り、モジュールの設定を行います。
![createDeploy11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/4c4a2b79-eeec-11eb-0df4-81dfb1fda7fd.png)
![createDeploy12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/bb668e11-8a7e-0ea7-0a67-c9834356098e.png)

自動入力された内容が合っているか確認します。
![createDeploy13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/e8e0e361-c24e-c4a0-3b76-302e09711af2.png)

Launchpadの設定を以下の通りに設定します。
![createDeploy14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/98df2886-3e16-d8ef-b1bc-cb8752099086.png)

作成したモジュールが追加されました。
![createDeploy15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/0f9bf7a6-6870-d1e6-4c5e-bebb3f1535b2.png)

## プロジェクトのBuildとDeploy
[【SAPCP CF】Business Application Studioの使い方](https://qiita.com/yonekura-h/items/5d897da57d0215361b70#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)
こちらの記事を参考に、プロジェクトのビルドとデプロイを行います。

デプロイが完了後、サブアカウントのInstances and Subscriptionsを確認すると3つほどインスタンスが作成されています。
![createDeploy25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486466/a184f777-1ffd-3c82-405c-1c878c9aafec.png)

プロジェクトの作成はここまでです。
次回はLaunchpad Serviceの作成、およびLaunchpad ServiceからBTPに公開したFioriアプリにアクセスする手順についてまとめたいと思います。