Getting a badge's image

The only way to display a badge's image is to create an endpoint that finds the badge in the database and returns the URL of the image in the HTTP response. That's what we'll cover in this part of the tutorial series.

Step 1: Create an "API" flow

  1. In the Explorer pane, click Create new.
  2. Select API.
  3. Type Get badge image.
  4. Tap the Return key.

Step 2: Configure the "Start" component

  1. Open the Start component.
  2. From the Method dropdown, select GET.
  3. In the URL field, enter /badge-image.
  4. Create a query string parameter called id.

Step 3: Get the badge from the database

  1. Add a Select component to the flow.
  2. Rename the component to selectBadge.
  3. From the Table dropdown, select badges.
  4. In the Filter tab, create a condition that checks if Field: id is equal to Start.queryString.id.

Step 4: Check if a badge was found

  1. Add an If component to the flow.
  2. Create a condition that checks if selectBadge.data is not null or empty.

Step 5: If a badge wasn't found, return an error

  1. Add an End component to the flow.
  2. Connect the If component to the End component via the False branch.
  3. Set the Status Code to 404 Not Found.

Step 5: If a badge is found, return the badge

  1. Add an End component to the flow.
  2. Connect the If component to the End component via the True branch.
  3. From the Status Code dropdown, select 200 OK.
  4. From the Content Type dropdown, select filePath. When the Content Type is filePath and the Body field contains the path of a file that's stored on FL0's servers, the response body will contain the complete URL of the file.
  5. In the Body field, enter selectBadge.data[0].img. This expression demonstrates the use of the first function, which retrieves the first item from an array.

This is what the complete flow looks like: