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:
Send the Votes to Airtable for Storage
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:
Build the Chart with the Data
We can pass D3.js an array of data and it can build out a chart:
With a little CSS colorization:
We get results!
Airtable Json Export
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
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.
Airtable Js Editor
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
Airtable Js Online
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.
What comes to mind for you when you think about the potential of easy and friendly data storage and a tool like Airtable?