Integrating With an API

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Integrate by using an API

Integrating with an API

Up to this point, you’ve laid out your UI, and built the underlying logic to power the work-flow. Now, we need the variables – the data – that present a result on the screen. As a first step, we need to do the integration with the API.

Some things to remember from the previous unit that will help with understanding this section:

  • An API allows us to access actions and data from a different remote system that is in no way a part of the application we are building.
  • With APIs, we can fetch information, in this case food product information, which is then used in our app.
  • Web-based APIs are accessed quite simply using a URL.

It’s time to dive into the details of setting up your data resource.

Setting Up the Data Resource

To make a connection to the OpenFoodFacts database, we’re going to integrate the API into our application. OpenFoodFacts has provided the following URL to read data for a product, which we’ll use in this lesson:[barcode].json

Here is an example URL for the same bag of mixed nuts we mentioned earlier:

Let’s look a little closer at the parts of the URL because we’ll need this information shortly.

  • We can see that we’re using the version 0 of the API and we’re querying a product.
  • The last part is the number sequence taken from the barcode.
  • The .json ending tells us that we’re going to get data in JSON format from this API call. JSON is a text-based format for representing data and is one of the most commonly-used formats in modern APIs.

So we have: world.openfoodfacts.orgAPIv0product7350040162910.json

To make the app work, we need to make an HTTP request with the scanned barcode to this API URL. In SAP AppGyver, we can do this by creating a data resource. Data resources serve as connectors between data sources, such as APIs, and the application.

  1. To create a data resource, open the data tab from the top menu and then select add data resource.
  2. The type is REST API direction integration.
  3. For the Resource ID, enter OpenFoodFacts.
  4. We can also enter a short description, for example, Data from OpenFoodFacts API.
  5. For the Resource URL, we’ll use the part of the URL provided by OpenFoodFacts, up to the part that says v0.
  6. Then, we can save.

    Our base configuration for this data resource is done. Now we need to configure the method that is used to perform HTTP requests. We just need one API request for this application that fetches the data for the barcode. The available methods are: Get Collection, Get Record, Create Record, Update Record, and Delete Record.

  7. The word in parenthesis is the name of the actual HTTP method that the API call uses. In our case, the data can be accessed with a GET request and we only need it to return data for a single product, so we’ll use the GET Record method.
  8. For the Relative path, we see the first part of the OpenFoodFacts URL from earlier. Now, it’s time to fill in the rest.
    1. We should mark what we want to replace in the URL, which in this case is the barcode number. We’ll use curly brackets.
    2. Next, we’ll edit the URL placeholder. This allows our app to pass the currently scanned barcode to the API in this URL. There’s already a default URL placeholder called ID. We can use this one and under Properties, just change the label and key to barcode.
    3. Select Is optional and save.

You’ve just successfully integrated an API. For the next step, we’ll test it out.

Testing the API Call

Our data resource is set up and ready to test out. This is how we’ll make sure our API call is working. In the test tab, you can see the barcode resource ID that we just made.

  1. Select Static value and put in a sample barcode number, this time I’m using the barcode from a cup of chocolate pudding.
  2. Choose the Run test button and it will perform an API request.

    We should get back a response here with the JSON data, and a green Status OK. That means our API call works!

  3. After a successful test, choose Set schema from response, which stores the data structure from the API response, and choose SAVE.

    This is going to help us a lot when we’re working with the data in our application. Our data resource is complete and we’re ready to jump back into logic!


You’ve now connected your barcode scanner app to the API, and set up the data resource. Great job! Now we need to see how it looks in your app.

Save progress to your learning plan by logging in or creating an account