Skip to Content

Display Fetched Data in Your AppGyver Application

test
0 %
Display Fetched Data in Your AppGyver Application
Details

Display Fetched Data in Your AppGyver Application

Requires Customer/Partner License
October 21, 2021
Created by
September 20, 2021
Display data fetched from a public API, such as product names and calorific information, in your AppGyver application.

You will learn

  • How to display data fetched from a public API within an AppGyver application once a request has been triggered.
QR code

Prerequisites

In the previous tutorial, you learned how to configure your application to read specific information from an API once a barcode has been scanned. Now, in this final tutorial for this mission, you will learn how to display the fetched information on your application interface.


Step 1: Add text components to app

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.

Add title component

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

Change title text

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

Add a paragraph
Log on to answer question
Step 2: Display product name

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.

Click to bind paragraph

Select Data and Variables.

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.

Product name variable

Then click Save.

Save paragraph

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

Log on to answer question
Step 3: Display calorific information

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.

Click to bind paragraph

Select Data and Variables.

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.

Add calorific information

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.

Log on to answer question
Step 4: Save and test

Now click Save.

Save application

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:

Scan chocolate

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

Scan results
In the example of a scanned food item, what is the calorific content per 100g?
×

Next Steps

Back to top