SAP BTP Free TrialでSAP Build Appsを使ってモバイルアプリを作成してみよう（前編）

SAP Tutorialsを参考に、SAP Build Appsを使ってアプリケーションを作成してみようと思います。

今回はこちらのTutorialを参考にしています。

https://developers.sap.com/mission.appgyver-low-code.html

## 前提条件
前提条件として、SAP BTPのアカウントが必要です。アカウントをお持ちでない方は、まずは無料のアカウントを作成しましょう。登録手順は、こちらの記事の最初の方をご参考ください。

https://qiita.com/Nel_SAP_Basis/items/1f6c91be2807c1984f86

## SAP Build Apps のセットアップ

最初に、SAP Build Apps セットアップを行います。こちらの公式Youtubeを参考にしています。

https://youtu.be/ZpQM2B1v2GY?feature=shared

まずは、SAP BTP cockpitにアクセスします。
https://account.hanatrial.ondemand.com/cockpit.

Boosters -> Get Started with SAP Build Apps - Detailed Account Setup をクリックします。
![スクリーンショット 2024-03-09 16.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/7163b9e7-2df4-2ed6-644c-035b443a6585.png)

Get Started with SAP Build Apps - Detailed Account Setupの画面が開いて、Check Prerequisitesのプロセスが始まります。スクリーンショットのようにステータスがDONEになりましたら、Nextをクリックします。
![スクリーンショット 2024-03-09 16.46.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/c0bc7b1f-ec20-4471-f3a9-f31881f0ad5d.png)

Select Senarioに画面遷移しますので、Select SubaccountをチェックしてNextをクリックします。
![スクリーンショット 2024-03-09 16.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/2805f7ac-8b35-926a-46f8-f25773178669.png)

Configure Subaccountに画面遷移します。自動で設定値が入りますので、そのままNextをクリックします。
![スクリーンショット 2024-03-09 16.48.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/e85860f8-0c46-e7fa-8fd0-7120bb732b41.png)

Add Usersに画面遷移しますので、そのままNextをクリックします。
![スクリーンショット 2024-03-09 16.50.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d72c5a38-15fc-b7c6-9fa0-84ac722097a9.png)

Reviewに画面遷移しますので、そのままFinishをクリックします。
![スクリーンショット 2024-03-09 16.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/9f910774-9b02-212e-d688-1aac7f4f66bd.png)

セットアップが開始しますので、数分待ちます。
![スクリーンショット 2024-03-09 16.53.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/2f719b09-d412-f809-2e2d-35a12ecf8e7b.png)

セットアップが完了すると、Successの画面が表示されますので、Navigate to Subaccountをクリックします。
![スクリーンショット 2024-03-09 16.54.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/9a906e7c-39d8-1fcb-8824-ad67c56b0e72.png)

Subaccountの画面が表示されます。Applicationに、SAP Build AppsとCloud identity Servicesが追加されて入れば成功です。
![スクリーンショット 2024-03-09 17.07.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/15cf08e9-a4af-2181-022a-c7624f9b8e4a.png)

## Identity Authenticationアカウントの有効化

次に、Identity Authenticationアカウントの有効化を行います。

SAP Build Appsのセットアップが完了すると、ias@notification.sap.comから、Activate Your Account for Identity Authentication Serviceというメールが届きますので、Click here to activate your accuontをクリックします。
![スクリーンショット 2024-03-09 17.08.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/e5a9346a-4142-14b2-5924-1ca73e39819e.png)

アカウント有効かの画面が開きます。名前と電子メールは入力済ですので、Identity Authenticationアカウントに設定するパスワードを入力して、続行ボタンをクリックします。
![スクリーンショット 2024-03-09 17.11.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/4ce8fce6-cc5d-f5a9-7798-e695ccbf3d52.png)

アカウントが有効化されました という画面が表示されましたら、続行ボタンをクリックします。
![スクリーンショット 2024-03-09 17.12.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6ef23f1c-e513-19da-aecb-3514d22b4a30.png)

Cloud Identity Servicesの画面が表示されます。特にここでは設定する項目はないので画面を閉じます。
![スクリーンショット 2024-03-09 17.14.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/3bcba9e6-e168-c766-aa5e-2d96a05e73a9.png)

補足です。Youtubeの動画内では、Build Apps Administrator の権限が付与されているかチェックする手順になっています。確認したところ、Global Account Administratorという上位の権限が付与されており、これ以上権限を追加することができませんでした。
![スクリーンショット 2024-03-09 17.22.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/217b7efe-817d-f95b-cacc-35fc003d1faf.png)

## SAP Build Appsプロジェクトの作成

Services -> Instance and Subscription -> Application　から、 SAP Build Appsをクリックします。
![スクリーンショット 2024-03-09 17.28.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f3e543ea-5551-e951-3b59-909cfb5ff1a7.png)

サインインの画面が表示されますので、電子メールまたはユーザ名と、パスワードを入力して続行ボタンをクリックします。
![スクリーンショット 2024-03-09 17.30.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d4d6acd3-59b5-e9a2-04f7-442c37696b75.png)

SAP Buildの画面が開きますので、作成ボタンをクリックします。（画面が何故か日本語で表示されてしまっていますが、ここからユーザの設定で言語の変更はできないようです。）
![スクリーンショット 2024-03-09 17.37.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/98ceb74a-7553-7da8-e5e7-14e8a73c98e2.png)

「どうしますか？」の画面が開きますので、アプリケーションの構築 をクリックします。
![スクリーンショット 2024-03-09 17.38.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/646b05e0-6ae9-f6eb-bb0d-1577a0b619bd.png)

「どのタイプのアプリケーションを構築しますか？」の画面が表示されますので、Webおよびモバイルアプリケーション をクリックします。
![スクリーンショット 2024-03-09 17.39.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/0a120395-a13e-e6a0-f358-eddd3505ed06.png)

「プロジェクト名を指定します」の画面が表示されますので、`Scanner Application`を入力し、作成ボタンをクリックします。
![スクリーンショット 2024-03-09 17.39.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/89339e2f-0c59-f34f-38dd-1a9bf44fb54e.png)

数秒待つと、SAP Build Appsの画面が表示されます。
![スクリーンショット 2024-03-09 17.41.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/829c5fac-5f2d-f9ed-2899-0199d8f56aa7.png)

## SAP Build Appsプロジェクトの編集

モバイルアプリの画面を編集していきます。

まずは、画面中央のHeadlineをクリックします。右側にHeadline の編集画面が開きますので、`Barcode Scanner`に書き換えます。
![スクリーンショット 2024-03-09 17.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/4853fc01-e98c-ebf2-a83b-62c34dfe087c.png)
![スクリーンショット 2024-03-09 17.48.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/679bbb19-71cf-f1f1-c069-c05b8acbc2c7.png)

次に、パラグラフフィールドをクリックすると画面右側に編集画面が表示されますので、`Scan a barcode of a food product using your smartphone`に書き換えます。
![スクリーンショット 2024-03-09 17.49.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/aa2d659f-8a6e-6459-5d64-7b054891fb3e.png)
![スクリーンショット 2024-03-09 17.52.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/95b02e35-e48a-a8d8-750a-5ba75aab6466.png)

画面左側のFORMSの中のButtonアイコンをドラッグし、画面中央のパラグラフの下でドロップします。
![スクリーンショット 2024-03-09 17.55.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/aadf558c-4573-6318-a9c8-06f6fd1962eb.png)

画面右側にButton の編集画面が開きますので、`Scan`に書き換えます。
![スクリーンショット 2024-03-09 17.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/e19f8b16-f1fe-9ba2-c7db-dbfdb5ee55f2.png)

Tutorialには書いていませんが、画面左上からモバイルのタイプを選ぶことができます。私はiPhone Pro Maxを愛用しているので変更しておきました。
![スクリーンショット 2024-03-09 17.58.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/b303489c-5866-fb8d-b033-68aebd51cd3a.png)

最後にSaveをクリックします。
![スクリーンショット 2024-03-09 17.59.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/150a963b-589f-0bcd-393d-40d4b458008f.png)

## SAP Build Appsのプレビュー

編集したモバイルアプリのプレビューをしましょう。

先に、ご利用のスマホにSAP Build Apps Previewをインストールしておきます。
![A50BF6FB-4D53-4E05-9F32-819E072C5FAF.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/67bc722e-dc27-f7f0-3a7b-10263bb89e21.jpeg)

LAUNCH -> Open preview portalをクリックします。
![スクリーンショット 2024-03-09 18.04.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/af53d758-2ab2-683c-aa1e-d3a5c5993ac2.png)

スマホのSAP Build Apps Previewを起動し、Other login optionsをクリックします。
![6DBF77EE-9420-4096-8784-4ABB0FF6C89E.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/bb69f7d6-c2ca-f3ef-a1bb-5273dfe54603.jpeg)

Other login options　の画面が開きますので、EditionのSAP Build Apps EU10をクリックします。
![F9B2EF8C-D32E-4DF1-A307-D927928E674B.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/8b3898b4-612e-7466-d0b8-a3e78411dff2.jpeg)

SAP Build Apps US10をクリックして選択します。
![IMG_2890.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/4de191e0-3f74-c4fc-30c9-d98f4439a376.jpeg)

Generate codeをクリックします。
![B849E079-BF6F-49EA-931C-931CBD278228.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/4b396b9b-ba4e-801c-f503-456c35777a48.jpeg)

PIN codeが生成されますので、
![IMG_2891.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/3f963a2b-f729-cd23-81b3-1cb36f0d03af.jpeg)

PCの画面に戻り、Preview on your deviceのPIN codeを入力する画面にPIN codeを入力し、Confirm pinボタンを押します。
![スクリーンショット 2024-03-09 18.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/038080d2-7adb-e6f9-ca6f-8ddac3ab107a.png)

成功すると、Mobile preview authenticatedの画面が表示されます。失敗する場合は、モバイル側のEditionが間違っている可能性が高いです。
![スクリーンショット 2024-03-09 18.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/21ecf356-1e17-11fe-d368-93b18900d8d8.png)

スマホの画面に戻ると、先ほど作成したSAP Build Appsプロジェクト名が表示されますので、Openボタンをクリックします。
![031576D5-3573-4242-8EC9-31BE7121FB9C.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/b38f3c00-d84b-d3d5-966a-3521f0a560d5.jpeg)

先ほど編集したモバイルアプリの画面が表示されます。
![33CF7B93-3AD0-4CD5-9F41-C424A225DE98.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/911e335e-a386-4f67-4237-510d22788b1d.jpeg)

最後に補足です。SAP Build Apps PreviewのBuildでSAP Build Apps US10を選択しましたが、trailアカウントのRegionに依存していると思われます（私は最初デフォルトのSAP Build Apps EU10のまま認証しようとして上手くいかず苦戦しました。違ったらすみません。）
![スクリーンショット 2024-03-09 18.42.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/2cb66b75-297c-d6c0-a329-870f3506e1fd.png)

SAP Build のURLにもRegionが表示されますので、こちらから確認するのが確実です。
![スクリーンショット 2024-03-16 14.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/0422b81b-04eb-d7b3-3298-d8ffa981a5eb.png)

今回は以上になります。後編ではTutorialの続きからスタートします。

https://qiita.com/Nel_SAP_Basis/items/f5724509d136023212a8