Skip to Content

Display Fetched Data in Your AppGyver Application

Requires Customer/Partner License
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.
akselivAkseli VirtanenAugust 11, 2022
Created by
heytombeck
September 20, 2021
Contributors
heytombeck
heytombeck
thecodester

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

    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
  • Step 2

    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

    IMPORTANT: The following provides 2 ways to do this. The first way is the standard way, but for some people this may cause the AppGyver editor to hang (you can click to exit). So we have provided a second way to store the data using a formula.

    • 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
    • Instead, you can do the same thing with a formula. Most, if not all, bindings can be done with the UI or manually with a formula.

      Select Formula, and then enter for the formula the following:

      data.OpenFoodFacts1.product.product_name
      

    Click Save.

    Save paragraph

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

  • Step 3

    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

    IMPORTANT: The following provides 2 ways to do this. The first way is the standard way, but for some people this may cause the AppGyver editor to hang (you can click to exit). So we have provided a second way to store the data using a formula.

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

    • Instead, you can do the same thing with a formula. Most, if not all, bindings can be done with the UI or manually with a formula.

      Select Formula, and then enter for the formula the following:

      data.OpenFoodFacts1.product.nutriments.energy
      

    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.

  • Step 4

    We’ll now display the image for the product (if there is one).

    1. Add an image component after the calorific text field you added in the previous step.

    2. Click the Source binding in the Properties pane.

      Add image countrol

      Select Formula, and then enter for the formula the following:

      data.OpenFoodFacts1.product.image_front_url
      

      Click Save.

  • Step 5

    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

    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?

Back to top