A basic introduction to the Airtable API
Several people have asked me to do a tutorial showing you how to get Airtable data on your website. Airtable provides a basic REST API which can be accessed in many different ways by just about any web programming language (Ruby, PHP, Javascript, etc.) but for this example I’m going to show you the simplest way I know of: using Vue.js.
Why Vue?
There are several reasons why I’m using Vue.js for this tutorial:
- Vue is extremely powerful (we use it to build the front end of almost all of our applications at Row & Table).
- Vue is really lightweight. (20kb)
- Vue usually works well with an existing site.
- Vue is fairly straightforward, and maybe the easiest method to explain.
Let’s get started…
We’ll start with a totally empty HTML page:
<html>
<head>
</head>
<body>
</body>
</html>To include vue, just add this script tag near the end of the body tag:
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</body>What else will we need?
The other things we will need are:
- An Airtable base (we are using this example fast food menu base.)
- An Airtable API key.
- The app id for the example base.
- Axios (a library for integrating rest apis in javascript)
The Example Base:
Our example base is a simple menu for a fast food restaurant. It lists the menu items, a description, a photo, a price and a category.
You can copy this base to your account here.
The API Key:
To get an Airtable API Key, simply click on your account circle (in the top right corner) and choose account.
Then select either the “Generate API Key” button to generate an API key or copy the API key that it shows and put it someplace safe. (You can always retrieve it here later.)
One important note about API keys: Using this method, you could potentially expose your API key to a hacker who could then add information to your base. One way around this is to create a new Airtable user and share the base with that user giving only read only access. Then you would just use the API key for that user and have nothing to fear. Eventually, you are going to want to do this part using a server side language like PHP to obscure the API credentials — that is outside of the scope of this tutorial.
The bases App ID:
The next thing that you will need is the App ID for your base. Getting this isn’t straightforward, but if you follow these steps you’ll be able to find it easily.
First, get to the API docs for your base.
To get to the API docs, simply open your base then click on the little question mark in the top right corner and select “API documentation.”
Second, copy this part of the URL from the API docs.
Your APP ID is the long string immediately after “airtable.com/” and before “/api/” in the url of this page. It always starts with the letters “app.”
Note on API docs: While you are here, you will want to familiarize yourself with these docs. They are very helpful and customized for each base. You’ll find yourself coming back here time and again as you integrate Airtable.
Axios
Axios is an HTTP client for javascript that makes it easy to use Rest APIs. You can read about it here.
To use it in our project, we simply add another script tag (after the one calling Vue).
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
</body>Let’s Do This!
Now that we have all of our dependencies in place, we can start with the markup and the javascript that will make this work.
The Markup
Inside of the body, before the script tags, we are going to place this markup:
<div id="app">
<h1>Menu Items</h1>
<ul>
<li v-for="item in items">
<h3>{{ item['fields']['Item'] }}</h3>
<p>{{ item['fields']['Description'] }}</p>
<p><strong>Price: </strong>${{ item['fields']['Price'] }}</p>
<p><strong>Category: </strong>{{ item['fields']['Category'] }}</p>
<img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
</li>
</ul>
</div><!--app-->A few notes about this:
- The wrapping div with the ID of app is necessary for Vue to work. Basically we are going to tell vue to focus on only the contents of this div. It doesn’t have to have that ID, you can give it an ID of “cubanSandwich” if you want, but “app” is the most common ID you will see in vue documentation and examples so we will stick with it here.
- The `v-for` on the `<li>` tag tells vue to loop over an array of data from Airtable and create a list item for each object in the data. It is similar to the `for` functions you will find in other templating languages like liquid or twig.
- Individual data items you want to include use the mustache like syntax `{{ item }}.`
- The Airtable API is going to return JSON that looks like this:
"records": [
{
"id": "recznbjZKcBDPyItk",
"fields": {
"Item": "Hooter",
"Description": "A huge half-pound burger named after our founder Gene Hoots.",
"Photo": [
{
"id": "attijQ2mzjyhVHAmX",
"url": "https://dl.airtable.com/zny1fL8DQiOaaBG2sYPn_7818.jpg",
"filename": "7818.jpg",
"size": 178488,
"type": "image/jpeg",
"thumbnails": {
...- Because of that JSON structure, we need to get to the data inside of the object and we do that like this {{ item[‘fields’][‘Item’] }}`
- Getting data inside of a tag (as a property) is a little different. To do that you have to use a colon before the property. So instead of `src` you would use `:src`, `href` would become `:href`, etc..
- The `:v-if` code checks if there is actually a photo there and will only show the `<img>` if that object exists in the data.
The javascript
Finally, to make this work, you need to add some javascript to actually tell Vue to do something. Here is the script tag we add just before the aclosing body tag:
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items: []
},
mounted: function(){
this.loadItems();
},
methods: {
loadItems: function(){
// Init variables
var self = this
var app_id = "replaceME";
var app_key = "replaceME";
this.items = []axios.get(
"https://api.airtable.com/v0/"+app_id+"/Menu?view=Grid%20view",
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records
}).catch(function(error){
console.log(error)
})
}
}
})
</script>
What this script does is:
- Instantiate a Vue instance and tell it to work inside of the tag with the ID of “app.”
- Creates a function called `loadItems` that uses axios to make the call to the Airtable API and sets the response to the `items` object.
- Tells vue to run the `loadItems` function when Vue is mounted and to include the items object in the data you can work with.
Putting it all together
<html>
<head>
<title>Menu Items</title>
</head>
<body><div id="app">
<h1>Menu Items</h1>
<ul>
<li v-for="item in items">
<h3>{{ item['fields']['Item'] }}</h3>
<p>{{ item['fields']['Description'] }}</p>
<p><strong>Price: </strong>${{ item['fields']['Price'] }}</p>
<p><strong>Category: </strong>{{ item['fields']['Category'] }}</p>
<img :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
</li>
</ul>
</div><!--app-->
<!-- Include Dependancy Scripts -->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script><script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items: []
},
mounted: function(){
this.loadItems();
},
methods: {
loadItems: function(){
// Init variables
var self = this
var app_id = "appsqoq2iqIoib3r9";
var app_key = "keyIyJzQotiRwef4b";
this.items = []axios.get(
"https://api.airtable.com/v0/"+app_id+"/Menu?view=Grid%20view",
{
headers: { Authorization: "Bearer "+app_key }
}
).then(function(response){
self.items = response.data.records
}).catch(function(error){
console.log(error)
})
}
}
})
</script>
</body>
</html>
If you were to open that in a browser, you’d see this:
I purposely put zero styles in the page to keep it simple. But you could easily turn this into something like this with just a little CSS:
<style>
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
li {
width: 250px;
background: #e6e6e6;
border-radius: 15px;
padding: 15px;
text-align: center;
margin: 50px;
}
</style>It will look like this:
Conclusion
This is a very simple example, but it is the basis of almost all of the Airtable work that we do at Row & Table. It’s amazing how many useful things you can make with just the combination of Vue and an Airtable base, and it’s not too much of a huge step from here to making full scale applications.
