Creating a First Application With SAP Build Apps

Create a new SAP Build Apps project.

1. Open the AppGyver site, log in, and then choose Create New.

   

2. For the project name, enter Barcode Scanner, and then choose Create.

   You should now see the canvas where you will design your app.

   

Create the user interface.

1. Choose the title component.

2. To the right, in the Properties pane, change the Content property to Barcode Scanner.

   

3. 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

4. In the Core tab on the left (where all the components are shown), drag a Button component, and drop it underneath your text component.

   

5. Choose the button. To the right, in the Properties pane, change the value of the Label property to Scan.

6. 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.

1. Open the SAP AppGyver preview app on your mobile phone.

2. Choose Scan QR Code

   

3. Back in your Barcode Scanner app on the AppGyver website, open the Launch tab, and choose the space for the QR code for Mobile Apps. The QR code should now appear.

   

4. 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.

   

Add logic to open the camera.

1. Choose the button, and open the logic pane.

   

2. 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.

   

3. 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.

   

4. 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.

   

5. 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.

   

6. For the binding type, choose Output value from another node.

   

7. For the Select logic node, choose Scan QR/barcode.

8. For the Select node output, choose QR barcode content.

   

9. 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.

1. 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.

   

Connect to Open Food Facts API.

1. Open the Data tab.

2. Choose Add Data Resource, and then choose Rest API direct integration.

   

3. 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

4. Choose Save.

   

Set the Get Record.

1. Choose Get Record (on the left) and set the Relative Path to:

   /product/{barcode}.json

2. Choose the id 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.

1. Go to the Test tab.

2. Set the barcode variable by choosing the binding X and choosing Static Text.

   

3. Enter 6416453061361 for the barcode, and choose Run Test.

   

4. Choose Set Schema From Response.

   This tells SAP AppGyver what fields to expect the next time it runs this service.

5. Choose Save.

Bind the get Record API call.

1. Choose the Scan button, and open the logic pane.

2. Delete the Alert flow function (choose it and press the Delete key).

3. 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.

1. In the Properties pane (at right), choose the binding on the Barcode property.

2. Choose Output value of another node.

3. Choose Scan QR/Barcode for the node, and QR barcode content for the output.

   

4. Choose Save.

Set the variables.

1. Go to the Variables screen for this page.

   

2. On the left, choose Data Variables.

3. Choose Add Data Variable and base the variable on OpenFoodFacts.

4. In the Properties pane (on the right), choose the radio button so that the variable is for a single record.

   

5. Open the logic pane for the variable, and delete all the flow functions that were automatically created.

   

6. 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.

1. Go back to the canvas by choosing View (next to Variables).

2. Choose the Scan button and open the logic pane.

3. 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.

1. Choose the new Set data variable flow function, and choose the binding for the data property.

2. Choose Formula, erase any existing formula, and copy and paste the following formula:

   outputs["Get record"].record

3. Choose Save for the formula.

Save the application.

1. In the upper right, choose Save to save the application.

Add a title component and 2 text components.

1. Drag a Title component below the button, and change the Content property to:

   Product Information

2. Underneath the title, drag 2 Text components.

Configure the first text component.

1. Choose the first text component, then in the Properties, choose the binding for Content.

2. Choose Formula , and then use the following formula:

   data.OpenFoodFacts1.product.product_name

3. Choose Save.

Configure the second text component.

1. Choose the second text component, then in the Properties, choose the binding for Content.

2. Choose Formula , and then use the following formula:

   data.OpenFoodFacts1.product.nutriments.energy

3. Choose Save.

Add an image component and configure it.

1. Add an Image component underneath the calorie information.

2. For the image's Source property, choose the binding, choose Formula and use the following formula:

   data.OpenFoodFacts1.product.image_front_url

3. Choose Save.

Test the app.

1. Save the project.

2. Go to your preview app. The application should automatically be refreshed.

3. Test by scanning a product.

   It should look like this: