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

こちらの記事の続きになります。

https://qiita.com/Nel_SAP_Basis/items/8664ddd5252085073290

引き続き、こちらのTutorialを参考にしています。

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

## スマホ搭載カメラからのQR/Barcode読み取り設定

前回作成したスキャナアプリを開いて、Scanボタンを押してから、Add Logic to BUTTON 1をクリックします。
![スクリーンショット 2024-03-16 13.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/df5dff03-5196-aad2-b01a-48bdbe31758a.png)

コアロジックコンポーネントを使用して、Device - Scan QR/barcodeコンポーネントまでスクロールダウンし、これをロジックエディタにドラッグアンドドロップします。これはSAP Build Appsによって提供されている、SAP Build Appsアカウント内で利用可能な多くのコンポーネントの中の1つである、事前に設定されたQRまたはバーコードスキャナーコンポーネントです。
![スクリーンショット 2024-03-16 14.07.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/3b9e9dc3-e88c-8e2a-3790-7f4a823f01e1.png)

Deviceコネクタ(出っぱっている部分)をクリックし、Component tapまで引っ張り接続します。Component tapから引っ張っても同じです。
![スクリーンショット 2024-03-16 14.08.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/ff6c8f0d-c281-55c6-be8b-4acef3d667e2.png)

このコネクタは単にフローの方向を示しており、この場合はボタンがタップされ、それがカメラデバイスの起動をトリガーとすることを意味しています。
![スクリーンショット 2024-03-16 14.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/ba38f6ce-529c-f04e-c324-7b1fe470ab94.png)

QR/バーコードスキャナーが動作していることをテストするために、アプリケーションにアラートコンポーネントを追加します。これは単にバーコードがスキャンされた後にポップアップアラートを表示し、バーコード番号を画面に返すだけです。

これを行うには、コアロジックオプションに戻り、Alertまでスクロールして、Scan QR/barcodeロジックの横にドラッグアンドドロップします。
![スクリーンショット 2024-03-16 14.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/1f19ee55-42a9-524b-f48d-1cd848bd8379.png)

上部のScan QR/barcodeオプションとAleatエレメントの間にコネクタを追加し、再びフローの方向を示します。
![スクリーンショット 2024-03-16 14.12.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/381c4b91-a6ac-2716-2838-1848fe3d0703.png)

現在、アラートは静的なテキスト応答のみを表示するように設定されていますが、ここで動的バインディングを追加したいと思います。これにより、アプリに代わり提供すべき情報を指示できるようになり、この場合はスキャンされているバーコードです。

これを行うには、Alertエレメントを選択し、PROPERTIESパネルを使用して、「Currently bound to: static text」をクリックし、バインディングオプション画面を開きます。
![スクリーンショット 2024-03-16 14.14.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/236a0f50-f3c3-2461-624d-d17860c59782.png)

Output value of another nodeをクリックします。
![スクリーンショット 2024-03-16 14.15.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/29f90504-7eb2-36dd-2d99-dc1055471874.png)

Select binding typeの画面で、
![スクリーンショット 2024-03-16 14.16.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/109a58de-e11c-4399-c3a7-29e9457b9f5f.png)

以下の設定を選択し、SAVEボタンを押します。
Select logic node – Scan QR/barcode
Select node output – Scan QR/barcode / QR barcode content
![スクリーンショット 2024-03-16 14.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f7b33ae7-8fa1-0e35-4d47-92f7c4d60105.png)

画面右上のSAVEボタンを押します。
![スクリーンショット 2024-03-16 14.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/b4e88afd-5e1d-aeb4-a6c0-b35be6d40dc8.png)

スマホのSAP Build Apps Previewアプリで、食品のバーコードを使って機能をテストします。
![IMG_2931.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/5a221a88-fd97-8df6-e4b0-f76fb568738f.jpeg)

Scanボタンをタップします。
![IMG_2932.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/04195124-487d-8b66-873a-1713b8a13abc.jpeg)

Tutorial STEP5に記載されているバーコードのサンプルをスキャンすると、こちらの画面が結果として返されました。
![IMG_2933.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6c835b0d-0bba-3a7e-263f-10ef5bec4eb0.jpeg)

## Public APIへの接続

Scanner Applicationの画面に戻り、Scanボタンをクリックしてから、DATAタブをクリックします。
![スクリーンショット 2024-03-16 14.38.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/956b78e0-2c0a-c28c-4649-0ad0e8cf6413.png)

REST APIに接続を追加します。

SAP Build Appsを使用している場合は、SAP Build Apps classic data entities > Create Data Entityをクリックし、次にREST API direct integrationを選択します。
![スクリーンショット 2024-03-16 14.49.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/4991a140-7039-a7a6-5bef-ee013d566951.png)

REST API direct integration　resourceの画面が表示されますので、
![スクリーンショット 2024-03-16 14.51.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/166a94a8-f520-cacd-1235-f874dccf4c47.png)

以下を各項目に入力します。
Resource ID	        `OpenFoodFacts`
Short description	`Data from Open Food Facts API`
Resource URL	    `https://world.openfoodfacts.org/api/v0`
![スクリーンショット 2024-03-16 14.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/e5f0d885-237c-3202-1941-54f8a2ca5bf9.png)

Open Food Facts APIから取得する情報を設定する必要があります。このアプリケーションでは、デバイスのカメラでスキャンされているものがバーコードであるため、このバーコード情報を取得するように設定する必要があります。これはGet Recordリクエストを使用して達成できます。

これを設定するには、Get Record (Get)をクリックします。
![スクリーンショット 2024-03-16 15.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6d9e9da2-ff7b-2c93-7fec-2732f5f39876.png)

Relative pathフィールドには、`/product/{barcode}.json`と入力します。
![スクリーンショット 2024-03-16 15.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/c925bdf3-81b0-497d-3abd-b2fca86d7a36.png)

URL placeholderの`id`等が表示されているフィールドをクリックし、
![スクリーンショット 2024-03-16 15.08.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/e7be6a96-d6ef-ba8f-2d23-d2d9797d3b9b.png)

画面右側のPROPERTIESを行います。(LabelとKey以外はデフォルト)
Label	`Barcode`
Key	`barcode`
Value type	`Text`
Description	`Resource ID to retrieve`
Is encoded	`Enabled`
Is static	`Disabled`
Is optional	`Disabled`
![スクリーンショット 2024-03-16 15.10.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/650e3426-51ca-2ba8-70f0-f74e5493d82a.png)

データリソースが適切に設定され、情報を取得できるかどうかをテストするには、TESTタブをクリックし、Barcodeの下のCurrently bound to: static textをクリックします。
![スクリーンショット 2024-03-16 15.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6c2e75b7-b72b-0956-879d-f841bdc06ffe.png)

Static textをクリックします。
![スクリーンショット 2024-03-16 15.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6aa75272-e2ed-1c32-b3be-ca96dc4744c5.png)

テキストフィールドに`6416453061361`を入力し、RUN TESTをクリックします。
これは、菓子の包装から取られた例のバーコード番号です。
![スクリーンショット 2024-03-16 15.13.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/723726d8-7c47-6028-9b3e-9d4149ec17de.png)

テストが実行され、Test API call responseが表示されます。このレスポンスでは、製品に関する情報が見られます。これには、製品カテゴリー、アレルゲン情報、製品を製造したブランドが含まれます。
![スクリーンショット 2024-03-16 15.14.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/1e601e7b-57ee-dba6-5da5-0dc76b964c71.png)

テストが成功した後、データスキーマを設定する必要があります。これにより、URLからのデータ構造が保存され、アプリケーションが取得している情報の種類を容易に識別できるようになります。

これを行うには、「Set Schema from Response」をクリックします。
![スクリーンショット 2024-03-16 15.16.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f9a0c7bf-4fab-654b-ce1b-f732eefd9cd2.png)

Save Data Entityをクリックし、
![スクリーンショット 2024-03-16 15.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d64a1d07-5bed-8c10-1076-0170fcd2a930.png)

SAVEボタンをクリックします。
![スクリーンショット 2024-03-16 15.18.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/c42e75a0-9af5-2b78-4d3a-1f14e64b9288.png)

## Public APIからSAP Build Applicationへのデータ取得
ここまでは、アプリケーションをパブリックAPIに接続する方法を学びました。ここからは、バーコードがスキャンされた後にそのAPIから特定の情報を読み取るようにアプリケーションを設定する必要があります。これもまたGet Record HTTPSリクエストを使用しますが、今回はそのリクエストがロジックフローでトリガーされます。

もはやアプリケーションにアラートを送信する必要がないため、ロジックフロー内のアラートコンポーネントを削除することから始める必要があります。

これを行うには、Scanボタンをクリックしてから「Show Logic for Button1」をクリックします。
![スクリーンショット 2024-03-16 15.22.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/9e74301d-af53-d42a-de14-293743b1761f.png)

ロジックパネルからAlertコンポーネントを「✖」で削除します。
![スクリーンショット 2024-03-16 15.23.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/4548e8e0-1e4f-411f-7c0c-7045a5578e02.png)

バーコードがスキャンされた後に何が起こるべきかの新しいロジックフローを追加する必要があります。バーコードスキャナーがデータリソースからデータを取得するようにします。

これを行うには、コアロジックオプションを使用して、DATA – Get Recordまでスクロールダウンし、それをロジックエディタにドラッグアンドドロップします。
![スクリーンショット 2024-03-16 15.25.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/ba12309c-c38d-5b5e-dfb5-6895c6d3e05e.png)

アプリケーションのロジックの流れを示すために、上部のスキャン Scan QR/barcodeから Get Record オプションへコネクタを追加します。
![スクリーンショット 2024-03-16 15.26.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/773380fd-bd74-3203-58f2-0199aa6f4a7e.png)

ロジックフローが設定されたら、スキャナーノードの出力に情報をバインドする必要があります。

これを行うには、Get Recordエレメントを選択し、PROPERTIESパネルを使用して「Currently bound to: Static text」をクリックし、バインディングオプション画面を開きます。
![スクリーンショット 2024-03-16 15.26.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f5e73cd0-58f9-2984-ff52-6630a73695bf.png)

Output value of another nodeをクリックします。
![スクリーンショット 2024-03-16 15.27.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/de1f1d7e-27f0-b239-31eb-dd496791f90c.png)

Select binding typeの画面で、以下を設定し、SAVEボタンをクリックします。
Select logic node – `Scan QR/barcode`
Select node output – `Scan QR/barcode / QR barcode content`
![スクリーンショット 2024-03-16 15.28.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/3dc54aef-da17-522a-9e26-3be7c89c35db.png)

アプリケーションが受け取ったデータを保存するように設定する必要があります。これを行うには、データ変数を追加する必要があります。

これを行うには、VARIABLESビューに切り替えます。
![スクリーンショット 2024-03-16 15.29.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/a420445c-4142-fd3f-235f-80a6d03de66e.png)

Data Variablesをクリックします。Welcome to variablesの画面は✖︎で閉じておきます。
![スクリーンショット 2024-03-16 15.30.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/1d5aaee5-4074-c865-ec81-752a823f5413.png)

Add Data Variableをクリックします。
![スクリーンショット 2024-03-16 15.31.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/bdc71a4c-2b0b-90bc-66de-1a61c0c31556.png)

Open Food Factsをクリックします。
![スクリーンショット 2024-03-16 15.32.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f2994a07-bc2c-7804-3036-a22cffdd4c81.png)

バーコードは単一の製品に対するものなので、Data variable type – Single data recordを選択します。
![スクリーンショット 2024-03-16 15.33.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/26c43257-946d-cbd7-8bbe-316472d8cc6a.png)

データ変数には、新しい情報を5秒ごとに取得するデフォルトのロジックが付属していますが、アプリはバーコードがスキャンされたときにのみ情報を取得するべきです。その結果、デフォルトのロジックを削除する必要があります。

これを行うには、画面の赤枠内のロジックを選択して✖︎で削除します。
![スクリーンショット 2024-03-16 15.39.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/aee0a249-26b8-fa41-e44c-8d6ad92f2f8b.png)

削除できましたら、SAVEボタンをクリックします。
![スクリーンショット 2024-03-16 15.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/6556f47c-de98-1ba4-f4a0-4a1c485bd4ca.png)

「View」をクリックしてアプリケーションインターフェイスビューに戻ります。

ここから、取得したデータをデータ変数に保存するというロジックフローの最終ピースを追加する必要があります。
![スクリーンショット 2024-03-16 15.49.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/974ab8de-d7c5-0ed7-0d61-ec09802dcf78.png)

Scanボタンをクリックしてから、コアロジックオプションを使用して、「Variables – Set Data Variables」までスクロールダウンし、それをロジックエディタにドラッグアンドドロップします。
![スクリーンショット 2024-03-16 15.50.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/5e79b6cd-0f70-9141-e1f7-1f03f9b4c163.png)

上部の「Get record」オプションから「Set data variable」オプションへコネクタを追加し、Currently bound to: object with propertiesをクリックします。
![スクリーンショット 2024-03-16 15.52.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/a10ed0ea-e4e8-bea6-300d-4277b1a22714.png)

Output value of another nodeをクリックします。
![スクリーンショット 2024-03-16 15.53.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/5e291fb5-ed82-4348-7651-7ce83354b8a9.png)

Select binding typeの画面から、以下を選択します。
Select logic node: `Get record`
Select node output: `Record`
![スクリーンショット 2024-03-16 15.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/2ce9c18d-e496-06de-2d27-ed0b5bcba3d8.png)

Select node output: `Record`を選択した時点で、画面がフリーズして、しばらくすると警告の画面が表示される場合があります。私の場合は警告の画面が表示されされましたので、待機ボタンを押して少し待ちました。
![スクリーンショット 2024-03-16 16.04.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f7eaf51d-e5b3-3cd5-d60a-33a1888cb296.png)

しばらく待つと、この画面になりますので、SAVEボタンをクリックします。
![スクリーンショット 2024-03-16 16.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/95cea4b7-d49e-1449-c131-d7f85c072ac0.png)

画面右上のSAVEボタンもクリックします。
![スクリーンショット 2024-03-16 16.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/c18366a0-faa0-d68e-1902-8ce8698cccde.png)

## SAP Build Applicationへ取得したデータの表示

ここまでは、バーコードがスキャンされた後にAPIから特定の情報を読み取るようにアプリケーションを設定する方法を学びました。最後に、取得した情報をアプリケーションインターフェイスに表示する方法を学びます。

コアコンポーネントパネルから、アプリ内のScanボタンの下にTitleコンポーネントをドラッグアンドドロップします。
![スクリーンショット 2024-03-16 16.22.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/52e99a9e-8d99-33e0-105c-4b0333634f8c.png)

Titleコンポーネントをクリックし、コンテンツを`Product Information`に変更します。
![スクリーンショット 2024-03-16 16.23.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/db127e8d-1311-7193-fc11-dff0cf230dd7.png)
![スクリーンショット 2024-03-16 16.24.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/108e251e-0890-d9df-aaef-8d19bb16736c.png)

コアコンポーネントパネルから、このタイトルの下にTextコンポーネントをドラッグアンドドロップします。
![スクリーンショット 2024-03-16 16.24.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/8af42852-f7f0-602c-2a0c-01e1f14606ee.png)

ここから、データ変数にバインドする必要があります。これにより、APIから取得した後に表示する食品情報を定義できます。なぜなら、各食品項目に利用可能なすべての情報を表示したいわけではないかもしれないからです。

この例では、製品名とエネルギー（kcal/100g）フィールドを表示する方法を示します。

製品名を表示するには、Textコンポーネントをクリックし、次に「Currently bound to: Static text.」をクリックします。
![スクリーンショット 2024-03-16 16.25.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/74805af8-664d-a581-cbc5-f2cce8db2750.png)

Data and Variablesをクリックします。
![スクリーンショット 2024-03-16 16.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f120d2ba-f8fd-bd9f-eca4-03bb9d26ba37.png)

Data Variablesをクリックします。
![スクリーンショット 2024-03-16 16.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/03d1c50f-4636-e663-0e6d-2b1ee0bbfe81.png)

「Open food facts」変数をクリックします。
スクロールダウンして「product_name」フィールドを選択します。これには、ブラウザの検索機能を使用することをお勧めします。
![スクリーンショット 2024-03-16 16.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/290747d7-419b-01ae-1960-ad167d3a2f22.png)

product_nameを選択した時点で、画面がフリーズする可能性があります。フリーズしてもしばらく待ちます。警告画面が表示された場合は待機ボタンを押します。
![スクリーンショット 2024-03-16 16.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/f886b93f-1030-31fc-1844-b50b605552e6.png)

しばらく待つとこちらの画面になりますので、SAVEボタンをクリックします。
![スクリーンショット 2024-03-16 16.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/d64baa0f-23f4-9845-60b3-12218f33c83b.png)

次に、製品名の情報に提供された同じ手順を使用して、アプリにカロリー情報を追加します。再びTextコンポーネントをドラッグし、先ほど追加したテキストの下にドロップします。
![スクリーンショット 2024-03-16 16.32.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/ad514add-6c22-a732-da8e-7429fa224938.png)

Textコンポーネントをクリックし、次に「Currently bound to: Static text」をクリックします。
![スクリーンショット 2024-03-16 16.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/bbac2b20-6a5d-3d02-909c-8c2285c93ad9.png)

Data and Variablesをクリックします。
![スクリーンショット 2024-03-16 16.34.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/ebf41dba-d427-dd0c-3525-e0023a74186f.png)

Data Variablesをクリックします。
![スクリーンショット 2024-03-16 16.36.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/49f34c5f-b917-4bbf-78e5-8adbbe78533a.png)

「Open food facts」変数をクリックします。
スクロールダウンして「energy」フィールドを選択します。これには、ブラウザの検索機能を使用することをお勧めします。
![スクリーンショット 2024-03-16 16.37.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/97bff33c-47d1-b09c-35c5-bb7bd3cf3a7e.png)

energyを選択した時点で、画面がフリーズする可能性があります。フリーズしてもしばらく待ちます。警告画面が表示された場合は待機ボタンを押します。
![スクリーンショット 2024-03-16 16.37.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/87ca44b7-2c64-47c7-7926-c2179b1bcaf7.png)

しばらく待つとこちらの画面になりますので、SAVEボタンをクリックします。
![スクリーンショット 2024-03-16 16.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/1937def3-d5e1-e5ac-ffad-362cdc9cd487.png)

次に、製品の画像を表示します。
前のステップで追加したカロリーテキストフィールドの下にImageコンポーネントを追加します。
![スクリーンショット 2024-03-16 16.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/575e3431-e27d-6cb5-318f-6abf8eecd18e.png)

PROPERTIESペインで「Currently bound to: static image」をクリックします。
![スクリーンショット 2024-03-16 16.40.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/74f695a4-87d2-eb83-e1a6-05b6acfef3ee.png)

Formulaをクリックします。
![スクリーンショット 2024-03-16 16.41.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/88a826ae-0270-bf36-cdd0-9f3a0fa47bb1.png)

Formulaフィールドに、`data.OpenFoodFacts1.product.image_front_url`を上書きで入力します。
![スクリーンショット 2024-03-16 16.41.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/617896a1-5683-987d-6b22-5d14af6a20e9.png)

SAVEボタンをクリックします。
![スクリーンショット 2024-03-16 16.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/7d745b78-4084-a51f-b4ec-5e33ece9e0d3.png)

Set preview valueが自動入力されますので、再びSAVEボタンをクリックします。
![スクリーンショット 2024-03-16 16.42.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/869e1bea-e90d-d9e5-a35d-26bb5e280d48.png)

最後に、SAVEボタンをクリックします。
![スクリーンショット 2024-03-16 16.43.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/bf4cc5ac-91dd-83a1-2eda-50c41ca23201.png)

スマホのSAP Build Appsに戻り、こちらのTutorialのSTEP5のバーコードをスキャンします。

https://developers.sap.com/tutorials/appgyver-display-information.html

こちらのクランベリーソースの画像と、カロリーが表示されました。
![IMG_2934.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/56fa499d-cc45-d87f-970f-95676e5919fc.jpeg)

Tutorialでは100kg毎のカロリーを表示させると説明がありますが、数値が異なりましたので、カロリー表示の変数に戻り、今度はenergy-kcal_100gを選択してみました。
![スクリーンショット 2024-03-16 16.50.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/741cfc2f-99c5-c52a-189e-ddcfaf3dd489.png)

すると、Tutorilと同様に157が表示されました。
![IMG_2935.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1181562/0d1068ac-51cd-caf7-d48c-4450df18cde7.jpeg)

Tutorialと同様に「Calories per 100g: 157」とは表示されませんでしたが、今回はこれで終了したいと思います。おつかれさまでした！