こちらの記事の続きになります。
引き続き、こちらのTutorialを参考にしています。
スマホ搭載カメラからのQR/Barcode読み取り設定
前回作成したスキャナアプリを開いて、Scanボタンを押してから、Add Logic to BUTTON 1をクリックします。
コアロジックコンポーネントを使用して、Device - Scan QR/barcodeコンポーネントまでスクロールダウンし、これをロジックエディタにドラッグアンドドロップします。これはSAP Build Appsによって提供されている、SAP Build Appsアカウント内で利用可能な多くのコンポーネントの中の1つである、事前に設定されたQRまたはバーコードスキャナーコンポーネントです。
Deviceコネクタ(出っぱっている部分)をクリックし、Component tapまで引っ張り接続します。Component tapから引っ張っても同じです。
このコネクタは単にフローの方向を示しており、この場合はボタンがタップされ、それがカメラデバイスの起動をトリガーとすることを意味しています。
QR/バーコードスキャナーが動作していることをテストするために、アプリケーションにアラートコンポーネントを追加します。これは単にバーコードがスキャンされた後にポップアップアラートを表示し、バーコード番号を画面に返すだけです。
これを行うには、コアロジックオプションに戻り、Alertまでスクロールして、Scan QR/barcodeロジックの横にドラッグアンドドロップします。
上部のScan QR/barcodeオプションとAleatエレメントの間にコネクタを追加し、再びフローの方向を示します。
現在、アラートは静的なテキスト応答のみを表示するように設定されていますが、ここで動的バインディングを追加したいと思います。これにより、アプリに代わり提供すべき情報を指示できるようになり、この場合はスキャンされているバーコードです。
これを行うには、Alertエレメントを選択し、PROPERTIESパネルを使用して、「Currently bound to: static text」をクリックし、バインディングオプション画面を開きます。
Output value of another nodeをクリックします。
Select binding typeの画面で、
以下の設定を選択し、SAVEボタンを押します。
Select logic node – Scan QR/barcode
Select node output – Scan QR/barcode / QR barcode content
画面右上のSAVEボタンを押します。
スマホのSAP Build Apps Previewアプリで、食品のバーコードを使って機能をテストします。
Scanボタンをタップします。
Tutorial STEP5に記載されているバーコードのサンプルをスキャンすると、こちらの画面が結果として返されました。
Public APIへの接続
Scanner Applicationの画面に戻り、Scanボタンをクリックしてから、DATAタブをクリックします。
REST APIに接続を追加します。
SAP Build Appsを使用している場合は、SAP Build Apps classic data entities > Create Data Entityをクリックし、次にREST API direct integrationを選択します。
REST API direct integration resourceの画面が表示されますので、
以下を各項目に入力します。
Resource ID OpenFoodFacts
Short description Data from Open Food Facts API
Resource URL https://world.openfoodfacts.org/api/v0
Open Food Facts APIから取得する情報を設定する必要があります。このアプリケーションでは、デバイスのカメラでスキャンされているものがバーコードであるため、このバーコード情報を取得するように設定する必要があります。これはGet Recordリクエストを使用して達成できます。
これを設定するには、Get Record (Get)をクリックします。
Relative pathフィールドには、/product/{barcode}.jsonと入力します。
URL placeholderのid等が表示されているフィールドをクリックし、
画面右側のPROPERTIESを行います。(LabelとKey以外はデフォルト)
Label Barcode
Key barcode
Value type Text
Description Resource ID to retrieve
Is encoded Enabled
Is static Disabled
Is optional Disabled
データリソースが適切に設定され、情報を取得できるかどうかをテストするには、TESTタブをクリックし、Barcodeの下のCurrently bound to: static textをクリックします。
Static textをクリックします。
テキストフィールドに6416453061361を入力し、RUN TESTをクリックします。
これは、菓子の包装から取られた例のバーコード番号です。
テストが実行され、Test API call responseが表示されます。このレスポンスでは、製品に関する情報が見られます。これには、製品カテゴリー、アレルゲン情報、製品を製造したブランドが含まれます。
テストが成功した後、データスキーマを設定する必要があります。これにより、URLからのデータ構造が保存され、アプリケーションが取得している情報の種類を容易に識別できるようになります。
これを行うには、「Set Schema from Response」をクリックします。
Save Data Entityをクリックし、
SAVEボタンをクリックします。
Public APIからSAP Build Applicationへのデータ取得
ここまでは、アプリケーションをパブリックAPIに接続する方法を学びました。ここからは、バーコードがスキャンされた後にそのAPIから特定の情報を読み取るようにアプリケーションを設定する必要があります。これもまたGet Record HTTPSリクエストを使用しますが、今回はそのリクエストがロジックフローでトリガーされます。
もはやアプリケーションにアラートを送信する必要がないため、ロジックフロー内のアラートコンポーネントを削除することから始める必要があります。
これを行うには、Scanボタンをクリックしてから「Show Logic for Button1」をクリックします。
ロジックパネルからAlertコンポーネントを「✖」で削除します。
バーコードがスキャンされた後に何が起こるべきかの新しいロジックフローを追加する必要があります。バーコードスキャナーがデータリソースからデータを取得するようにします。
これを行うには、コアロジックオプションを使用して、DATA – Get Recordまでスクロールダウンし、それをロジックエディタにドラッグアンドドロップします。
アプリケーションのロジックの流れを示すために、上部のスキャン Scan QR/barcodeから Get Record オプションへコネクタを追加します。
ロジックフローが設定されたら、スキャナーノードの出力に情報をバインドする必要があります。
これを行うには、Get Recordエレメントを選択し、PROPERTIESパネルを使用して「Currently bound to: Static text」をクリックし、バインディングオプション画面を開きます。
Output value of another nodeをクリックします。
Select binding typeの画面で、以下を設定し、SAVEボタンをクリックします。
Select logic node – Scan QR/barcode
Select node output – Scan QR/barcode / QR barcode content
アプリケーションが受け取ったデータを保存するように設定する必要があります。これを行うには、データ変数を追加する必要があります。
これを行うには、VARIABLESビューに切り替えます。
Data Variablesをクリックします。Welcome to variablesの画面は✖︎で閉じておきます。
Add Data Variableをクリックします。
Open Food Factsをクリックします。
バーコードは単一の製品に対するものなので、Data variable type – Single data recordを選択します。
データ変数には、新しい情報を5秒ごとに取得するデフォルトのロジックが付属していますが、アプリはバーコードがスキャンされたときにのみ情報を取得するべきです。その結果、デフォルトのロジックを削除する必要があります。
これを行うには、画面の赤枠内のロジックを選択して✖︎で削除します。
削除できましたら、SAVEボタンをクリックします。
「View」をクリックしてアプリケーションインターフェイスビューに戻ります。
ここから、取得したデータをデータ変数に保存するというロジックフローの最終ピースを追加する必要があります。
Scanボタンをクリックしてから、コアロジックオプションを使用して、「Variables – Set Data Variables」までスクロールダウンし、それをロジックエディタにドラッグアンドドロップします。
上部の「Get record」オプションから「Set data variable」オプションへコネクタを追加し、Currently bound to: object with propertiesをクリックします。
Output value of another nodeをクリックします。
Select binding typeの画面から、以下を選択します。
Select logic node: Get record
Select node output: Record
Select node output: Recordを選択した時点で、画面がフリーズして、しばらくすると警告の画面が表示される場合があります。私の場合は警告の画面が表示されされましたので、待機ボタンを押して少し待ちました。
しばらく待つと、この画面になりますので、SAVEボタンをクリックします。
画面右上のSAVEボタンもクリックします。
SAP Build Applicationへ取得したデータの表示
ここまでは、バーコードがスキャンされた後にAPIから特定の情報を読み取るようにアプリケーションを設定する方法を学びました。最後に、取得した情報をアプリケーションインターフェイスに表示する方法を学びます。
コアコンポーネントパネルから、アプリ内のScanボタンの下にTitleコンポーネントをドラッグアンドドロップします。
Titleコンポーネントをクリックし、コンテンツをProduct Informationに変更します。
コアコンポーネントパネルから、このタイトルの下にTextコンポーネントをドラッグアンドドロップします。
ここから、データ変数にバインドする必要があります。これにより、APIから取得した後に表示する食品情報を定義できます。なぜなら、各食品項目に利用可能なすべての情報を表示したいわけではないかもしれないからです。
この例では、製品名とエネルギー（kcal/100g）フィールドを表示する方法を示します。
製品名を表示するには、Textコンポーネントをクリックし、次に「Currently bound to: Static text.」をクリックします。
Data and Variablesをクリックします。
Data Variablesをクリックします。
「Open food facts」変数をクリックします。
スクロールダウンして「product_name」フィールドを選択します。これには、ブラウザの検索機能を使用することをお勧めします。
product_nameを選択した時点で、画面がフリーズする可能性があります。フリーズしてもしばらく待ちます。警告画面が表示された場合は待機ボタンを押します。
しばらく待つとこちらの画面になりますので、SAVEボタンをクリックします。
次に、製品名の情報に提供された同じ手順を使用して、アプリにカロリー情報を追加します。再びTextコンポーネントをドラッグし、先ほど追加したテキストの下にドロップします。
Textコンポーネントをクリックし、次に「Currently bound to: Static text」をクリックします。
Data and Variablesをクリックします。
Data Variablesをクリックします。
「Open food facts」変数をクリックします。
スクロールダウンして「energy」フィールドを選択します。これには、ブラウザの検索機能を使用することをお勧めします。
energyを選択した時点で、画面がフリーズする可能性があります。フリーズしてもしばらく待ちます。警告画面が表示された場合は待機ボタンを押します。
しばらく待つとこちらの画面になりますので、SAVEボタンをクリックします。
次に、製品の画像を表示します。
前のステップで追加したカロリーテキストフィールドの下にImageコンポーネントを追加します。
PROPERTIESペインで「Currently bound to: static image」をクリックします。
Formulaをクリックします。
Formulaフィールドに、data.OpenFoodFacts1.product.image_front_urlを上書きで入力します。
SAVEボタンをクリックします。
Set preview valueが自動入力されますので、再びSAVEボタンをクリックします。
最後に、SAVEボタンをクリックします。
スマホのSAP Build Appsに戻り、こちらのTutorialのSTEP5のバーコードをスキャンします。
こちらのクランベリーソースの画像と、カロリーが表示されました。
Tutorialでは100kg毎のカロリーを表示させると説明がありますが、数値が異なりましたので、カロリー表示の変数に戻り、今度はenergy-kcal_100gを選択してみました。
すると、Tutorilと同様に157が表示されました。
Tutorialと同様に「Calories per 100g: 157」とは表示されませんでしたが、今回はこれで終了したいと思います。おつかれさまでした！