Business Scenario
You're going to build an app that lets you scan the barcode on a food product, then it calls an API to get the calorie content, and finally it displays the product name and calorie count.
Exercise Options
You can perform this exercise in the following ways:
- Live Environment - by using the instructions provided below, you can perform the steps on a live system.
- Platform Simulation – follow the step-by-step instructions within the simulation.
Prerequisites for the Live Environment
- Access the SAP Build Apps Sandboxwhich provides you a playground for 30 days. Additionally, you can also setup your own SAP Build Apps subscription on your SAP BTP subaccount by using a booster.
- Set up the SAP Build Apps Preview app on iOS or Android. When you are working on an app, it will have a QR code, which you can scan from the preview app to open the app on the phone. More information in the documentation.
How to Obtain Support
To get support during the exercises, please add your question in our SAP BTP Learning Group.
Task Flow
In this exercise, you will perform the following tasks:
- Create a new SAP Build Apps project.
- Create the user interface.
- Add logic to open the camera.
- Connect to Open Food Facts API.
- Fetch Data from API.
- Display Data from API.
Task 1: Create a new SAP Build Apps Project
Steps
Create a new SAP Build Apps project.
Use the following data:
Field Value Project Name Barcode Scanner Have access to SAP Build Apps on SAP BTP, log in, and then choose Create New.
For the project name, enter Barcode Scanner, and then choose Create.
You should now see the canvas where you will design your app.
Task 2: Create the User Interface
Steps
Create the user interface.
Use the following data:
Field Value Title component Barcode Scanner Text component Scan a barcode of a food product using your smartphone Choose the title component.
To the right, in the Properties pane, change the Content property to Barcode Scanner.
Choose the text component. To the right, in Properties pane, change the Content property to Scan a barcode of a food product using your smartphone
In the Core tab on the left (where all the components are shown), drag a Button component, and drop it underneath your text component.
Choose the button. To the right, in the Properties pane, change the value of the Label property to Scan.
Choose an open area anywhere on the canvas. You should see properties for the page in the Properties pane to the right. Change the Page name to Home page.
Preview the app.
Open the SAP Build Apps Preview app on your mobile phone.
Choose SAP Build Appsand then Scan QR Code
Back in your Barcode Scanner app on the SAP Build Apps website, open the Launch tab, and choose the space for the QR code for Mobile Apps. The QR code should now appear.
Scan the code. On your phone, a list of your apps should appear. For your Barcode Scanner app, choose Open.
You should see the user interface you created so far.
Task 3: Add Logic to Open the Camera
Steps
Add logic to open the camera.
In this task, you will define what the application does in response to the user choosing the Scan button.
Use the following data:
Field Value Flow function Scan QR / barcode Binding type Output value from another node Select logic node Scan QR/barcode Select node output QR barcode content Choose the button, and open the logic pane.
In the Core tab on the left bottom (where all the flow functions are shown), drag a Scan QR / barcode flow function and drop it into the logic editor.
Once on the canvas, draw a connection from the Component tap event's tip to the start tip of the Scan QR / barcode flow function.
Drag and drop an Alert flow function to the right of the Scan QR / barcode flow function. Connect the top output of the Scan QR / barcode to the Alert.
Indicate what you want to show in the alert by choosing the Alert flow function, going to the Properties pane on the right, and choosing the binding option for the Dialog title.
For the binding type, choose Output value from another node.
For the Select logic node, choose Scan QR/barcode.
For the Select node output, choose QR barcode content.
Choose Save.
What's going on?
The logic of the application determines what happens in response to events, such as user's choosing buttons or values of variables changing. The logic is defined by dragging flow functions in the canvas and connecting them together.
Save the application.
In the upper right, choose Save to save the application.
The application on the preview app on your phone will automatically update, and you can preview the app by choosing Scan and scanning a barcode.
Task 4: Connect to Open Food Facts API
Steps
Connect to Open Food Facts API.
Use the following data:
Field Value Resource ID OpenFoodFacts
Short description Data from Open Food Facts API Resource URL https://world.openfoodfacts.org/api/v0
Open the Data tab.
Choose Add Data Resource, and then choose Rest API direct integration.
With Base selected on the left, set the parameters from the table above:
Field Value Resource ID OpenFoodFacts
Short description Data from Open Food Facts API Resource URL https://world.openfoodfacts.org/api/v0
Choose Save.
Set the Get Record.
Use the following data:
Field Value Relative path /product/{barcode}.json
Label Barcode
Key barcode
Value type Text Description Resource ID to retrieve
Is encoded Enabled Is static Disabled Is optional Enabled Choose Get Record (on the left) and set the Relative Path to:
/product/{barcode}.json
Choose the barcode URL placeholder, and set its fields as shown in the table above.
What's going on?
The data resource we created, and all the configuration in the Base, defines the overall API that we want to call (for example, the base URL), but does not define a specific call. When we defined the Get record, we defined a specific call: the URL path and the parameters to be sent with that call – most importantly, the barcode we want information about.
Test the application.
Go to the Test tab.
Set the barcode variable by choosing the binding X and choosing Static Text.
Enter 6416453061361 for the barcode, and choose Run Test.
Choose Set Schema From Response.
This tells SAP Build Apps what fields to expect the next time it runs this service.
Choose Save.
Task 5: Fetch Data From API
Steps
Bind the get Record API call.
Assuming you are still on the Data tab, choose the Data tab again to get back to the canvas.
Choose the Scan button, and open the logic pane.
Delete the Alert flow function (choose it and press the Delete key).
Drag in a Get record flow function, and connect it to the Scan QR/Barcode flow function.
This flow function calls the Get record API call we defined in the Data tab earlier.
Set the properties.
Use the following data:
Field Value Binding type Output value of another node. Node Scan QR/Barcode Output QR barcode content In the Properties pane (at right), choose the binding on the Barcode property.
Choose Output value of another node.
Choose Scan QR/Barcode for the node, and QR barcode content for the output.
Choose Save.
Set the variables.
Go to the Variables screen for this page.
On the left, choose Data Variables.
Click the X on the purple box, if necessary
Choose Add Data Variable and base the variable on OpenFoodFacts.
In the Properties pane (on the right), choose the radio button so that the variable is for a single record.
Open the logic pane for the variable, and delete all the flow functions that were automatically created.
Choose Save.
What's going on?
When we want to call an API to get some data, we need a place to store the data, and this is a data variable.
And when you create a data variable, logic is automatically created that fetches the data (as soon as the page loads) and puts the data in the data variable, though you can change or delete this logic as needed.
Use a Set data variable.
Go back to the canvas by choosing View (next to Variables).
Choose the Scan button and open the logic pane.
Drag a Set data variable flow function next to the existing Get record flow function, and connect the two flow functions (use the top output of the Get record).
Configure the Set data variable.
Choose the new Set data variable flow function, and choose the binding for the data property.
Choose Formula, erase any existing formula, and copy and paste the following formula:
outputs["Get record"].record
Choose Save for the formula.
Save the application.
In the upper right, choose Save to save the application.
Task 6: Display Data from API
Steps
Add a title component and 2 text components.
Drag a Title component below the button, and change the Content property to:
Product Information
Underneath the title, drag 2 Text components.
Configure the first text component.
Use the formula:
data.OpenFoodFacts1.product.product_name
Choose the first text component, then in the Properties, choose the binding for Content.
Choose Formula , and then use the following formula:
data.OpenFoodFacts1.product.product_name
Choose Save.
Configure the second text component.
Use the formula:
data.OpenFoodFacts1.product.nutriments.energy Choose the second text component, then in the Properties, choose the binding for Content.
Choose Formula , and then use the following formula:
data.OpenFoodFacts1.product.nutriments.energy Choose Save.
Add an image component and configure it.
Use the formula:
data.OpenFoodFacts1.product.image_front_url
Add an Image component underneath the calorie information.
For the image's Source property, choose the binding, choose Formula and use the following formula:
data.OpenFoodFacts1.product.image_front_url
Choose Save.
Test the app.
Save the project.
Go to your preview app. The application should automatically be refreshed.
Test by scanning a product.
It should look like this:
Result
You have created an app with a:
- User interface, for example, title, button, image).
- Logic, for example, when user chooses Scan the camera opens).
- Data, for example, the app calls the Open Food Facts API.
Your app can now scan food items and return information about them.