airtable-api-guide/index.html at master · kasrak/airtable-api-guide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="airtable.browser.js"></script>
    <style>
    body {
        padding: 20px;
        font: 12pt/15pt sans-serif;
        color: #555;
        max-width: 700px;
    }

    label {
        display: block;
    }

    textarea {
        width: 500px;
        height: 100px;
    }

    pre {
        background: #eee;
        border: 1px solid #ddd;
        padding: 10px;
        font-size: 10pt;
    }

    pre.diff {
        color: #777;
    }

    pre.diff span.add {
        font-weight: bold;
        color: green;
    }

    #artists {
        border: 1px solid #ddd;
        padding: 10px;
        background: #f7f7f7;
    }

    .warning {
        padding: 1px 10px;
        background-color: rgb(255, 255, 178);
        margin: 10px 0;
        border: 1px solid rgb(255, 205, 0);
    }
    </style>
</head>
<body>
    <h1>Airtable API Tutorial</h1>

    <p>
    This page will guide you through using the Airtable Javascript API from
    the browser. The API will use the "Art Gallery Example" base to display
    artists and their biographies.
    </p>

    <p>
    This API is based on the
    <a href="http://github.com/airtable/airtable.js">Airtable node.js library</a>.
    Running in the browser is experimental, so some features may not work.
    <b>Also, using the library in the browser currently exposes your private API key,
    so this is intended for educational purposes only.</b>
    </p>

    <h2>Getting Started</h2>

    <p>
    Create an empty HTML page. Include JQuery and <a href="airtable.browser.js">Airtable.js for browsers</a>.
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://kasrak.com/airtable-api-guide/airtable.browser.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="artists"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
    </p>

    <h2>API Documentation</h2>

    <p>Go to your <a href="https://airtable.com/account">Airtable account page</a>.
    If you don't already have an API key, you will see a "Generate API key"
    link. Click it to generate a new key. If you already have an API key,
    you don't have to do anything.
    </p>

    <p>Now go back to <a href="https://airtable.com">your bases</a> and open the
    "Art Gallery" base. (If you don't have it, click "New Base" and select the
    "Art Gallery" template.)</p>

    <p>To open the API docs, click "Help" in the top right corner, then select "API docs".</p>

    <img src="api-docs-menu.png">

    <p>The API documentation is custom generated based on the tables and fields
    of your base. Enable the "Show API key" and switch to the node.js tab.
    </p>

    <h2>Fetching Artists</h2>

    The following snippet fetches the first three artists and logs them to
    the browser console. You can add it to the <code>body</code> of the page
    or in a separate Javascript file. Make sure to replace the
    <b><code>apiKey</code></b> and <b>base ID</b> below with your own.

    <div class="warning">
    <p>
    Note: Your API key carries the same privileges as your user account, <b>
    so whoever can access the page will have access to all the bases in your
    account.</b>
    </p>

    <p>
    To keep your account secure and prevent unauthorized access,
    use the Airtable API from your server. This guide is for demonstration
    purposes only.
    </p>
    </div>

<pre>
&lt;script&gt;
var Airtable = require('airtable');
var base = new Airtable({ apiKey: <b>'keykHOHLHddJw6MxX'</b> }).base(<b>'appzZUAqomNZC55As'</b>);

base('Artists').select({
    maxRecords: 3,
    view: 'Main View',
}).eachPage(function page(records, fetchNextPage) {
    records.forEach(function(record) {
        console.log('Retrieved ', record.get('Name'));
    });

    fetchNextPage();
}, function done(error) {
    if (error) {
        console.log('An error occured!', error);
    }
});

&lt;/script&gt;
</pre>

    Let's make the artists show up on the page:

<pre class="diff">
<span class="add">&lt;div id="artists"&gt;&lt;/div&gt;</span>
&lt;script&gt;
var Airtable = require('airtable');
var base = new Airtable({ apiKey: 'keykHOHLHddJw6MxX' }).base('appzZUAqomNZC55As');

base('Artists').select({
    maxRecords: 3,
    view: 'Main View',
}).eachPage(function page(records, fetchNextPage) {
    records.forEach(function(record) {
        <span class="remove">console.log('Retrieved ', record.get('Name'));</span>

        <span class="add">var $artistInfo = $('&lt;div&gt;');
        $artistInfo.append($('&lt;h3&gt;').text(record.get('Name')));
        $artistInfo.append($('&lt;div&gt;').text(record.get('Bio')));

        $('#artists').append($artistInfo);
        </span>
    });

    fetchNextPage();
}, function done(error) {
    if (error) {
        console.log('An error occured!', error);
    }
});

&lt;/script&gt;
</pre>

Here's what it'll look like:

    <div id="artists">
    </div>

    <script>
    var Airtable = require('airtable');
    var base = new Airtable({ apiKey: 'keykHOHLHddJw6MxX' }).base('appzZUAqomNZC55As');

    base('Artists').select({
        maxRecords: 3,
        view: 'Main View',
    }).eachPage(function page(records, fetchNextPage) {
        records.forEach(function(record) {
            console.log('Retrieved ', record.get('Name'));

            var $artistInfo = $('<div>');
            $artistInfo.append($('<h3>').text(record.get('Name')));
            $artistInfo.append($('<div>').text(record.get('Bio')));

            $('#artists').append($artistInfo);
        });

        fetchNextPage();
    }, function done(error) {
        if (error) {
            console.log('An error occured!', error);
        }
    });
    </script>


<h2>Next Steps</h2>

<p>Hopefully this helps you get started with the Airtable API. Read the documentation
page for your base to discover all the other things you can do.</p>

<p>If you need some inspiration, here are some ways to extend the simple
artist viewer we just built:
<ul>
    <li>Display each artist's paintings.</li>
    <li>Let the user add more artists to the lists.</li>
</ul>
</p>

</body>
</html>