Display Fetched Data in Your AppGyver Application

To start with, you’ll add further visual information to your app in the form of a title and a paragraph of text. This will eventually be used to display specific calorific information obtained from scanning a food item.

To do this, open your draft application in your AppGyver Composer account, displaying your barcode scanner app.

From the core component panel, drag and drop a Title component to underneath your Scan button in your app.

Click the Title component and change the Headline Field to Product Information.

From the core component panel, drag and drop a Paragraph component to underneath this title.

This paragraph now needs to be bound to the data variable you configured in earlier tutorials. This will allow you to define what food information to display once it has been fetched from the API, as you may not want to display all information available for each food item.

For this example, we will show you how to display the Product Name and Energy-kcals_100g.

To display the product name, click your Paragraph component and then click Currently bound to: Static text.

Select Data and Variables.

Select Data Variables and then click your Open food facts variable.

Scroll down to and select the product_name field. For this, we suggest using the ‘Find text’ function within your browser.

Then click Save.

The paragraph will now display the product name of the scanned food item.

We’ll now add the calorific information to your app, using the same steps provided in for the product name information. Repeat Step 1 and Step 2, adding a new paragraph component to your interface.

Click your Paragraph component and then click Currently bound to: Static text.

Select Data and Variables.

Select Data Variables and then click your Open food facts variable.

Scroll down to and select the energy field. For this, we suggest using the ‘Find text’ function within your browser.

Then click Save.

The paragraph will now display the calorific information of the scanned food item.

Should you wish, you can now continue to add other information from the API using the same steps.

Now click Save.

Your draft application is now complete, allowing you to scan a food item and then read the product name and calorific information per 100g. To do this, open your AppGyver Preview app and test the scan feature.

In this example, we are scanning some confectionery:

With the app returning the product name and the calorific information: