Getting Started with the Airtable API

Airtable is an easy way to get a database up and running for a side project or to quickly prototype an idea for app. I have used it to manage projects, expenses, client contacts and more.

I have recently decided to delve into its API and build an app to provide a way for models to edit their information. Since Airtable provides a Node.js client, I’m going to build the app using ExpressJs a minimalist and modular framework built on top of NodeJS. Let’s get started.

What you are going to need

• Node.js
• Yarn or Node Package Manager (NPM)
• Express

Express is a minimalist web framework for Node.js and gives us a lot of control about the tools we use to build our apps while providing a solid foundation.

To get our app scaffolded very quickly, we are going to use Express’ very handy application generator tool.

First we need to install the Express Generator package globally on our system. We do this by running the following command in our terminal

yarn add express-generator -g

After the generator package is installed we can now navigate to our projects root folder in our terminal and create an app skeleton with the following command

express --view=pug casting-call

The —view=pug is for specifying the view engine, the language your templates will be written in. I like to use Pug so I’m specifying that here. Casting Call is the name of the app.

Now that we have our app, we can change directory into the folder and install the dependencies

yarn install

We now have our app up and running and can now run yarn start to start the server and view in the browser. However, before we do that, let’s install the Airtable javascript client.

In the root of our project run the command yarn install airtable.

Configuring Airtable

At this point, you should have an Airtable account and a base. Visit the base and from the top right hand side click Help and then API documentation. You will be able to see code examples for your selected base with your API key and Base ID.

To keep our API key secure, we will be saving these values to .env file. This file will not be included in your Git repository but manually uploaded to your production server.

I’m going to use the Model – View – Controller (MVC) pattern for our app, so first we will need to create a controller folder and create a controller for our base. I usually name these after the base table name so my filename is modelController.js.

In modelController.js we are going to require the Airtable client.

const Airtable = require('airtable');

const base = new Airtable({
  apiKey: process.env.AIRTABLE_API_KEY,
}).base(process.env.AIRTABLE_BASE_ID);
const table = base('Models');
const view = 'Grid view';

Displaying records

Now that we can connect to the API from our express app, let us try to display a list of 10 records.

First we need to set up the route (url) that users will visit to see our list of records, in my example Models. In our index.js file where we have a list of all our routes we are going to add the following:

<code>router.get('/models', modelController.getModels);</code>

Then we have to set up a controller where we will be querying the database, getting the data and then sending that data to the view (template) which will display the records. In our controller, we do the following:

table.select({
    view: view,
    pageSize: 10
}).firstPage(function(err, records) {
    if (err) { console.error(err); return; }
    var models = records.map( record => {
          return {
            _id: record.getId(),
            name: record.get('Full Name'),
            photo: record.get('Headshot')
          }
      });

      res.render('models', { title: 'Models', models });
});

As you can see, I’m taking the base code directly from the API documentation and modifying to my requirements. We only want the first 10 records so I’m using the firstpage method and setting the pageSize option to 10. I’m saving the returned data to a variable, models, which I’m going to pass to the view using Express’ render method on the response.

We then need to create a view or template to display the records. I’m using Pug for my templates. I have created a simple pug file to display 10 records in a grid.

extends ../layouts/base
include ../mixins/_modelCard

block content
  .container
    h1.title= title
    .models
      each model in models
        +modelCard(model)

We can then use the models variable passed to view from the controller and loop over the data to create our html and display the records.

And that’s it, we have successfully implemented Airtable in our Express application. Be sure to check out the Airtable API for more ways to interact with your Airtable data. I will also be publishing more tutorials on using Airtable’s API so stay tuned.