【SAPCP CF】Business Application Studioの使い方

# 目的
CloudFoundry環境でのアプリケーション開発を
WebIDEからBusiness Application Studio（BAS）に移行するにあたって
基本的な使い方の記載します。

本投稿でのターゲットはCloudFoundry環境にデプロイするFioriアプリケーション（SAP UI5）です。
Fiori Elementsではなくスクラッチを想定します。

※内容としては下記チュートリアルとほぼ同一です
　[Develop Your First SAPUI5 Web App with SAP Business Application Studio](https://developers.sap.com/group.cp-ui5-first-app.html)

# 初期セットアップ
## Dev Spaceの作成

BASへ初めてアクセスした場合、Dev Space（WebIDEのWorkSpaceのようなもの？）が存在しないため、
「Create Dev Space」を押下して新規作成する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/16571754-e3db-e082-80f2-37581eb3c932.png)

今回は「Fiori Freestyle Tools」を利用してHTML5モジュールを作成するため、SAP Fioriを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/6997a712-5743-4498-a83b-3f5eecfbad24.png)

任意の名称を入力して「Create Dev Space」を押下します。
「Running」になったらDev Space名称を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/c5bd8769-c843-4098-fd23-6e05b707024c.png)

# プロジェクトの新規作成
## SAPUI5プロジェクトの作成（CloudFoundry）
CloudFoundry向けのSAPUI5プロジェクトを作成します。
　※MTAプロジェクト＋HTML5モジュール

Dev Spaceに入ってIDEらしい画面に遷移できたら「Create project from template」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/880707ab-309d-252b-dbd8-0cb2e5299293.png)

Templateの選択画面で「SAP Fiori Freestyle Project」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/f3e17429-93d4-6c15-b3d8-0faec8abbc3f.png)

ターゲットとなる環境を選ぶコンボボックスで「Cloud Foundry」を選択し、
SAPUI5 Applicationを選択します。
　※※ABAPを選ぶとMTAにならず、ABAPリポジトリ向けのプロジェクトが生成される？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/87d365c9-9ecc-40ff-8692-a3b6f4a8a837.png)

次画面ではProject Nameを入力します。
こちらの指定値はMTAプロジェクトのプロジェクト名となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/8d3dd810-6a7a-7734-f7c2-55f3fedce6a0.png)

Runtimeには「Standalone Approuter」を指定しました。
※※要確認※※
　「Standalone Approuter」のほかに「Approuter Managed by SAP Cloud Platform」が存在する
　　・「Standalone Approuter」ではApprouterのNode.jsフォルダが作成される　←　WebIDEで作成されるプロジェクトと同様
　　・「Approuter Managed by SAP Cloud Platform」ではApprouterは作成されない
　　　mta.yamlにHTML5のhtml_repo_host・ui_deployerは存在する 
　　　デプロイするとxxx-html5-app-host-serviceというインスタンスを作成する→ApprouterにBindする等で参照できる？
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/cd8709fd-e9f0-d504-b586-72897e7ae32b.png)

・HTML5モジュール名称
・SAPUI5のNamespace
を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/af2a4d11-dcbe-f871-828e-018ac0700d45.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/ce718008-669a-a620-2fe4-b7048b64e03c.png)

Viewファイル名を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/e0490eb2-cf92-dfc3-410d-d90f9431fa2c.png)

HTML5モジュールを持ったMTAプロジェクトが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/fe9a7a2d-298a-6115-3283-f7e7ad66989d.png)


# プロジェクトのデプロイ
mta.yamlファイルを右クリック -> Build MTAを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/f6e357ff-3fbd-4b70-c87e-379d4143c943.png)

Buildが完了すると`mta_archives/xxxx_0.0.1.mtar` ファイルが生成されます。
これをまた右クリック -> Deploy MTA Archiveを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/b29ada62-a798-f0ee-9319-399aada72f67.png)


コンソールでDeploy完了メッセージが出たら成功です。

デプロイ後の確認方法等は[こちら](https://qiita.com/yonekura-h/items/3c53d8129a2cf25ab939#cf%E7%92%B0%E5%A2%83%E4%B8%8A%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E7%A2%BA%E8%AA%8D)と同様です。


# プロジェクトのデバッグ

## デバッガの使用
BAS上でSAPUI5のテスト実行からデバッグを行います。
左側のメニューからRun Configrationsを開き、設定を新規作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/febe266d-1215-ea86-f123-fa577f892621.png)

上記赤枠の＋ボタンを押すと画面上部にポップアップが出てくるので、
動かしたいアプリケーションを選択します。
（出てくるまでちょっと待ちます。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/ed43ef3c-6019-884c-251e-ae789b8f4525.png)

その後出てくるポップアップでは下記の通り選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/864fb8f3-3b08-6159-a0c9-5c49eb80ae78.png)

Runの設定ができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/6a3043a2-dff8-3665-d66a-c6d7ae07cdbf.png)
カーソルを合わせると実行できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/065f0a5d-2b10-7cee-506f-6f6eb17c746f.png)

実行すると右下のほうにボタンが出てくるので押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/33b25497-59fa-db21-bff0-b7c0f2144148.png)

別タブで結果が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/8bbf54d4-df4d-816b-97a4-11e127894666.png)

※※要確認※※
　・WebIDEのようにCF環境のApplicationにテスト用のインスタンスを立てていない
　　→　CF環境のリソースを個人ごとに使用しない？

　・Viewファイルを変更→Runしても画面に反映されない
　　MTAのBuildをしないと変更が反映されない？

## index.htmlのプレビュー

変更内容をすぐ見たい場合はこちらのほうが便利でした。
index.htmlを選択して右クリック → Open With → Previewを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/cdad65ce-5cf8-95ad-941a-e6260b4062f7.png)

エディタ上で画面の表示を確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159467/d53bf510-86f3-2c26-39bf-f495293e0162.png)

# おわりに
Business Application Studioについてはまだ理解できていない部分が多いので、
継続して調査、追記します。