如何将 Airtable 用作前端开发者

我最近在一个类似黑客马拉松的活动中遇到了 Airtable，当时一位开发人员建议我们用它来存储和使用我们的数据。我当时就非常喜欢它。我第一次有这种感觉：“这就是适合我的数据库，这就是我想要的数据存储系统。”

简而言之…

Airtable 允许你创建电子表格。每个电子表格都是一个数据库。

想象一下构建“项目进度跟踪器”。你会想要存储诸如项目名称、是否完成、项目类别以及一些照片等信息。

这些将在电子表格中形成四列：名称（字符串）、完成（复选框/布尔值）、类别（多选）、照片（文件）。

然后电子表格中的每一行都是数据库中的一个条目。

你现在不仅可以在 Airtable 的漂亮界面中查看这些数据，还可以以编程方式访问它。你获得用于所有 CRUD 操作（创建、读取、更新、删除）的优秀 JSON API。

让我们构建一些东西：一个投票！

我们是前端开发者，所以让我们构建一些功能性的东西。投票是一个我们可以设计和构建的基本示例，并且需要数据库才能变得有用。Airtable 可以提供帮助！

如何构建一个表单，让你投票选择最喜欢的表情符号呢？

<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>

将投票发送到 Airtable 进行存储

当用户提交我们的表单时，让我们在数据库（Airtable 电子表格）中创建一个新条目。让我们通过 Ajax，直接通过 JavaScript 将数据 POST 到 Airtable。我们将在此处使用 Axios，因为它是一个不错的无依赖项 Ajax 库。

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
    }
  });

});

从 Airtable 获取结果

现在我们想要将投票结果显示为图表。SVG 非常适合此目的。让我们使用 D3.js 库来帮助我们以编程方式创建图表。我们甚至可以只让它构建一些 <div>，因为图表是一些简单的矩形，但是使用 D3 为未来的花哨功能打开了大门。

让我们创建一个函数，我们可以调用它来获取数据并构建图表

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"]]++;
      }); 
}

使用数据构建图表

我们可以将一个数据数组传递给 D3.js，它可以构建一个图表

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; 
    });
}

通过一点点 CSS 着色

.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;
}

我们获得了结果！

实时演示

在这个实时演示中，我们将上面编写的函数串联在一起，使其协同工作

查看 CodePen 上 Chris Coyier ( @chriscoyier ) 的 Airtable 表情符号投票 。

关于 API 需要知道的事情

密钥保密

上面的演示完全是前端！我非常喜欢这一点，但你应该知道，它公开了此数据库的 API 密钥。对于任何重要的公开事物，你都不希望这样做，但对于内部事物来说，这可能没问题。

为了保护你的密钥，你应该从后端进行 API 调用。这种操作通常被称为“API 代理”或“API 包装器”。你会编写一些简单的代码，在那里你向它发送 Ajax 请求，而它向 API 发送请求。

幸运的是，Airtable 提供了一个供你查看的示例 API 代理（使用 Ruby 编写）。这是一个你可以查看的 PHP 示例。

文档很棒

它们会显示与你的数据库相关的 API 文档！因此，示例 URL 和参数是你实际使用的真实参数。

我们可能可以通过尝试 filterByFormula API 参数并将它告知返回与某个表情符号匹配的所有记录并检查计数，而不是自己计数，从而使演示更有效率。

每秒 5 个请求

Airtable 并不是真正用于大型生产高性能数据存储。我相信这并不奇怪。Airtable 更适合你和你的团队，而不是适合你的创业公司的数据存储。

Airtable 还为你提供表单

在我们的演示中，我们创建了自己的表单。当你需要进行完全自定义的操作时，这是有用的，但我们不必这样做。Airtable 允许你创建数据电子表格的不同“视图”，包括“表单”视图。

你可以根据自己的喜好自定义表单并向人们发送链接，或者直接将表单嵌入到自己的网站中。没错！表单构建器非常适合收集结构化数据！

如果你正在构建的内容是与日期相关的，你还可以构建日历视图以查看和以这种方式与数据进行交互。

尽情构建吧

当你想到简单友好数据存储以及像 Airtable 这样的工具的潜力时，你会想到什么？