Using Airtable as backend service

The hell of finding the right backend

When it's time to write a Single Page Application in javascript, we often need some sort of backend so that the site owne can add or update the content in the application.

There is many possible alternative ways, from building a complexe REST application on dedicated framework such as Laravel or Ruby on Rails, to connecting your app to headless CMS.

The problem with headless is that are most of the time costly and can be expersive after several years. Or you have to install and manage it on a virtual private server with all the security issues that comes with.

Airtable Solution

One quick and easy solution is to use Airtable. It comes with a free plan, REST API, and great documention.

It's take a minute to create a table, less to alter columns, no migration is needed and it's super easy for the site owner to add the content. Think Airtable as a combination of Excel and Access, without the code and the hugly.

It come with his own Univers and you'll probably find a template for your project.

Nevertheless Airtable has a major gotcha that limit his usability for heavy applications.

Exemple

Here is an Airtable base for building a Quiz with questions and answers. It comes with an awesome base specific API documentation (you must be logged in to see it) and an official Javascript library.

Authentification

Authentification is straightforward:

const Airtable = require("airtable");
const base = new Airtable({ apiKey: "YOUR_API_KEY" }).base(
  "BASE_TOKEN"
);

Fetching single record

Here is how you can fetch a record with his ID (ID is created autonumber field):

fetchQuiz(id) {
      return base("Questions")
        .select({
          filterByFormula: `{ID} = ${id}`,
        })
        .firstPage()
        .catch(function (err) {
          if (err) {
            console.error(err);
            return;
          }
        });
    }

The filterByFormula key is an Airtable Formula instruction that offers SQL like queries.

Fetching multiple records

base('Questions').select({
    // Selecting the first 20 records in Grid view.
    // You can also create you own view.
    maxRecords: 20,
    view: "Grid view"
}).eachPage(function page(records, fetchNextPage) {
    // This function (`page`) will get called for each page of records.

    records.forEach(function(record) {
        console.log('Retrieved', record.get('Question'));
    });

    // To fetch the next page of records, call `fetchNextPage`.
    // If there are more records, `page` will get called again.
    // If there are no more records, `done` will get called.
    fetchNextPage();

}, function done(err) {
    if (err) { console.error(err); return; }
});

Creating

Creating a single record is quite simple:

base('Questions').create({
  "Question": "In vuejs, which directive is to used to attach event listeners that invoke methods?",
}, function(err, record) {
  if (err) {
    console.error(err);
    return;
  }
  console.log(record.getId());
});

The Airtable javascript library offers also functions to create multiple records, update and delete records.

Gotchas

The API is limited to 5 requests per second... If you exceed this rate, you will receive an error and will need to wait 30 seconds before subsequent requests will succeed.

So it definitely limit the use of Airtable for extensive application. But it can find a place for prototyping or building small application. For instance, at Hawaii Interactive we used it to quickly build a swiss quiz on energy for schoolchildren.

Comments

[raconcilio]

Hi - So do you mean to say that all that needs to happen to have a javascript embed in a website?

Or can you be more specifics about the steps used to integrate the Airtable backend to your website?