制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）

让我们使用Airtable和Appgyver制作一个基本的Web应用程序。无需编码技能。

我们将使用以下内容建立具有类别的产品目录：

· Airtable：用于构建数据的混合数据库服务（第1部分）

· Appgyver：构建应用程序的无代码平台（第2部分）

两种云服务都是用户友好的，并且有一个慷慨的免费计划。

注意：我与两家公司均无业务关系。但是，欢迎您在此处注册Airtable进行推荐。

1.整理数据1.1。以电子表格格式准备数据

在Airtable中，我们将进行以下组织：

· 每个应用1个基础

· 每个对象（项目类型）有1个表格（表格）

· 每个表中的列数取决于对象属性

· 与每个对象拥有的项目数一样多的记录（行）

· 对象之间的关系也将由列定义

免费计划中，每个基准在Airtable中最多可以有1200条记录。

您可以在下面查看并复制示例数据：

与经典电子表格相比，Airtable的第一个优点是您可以引用其他表中的对象。

为您的产品和类别填充一些随机数据后，您需要：

· 为产品创建产品代码产品名称productImageUrl列

· 创建类别的ID名称说明

· 填写两个表的一些随机数据

· 确保产品代码和类别ID在第一列中

· 在"产品"表中，添加字段类型为"链接到类别的另一条记录"的新列

· 作为产品，只能有一个类别。取消选中允许链接到多个记录

· 在"类别表"中执行相同的操作，这一次必须检查"允许链接到多个记录"

· 添加一个"查阅"列以链接到"产品"表中的"类别名称"

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(1)

1.2。将数据公开为API

Airtable的第二个优点是，它允许以JSON格式公开表，而JSON格式可以被第3个应用程序（例如Appgyver）轻松读取。

可以通过https://airtable.com/api访问API文档。

您可以在URL中检查show API密钥和您的基本ID。这些信息将在以后有用。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(2)

不同的资源（表）使用不同的路由。它们共享相同的基本URL https://api.airtable.com/v0/BASE_ID/RESOURCE_NAME。对于每种资源，我们可以调用不同的方法：

· GET（全部）：列出所有记录

· POST：创建记录

· GET（一个）：检索一条记录

· PUT：修改记录

· 删除：删除记录

发出请求时，所有路由都提供JSON响应主体。

GET（一个），PUT和DELETE需要在URL后面附加一个/ id才能知道要处理的记录。

POST和PUT期望JSON请求正文，因为需要提供更多信息。

让我们看一下Airtable JSON主体格式：

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(3)

它由以下组成：

· 由项目组成的[]之间的记录数组

· 项目是记录数组中用分隔的对象{}

· 每个项目都有一个Airtable id，createdTime和fields属性

· 每个字段都是一个对象{}，由由，

· 每个项目属性都是""中的键值对，并由分隔：

2.构建您的无代码应用程序

现在您可以在Appgyver中构建应用程序了。我们将建立：

· 具有搜索功能的产品列表

· 具有类别选择的创建/编辑产品部分

以下是实际的示例应用程序。您也可以在这里检查。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(4)

2.1。总览

Appgyver的免费计划没有任何限制。

让我们看一下Appgyver界面。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(5)

它的组织如下：

· 带有组件的左侧边栏

· 带有页面，主题，导航，数据的顶部菜单

· 页面视图和变量的切换器

· 具有组件属性和页面布局的右侧栏

· 具有逻辑工作流和组件的页脚部分

您可以通过在搜索栏中输入m3PAwm0d11bRKzbi6X0MQQ从侧边栏组件市场中导入示例项目。

对于我们的项目，该应用程序的"设备宽度"将设置为1024px。但是您可以更改"缩放级别"以获得更好的查看。

2.2。配置数据源

我们将在数据菜单中配置API路由，并添加一个名为Airtable_Products的新数据源REST API直接集成。

为了更快地进行设置，您可以使用代码pV5z-2GzSYHme-Y4f794gA从Market Search添加数据资源。

对于BASE，请输入您的Airtable API中的信息：

· 资源网址：https://api.airtable.com/v0/BASE_ID/Products

· 带有标签和密钥的HTTP标头授权和值承载TOKEN_KEY

忘记所有）：

· 带记录的FillResponse键路径

· 您可以测试以验证您的API路由是否有效。

· 您可以从响应中设置架构，以便以后的数据Airtable_Products公开其属性。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(6)

您可以使用GET（ALL）路由对Airtable_Categories资源执行相同的操作。

对于GET（ONE），PUT和DELETE：

· 相对路径：/ {id}

· URL占位符：标签和密钥withid

是静态的，是可选的，应该为false。

您可以通过复制从GET（ALL）获取的ID进行测试。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(7)

对于POST，不需要其他配置。

2.2。检查数据变量

数据和页面变量已经自动导入。您可以通过切换到变量来检查它们。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(8)

请注意，GET（ALL）和GET（One）公开了两个不同的变量Airtable_products和Airtable_productSingle。

2.3。检查页面布局和组件

组件组织在容器，行和单元格中。拖放组件可在"页面视图"和"页面布局"中使用。当然，您可以根据需要移动，删除和复制组件。

在右上方的边栏中，您有：

· 属性：用于编辑和预览数据的选项

· 样式：用于编辑间距和版式的选项

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(9)

2.4。检查页面，组件和数据逻辑

逻辑定义了运行期间发生的事件和动作。

事件（灰色）包括：

· 页面启动

· 可变的变化

· 点击组件

动作（蓝色）包括：

· 提出数据请求

· 从数据或组件设置变量

· 进行UI交互，例如导航到另一个页面或显示一个弹出窗口

动作必须直接或间接连接到事件才能发生。它们是从Logic的左侧边栏中拖放的。

当您单击框架外部的任何位置时，都可以检查"页面逻辑"。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(10)

在页面加载时，我们发送数据请求以从Airtable中获取产品和类别，然后将它们加载到数据变量中。

让我们检查一下"创建"按钮点击组件的逻辑。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(11)

我们看到，在以下情况下，"创建产品"操作被阻止：

· 产品名称为空[1]

· 产品代码不是数字[2]

我们将IF逻辑组件与以下公式结合使用：

IS_EMPTY（pageVars.productName）[1]

MATCHES_REGEX（pageVars.productCode，" [0–9]"）[2]

IF组件在右侧有两个出口节点：

· 最高节点：如果公式返回true

· 底部节点：如果公式返回false

让我们检查数据变量逻辑的另一个示例。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(12)

无论请求是否成功，Airtable_Products数据资源每5秒都会刷新一次数据。如果请求成功，则数据变量获取其输出。

2.5。建立记录

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(13)

要创建产品，我们需要使用以下方法设置表单容器：

· 连接到页面变量的输入字段，例如productName productCode productImageUrl

· 下拉列表会从Airtable_Categories数据变量中加载标签和值选项。这使用公式：

MAP（Data.Airtable_Categories，{Lable：item.fields.Name，Value：item.id}）

MAP函数将一个数组转换为另一个数组。在这里，我们提取Name和id值，然后将键重命名为label和value以适应下拉语法

数据。是页面中数据变量的前缀。

item表示数组中的当前项目。

.fields是我们的项目属性在Airtable JSON响应中的位置。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(14)

我们已经设置了输入组件，让我们检查发生魔术的位置的创建按钮：

· 使用以下记录属性为数据资源Airtable_Products创建记录操作：

{"Field"：{"ProductCode"：pageVars.productCode，"ProductName"：pageVars.productName，" _ category"：[pageVars.productCategory]，" productImageUrl"：pageVars.productImageUrl}}

pageVars。是您定义的页面变量的前缀。

pageVars.productCategory在[]之间，因为当期望的输入是数组时，它返回一个字符串。

您可以在下面检查Airtable API文档中单个对象的JSON POST请求格式是否正确。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(15)

2.7。更改组件可见性

"创建"表单由"产品"列表中的"新建"按钮控制。点击时：

· 将createDialog设置为true。在容器高级属性可见性中设置此布尔值：

IF（pageVars.createDialog === true，true，false）

眼睛允许在预览期间设置值，从而显示或隐藏容器。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(16)

同样，"关闭"按钮将createDialog设置为false。

editDialog容器具有相同的功能。

2.8。列出记录

为了列出所有元素，我们将：

· 将重复方式设置为Airtable_Products数据变量

· 选择主标签和次标签的子字段产品名称和类别名称

作为公式，语法为current.fields ["产品名称"]和current.fields._categoryName。

[""]用于带有单词间距的对象属性

current是一个前缀，用于指定Repeat with对象

要启用搜索，我们将：

· 将搜索输入值设置为页面变量searchText

· 设置页面变量结果，该结果将Airtable_Products过滤为搜索输入更改时searchText中包含的文本。

SELECT（data.Airtable_Products，CONTAINS（LOWERCASE（item.fields ["ProductName"]），LOWERCASE（pageVars.searchText））））

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(17)

· 完成键入500ms后，必须添加一个Debounce逻辑组件才能开始操作，以防止出现滞后。

· 在项目列表中设置结果重复

· 将结果设置为数据。加载页面上的Airtable_Products可以查看每个产品

2.9。编辑记录

要获得我们的产品列表，请在元素单击上打开详细信息视图，我们将：

· 点击记录时，将页面变量productId设置为current.id

· 将带有pageVars.productId的GET（一个）请求发送到Airtable_Products数据资源

· 将结果获取到数据变量Airtable_productSingle

· 通过将editDialog设置为true来打开编辑详细信息视图

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(18)

然后，我们将详细信息视图连接到数据：

· 将productName productCode productImageUrl设置为其各自的Airtable_productSingle.fields.xxx数据变量。这种数据绑定意味着它既可以检索数据也可以更新数据。

· 在侧面单元格中将productImageUrl显示为图像

· 点击时将页面变量productCategory保存到组件属性valueDropdown字段（选定值）。

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(19)

· 在按钮单击上更新记录，以获取ID为pageVars.productId的Airtable_Products资源，并在下面记录属性：

{"Field"：{""：data.Airtable_ProductSingle.fields ["ProductCode"]，"ProductName"：data.Airtable_ProductSingle.fields ["ProductName"]，" _ category"：[pageVars.productCategory]， " productImageUrl"：data.Airtable_ProductSingle.fields.productImageUrl}}

您可以在下面查看Airtable API文档中单个对象的JSON PUT请求格式是否正确：

制作一个无需安装的应用程序（在60分钟内建立一个无代码应用程序）(20)