在构建 Web 应用程序时,开发人员会花费大量时间在后端架构和构建自己的数据库上。花大量时间思考数据库以及如何构建它的情况并不少见,因为最终,这是确保存储的数据易于检索的原因。这是一个耗时的过程,尤其是当您必须对数据库进行更改并且您的数据模型不是很灵活时。好消息是,有很多工具可以让您轻松构建 Web 应用程序,而无需在后端花费大量时间。其中一个工具是 Airtable,它是由设计师为设计师和开发人员创建的数据库。 Airtable 是一个数据库,您可以通过定义自己的结构来自行构建。

使用 Appsmith,可以在几分钟内在 Airtable 数据库上创建功能齐全的自定义前端。大量预构建的 UI 组件(即小部件)可用于帮助您构建美观的应用程序。使用 Appsmith 连接数据源需要几分钟,您可以在您选择的数据库之上快速构建工具。

在这篇博客中,我将教你如何构建一个可以连接到 Airtable 作为数据源的前端。

在 Appsmith 上连接 Airtable

在 Appsmith 上,与任何数据源(包括 Airtable)建立连接非常简单。我们需要建立与端点、数据库名称和用户凭据的连接。考虑到这一点,让我们开始吧。

• 在Appsmith上创建一个新帐户(它是免费的!),如果您是现有用户,请登录到您的 Appsmith 帐户。

• 在您首选组织下的仪表板下创建一个新应用程序。

• 在您的 Appsmith 应用程序上,单击 Page1 下左侧导航栏上 Datasources 旁边的+图标

• 接下来,点击 Now,导航到 Create New 选项卡并选择 Airtable 数据源;您将看到以下屏幕截图:

• 所有这些细节都可以在Airtable的设置下找到。

• 通过双击现有的数据源将数据源重命名为 Airtable CRUD。

• 接下来,点击屏幕右下方的Test按钮。这将帮助您了解您的配置是否有效。如果 Appsmith 返回成功消息,请点击“保存”按钮在 Appsmith 和 Airtable 之间建立安全连接。

这是配置的样子:

在Airtable上添加种子数据

基本配置已经完成,所以现在,我们现在将使用已经加载到 Airtable 模板上的种子数据。

例如,我们将在 Appsmith 上构建一个 Bug Tracker 管理面板。请注意,此应用程序可以通过不同方式进行扩展,您可以将其连接到 GitHub/Bit Bucket 以使其更加健壮。我们从 Bug Tracker 模板中复制了一些数据,以展示 Appsmith 上的不同功能。

https://www.airtable.com/templates/featured/expOzMycWirMsUOTL/bug-tracke

这是复制 SEED 数据后基础的外观。

现在,让我们使用表格来构建我们的 CRUD APP!

与 Appsmith 在 Airtable 上的 CRUD

实现读操作

首先,让我们从数据库中读取数据并将其显示在一个漂亮的表格小部件上。请按照以下步骤操作:

• 单击数据源旁边的+图标,然后从 Airtable CRUD 数据源中单击 create New +。

• 将查询重命名为**getData**

• 现在将查询设置为列出记录

添加基本 ID 和表名(在我们的例子中,它是表 1)并点击 RUN。

注意:您可以从 URL 或设置页面找到 Base ID。

• 这个简单的查询返回 Airtable 库中存在的所有错误详细信息。点击 RUN 按钮查看所有结果。

我们现在有了查询;让我们将它绑定到表格小部件上;为此,请按照以下步骤操作:

• 单击侧边栏小部件旁边的+图标,搜索表格小部件,然后将其拖放到画布上。

• 您可以通过属性窗格对任何小部件进行任何配置。单击画布上的表格小部件;您将看到属性窗格停靠在右侧的侧边栏上。现在,在 Table Data 属性下,使用 mustache 语法来绑定查询:

{{
getData.data.records.map(item => Object.assign({id: item.id}, item.fields))
}}

有了这个,我们应该看到表格上显示的所有数据。可以在属性窗格下配置和重新组织列名称。

注意:我们添加了一些 JS 来扁平化来自 Airtable API 的数据。

实现创建操作

要在 Airtable 上添加创建操作,让我们制作 UI。

• 将按钮小部件拖放到画布上。打开其属性窗格,将 onClick 属性设置为Open a New Modal,并选择Create New.

• 这将打开一个新的模态;让我们拖放一些小部件来创建一个表单,我们可以使用该表单将新的 Bugs 添加到我们的数据库中。

在这里,我们有四个输入要添加到我们的错误中。我们可以通过选择相应的属性窗格来配置默认值、标签和占位符。现在,让我们编写查询以在 Airtable 上创建一个新错误。

请按照以下步骤操作:

• 单击数据源旁边的+图标,然后从 Airtable CRUD 数据源中选择 Create New +

• 将查询重命名为addData

• 将命令设置为Create Record

• 从上一个查询中复制 Base ID 和 Table Name。

• 现在在记录下,粘贴以下内容:

[{
"fields": {
"Name":"{{Input1.text}}",
"Notes":"{{Input2.text}}",
"Status":"{{Select1.selectedOptionValue}}",
"Description":"{{RichTextEditor1.text}}",
}
}]

在这里,我们有一个插入查询,它从我们创建的表单小部件中收集所有数据。请注意,我们使用 mustache 语法将小部件中的数据绑定到查询主体上。

最后,我们需要配置提交按钮;为此,返回模态并设置按钮的onClick属性以执行查询并在 events 属性下选择addData:

实现更新操作

更新操作与创建操作非常相似。首先,让我们通过单击 columns 属性下的ADD A NEW COLUMN在表格上创建一个新的自定义列来构建 UI。

现在,将该列重命名为 Edit Bug,然后单击它旁边的 cog 图标,以配置列设置。在此之下,我们将看到 column-type 属性设置为 Button 类型。一个模态应该打开必要的字段以在单击时更新项目。

现在,复制粘贴 Modal1,将其重命名为 Modal2,并设置 Edit Bug 按钮的 onClick 属性以打开 Modal2。这里,在表单中,我们可以设置默认值来显示现有信息;要显示它,请使用表格小部件中的 selectedRow 属性。

让我们编写编辑查询:

• 单击数据源旁边的+图标,然后从 Airtable CRUD 数据源中选择 Create New +

• 将查询重命名为**editData**

• 设置命令为Update Records

• 从上一个查询中复制 Base ID 和 Table Name。

• 将 Records 字段更新为以下内容:

[
{
"fields": {
"Name":"{{Input1Copy.text}}",
"Notes":"{{Input2Copy.text}}",
"Status":"{{Select1Copy.selectedOptionValue}}",
"Description":"{{RichTextEditor1Copy.text}}",
}}
]

在这里,我们有一个编辑查询,它从 Modal2 上的表单小部件收集所有数据。请注意,我们使用 mustache 语法将小部件中的数据绑定到查询主体上。

我们现在需要配置提交按钮;为此,返回 Modal2 并设置按钮的 onClick 属性以执行查询并在 events 属性下选择_editData_:

实现删除操作

使用 Table 的 selectedRow 属性,删除操作非常简单;在深入研究之前,让我们在表格上创建一个新列并将其设置为按钮。为了这:

• 通过单击 columns 属性下的Add a New Column在表格上创建一个新的自定义列。

• 现在,将此列重命名为 Close Bug,然后单击它旁边的 cog 图标,以配置列设置。在此之下,我们将看到列类型属性设置为按钮类型。

• 单击数据源旁边的+图标,然后从 Airtable CRUD 数据源中选择 Create New +

• 将查询重命名为deleteData

• 设置删除记录的命令

• 从上一个查询中复制 Base ID 和 Table Name。

• 将记录 ID 更新为以下内容:

{{Table1.selectedRow.id}}

设置 Close Bug 按钮的 onClick 属性以运行 deleteData 查询。

通过配置这四个操作,您将能够读取和分析数据库中的信息、编辑数据、添加或删除信息以及更新记录。

祖兹 100097 * *

如果您有兴趣使用我们网站上未列出的数据库作为集成,请通过在Github上提出 PR 告知我们,我们将尽最大努力尽早将其收录。

在Discord上加入我们不断发展的社区,并在Youtube和Twitter上关注我们以保持最新状态。