How To Use Airtable as a Front End Developer

I came across Airtable at a recent hackathon-esque event, when a fellow developer suggested we use it as a way to store and use our data. I was super into it. For the first time, I felt like: “This is a database for me. This is what I want out of a data storage system.”

In a nutshell…

Airtable lets you build spreadsheets. Each spreadsheet is a database.

Imagine building “Project Progress Tracker”. You’d want to store things like the name of the project, whether it’s complete or not, the category of project, and some photos.

Those would be four columns in the spreadsheet: name (string), complete (checkbox/boolean), category (multi-select), photos (files).

Then each row in the spreadsheet is an entry in the database.

You can now not only view this data in Airtable’s nice UI, but programmatically access it. You get great JSON API’s for all the CRUD actions: Create, Read, Update, Delete.

Let’s Build Something: A Poll!

We’re front end developers, so let’s build something functional. A poll is a basic example of something we can design and build, and needs a database to be useful. Airtable can help!

How about a form where you vote for a favorite emoji:

<form action="#0" id="voting-form" class="voting-form">
  <h1>Which of these emojis is your favorite?</h1>
  <div>
    <select name="emoji_choice" id="emoji_choice">
      <option value="&#x1f46f;">&#x1f46f;</option>
      <option value="&#x1f351;">&#x1f351;</option>
      <option value="&#x1f4a5;">&#x1f4a5;</option>
      <option value="&#x1f355;">&#x1f355;</option>
      <option value="&#x2620;&#xfe0f;">&#x2620;&#xfe0f;</option>
    </select>
  </div>
  <div>
    <input type="submit" value="Vote">
  </div>
</form>

Send the Votes to Airtable for Storage

When the user submits our form, let’s create a new entry in our database (Airtable spreadsheet). Let’s POST the data, directly through JavaScript, via Ajax. We’ll use Axios here, since it’s a nice dependancy-free Ajax library.

var form = document.querySelector("#voting-form");
var select = document.querySelector("#emoji_choice");

// When the form is submitted...
form.addEventListener("submit", function(event) {
  event.preventDefault();

  // POST the data
  axios.post(airtable_write_endpoint, {
    "fields": {
      "Emoji Choice": select.options[select.selectedIndex].value
    }
  });

});

Get the Results from Airtable

Now we want to display the results of the poll as a chart. SVG is great for that. Let’s use the D3.js library to help us programatically create the chart. We could even just have it build some <div>s for this, since the chart is some straightforward rectangles, but using D3 opens up the door for future fanciness.

Let’s create a function we can call to get the data and build the chart:

function getData() {
  // zero out data
  pollData = {
    "👯": 0,
    "🍑": 0,
    "💥": 0, 
    "🍕": 0, 
    "☠️": 0
  };
  
  // GET the data
  axios
    .get(airtable_read_endpoint)
    .then(function(result) {
      result.data.records.forEach(function(element, index) {
        pollData[element.fields["Emoji Choice"]]++;
      }); 
}

Build the Chart with the Data

We can pass D3.js an array of data and it can build out a chart:

function buildChart(data) {  
  var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 400]);
  
  d3
    .select(".chart")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width", function(d) { 
      return x(d) + "px"; 
    })
    .text(function(d, i) {
      return emojis[i] + " " + d; 
    });
}

With a little CSS colorization:

.chart {
  padding: 20px;
}
.chart div {
  font-size: 20px;
  text-align: right;
  padding: 5px;
  margin: 0 0 3px 0;
  color: white;
}
.chart div:nth-of-type(1) {
  background-color: #FDBE1A;
}
.chart div:nth-of-type(2) {
  background-color: #F2B6A0;
}
.chart div:nth-of-type(3) {
  background-color: #FFD85A;
}
.chart div:nth-of-type(4) {
  background-color: #830C07;
}
.chart div:nth-of-type(5) {
  background-color: #999999;
}

We get results!

Live Demo

In this live demo, we string the functions we wrote above together into working together:

See the Pen Airtable Emoji Poll by Chris Coyier (@chriscoyier) on CodePen.

Things To Know About the API

Key Secrecy

The demo above is entirely front end! I love that, but you should know, that exposes the API key for this database. You wouldn’t want that for anything public of consequence, but for an internal thing it might be fine.

To keep your key secret, you’d make the API calls from the backend. This kind of thing is usually referred to as an “API proxy” or “API wrapper”. You’d write some simple code where you Ajax to that and it makes the requests to the API.

As luck would have it, Airtable has an example API proxy (in Ruby) available for you to check out. Here’s another example in PHP you could look at.

The Docs are Awesome

They show the API docs as they relate to your databases! So the example URL’s and parameters are the real ones that you use.

We maybe could have made the demo more efficient by trying out the filterByFormula API parameter and telling it to return us all records that match a certain emoji and checking the count, rather than counting ourselves.

5 Requests per Second

Airtable isn’t really for mega production high power data storage. I’m sure that’s no surprise. Airtable is for you and your team moreso than a data store for your startup.

Airtable Also Gives You Forms

In our demo we created our own form. That’s useful when you need to do totally custom things, but we didn’t have to. Airtable allows you to create different “views” of your data spreadsheets, including a “form” view.

You can customize the form to your liking and send people links to it, or, embed the form right on your own site. Yeah! A form builder ideal for collecting structured data!

If what you’re building is fairly date-specific, you can also build calendar views to view and interact with data that way.

Build Away

What comes to mind for you when you think about the potential of easy and friendly data storage and a tool like Airtable?