Airtable Setup
  • Studio Project #3 (Elastic Collections) will use Airtable as an API to host the data for your websites. We’ll be fetching that data with JavaScript and inserting it into your HTML. In this document, we’ll talk about the initial Airtable setup and how to use Airtable.

Airtable is like a supercharged version of a spreadsheet software. Airtable is more similar to a database (have you ever heard of SQL?) than a typical spreadsheet, but there are many similarities to a platform like Google Sheets when you first start using Airtable.

Airtable Introduction Demo → https://vimeo.com/515896222
Airtable Base Setup Demo → https://vimeo.com/515893387

Create a new Airtable account

To use the Airtable API we need an API key, which is like a password, and will be sent insecurely over JavaScript. That’s why we’ll create a new Airtable account specifically for this class, so that if the API key is compromised it isn’t a problem.

Set up a new bookshelf table

Follow along in the base setup demo to create a table with the following fields names and content types:
Field Name
Content Type
title
Single line text
description
Long text
cover_image
Attachment
more_info
Url

Populate the table with 10 different items

Add a series of 10 different rows that represent your book records. Each row should have a book title, description, cover image, and URL to view more info about the book.

Post the link to your table below

Once your table is populated, press the share button, select base, select invite by link, and allow anyone to view with the read-only link. The sharing settings should look like this (copy the URL in the pink box to share):
Post the URL to your read-only Airtable link here. Make sure you open the link in an Incognito window to make sure it’s publicly visible.

Next steps

Next week we’ll begin interacting with the data in your Airtable using an API. Please make sure your bookshelves are populated so that we have data to work with next week!