Creating a Brewery Finder Application

This guide accompanies the video tutorial below and provides a step-by-step walkthrough for building a Brewery Finder app using the Open Brewery DB API.

How to use this guide

This written walkthrough complements the video, providing additional detail and code snippets where necessary. Use it as a reference alongside the tutorial to better understand each stage of the build.

Where the video moves quickly or skips over details, the explanations and examples below will help fill the gaps. There are various points in the video which require more in-depth explanation or the use of example code snippets, which are included below.

Country data

Timestamp: 14:24

The country data powers the selection feature in the application. Add the following JSON to a variable (for example, countrylist) within the project:

[
  { "id": "Austria", "value": "austria", "description": "Austria" },
  { "id": "England", "value": "england", "description": "England" },
  { "id": "France", "value": "france", "description": "France" },
  { "id": "Isle of Man", "value": "isle%20of%20man", "description": "Isle of Man" },
  { "id": "Ireland", "value": "ireland", "description": "Ireland" },
  { "id": "Poland", "value": "poland", "description": "Poland" },
  { "id": "Portugal", "value": "portugal", "description": "Portugal" },
  { "id": "Scotland", "value": "scotland", "description": "Scotland" },
  { "id": "Singapore", "value": "singapore", "description": "Singapore" },
  { "id": "South Korea", "value": "south%20korea", "description": "South Korea" },
  { "id": "United States", "value": "united%20states", "description": "United States" }
]

Steps to create the variable:

Add a variable to hold the country data.

Name the variable countrylist and set its type to JSON.

Copy and paste in the country data.

Click save variable.

Creating an Object Variable

Timestamp: 21:26

To create the variable, you will need to construct an object that matches the following format from the OpenBreweryDB site. The video below walks through the steps:

Here is the data shape that this variable replicates:

{
  "id": "5128df48-79fc-4f0f-8b52-d06be54d0cec",
  "name": "Brewery Name",
  "brewery_type": "micro",
  "address_1": "123 Brewery Lane",
  "address_2": null,
  "address_3": null,
  "city": "Brewery City",
  "state_province": "CA",
  "postal_code": "12345",
  "country": "United States",
  "phone": "1234567890",
  "website_url": "https://www.breweryname.com",
  "state": "California"
}

Setting up the List Container

Timestamp: 23:35

Use the following variable bindings inside your List Container child element:

{{$brewery_response[*].name}}
{{$brewery_response[*].address}}
{{$brewery_response[*].city}}
{{$brewery_response[*].state}}
{{$brewery_response[*].country}}
{{$brewery_response[*].phone}}
{{$brewery_response[*].website_url}}

JSONata Data Transformation

Timestamp: 38:18

Use this JSONata snippet in the transformation node to normalise optional fields and avoid empty values:

$[].{
  "name":        $boolean(name)        ? name        : " ",
  "address_1":   $boolean(address_1)   ? address_1   : " ",
  "city":        $boolean(city)        ? city        : " ",
  "postal_code": $boolean(postal_code) ? postal_code : " ",
  "phone":       $boolean(phone)       ? phone       : " ",
  "website_url": $boolean(website_url) ? website_url : " ",
  "state":       $boolean(state)       ? state       : " ",
  "country":     $boolean(country)     ? country     : " "
}