Getting a user's profile

This part of the tutorial series explains how to get a user's profile. This is a little more complex than simply selecting the user from the database though, since we also need to retrieve the user's badges and reformat some of the data for easier usage on the frontend.

Step 1: Create an "API" flow

  1. In the Explorer pane, click Create new.
  2. Select API.
  3. Type Get user.
  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 /user.
  4. Create a query string parameter called id.

Step 3: Get the user from the database

  1. Add a Select component to the flow.
  2. Rename the component to selectUser.
  3. From the Table dropdown, select users.
  4. Click the + icons alongside the level and users_badges labels.
  5. Enable all of the fields.
  6. In the Filter tab, create a condition that checks if Field: id is equal to Start.queryString.id.

Step 4: Check if the user exists

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

Step 5: If the user doesn't exist, 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 6: If the user exists, get the user's badges

  1. Add a Select component to the flow.
  2. Connect the If component to the Select component via the True branch.
  3. Rename the component to getUserBadges.
  4. From the Table dropdown, select users_badges.
  5. Click the + icons alongside the badgeid label.
  6. Enable all of the fields.
  7. In the Filter tab, create a condition that checks if Field: userId is equal to Start.queryString.id.

Step 7: Create an array of the user's badges

  1. Add an Array Map component to the flow. This component loops through the items in an array and creates a new array. You can use this component to transform the items of an array into the desired format.

  2. Rename the component to buildBadgesResponse.

  3. In the Array field, enter getUserBadges.data.

  4. Configure the component with the following properties:

    Property NameValue
    badgeImageUrl"<badge-image-flow-url>?id=" + item.badgeId.Id
    Nameitem.badgeId.name

    But replace <badge-image-flow-url> with the URL of the /badge-image flow.

Step 8: Create the response body

  1. Add a Build Object component to the flow.

  2. Rename the component to buildUserResponse.

  3. Configure the component with the following properties:

    Property NameValue
    nameselectUser.data[0].name
    image"<user-image-flow-url>?id=" + selectUser.data[0].Id
    pointsselectUser.data[0].points
    memberSinceselectUser.data[0].dateCreated
    titleEngineer on FL0
    levelselectUser.data[0].level.level
    levelMaxselectUser.data[0].level.max
    badgesbuildBadgesResponse.result

    But replace <user-image-flow-url> with the URL of the /user-image flow.

Step 9: Create the HTTP response

  1. Add an End component to the flow.
  2. Set the Status Code to 200 OK.
  3. From the Content Type dropdown, select application/json.
  4. In the Body field, enter buildUserResponse.result.

This is what the complete flow looks like: