N8n-快速产品开发-全-

N8n 快速产品开发（全）

原文：zh.annas-archive.org/md5/e9b8bd7432b0b4747a2e1b35e856add2

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

n8n使用户能够连接不同的系统和云服务，而无需昂贵的开发者或技术技能。它允许你减少开发新产品所需的时间，帮助你比组建一个完整的开发团队更快地将产品推向市场。

与n8n一起工作的开发者将能够通过这本构建低代码应用的实用指南将他们的知识付诸实践。本书采用动手实践的方法，以及相关的实施方法，将使你迅速上手并变得高效。

你将从了解n8n在你的业务技术栈中的位置以及它如何提供降低成本、提高效率和收入的机会开始。稍后，你将识别出可以在工作环境中利用n8n的连接性和自动化功能的机会，并逐步构建一个基于n8n的工具集，这将立即对你的业务运营的底线产生积极影响。

在本书结束时，你将能够识别出在现实世界中产生收入、提高效率和构建利用这些机会的工具的机会。

本书面向的对象

本书面向的是对JavaScript编程语言和Web概念（如API和Webhook）有基本了解的Web开发者和低代码爱好者。本书假设读者对JavaScript编程有入门级知识。

本书涵盖的内容

第1章，无代码、n8n和Bubble简介，你将了解无代码以及为什么它对商业和技术变得越来越重要。你还将熟悉n8n，一个无代码自动化工具，以及Bubble，一个无代码开发平台。

第2章，使用编辑器UI创建工作流，本章教你如何使用n8n的编辑器UI。你还将了解n8n中不同类型的节点以及如何使用它们。然后，你将学习关于工作流的内容，处理动态数据，并最终在n8n中创建你的第一个工作流。

第3章，深入n8n的核心节点和数据，你将学习如何使用n8n的数据结构来操纵和转换工作流中的数据，并在你的低代码工作流中使用JavaScript来解锁自定义功能。你将使用HTTP请求节点在你的工作流中调用REST API。本章还将涵盖如何使用Webhook节点处理实时事件以及如何根据这些数据触发工作流。你将在n8n中处理数组和JSON对象，了解何时使用何种数据格式，并在你的工作流中转换数据。

第4章，通过实践学习：构建两个n8n应用，展示了如何将前几章的概念结合起来，并使用它们来构建多个项目。其中一些项目将加强你之前学到的概念，而其他项目将引入一些新想法。这将帮助你了解你可以使用n8n构建的产品类型。最后，你将学习如何分享和发现新的工作流程，以及如何参与n8n的活跃社区。

第5章，构建你的第一个API端点，将指导你创建API端点的蓝图，以便在构建API时摩擦最小；你还将配置Webhook节点，使其能够处理发送到API的请求并对其进行回复。你将在n8n中基于你之前创建的蓝图构建API端点，并通过使用Webhook节点中可用的不同身份验证方法来保护你的API端点。稍后，你还将测试你的API，以确保你实现的所有功能都按预期工作。

第6章，用无代码数据库为你的API提供动力，展示了如何使用无代码数据库进行数据存储。你将了解无代码数据库、为你的项目选择数据库，以及如何向Airtable读写数据。你还将了解在处理这些数据库时的一些最佳实践。本章涵盖的概念将帮助你使用数据存储来存储用户生成数据并构建完整的产品。

第7章，在工作流程中转换你的数据，探讨了如何在工作流程中操作数据，以便你创建的API可以以有用的格式返回数据。你还将了解在工作流程之间共享数据、处理数组和JSON对象、合并数据集以及执行分析和计算。

第8章，在n8n中利用Bubble API*，探讨了如何实现Bubble和n8n之间的通信，使用数据API访问Bubble的数据，使用Bubble的工作流程并通过工作流程API与之交互，以及在n8n中接收来自Bubble的事件和数据。

第9章，构建应用程序的用户界面，深入探讨了如何使用Bubble图形用户界面设计响应式应用程序，以及应用程序的外观和感觉如何改变用户体验。你将了解底层的数据结构以及如何指导用户将适当的数据输入到数据结构中。你将发现如何识别应用程序和工作流程中的错误，并主动处理如何向用户展示错误。最后，你将设计一个日志系统来捕获事件和错误，并分析日志中捕获的数据以改进应用程序。

第10章，我们才刚刚开始，在这里你可以看到在如此短的时间内你取得了多么大的进步！在本章的最后，你将回顾你在本书中学到的内容，并获得一些帮助来寻找和启动下一个n8n项目！

为了充分利用本书

根据你目前使用的版本，你可能注意到屏幕上的内容可能看起来与书中略有不同。由于我们接近本书的结尾，n8n更新了他们的用户界面，这就是为什么这里的示例与书中不同。话虽如此，所有的脚本都继续按照书中的描述完全一样地工作，并且应该对你来说工作得很好。

如果你使用的是本书的数字版，我们建议你亲自输入代码或从本书的GitHub仓库（下一节中有一个链接）访问代码。这样做将帮助你避免与代码复制和粘贴相关的任何潜在错误。

下载示例代码文件

你可以从GitHub下载本书的示例代码文件，网址为https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n。如果代码有更新，它将在GitHub仓库中更新。

我们还提供了其他代码包，这些代码包来自我们丰富的书籍和视频目录，可在https://github.com/PacktPublishing/找到。查看它们吧！

下载彩色图像

我们还提供了一个包含本书中使用的截图和图表的彩色图像的PDF文件。你可以从这里下载：

https://static.packt-cdn.com/downloads/9781801817363_ColorImages.pdf

使用的约定

本书使用了多种文本约定。

文本中的代码：表示文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟URL、用户输入和Twitter昵称。以下是一个示例：“现在，转到你的机器人并输入/pokemon ditto。”

代码块设置如下：

<html> <body> <h1>From n8n with love  </h1> <b>Host:</b> {{$json["headers"]["host"]}} </br> <b>User Agent:</b> {{$json["headers"]["user-agent"]}} </body> </html>

任何命令行输入或输出都写作如下：

npm install pm2@latest -g

粗体：表示新术语、重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词以粗体显示。以下是一个示例：“接下来，我们有执行选项卡，它打开一个模态（弹出窗口），您可以在其中查看您不同工作流程的执行情况。”

提示或重要注意事项

看起来像这样。

联系

读者反馈始终欢迎。

总体反馈：如果您对本书的任何方面有任何疑问，请通过电子邮件发送至customercare@packtpub.com，并在邮件主题中提及书名。

勘误表：尽管我们已经尽一切努力确保内容的准确性，但错误仍然可能发生。如果您在这本书中发现了错误，我们将不胜感激，如果您能向我们报告这一点。请访问www.packtpub.com/support/errata并填写表格。

盗版：如果您在互联网上发现任何形式的我们作品的非法副本，如果您能提供位置地址或网站名称，我们将不胜感激。请通过copyright@packt.com与我们联系，并提供材料的链接。

如果您有兴趣成为作者：如果您在某个领域有专业知识，并且有兴趣撰写或为书籍做出贡献，请访问authors.packtpub.com。

分享您的想法

一旦您阅读了《使用n8n进行快速产品开发》，我们很乐意听到您的想法！请点击此处直接访问此书的亚马逊评论页面并分享您的反馈。

您的评论对我们和科技社区都至关重要，并将帮助我们确保我们提供高质量的内容。

第一章：第1节 – 工具包简介

在本节中，您将了解低代码空间，安装 n8n，学习 n8n 的工作原理，并为您的特定用例构建工作流程。

在本节中，包含以下章节：

第一章，无代码、n8n 和 Bubble 简介
第二章，使用编辑器 UI 创建工作流程
第三章，深入 n8n 的核心节点和数据
第四章，实践学习：构建两个 n8n 应用程序

第二章：第一章：无代码、n8n和Bubble简介

在科技行业中，一个运动正在缓慢地形成。这个运动看到普通计算机用户正在使用抽象计算机代码复杂性的工具开发数字解决方案和集成。这些工具统称为无代码工具，赋予了那些以前从未能够构建解决方案的人权力。

到本章结束时，你将了解无代码及其为什么对企业和技术变得重要。你还将熟悉n8n，一个无代码自动化工具，以及Bubble，一个无代码开发平台。

本章将涵盖以下主要主题：

什么是无代码？
为什么无代码很重要？
n8n简介
人们如何使用n8n解决问题？
Bubble简介

技术要求

对于本章，你需要以下要求：

运行基于Debian的Linux发行版（如Ubuntu或Raspberry Pi OS）的计算机
安装n8n所需的互联网访问

什么是无代码？

在过去半个世纪中，软件彻底改变了我们的工作和生活方式。在短短半个世纪里，原本昂贵且庞大的系统，仅限于科学和学术界，已经演变成为像厨房水槽一样无处不在，而且通常更加经济实惠。我们现在可以像与邻居在后院谈话一样轻松地与地球上另一边的人合作。

这些系统通过自动化复杂任务和一致地处理数据，已经改变了现代社会。我们不再需要手写信件，贴上邮票，然后邮寄到全国各地，几天后才能收到。我们编写电子邮件。多亏了过去几十年部署的基础设施系统和自动化，这些信息在几秒钟内就能到达。

但当你想要做一些独特或特定于你环境的事情时会发生什么？如果你要做一些小众的事情呢？当没有适合那个功能的app时，你该怎么办？

从历史上看，你会学习一种编程语言，并编写一个脚本来执行该任务。不幸的是，对于许多普通用户来说，这超出了他们的承受范围。每天节省几分钟的想法，并不觉得是一个有利的投资回报。

另一个选择是雇佣一个软件开发者来构建应用程序。这个选择听起来很合理。但是，考虑到美国软件工程师的平均年薪为$110,000 (https://www.indeed.com/career/software-engineer/salaries)，这可能是一个成本高昂且回报率低的选择。

那么，这让我们处于什么位置呢？你会放弃项目，认为节省的成本或努力不值得吗？以前，这种困境可能就是结果，但最近出现了一个新的选择。正是在这一点上，无代码进入了画面。

普通人无需学习新的编程语言，就可以使用无代码工具创建应用程序和服务。这些工具通常是基于网络的，学习起来直观，且几乎不需要编码（如果需要的话）。当需要编码时，解决方案通常可以在产品的社区论坛上轻松找到，或者由企业家爱好者以象征性的费用提供。

这并不意味着拥有编码背景没有帮助。了解围绕计算机编程的基本概念，例如如何从开始到结束编写一个过程的步骤，将有助于加快无代码开发者所经历的成功。但它们并不是严格必要的。

现在我们对无代码工具和整个无代码运动有了更好的理解，重要的是要看看无代码对科技行业、商业和普通公民的影响。这是否是我们作为一个社会看待计算机和技术的根本性变化，还是只是最新的科技潮流，最终会被“下一个大事件”迅速取代？

为什么无代码很重要？

如果你今天与某些开发者谈论无代码工具，他们中的许多人会告诉你，这些工具不过是玩具，没有任何真正的力量。他们可能会说这只是一时的潮流，如果你真的想开发应用程序，你需要使用传统的编程语言。

同时，许多企业将这些无代码工具视为一种干扰，它们让员工远离了他们的任务和职责。这些人不是在编写报告和填写电子表格，而是在浪费时间制作光鲜的手机应用，这些应用无法解决真正的问题或创造真正的价值。

公平地说，这些观点曾经是非常有效的。但近年来，无代码领域发生了显著变化，无代码与传统开发工具之间的差距正在缩小。随着无代码工具的改进，它们为商业带来的价值也在增加。

具有讽刺意味的是，这两个论点与计算机早期使用的一些论调非常相似。但那时他们谈论的不是无代码工具。他们经常提到的是那些光鲜的编程界面和新兴的编程语言，如Visual Basic或JavaScript，因为真正的开发者是用低级机器语言编写的！

许多这些“分散注意力”的玩具现在已经成为有价值的工具。例如，JavaScript曾经只是用于创建动态网页的工具。现在，用JavaScript编写的工具，如Node.js，被全球数百万开发者使用，或者jQuery，可以在互联网上超过75%的网站上找到，这些都证明了曾经简单、狭窄的想法可以产生深远的影响。

但还有一个第三种观点。这些人已经拥抱了无代码工具，并看到了它们真正提供的潜力。企业不再受制于昂贵的开发者，也不再满足于那些只能执行所需部分功能的现成软件包，而这些软件包实际上并不能满足需求。

相反，每天执行任务的工人现在有权使用这些无代码工具来减轻他们的工作量，提高他们的生产力，并通过数据验证、自动化和消除重复性任务来减少人为错误。

由于工人正在开发解决方案，因此与由不真正了解该员工在组织中所扮演角色的开发者创建的更昂贵的定制解决方案相比，这种最终产品往往可以快速准确地创造价值。无代码工具的开发速度更快，拥有成本更低，通常比大型开发套件更高效。

关于使用无代码工具开发应用程序还有一个最后要点。由于入门门槛比完整的开发套件低得多，原本由于成本过高而无法自动化的任务现在可以由员工自己通过编程实现。

在日常业务之外，我们开始看到一类全新的企业家在互联网上崭露头角。这些人能够识别日常生活中的问题，并为自己和他人找到双赢的局面。然后，他们利用这些无代码工具来创建应用程序和完整的系统以解决这些问题。

这些企业家还发现，由于开发这些应用程序的成本极低，从最初的概念到生产的上市时间相对较短，一种全新的商业模式已经出现。这些企业家不再只是提出一个想法，然后投入所有的时间和精力去实现这个想法，而不清楚最终是否能够成功，他们采取了不同的方法。

他们将同时建立几个业务，有些一年内多达200个。这样，整个市场就是他们的试验场。他们可能会用不同的策略来尝试不同的产品，而不是把所有的精力和热情都投入到一件事情上，他们把这些业务当作牛来对待。那些长得强壮、投资回报率高的业务会被精心培养和喂养。那些没有产出或者最终花费的时间和精力超过其价值的公司会被带走并相应处理。对于失败的业务，没有人会流泪，因为失去的时间/精力/金钱是微不足道的。企业家太忙了，不是在培养成功的公司，就是在回到他们的无代码工具中去启动下一个项目。

现在我们已经更好地理解了无代码工具在我们现代企业和日常生活中的重要性，让我们更深入地了解一下这些工具，以便更好地了解它们的一些功能。

n8n简介

n8n就是这些无代码工具之一。n8n的主要目的是以有意义的方式连接不同类型的系统来共享信息。

表面上看，这个说法可能听起来像是一个相对微不足道的事情，对日常工作的影响最小。但是，当你开始深入研究我们如何完成任务和完成工作，你会很快意识到，我们反复重复做很多小工作。如果我们能找到一种方式，让像n8n这样的系统为我们完成这些小任务，那么这种级联效应比仅仅节省一个任务的时间要重要得多。

你还可以节省工作之间的过渡时间。许多研究人员已经研究了任务切换或我们从一个任务转换到另一个任务所需的时间。他们发现，从一种类型的工作转换到另一种类型的工作大约需要20分钟。如果你少做一项工作，那就意味着不需要进行一次任务转换，从而节省了20分钟的过渡时间。还有在等待某事发生时丢失的时间。

例如，如果你需要填写一个包含一系列信息（如用户名和密码）的在线表格，并在提交表格后等待电子邮件的到来，那么你就在点击“提交”和等待电子邮件到达之间浪费了这段时间。相反，如果你配置n8n使用API连接来提交这些数据，你不仅不需要等待电子邮件的到来，甚至都不需要在一个网页表单中输入数据。n8n可以在你填写表格和等待电子邮件的极短时间里代表你完成这一整套任务，而你本可以去做其他更加重要的事情。现在，想象一下你每天需要做这件事80次。你难道不想花时间研究如何让你的电脑帮你完成这些工作吗？我认为你会的。

n8n是一个基于Web的工具。n8n可以在像Raspberry Pi这样小型且价格低廉的计算机系统上运行。它可以连接到数百个不同的系统，这些系统有专门为它们设计的节点，以及数千个使用标准REST API接口的系统。它还可以操纵它接收和发送的数据，以便在移动数据时，每个系统中的信息不必完全相同。它还可以生成一些分析，提供对处理数据返回的信息的洞察。因为它可以与几乎任何基于REST API的系统接口，这意味着其能力的限制仅限于那些其他系统的限制。你希望它们中的任何一个能够创建3D图像吗？有一个提供API的系统可以做到。你希望n8n能够根据从网络摄像头接收到的颜色模式即时混音音乐吗？有一个工作流程可以做到这一点。你希望n8n能够自动平衡你公司的账目，为你提供一个组织财务状况的实时仪表板吗？也有方法可以做到这一点。如果有一种方法可以将n8n连接到系统，那么n8n就可以继承那些力量。

虽然每个节点本身都非常强大，但当你开始将它们连接起来时，n8n的真正潜力就显现出来了。每个节点都设计用来执行一组特定的操作。完成操作后，它将信息传递给下一个节点。节点是如何知道将数据发送到下一个节点的？它只是查看节点之间的连接。

每个节点都有一个输入（左侧）和一个输出（右侧）端。如果一个节点的输出连接到另一个节点的输入，那么第二个节点将接收第一个节点的输出作为其输入。两个或更多节点的集合被称为工作流程。

这些工作流程可以保存在n8n系统中，并在你未打开n8n编辑器UI时在后台自动运行：

![图1.1 – 示例n8n工作流程

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_1.01_B17493.jpg)

图1.1 – 示例n8n工作流程

但当我不告诉它们运行时，这些工作流程是如何知道要运行的？当工作流程显示在我的n8n编辑器UI界面上时，我可以点击执行节点按钮来使工作流程运行。但如果我不方便点击按钮，它是如何知道要运行的？现在是触发节点大放异彩的时候了！

通常，触发节点启动工作流程。第一个是Cron节点。Cron节点得名于一个Linux服务，该服务在特定的时间执行命令。Cron节点做的是同样的事情。你指定一个时间 – 例如，每天中午 – 与此Cron节点连接的工作流程将在那个特定时间运行。

如果在您配置 Cron 节点运行的时间之间发生事件，会发生什么？还有几个其他的触发节点会发挥作用。这些节点中的大多数都会监听来自特定系统的事件。当它检测到这些事件时，它将处理发送给它的信息，并通过连接到该节点的流程进行处理。

n8n 定期添加新的触发节点。但仍然有可能你想要监听的具体系统作为一个节点并不存在。你该怎么办？答案是使用 webhook 节点。webhook 节点是这些定制触发节点的通用版本。它允许任何系统向网络上的地址发送 HTTP 请求，以便在它使用此节点时将信息发送到 n8n。webhook 节点为 n8n 开辟了各种其他可能性。

现在，如果有一个节点与 webhook 节点非常相似，但它不是监听任何可以发起 HTTP 请求的系统，而是可以与任何监听 HTTP 请求的系统通信，那岂不是很好？正如你可能猜到的，这正是 HTTP 请求节点所做的事情。此节点赋予任何系统与几乎任何其他系统使用 REST API 通信的能力。

REST API 是一种互联网标准，用于两个系统之间的数据通信。越来越多的开发者正在为新系统和服务编写 REST API。旧系统和服务通常通过新的 API 进行改造，以便它们更容易被其他数据系统访问。

现在我们已经介绍了 n8n 及其优势，让我们来安装它！

安装 n8n

n8n 是操作系统无关的，这意味着它可以在 Mac、Windows 和 Linux 操作系统上运行。n8n 可以这样做，因为它运行在 Node.js JavaScript 库之上，使开发者能够将 JavaScript 应用程序作为服务运行。

注意

在本书即将付印之前，n8n 发布了一个名为 n8n Desktop 的新版本。它安装起来更像是典型的应用程序而不是服务。

安装 n8n 的方式因操作系统而异，但人们通常在 Linux 上遇到最多的困难。这主要是因为 Linux 是云服务提供商或像树莓派安装这样的低成本家庭实验室场景的明确选择。我们选择为 Linux 系统提供详细的安装说明，特别是基于 Debian 的系统，因为这些挑战。基于 Debian 的系统的一些例子包括 Ubuntu 和 Raspberry Pi OS。您可以在 n8n 网站上找到其他操作系统的说明，网址为 https://docs.n8n.io/#getting-started。

前提条件

要在 Linux 计算机上成功安装 n8n，您将需要以下项目：

基于 Debian 的 Linux 操作系统
拥有 sudo 访问权限的普通用户账户
现代网络浏览器
因特网连接

1. 更新操作系统

拥有一个更新后的操作系统对于确保您安装的是软件的最新版本至关重要。请按照以下步骤操作：

使用标准用户账户登录到您的计算机。

在终端中，输入以下命令以更新系统：

sudo apt install update -y &&sudo apt install upgrade -y

当您被提示输入密码时，请输入您的用户密码。
系统将随后安装几个包和更新。
安装完成后，请继续下一节。

2. 安装先决条件

n8n 运行正确需要几个不同的包。按照以下步骤安装这些包：

在终端中，输入以下命令以安装先决条件：
```
sudo apt install build-essential python -y
```
如果提示输入密码，请输入您的用户密码。
系统将随后安装几个包。
安装完成后，请继续下一节。

3. 安装 Node.js

如我们之前提到的，Node.js 是 n8n 编写的核心。没有 Node.js，n8n 将无法运行。这些说明将安装 14.x 版本：

在终端中，输入以下命令以配置 Node.js 14.x 的安装源：
```
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
```
如果提示输入密码，请输入您的用户密码。
输入以下命令以安装 Node.js：
```
sudo apt install nodejs -y
```
如果提示输入密码，请输入您的用户密码。
安装完成后，请继续下一节。

4. 配置 Node.js 环境

为了 n8n 正常工作，它需要在系统上全局安装。默认情况下，Node.js 不允许您在不进行配置更改的情况下全局安装 n8n。请按照以下步骤正确配置 Node.js 环境：

在终端中，输入以下命令以在您的家目录中创建一个新的隐藏文件夹：
```
cd ~
mkdir ~/.nodejs_global
```

以下命令配置 npm 包管理器以使用新的文件夹进行全局安装：

npm config set prefix ~/.nodejs_global
echo 'export PATH=~/.nodejs_global/bin:$PATH' | tee --append ~/.profile
source ~/.profile

5. 安装 n8n

系统现在已准备好安装 n8n：

在终端中，输入以下命令以启动 n8n 安装：
```
npm install n8n -g
```
安装现在将继续安装几个包以及 n8n 应用程序。

注意

在安装 n8n 的过程中，您可能会遇到几个警告。收到它们是正常的，您不应感到惊慌。
安装完成后，请继续下一节。

6. 使用 PM2 将 n8n 作为服务运行

n8n 通常在终端中运行，但一旦您退出终端或重新启动计算机，n8n 将不再运行。为了解决这个问题，我们可以使用一个名为 PM2 的应用程序将 n8n 作为服务运行。让我们来安装它：

在终端中，输入以下命令以安装 PM2：
```
cd ~
npm install pm2@latest -g
```
一旦 PM2 安装完成，使用 PM2 启动 n8n：
```
pm2 start n8n
```
接下来，配置 PM2 以在您的计算机重启时自动启动 n8n：
```
pm2 startup
```
系统现在将提示您执行命令行。请确保您输入的内容与屏幕上显示的完全一致。
最后，保存新的 PM2 配置：
```
pm2 save
```

7. 打开 n8n 编辑器 UI

现在 n8n 应该正在运行。您可以通过以下步骤检查它是否正常运行：

如果你不知道你电脑的 IP 地址，请在终端中输入以下命令：
```
hostname -i | awk '{print $1}'
```
它将返回类似 192.168.0.1 的值。
打开网页浏览器，访问 http://<IP 地址>:5678。例如，在我们的例子中，您将访问 http://192.168.0.1:5678。
n8n 编辑器 UI 将以一个空的工作流程打开，如下面的截图所示：

![图 1.2 – n8n 编辑器 UI

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_1.02_B17493.jpg)

图 1.2 – n8n 编辑器 UI

在成功安装 n8n 之后，是时候开始构建一些有价值的解决方案了。但是，有时构建解决方案最具挑战性的部分是首先决定要做什么。让我们探讨一下人们如何使用 n8n 解决现实世界的问题。

人们如何使用 n8n 解决问题？

虽然 n8n 有许多不同的功能，但其主要作用是连接系统，并为每个系统正确准备数据以便其摄取。

了解 n8n 功能的一个绝佳方式是通过几个现实世界的例子。以下是一些真实公司正在运行的配置，这些配置使他们在技术上具有竞争优势。

CRM 电话录音访问

我以前的一位雇主购买了一套基于 Linux 的电话系统以及一个独立的基于 Raspberry Pi 的系统，用于记录组织接收的所有电话，同时还配备了基于 Windows 的软件来管理录音。他们还有一个基于 Windows 的客户关系管理（CRM）系统，用于跟踪销售和库存，并使用 Microsoft SQL Server 作为后端。

销售部门负责人希望销售团队能够根据日期检索所有已拨或接收的客户电话，然后点击按钮或链接来收听录音。

最终解决方案从电话系统中抓取了所有通话记录数据，并将其临时存储在一个文本文件中。然后 n8n 会监控这个文件的变化并导入数据。此时，它会拉取通话录音信息，将其与通话记录相关联，并将这些数据写入 Microsoft SQL Server。然后 IT 团队修改了 CRM，以便在新表中查找这些信息并在 CRM 中显示。

由于 n8n 既是数据无关又是系统无关的，它有效地连接了这些截然不同的设备，并使它们之间能够进行高效、准确的信息交流。如果没有 n8n，这将需要一系列不同的脚本、计划任务、文件导出、网络共享和持续的监控。n8n 允许 IT 团队使用它自带的所有工具在一个单一系统中执行这些相同的任务。

Goomer 在 COVID-19 期间转型

Goomer 是一家位于巴西的餐厅订餐软件公司。但 2020 年初 COVID-19 爆发时，政府关闭了所有餐馆，Goomer 的客户现在正努力维持业务。Goomer 的业务突然陷入困境。

Goomer决定转型成为一家配送应用程序，将所有开发团队转向设计和开发新的程序。他们的技术团队没有时间专注于自动化或部署工具。正是在这个时候，他们决定转向n8n来构建自动化流程。

他们选择n8n是因为它比其他托管解决方案便宜得多，而且更加灵活。由于他们可以在本地运行而无需意外收费，他们可以专注于部署工具和运营业务，无需担心扩展或高昂的价格。

Goomer使用n8n通过连接Airtable、Coda和HubSpot等系统来管理他们的业务流程。n8n会自动对这些系统中的事件做出反应，以更新其他系统中的数据和信息，而无需任何用户干预。

n8n航行于七大洋

n8n不仅限于陆地。Maranics将人工手动流程数字化，以提高流程质量并减少工作量。在连续使用了几年的其他自动化解决方案之后，Maranics开始将他们的自动化工作流程迁移到n8n，为包括几艘游轮在内的许多客户提供服务。

Maranics使用n8n轻松地将MongoDB和Postgres等不同数据库与具有标准REST API的其他系统连接起来，而使用其他解决方案这将要困难得多。

由于n8n可以在企业（或船只）本地安装，当所有数据都存储在本地系统上时，无需持久互联网连接。此外，由于所有数据都可以在本地处理，因此无需将数据发送到网络或本地业务。

这些只是人们如何使用n8n构建工作流程，使他们的流程更加高效、更少出现人为错误，并且全天候可用的几个例子。

看到人们如何使用n8n连接系统非常令人着迷。但是，偶尔，没有一款全能系统能满足你的需求。其他无代码工具此时介入，填补这一空白。它们提供各种服务，如网页前端或数据存储。然后，n8n用于将其连接到世界其他部分。Bubble就是这些工具之一，我们将在本书中广泛使用它。

Bubble简介

由于n8n的强项是集成不同的系统，n8n的开发团队并没有专注于用户界面开发。开发团队知道整个公司都在关注构建前端的无代码工具，并且很高兴将这项工作留给他们。（尽管，我们将在本书的后面部分向您展示如何完全使用n8n制作网页前端。）

由于n8n的焦点不在于前端设计，我们选择使用Bubble作为无代码开发工具来完成这项任务。具体来说，我们决定使用Bubble是因为以下原因：

它拥有简单直观的开发界面。
它是一款流行且广为人知的无代码工具。
它提供了数据访问和工作流程激活的API。
它的工作流程功能有限。
它与其他系统的集成很少。

这些因素使其成为一个出色的工具。但并非我们唯一可以用来与n8n交互的工具。n8n几乎可以与所有无代码工具连接，无论是通过自定义节点还是REST API。

摘要

这本入门章节探讨了无代码以及使它成为当今企业变革推动力的人们。我们还讨论了使用n8n等工具的一些显著好处，并提供了公司如何利用无代码的灵活性的真实世界案例。

我们也采取了一些必要的初步步骤，以便更好地理解n8n。你学习了如何在基于Debian的Linux系统上安装n8n，这样你就可以立即开始在家或商业环境中免费使用n8n。

最后，我们向你介绍了Bubble，这是一个无代码工具，我们将用它来开发我们许多示例应用的前端。我们将能够同时使用Bubble和n8n来创建用户友好（Bubble）的完整解决方案，并与各种系统和服务交互。

现在你对无代码、n8n和Bubble有了更好的理解，是时候深入挖掘n8n的工作原理并构建一些我们的第一个工作流程了。我们将在下一章中这样做。

第三章：第二章：使用编辑器 UI 创建工作流程

在本章中，您将学习如何使用 n8n 的 编辑器 UI。这将帮助您找到 n8n 的不同功能。您还将了解 n8n 中不同类型的节点以及如何使用它们。然后，您将学习如何构建工作流程以及处理动态数据以应对不同场景。最后，您将在 n8n 中创建您的第一个工作流程。

本章将涵盖以下主要主题：

编辑器 UI 简介
探索常规和触发节点
表达式 – 使用动态数据
工作流程 – 整合一切
创建您的第一个工作流程 – Hello World

技术要求

在继续本章之前，请准备以下技术要求列表：

确保 n8n 已安装。
确保 n8n 正在运行且编辑器 UI 已打开。
在 Telegram 上创建一个账户。

编辑器 UI 简介

编辑器 UI 是一个图形界面，允许您使用基于节点的方案创建自动化。n8n 从电影和电视行业汲取了基于节点的可视化的灵感，在该行业中，许多工具都拥有基于节点的系统。让我们看看我们这里有什么：

![图 2.1 – n8n 中的编辑器 UI

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.01_B17493.jpg)

图 2.1 – n8n 中的编辑器 UI

让我们从左上角开始。您可以通过点击 n8n 标志下方的 > 按钮来展开菜单。

目前，我们将熟悉界面，以便我们可以在 n8n 中快速找到我们的位置。随着我们在本书的章节中前进，我们将更深入地探讨特定部分，例如执行。让我们看看左侧的菜单栏。

首先，我们有 工作流程 菜单。在菜单中，我们有以下选项：

新建：创建新的工作流程。
打开：打开现有的工作流程。
保存：保存当前工作流程的更改。
另存为：保存当前工作流程。
重命名：重命名当前工作流程。
删除：删除当前工作流程。
下载：将工作流程作为 JSON 文件下载。
从 URL 导入：从 URL 导入工作流程。
从文件导入：从 JSON 文件导入工作流程。
设置：配置当前工作流程的设置。

请注意，由于我们尚未保存工作流程，其中一些选项将被灰色显示。

接下来，我们有凭据菜单。在这个菜单中，我们有以下两个选项：

新建：创建新的凭据。
打开：打开现有的凭据。

n8n 允许您连接到许多不同的应用程序、服务和 API。其中许多需要凭据进行身份验证。n8n 允许您在数据库中加密并保存这些凭据，以便在构建工作流程时可以快速重用。

接下来，我们有执行选项卡，它打开一个模态（弹出窗口），您可以在其中查看不同工作流程的执行情况。您还可以通过名称和状态过滤执行。

最后，我们有帮助标签，其中列出了对您有用的资源：

文档：一个链接到n8n文档的链接。n8n文档包含每个节点的详细信息、示例工作流程和参考。
论坛：n8n有一个非常活跃和友好的社区。如果您在任何事情上遇到困难，请随时在那里提出问题，有人会帮助您解决问题。
工作流程：此页面列出了社区提交的工作流程。这是一个获得您下一个自动化灵感的绝佳地方。
关于n8n：此选项打开一个模态窗口，其中包含有关n8n版本、GitHub存储库链接和许可证的详细信息。

在左下角，您会看到放大和缩小画布的选项。画布是编辑器UI中的网格框，您将在其中添加节点以创建工作流程。您还会注意到所有新的n8n工作流程都有一个开始节点。

在编辑器UI的底部中央，您会注意到一个标有执行工作流程按钮。这对于手动执行您在n8n中创建的工作流程非常有用。工作流程可以以两种方式运行：

手动执行：这些在您构建工作流程或进行一次性执行时非常有用。一次性执行的例子可以是迁移CSV文件中的所有数据到Google Sheets的工作流程。您可以通过点击执行工作流程按钮手动执行工作流程。
自动执行：一旦您的自动化准备就绪，大多数情况下，您希望它们在常规间隔或特定事件发生时运行。为了实现这一点，您需要激活一个工作流程。您可以通过点击左上角的激活按钮来这样做，这将改变切换的状态从非活动状态变为活动状态。请注意，您需要首先保存工作流程，然后才能激活它。

最后，我们在编辑器UI的右侧有一个+按钮。点击它将显示节点面板。您可以使用它向画布添加新节点并构建工作流程。您会注意到它有三个类别：所有、常规和触发器。让我们更深入地了解n8n中的节点，以了解这些部分的意义。

探索常规和触发节点

节点是n8n中工作流程的构建块。节点可以连接到应用程序、服务和API，并执行Node.js中一般可能执行的所有操作。每个节点根据其设计执行任务。完成后，数据将传递到下一个节点。这是上一个节点配置的任务执行的结果。

每个节点都有一个输入（左侧）和一个输出（右侧）。如果一个节点的输出连接到第二个节点的输入，则第二个节点将接收第一个节点的结果作为其输入。

注意

我们将在本书的后面部分更详细地介绍特定节点。

从抽象的角度来看，n8n中有两种类型的节点：

常规节点：常规节点对于处理创建、读取、更新和删除（CRUD）操作、转换数据和从互联网获取信息等事物非常有用。以下是一些常规节点的示例：
- Airtable节点：它可以读取、添加、更新和删除Airtable表中的数据。
- 函数节点：它可以执行JavaScript代码，通常用于操作工作流数据。
- Bubble节点：此节点允许您创建、删除、更新和从Bubble获取对象。

您可以通过访问n8n网站的应用与节点页面（https://n8n.io/integrations）并点击常规选项卡来找到最新版本的n8n中的整个常规节点列表（见Figure 2.2）：

![Figure 2.2 – n8n附带的一些常规节点

Figure 2.2 – n8n附带的一些常规节点

触发节点：触发节点启动工作流的执行。这些节点可以根据基于时间间隔或来自外部系统的事件启动工作流。如果您想使工作流自动执行，则需要一个触发节点。除非有触发节点，否则无法激活工作流。以下是一些触发节点的示例：
- Cron节点：此节点可以配置为每分钟或每小时激活一次工作流，或使用自定义Cron表达式指定。
- Telegram触发节点：此节点可以配置为每次Telegram机器人收到消息时激活工作流。

您也可以通过点击触发选项卡（见Figure 2.3）来在n8n的应用与节点页面上找到触发节点的详尽列表：

![Figure 2.3 – n8n附带的一些触发节点

Figure 2.3 – n8n附带的一些触发节点

n8n中的一些节点被称为核心节点。截至写作时，在编辑器UI中这些节点没有区别。核心节点可以是常规节点或触发节点。这些节点是更通用的，例如以下：

Webhook节点：可用于接收Webhook响应
函数节点：可用于操作工作流数据
Cron节点：可用于在特定间隔触发工作流
HTTP请求节点：可用于向网页或API端点发送HTTP请求

我们将在第3章中深入了解n8n的核心节点，深入n8n的核心节点和数据。为了将这个概念付诸实践，请按照以下步骤操作：

让我们回到编辑器UI。首先，点击起始节点以便它被突出显示。这样做可以确保您添加到画布上的新节点将自动连接到突出显示的节点。

![Figure 2.4 – 通过点击它来突出显示起始节点

Figure 2.4 – 通过点击它来突出显示起始节点

如果您没有这样做，不用担心。您始终可以通过点击节点前面的圆圈并将其拖动到下一个节点的矩形中来连接两个未连接的节点。

通过点击编辑器UI中的+按钮，我们可以向画布添加一个节点。
在节点面板中输入Hacker News并选择Hacker News节点。
点击节点会将它添加到画布上，并打开要配置的节点。对于资源字段选择所有，然后在节点面板右上角点击执行节点按钮。

![图2.5 – Hacker News节点的输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.05_B17493.jpg)

图2.5 – Hacker News节点的输出

您会注意到该节点从Hacker News返回100篇新闻文章。它为每个新闻条目产生各种信息。让我们花几分钟时间了解节点面板中的内容。

点击n8n中的任何节点都会打开节点详细信息视图，允许您配置节点、执行它并查看它接收或生成的数据。

让我们从节点面板的左上角开始。现在它写着“获取新闻”。

在节点名称下方，我们有两个选项卡：

参数：此选项卡包含配置任务的参数。大多数节点都有资源和操作字段。它们是将各种应用程序和API提供的广泛功能捆绑在一起的方式。

为了更好地理解这一点，让我们以CRM为例，您可以在其中存储个人和公司的数据。在n8n中，此CRM的节点将人员和公司作为资源。对于每个资源，它可能随后有创建、读取、更新和删除作为操作。

在这两个字段下方，您将看到所需的字段，例如名称。像姓氏一样，任何可选字段总是捆绑在附加字段部分下，这有助于保持UI整洁。

设置：此选项卡包含一些选项，例如添加备注，以及一些我们将在本书稍后讨论的其他设置，因为它们变得相关。

在节点面板的顶部中间，您将看到两个选项卡：

JSON：点击此选项卡将展示从Hacker News接收的JSON格式的数据。

![图2.6 – 通过点击JSON选项卡查看输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.06_B17493.jpg)

图2.6 – 通过点击JSON选项卡查看输出

表格：表格视图是n8n显示数据的默认视图。

在面板的右上角，您会看到执行节点按钮。此按钮允许您手动执行此特定节点，而无需重新触发整个工作流或执行工作流中的后续节点。这在逐步构建工作流时测试工作流非常有用。然后，我们旁边有一个X按钮。您可以点击它返回到编辑器UI中的画布。

最后，在节点面板的底部，你会看到一个链接到你打开的节点文档。点击它以访问节点文档，其中包含带有该节点的示例工作流和一些常见问题解答。

当与节点一起工作时，你通常会需要在节点之间引用数据。这些数据通常是动态的。例如，天气数据可能每小时都会变化。让我们了解如何使用表达式在n8n中引用动态数据。

表达式 – 使用动态数据

考虑以下场景：你只想将新闻文章的名称和URL作为工作流数据的一部分，因为Hacker News节点返回的其他数据对你来说无关紧要。我们可以以几种方式过滤工作流数据，但在这里我们将使用Set节点。Set节点是n8n中的代码节点之一，可以帮助你配置工作流数据。为了创建上述场景的Set节点，请按照以下步骤操作：

将Set节点添加到画布中，并将其连接到获取新闻节点。

![图2.7 – 将Set节点添加到Hacker News节点

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.07_B17493.jpg)

图2.7 – 将Set节点添加到Hacker News节点

现在，通过双击打开Set节点。将仅保留集合字段切换为true（绿色）。这将移除所有传入的工作流数据，并仅追加在Set节点中配置的新值。
点击添加值按钮并选择字符串。你会注意到我们现在有两个字段：名称和值。这两个字段设计JSON数据结构。
从标题中删除propertyName。

现在，标题的值将在节点每次迭代前一个节点接收到的100个项目时都不同。也有可能这100个值会完全不同，因为新的文章出现在Hacker News等地方。

由于这个原因，值字段需要是动态的，因为值会不断变化。你可以在n8n中使用表达式来实现这一点。

要向字段添加表达式，点击字段旁边的齿轮图标，然后点击添加表达式。使用值字段执行此步骤。这些操作将打开表达式编辑器。
在左侧，你会注意到变量选择器部分。点击当前节点，通过嵌套找到标题。它应该看起来像这样：

![图2.8 – 使用n8n中的表达式编辑器选择帖子的标题

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.08_B17493.jpg)

图2.8 – 使用n8n中的表达式编辑器选择帖子的标题

如果数据没有显示出来，请检查以下内容：

此节点与上一个节点相连。
前一个节点已经执行。

我们将对URL执行相同的步骤，然后点击Set节点的执行节点按钮。

![图2.9 – Set节点的输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.09_B17493.jpg)

图2.9 – Set节点的输出

多亏了Set节点和表达式，我们现在只在工作流中有了我们想要的相关数据。

表达式是n8n中的一个强大功能。你可以使用它们来引用工作流中的数据、其他节点、环境，甚至自生成数据。假设我们想在每篇新闻文章中添加一个随机ID。在ID中添加一个数值作为名称，然后点击值字段的添加表达式。

删除0并输入以下内容：{{ Math.floor(Math.random() *1000) }}。

表达式可以在双大括号之间执行JavaScript，在这里我们用它来生成三位随机数。假设我们希望ID以ID_开头。编辑表达式，使其看起来像这样：ID_{{ Math.floor(Math.random() *1000) }}。点击执行节点按钮查看结果。

![图2.10 – 添加ID后的Set节点输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.10_B17493.jpg)

图2.10 – 添加ID后的Set节点输出

你可以使用表达式做很多事情，我们将在本书的其余部分介绍更多概念。

既然我们已经了解了表达式，让我们进一步了解n8n中的工作流，以了解它们是什么。

工作流 – 整合一切

工作流是n8n中节点的一个集合。工作流可以从两个节点到数百个节点不等，包括调用子工作流。这些工作流可以保存在n8n的数据库中，并在后台运行，即使你没有打开n8n编辑器UI。

虽然n8n中的每个节点本身都非常强大，但当你开始连接这些节点时，n8n的真正潜力就显现出来了。在n8n中，你可以将一个节点连接到许多其他节点。工作流不一定要遵循线性结构。

现实世界的问题或任务通常由一系列步骤组成。n8n之所以强大，是因为你可以将复杂的过程和任务建模为工作流，即一系列执行步骤以完成更大过程的节点。

现在我们保存通过点击我的第一个工作流创建的工作流，并按Enter键。

工作流是JSON对象。你可以通过两种方式查看其底层的JSON：

点击工作流图标，然后点击下载按钮以下载JSON文件。
在画布上按Ctrl + A选择你的工作流中的所有节点，按Ctrl + C复制它们，然后在文本编辑器中粘贴JSON，按Ctrl + V。

下面是我们创建的工作流的JSON看起来是这样的：

![图2.11 – 我们创建的工作流的JSON

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_2.11_B17493.jpg)

图2.11 – 我们创建的工作流的JSON

如果你查看 JSON 文件，你会看到它包含了关于你工作流程中不同节点信息，它们是如何连接的，以及设置的参数。在前面的屏幕截图中，你可以注意到我们在设置节点中配置的标题、URL 和 ID，以及我们添加的表达式。

然后，你可以将这些文件与你的朋友和同事分享，以便他们可以在他们的 n8n 实例上加载它们并运行你创建的工作流程。他们可以将工作流程作为文件导入，或者将 JSON 粘贴到他们的编辑器界面中。

现在我们已经了解了工作流程，让我们在 n8n 中创建我们的第一个工作流程，它将在每天下午 6 点通过 Telegram 发送鸡尾酒配方。

创建你的第一个工作流程 – Hello World

现在，我们已经熟悉了 n8n 的编辑器界面、节点和工作流程，让我们创建一个新的工作流程，允许我们每天向 Telegram 发送一个随机鸡尾酒配方。按照以下步骤操作：

在 n8n 上创建一个新的工作流程，点击 工作流程 图标，然后点击新建。由于这是一个每天运行的自动化任务，我们需要添加一个触发节点。
点击 + 按钮，点击触发选项卡，并选择 Cron 节点。
从 Cron 节点的详细信息视图，点击 添加 Cron 时间 并将小时更改为 18。通过这样做，我们确保工作流程每天在 1800 小时运行。
保存工作流程并将其命名为 Hello World。现在，工作流程将在 n8n 的默认时区 1800 小时触发。n8n 的默认时区是纽约。
让我们通过点击 工作流程 图标并选择设置来更改此特定工作流程的时间区域。在那里，你可以选择你的时区。
完成这些操作后，点击保存按钮，并返回到编辑器界面。

![图 2.12 – 向编辑器界面添加 Cron 节点并保存工作流程]

图 2.12 – 向编辑器界面添加 Cron 节点并保存工作流程

现在，通过点击它来突出显示 Cron 节点，然后将 HTTP 请求 节点添加到画布上。确保它连接到 Cron 节点。

我们将使用 HTTP 请求 节点，因为鸡尾酒 API 在 n8n 中没有节点。HTTP 请求 节点允许我们发起 HTTP 请求，并使我们能够调用 n8n 中尚未有节点的服务 API。我们将调用 CocktailDB API 的随机端点。

在 HTTP 请求 节点的 URL 字段中输入 https://www.thecocktaildb.com/api/json/v1/1/random.php 并点击 执行节点 按钮。你会注意到它返回了关于随机鸡尾酒的详细信息。

![图 2.13 – 向 CocktailDB API 的随机端点发起请求后 HTTP 请求节点的输出]

图 2.13 – 向 CocktailDB API 的随机端点发起请求后 HTTP 请求节点的输出

现在，我们将需要将此数据发送到 Telegram。为此，我们首先需要创建一个 Telegram 机器人。您可以使用 Telegram 移动应用、Web 应用或桌面应用程序来创建机器人。在示例截图（图 2.14）中，我正在使用 macOS 的桌面应用程序。要这样做，请按照以下步骤操作：

在名称旁边带有蓝色和白色“已验证”符号的BotFather中搜索。要验证，请点击 BotFather 用户名。

![图 2.14 – Telegram 应用中的 BotFather

图 2.14 – Telegram 应用中的 BotFather

输入 /newbot 命令，并按照说明创建您的机器人。您可以随意命名，但用户名必须是唯一的。
完成后，它将为您提供 HTTP API 的访问令牌。复制它；我们将在 n8n 中需要它。接下来，点击 BotFather 提供的机器人链接，并点击开始。
现在，前往 n8n 并添加一个 Telegram 节点。确保 Telegram 节点的输入连接到 HTTP 请求 节点的输出。您会注意到节点有一个名为凭证的部分。
点击 Telegram API 字段，并从下拉菜单中选择 创建新。
Daily Drinks Bot 以便在视觉上区分我的其他 Telegram 机器人。
现在，将您从 BotFather 复制的访问令牌粘贴到 访问令牌 字段中，然后点击保存按钮。
现在，我们需要聊天 ID。要找到它，请在您的网络浏览器中打开一个新标签页，并转到 https://api.telegram.org/bot/getUpdates。

不要忘记将 <YourBOTToken> 替换为您从 BotFather 获得的访问令牌。如果您在那个页面上看不到任何内容，请向您的机器人发送消息并再次打开该 URL。然后您可以从那里复制聊天 ID 并将其粘贴到 n8n 的 Chat ID 字段中。

现在，我们必须为文本字段编写消息。我们将为此使用表达式。请随意编写您喜欢的消息。以下是我的样子：

![图 2.15 – 使用表达式编辑器指定 Telegram 消息的内容

图 2.15 – 使用表达式编辑器指定 Telegram 消息的内容

返回 Telegram 节点面板，点击 执行节点 按钮。现在您应该能在 Telegram 上看到您的机器人发送的消息。以下是我的样子：

![图 2.16 – 通过 Telegram 机器人发送的消息

图 2.16 – 通过 Telegram 机器人发送的消息

现在我们已经启动了机器人，我们将需要激活工作流程，以便每天 18:00 小时获得新的鸡尾酒配方。

返回编辑器 UI 中的画布，点击右上角的激活按钮，然后选择是，然后激活并保存！我的最终工作流程看起来像这样：

![图 2.17 – 已激活的最终工作流程

图 2.17 – 已激活的最终工作流程

只要 n8n 在运行，你现在每晚都会收到鸡尾酒配方。恭喜你创建了你的第一个 n8n 工作流程！

摘要

在本章中，我们学习了 n8n 的编辑器 UI。然后我们了解了 n8n 中的两种节点类型。接着我们介绍了如何在 n8n 工作流程中引用动态数据，并进一步学习了 n8n 中的工作流程。最后，我们通过结合编辑器 UI、节点、表达式和工作流程的知识，创建了我们的第一个 n8n 工作流程。我们将利用本章学到的原则来构建处理我们产品后端的工作流程。对这些主题的理解将有助于在 n8n 中构建任何复杂程度的工作流程。

在下一章中，我们将深入探讨使 n8n 如此强大的核心节点。然后我们将看看 n8n 工作流程之间如何共享数据，并学习如何访问这些信息。

第四章：第 3 章：深入 n8n 的核心节点和数据

如果你曾经去过正在开始建造房屋的建筑工地，有时很难想象最终房屋会是什么样子，未来的业主可能非常兴奋地想要搬进房子，将其变成自己的家。如果他们能按照自己的意愿行事，他们可能会跳过房屋建造的这一部分，专注于所有细节，如油漆颜色、房间布局和家具摆放。

但如果所有住宅建造者都这样做，他们的房子都不会持久。他们没有合适的地基来支撑，房子的框架会很快失效。

对于学习设计计算机程序来说，同样的话也可以说。如果一个新开发者没有学习编程系统的基本部分和概念，那么应用程序的开发就会非常缓慢，并且往往质量较差。但与传统计算机程序员不同，不需要理解复杂的语法或编码结构，就可以熟练地使用无代码解决方案进行开发。

正确理解核心节点以及数据在 n8n 中的结构至关重要。没有这些基础概念，你将无法在 n8n 中取得很大进展。

本章涵盖了以下主题：

n8n中的数据结构简介
函数节点——在工作流中使用自定义 JavaScript
项目数组
HTTP 请求节点——与任何 应用程序编程接口（API）进行通信
Webhook 节点——处理实时事件
与数组和 JavaScript 对象表示法（JSON）对象一起工作

到本章结束时，你将学会以下内容：

使用 n8n 的数据结构来操纵和转换工作流中的数据
在你的低代码工作流中使用 JavaScript 来解锁自定义功能
调用 HTTP 请求 节点
使用 Webhook 节点处理实时事件，并根据这些数据触发工作流
在 n8n 内部处理数组和 JSON 对象，了解何时使用哪种数据格式，并在工作流中转换数据

技术要求

你应该已经安装了 n8n
n8n 应该正在运行，并且编辑器 用户界面（UI）已打开
你可以访问 GitHub 仓库，网址如下：https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n

n8n中的数据结构简介

我热爱旅行到不同的国家，并从不同的视角体验生活。不同的文化和习俗让我着迷。

但不幸的是，我经常发现自己遇到麻烦，因为我只精通一种语言。如果没有共同的语言，很容易误解别人试图传达给我的信息。

n8n 也有它自己的语言版本，用于节点之间的通信。这种“语言”被称为 JSON，它是一种简单的文本格式，易于计算机和人类阅读。使用 JSON，n8n 可以传输文本和非文本（称为二进制）信息。

n8n 的开发者设计了工作流程中的每个节点，以便以这种特定的 JSON 格式接收和输出数据。这种标准数据结构允许 n8n 以无限的工作流程组合将这些节点链接在一起，以产生各种不同的解决方案。

理解 JSON 的总体情况以及 n8n 如何使用 JSON 是非常重要的。本节讨论了 JSON 如何表示信息以及两种不同的分组方式——对象和数组。我们还深入探讨了 n8n 如何在工作流程中使用 JSON 进行通信以及存储工作流程中的两种主要数据类型——JSON 和二进制数据。

在以下代码片段中，您将找到 JSON 格式信息的样本。此示例描述了一辆 2021 年红色的自动挡汽车：

[
  {
    "vehicle": {
      "type": "car",
       "colour": "red",
       "year": 2021,
       "automatic": true
    }
  }
]

JSON 语法

有几个语法项需要介绍，以便更容易理解这些 JSON 文件。这些项可以分为以下几类：

值—数据或信息
键值对—信息的名称及其本身
对象—键值对组
数组—值组

我们将在接下来的章节中了解更多关于这些内容。

值

值是 JSON 中表示的数据片段。一个值可以是：

一个字符串（一系列字母数字符号）
一个数字（标准数值）
JSON 对象（见对象部分）
一个数组（见数组部分）
一个布尔值（true 或 false）

键值对

需要首先理解的是 JSON 中的键值对。这些由双引号内的字段名和冒号分隔的值组成。

例如，"fruit": "apple" 是一个键值对，其中 "fruit" 是键，"apple" 是值。

您可以在 n8n 中引用一个键来检索与其配对的值。

对象

对象是一组键值对，用花括号括起来并用逗号分隔。例如，{"name": "Jill", "age": 27, "certified": true} 是一个包含三个键（name、age 和 certified）的对象，每个键都有一个值（Jill、27 和 true）。

他们的密钥可以引用对象中的值。

为了更进一步，让我们想象我们有一个以下的 JSON 对象：

{"user1":
     {"name": "Jill", "age": 27, "certified": true},
 "user2":
     {"name": "James", "age": 43, "certified": false}
}

在此示例中，user1.name 将是 Jill，而 user2.name 将是 James。

数组

数组是一组用方括号括起来并用逗号分隔的值。例如，[ "zero", "one", "two" ] 是一个包含三个值的数组。

数组与对象类似，但它们没有键，因此它们的索引引用值。

索引是数组中值的位臵。索引值从零（0）开始，对于数组中的每个部分增加一。在我们的例子中，这些是数组的索引及其值：

0—"零"
1——“一”
2——“二”

n8n JSON结构

在n8n中节点之间传递的JSON是一种特定的结构。它由至少一个对象的数组组成。

该对象内部包含一个或两个子对象。这两个对象键是json和binary。

json对象

json对象是一个必需的对象。在其内部包含了作为节点执行结果看到的全部JSON数据。

json对象的内容是灵活的，可以是其他对象、数组和键值对的混合。

例如，如果你有一个设置笔记，将键colour设置为red值，节点输出将以以下JSON格式显示：

[ { "colour": "red" } ]

但当此信息以n8n JSON格式存储时，在节点之间传递，看起来像这样：

[
  {
    "json": {
      "colour": "red"
    }
  }
]

这样，节点就能理解信息是针对它们的，并将信息识别为测试信息。还有一个可选的二进制部分与json部分一起，稍后将会介绍。

以下图表展示了数据在节点之间传递的格式。它代表了数据框架：

![图3.1 – n8n数据结构

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_3.01_B17493.jpg)

图3.1 – n8n数据结构

在节点之间传递的整个数据集被构建成一个JSON数组。在该数组内部，有两个JSON对象——一个称为JSON，另一个称为Binary。JSON对象包含表示文本数据的键值对。同时，Binary对象包含二进制信息（可以将其视为文件）。除了Binary对象的实际数据外，还有一些元数据，如mimeType（这是数据包含的文件类型）、fileExtension和fileName。

二进制对象

n8n JSON数据结构中的第二个对象是binary对象。binary对象是一个可选组件，因为并非每个JSON数据集都包含二进制元素。但是当它提供时，该对象包含的信息通常代表文件系统中的一个文件。

但如果你要在n8n JSON数据中包含此对象，它具有特定的结构。在binary对象内部有一个键，其名称可以是任意的（在我们的例子中，我们将它称为binaryKeyName）。与此键关联的值是另一个对象。该对象由最多四个键值对组成：

data（必需）—Base64编码的二进制数据或唯一数据ID引用
mimeType（可选）—根据标准MIME类型存储在data值中的数据类型
fileExtension（可选）—表示data值中信息所具有的文件扩展名
fileName（可选）—描述data值中数据的文件名称
path（可选） - 文件在系统中的位置

当在n8n JSON数据中设置binary对象时，你将看到额外的binary对象，如下面的截图所示：

图 3.2 – n8n编辑器UI中的二进制数据

在下一节中，我们将查看函数节点。它允许你在没有节点执行你需要的精确动作时，在JavaScript中创建自定义代码。对于使用JavaScript代码操作信息，理解n8n数据结构变得极为重要。

函数节点 – 工作流程中的自定义JavaScript

有时候，对于你想要完成的操作，完美的n8n节点可能根本不存在。这是有道理的，因为可能发生无限多种不同的操作。这就是为什么n8n创建了函数节点：这样我们就有了一种创建我们自己的自定义动作的方法，我们将在下一节中学习如何做到这一点。

函数节点是n8n工具箱中最通用的节点。它可以执行JavaScript来操作其他节点输出的数据，并将其以标准n8n数据结构的形式输出。你可以在以下截图中看到它的表示：

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_3.03_B17493.jpg)

图 3.3 – 函数节点

但函数节点的灵活性确实要求你能够使用一些JavaScript。与许多其他具有多个选项和参数可供选择的节点不同，函数节点只有一个参数——JavaScript代码字段。你将在该字段中完成所有工作。

JavaScript代码字段中意外地包含JavaScript。你将使用这种编程语言在函数节点内进行所有数据操作。虽然你不需要成为JavaScript专家，但更好地了解这种语言是有价值的。对于我们在本书中将要讨论的内容，对JavaScript的基本理解就足够了。

第一次在新函数节点中打开JavaScript代码字段时，你会注意到已经有几行代码：

// Code here will run only once, no matter how many input items there are.
// More info and help: https://docs.n8n.io/nodes/n8n-nodes-base.function
// Loop over inputs and add a new field called 'myNewField' to the JSON of each one
for (item of items) {
  item.json.myNewField = 1;
}
// You can write logs to the browser console
console.log('Done!');
return items;

这为你提供了一个很好的例子，说明了函数节点是如何工作的。此脚本将值1赋给n8n数据结构中JSON对象的每个myNewField键。然后它将操作已完成的动作写入网页浏览器控制台。最后，它输出结果。

如果你执行这个函数节点，你将得到以下输出结果：

[
  {
    " myNewField": 1
  }
]

那么，它是如何工作的呢？它之所以能工作，是因为items数组，我们将在下一节中介绍。

项目数组

这段代码的关键是items数组。它存储了传递给函数节点的上一个节点中n8n数据结构中的所有信息。方括号中的值代表你希望与之工作的items数组中JSON对象的索引。

最基本的items数组只有一个由零（0）索引号表示的对象，但items数组中可能有更多的对象，你可以使用与该对象关联的数组索引号访问每个这些对象。

在接下来的几节中，我们将简要讨论使用点符号引用items数组的不同部分，以及如何在我们转换信息后输出信息。此外，我们还将介绍如何访问除你所在的节点直接前一个节点之外的其他节点中的数据。

点符号

一旦你通过指定其索引号在items数组中选择了适当的对象，你需要确定你将处理JSON还是二进制对象。你可以通过使用所谓的.来完成此操作）。在我们的代码的第1行中，items[0]和json之间的点告诉n8n引用items数组中索引为0的json对象。

大多数情况下，你将在json对象中工作，但有些情况下你会使用binary对象。

为了更好地理解用于引用items数组不同部分的点符号，请参考以下表格，其中左侧是点符号名称，右侧是它引用的JSON部分：

输出数据

与其他编程语言中的函数一样，Function节点需要指示哪些信息被传递到程序的其余部分。这是通过代码的第二行完成的，它将更新后的items数组返回到下一个节点。

虽然修改items数组的值并将其传递给下一个节点是一种最佳实践，但从技术上讲，这不是必需的，你可以返回任何遵循正确的n8n数据结构的数组。

来自其他节点的数据（$items方法）

有时，有必要引用一个未直接连接到你正在工作的Function节点但之前已经执行过的节点的输出。在这种情况下，引用items数组将不会给你正确的信息。

要解决这个问题，你可以使用$items方法。此方法允许你访问节点中的所有数据，只要该节点在你正在工作的当前节点之前并且已经执行过。

让我们看看这个动作。让我们构建以下工作流程：

![图3.4 – 使用三个Function节点的基本工作流程

图3.4 – 使用三个Function节点的基本工作流程

由于这是一个默认的Function节点，myFunction节点的输出如下：

[
  {
    "myVariable": 0
  },
  {
    "myVariable": 1
  }
]

Reset节点随后删除它接收到的所有内容，并将输出设置为空，如这里所示：

[
  {
  }
]

我们在Function节点中设置JavaScript以输出前一个节点的信息，如下所示：

return items;

正如你所见，我们最终得到与Reset节点相同的结果。

现在，让我们使用$items方法从myFunction节点中提取数据，实际上跳过了Reset节点。将Function节点中的JavaScript更改如下：

items = $items("myFunction");
return items;

当你现在运行工作流时，你会看到Function节点的输出与myFunction节点的输出相匹配。

就像对items数组一样，你可以通过设置方括号中的索引来指定要引用的$items方法中的哪个项目。除了使用数组索引外，你还可以使用点符号来深入到数组和对象中引用。例如，以下方式访问特定信息是完全可接受的：

items[0].json = $items("myFunction")[1].json;

数据操作

因为Function节点使用JavaScript，你可以使用JavaScript的所有功能来操作数据。对JavaScript及其功能的深入研究超出了本书的范围，但有一些有用的命令我们已经整理出来，以帮助你入门。

字符串

对于这些示例，我们将假设我们有一个名为fullName的变量，并且分配给它的值是Jim Nasium。请看以下表格：

数学

JavaScript也具有强大的数学能力。以下是一些实际例子：

正如你现在应该意识到的，Function节点非常强大。我们已经学会了如何在节点内部和从其他节点引用数据，操作字符串和数字，以及输出数据以便其他节点可以使用。

现在我们已经更好地理解了Function节点的能力以及我们可以用数据做什么，让我们看看如何通过HTTP Request节点从远程系统获取数据。

HTTP请求节点 - 与任何API通信

计算机系统非常适合存储和处理大量数据，但计算机用户和开发者很快发现，并没有实际的标准允许这些计算机共享信息。

有些人有了一个聪明的想法，即使用新的Web标准来创建一种让这些系统进行通信的方式。他们会使用标准的请求方法来检索、添加、删除或更新远程计算机上的信息。除了这些功能外，他们甚至提供了使用各种方法来确保只有授权的个人才能访问数据的能力。

这种系统设置统称为Web API，这是今天处理远程数据最受欢迎的方式之一。有数千种不同的API可用，提供对广泛的数据和信息访问。

由于n8n的主要功能之一是将不同的系统连接起来以共享数据，因此与这些Web API进行通信是合情合理的。

在本节中，我们将学习API是如何工作的，它们的格式是怎样的，数据如何通过API传递，以及API支持的主要方法和它们返回的响应代码。最后，我们将进行一些基本的API调用，并了解如何确保这些调用的安全性。

Web API 101

在我们查看HTTP请求节点之前，让我们先快速概述一下API是如何工作的，以便更好地理解它们如何允许系统与之交互。

Web API运行在互联网上大多数网站所使用的技术上，但与提供您最喜欢的网页或猫视频不同，配置为运行API的Web服务器允许远程系统发出请求，并根据之前接收到的输入以数据的形式回复请求。系统之间发送的数据通常格式化为JSON。

要查看最基础的API操作，让我们看看Random User API。打开您的网络浏览器，在地址栏中输入https://randomuser.me/api/。当您按下Enter键时，您将看到一些类似这样的文本：

{"results":[{"gender":"female","name":{"title":"Miss","first":"Hanna","last":"Farias"},"location":{"street":{"number":4304,"name":"Rua São Paulo "},"city":"São Luís","state":"Piauí","country":"Brazil","postcode":35435,"coordinates":{"latitude":"-77.5289","longitude":"3.6948"},"timezone":{"offset":"-11:00","description":"Midway Island, Samoa"}},"email":"hanna.farias@example.com","login":{"uuid":"66406cea-46a3-47c4-a9aa-0717ab96ae41","username":"redbear531","password":"onlyme","salt":"xOlBVsMM","md5":"e5aaa5fa1141ced7a3d0b83edbd76ef5","sha1":"cacfc3f023c50af7c9da3a1bafdd5cd653663eab","sha256":"91e134083ebaf9a721a3f7890be3a186b56a0dde8e406f37abf4b68cb41e91a0"},"dob":{"date":"1951-02-27T05:42:48.601Z","age":70},"registered":{"date":"2010-05-19T04:21:25.465Z","age":11},"phone":"(65) 4693-1327","cell":"(81) 4446-9285","id":{"name":"","value":null},"picture":{"large":"https://randomuser.me/api/portraits/women/64.jpg","medium":"https://randomuser.me/api/portraits/med/women/64.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/64.jpg","medium":"https://randomuser.me/api/portraits/med/women/64.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/64.jpg"},"nat":"BR"}],"info":{"seed":"3e10360b4732e141","results":1,"page":1,"version":"1.3"}}

虽然这看起来像是一堆乱码，但如果您仔细观察，您将看到一些从我们的函数节点章节中熟悉的字符。我们遇到的是压缩或未格式化的JSON！

API URL的解剖结构

要访问API，您将需要的必备物品之一是统一资源定位符（URL）。理解URL的不同部分至关重要，因为您或您的系统将经常需要自己构建URL，以便您可以处理所需的信息。

让我们看看一个虚构的API URL，分析URL的不同部分，并确定它们的目的。为此练习，我们将使用以下URL：https://api.example.com/v3/computers?type=laptop&ram=32&hdd=1024

API URL的各个部分将在以下章节中解释。

协议

在我们的例子中，这是URL中的https://部分。这通常将是http://或https://。这很重要，因为如果协议是http://，那么API服务器和客户端之间的数据不会被加密。任何人都可以看到这两台计算机之间传递的信息，包括密码。

总是要确保协议是https://。

基础URL

在我们的例子中，基础URL是api.example.com。它有时被称为主机名、域名或域名系统（DNS）名称。这些都指的是同一件事。基础URL通常是托管API的服务器。

端点

对于我们的例子，端点是/v3/computers。它有时被称为API路径。端点是静态的（即保持不变）或动态的（即根据请求的信息而变化）。虽然端点的使用没有绝对标准，但有一些常见的做法。

从我们的示例中，/v3 部分告诉我们这是 API 的第 3 版，而 /computers 部分告诉我们可以期待此端点返回一个或多个记录。

查询参数

示例中有三个查询参数——type=laptop、ram=32 和 hdd=1024。两个分隔符标识查询参数。? 分隔符将查询参数与 URL 的其余部分分开，而 & 分隔符将每个查询参数分开。

与 JSON 键值对类似，键是等于号（=）之前的部分，值是等于号（=）之后的部分。

其他参数

在使用特定端点和查询参数是控制 API 客户端和服务器之间传递的信息类型最常见的方式的同时，其他参数可以进一步修改信息流。

标头

标头通常用于提供有关 API 请求的元数据。它们通常会提供有关正在传输的数据类型、安全令牌或服务器信息的信息。

这些信息通常以键值对的形式传输。

主体参数

请求的主体通常携带完成请求所需的信息或数据，或者由服务器根据客户端提出的请求提供。

此信息通常以键值对的形式发送。

HTTP 方法

与 API 交互有不同的方式，每种方式都会在托管 API 的服务器和请求操作的客户端上产生不同的结果。这些被称为方法，可以被视为允许系统知道如何处理请求的动作动词。下一节将简要概述每种方法及其一般用途。

GET

GET 是最常见的方法。每次您使用网络浏览器从网络服务器检索信息时都会使用它。

GET 通常用于从 API 中检索数据。

POST

POST 方法是另一种最常用的方法。网络浏览器通常会使用此方法从网页表单提交信息。

POST 通常用于向 API 提交信息，然后由 API 作为新记录存储。

DELETE

DELETE 方法通常用于在 API 的远程服务器上删除资源或记录。

HEAD

HEAD 方法与 GET 方法非常相似，除了 API 只返回头部信息而不返回其他数据。

PATCH

修补资源允许您只更改记录中的部分信息，而将其他所有内容保持与之前相同。

PUT

PUT 方法与 POST 方法类似，如果不存在记录，则会在 API 服务器上创建一个新记录。但如果要放入 API 的信息有一个匹配的记录，则该记录将被覆盖并由新信息替换。

响应代码

当向 API 服务器发出请求并且数据及元数据返回给客户端时，还有一个响应代码。虽然深入探讨每个响应代码的含义以及如何使用它们进行详细的故障排除超出了本书的范围，但了解每个响应代码的分类以及它们代表的内容是至关重要的。

1xx (信息性)

请求已被服务器接收并正在处理中。请等待它完成。

2xx (成功)

所有的操作都按预期进行，或多或少。

3xx (重定向)

API 已经不在你请求的位置了。检查错误信息以获取关于新 API 位置的更多信息。

4xx (客户端错误)

你构建的 API 请求有误。检查错误信息，然后更新请求。

5xx (服务器错误)

服务器有问题，通常你无法做太多来解决这个问题。如果你有管理 API 服务器的个人/团队的联系方式，你可以向他们报告错误并看看他们是否能提供帮助。

既然我们已经了解了 API 的概念，让我们开始使用 n8n 的 HTTP Request 节点连接到一些 API。

基本API调用

让我们从简单的 API 调用开始。让我们从 GitHub 获取有关 n8n 项目的信息。

在 n8n 编辑器 UI 的画布中添加一个新的 HTTP Request 节点并打开它。请将所有参数保留在默认值，除了 URL 值。将 URL 值设置为 https://api.github.com/users/n8n-io/。

就这样！我们现在已经准备好通过 API 从服务器检索数据了！点击 执行节点 执行 API 请求。你应该得到一个类似以下响应：

[
  {
     "login": "n8n-io",
     "id": 45487711,
     "node_id": "MDEyOk9yZ2FuaXphdGlvbjQ1NDg3NzEx",
     "avatar_url": "https://avatars.
       githubusercontent.com/u/45487711?v=4",
     "gravatar_id": "",
     "url": "https://api.github.com/users/n8n-io",
     "html_url": "https://github.com/n8n-io",
     "followers_url": "https://api.github.com/users/n8n-
       io/followers",
     "following_url": "https://api.github.com/users/n8n-
       io/following{/other_user}",
     "gists_url": "https://api.github.com/users/n8n-
       io/gists{/gist_id}",
     "starred_url": "https://api.github.com/users/n8n-
       io/starred{/owner}{/repo}",
     "subscriptions_url": "https://api.github.com/
       users/n8n-io/subscriptions",
     "organizations_url": "https://api.github.com/
       users/n8n-io/orgs",
     "repos_url": "https://api.github.com/users/n8n-
       io/repos",
     "events_url": "https://api.github.com/users/n8n-
       io/events{/privacy}",
     "received_events_url": "https://api.github.com/
       users/n8n-io/received_events",
     "type": "Organization",
     "site_admin": false,
     "name": "n8n - Workflow Automation",
     "company": null,
     "blog": "https://n8n.io",
     "location": "Berlin, Germany",
     "email": "hello@n8n.io",
     "hireable": null,
     "bio": "Free and open fair-code licensed node based 
       Workflow Automation Tool.",
     "twitter_username": "n8n_io",
     "public_repos": 12,
     "public_gists": 0,
     "followers": 0,
     "following": 0,
     "created_at": "2018-11-30T12:19:59Z",
     "updated_at": "2022-01-07T17:49:22Z"  }
]

你现在可以将其他节点连接到 HTTP Request 节点的输出，并按你的意愿处理信息，或者将其发送到另一个系统。

使用基本认证

现在，让我们尝试一个稍微复杂一点的操作。我们将查找 HTTP Request 节点以查询 API：

浏览到 https://upcdatabase.org/signup 并创建一个账户。
一旦你创建了账户，转到 https://upcdatabase.org/apikeys 并复制该页面的令牌。如果页面上没有令牌，创建一个新的令牌然后复制它。
在 n8n 编辑器 UI 中，将一个新的 HTTP Request 节点添加到画布中。
对于认证参数，选择 基本认证。
接下来，点击 创建新 打开 基本认证 参数的新凭证窗口。
在 UPC 输入值中输入，在用户字段中输入你的电子邮件地址，并将你的令牌粘贴到密码字段中。
点击 HTTP Request 节点。注意，基本认证参数现在显示的是你刚刚创建的凭证名称。
在 URL 参数字段中输入 https://api.upcdatabase.org/product/765756931182。
您的 HTTP 请求 节点应该已经准备好。点击 执行节点 并查看您的结果。它们应该看起来像这样：

[
  {
    "added_time": "2020-04-03 00:28:03",
    "modified_time": "2020-04-03 00:28:03",
    "title": "Raspberry Pi 4 4GB model - New 2019 4GB Ram",
    "alias": "",
    "description": "",
    "brand": "Raspberry Pi",
    "manufacturer": "",
    "mpn": "",
    "msrp": "64.99",
    "ASIN": "",
    "category": "",
    "metadata": {
      "age": null,
      "size": null,
      "color": null,
      "gender": null
    },
    "stores": null,
    "barcode": "765756931182",
    "success": true,
    "timestamp": 1620901566,
    "images": null
  }
]

尝试更改 URL 末尾的数字，并用你家里的其他 UPC 替换它，看看你能找到关于产品的哪些信息。

在本节中，我们介绍了 API 的基础知识，包括构成 API 的部分，信息如何通过 API 传输，不同的 超文本传输协议（HTTP）方法以及它们对应的响应代码。然后我们进行了基本的和安全性的 API 调用。

现在我们对 API 有更好的理解，让我们从获取我们从其他服务器请求的信息转向接收推送到 n8n 的信息。

Webhook 节点 – 处理实时事件

你可以把 Webhooks 视为 API 的堂兄弟。实际上，你可以使用 Webhook 节点创建一个 API 服务器！

Webhook 监听 GET、HEAD 或 POST 请求，并在检测到请求时启动工作流程。Webhook 节点可以这样做，因为它是一个触发节点。

在本节中，我们将学习如何使用 n8n 创建 Webhook。作为构建的一部分，我们将学习如何向 Webhook 发送信息以及如何响应请求的信息。

创建基本的测试 Webhook

要构建基本的 Webhook，请按照以下说明操作：

将一个 Webhook 节点添加到 n8n 编辑器 UI 画布中，并打开该节点。
将所有参数值保留在默认值。
通过点击 Webhook URLs 文本来展开 Webhook URLs 部分。
在 显示 URL 为 部分下点击 测试 URL 开关。
点击 URL 以将其复制到您的剪贴板（例如，https://tephlon.app.n8n.cloud/webhook-test/373227bb-5fda-49e9-b491-54ef33db3eed)。
关闭 Webhook 节点。
保存工作流程。这很重要，因为 Webhook URL 在工作流程保存之前无法注册。

就这样！你已经创建了你第一个基本的 Webhook！

现在，让我们测试一下它是否正常工作！按照以下步骤操作：

在 n8n 编辑器 UI 中，打开 Webhook 节点。
点击 执行节点 按钮以启动 Webhook 监听。
打开一个新的网页浏览器，将你之前复制的 Webhook URL 粘贴到地址栏中，然后按 Enter。

如果一切正常，你应该看到以下两个结果：

在网页浏览器窗口中，你应该会看到以下信息：
```
{"message":"Workflow got started."}
```

在 n8n 编辑器 UI 中，你应该在 Webhook 节点输出窗口中接收到一些信息，类似于以下内容：

[
  {
    "headers": {
      "host": "tephlon.app.n8n.cloud",
      "x-request-id": 
        "30d32a403776b5bbce58ce0ef8a4c245",
      "x-real-ip": "10.40.0.4",
      "x-forwarded-for": "10.40.0.4",
      "x-forwarded-host": "tephlon.app.n8n.cloud",
      "x-forwarded-port": "443",
      "x-forwarded-proto": "https",
      "x-scheme": "https",
      "sec-ch-ua-mobile": "?0",
      "dnt": "1",
      "upgrade-insecure-requests": "1",
      "user-agent": "Mozilla/5.0 (Windows NT 10.0; 
        Win64; x64) AppleWebKit/537.36 (KHTML, like 
        Gecko) Chrome/90.0.4430.212 Safari/537.36",
      "accept": "text/html,application/xhtml+xml,
        application/xml;q=0.9,image/avif,image/
        webp,image/apng,*/*;q=0.8,application/signed-
        exchange;v=b3;q=0.9",
      "sec-fetch-site": "none",
      "sec-fetch-mode": "navigate",
      "sec-fetch-user": "?1",
      "sec-fetch-dest": "document",
      "accept-encoding": "gzip, deflate, br",
      "accept-language": "en-CA,en-GB;q=0.9,en-
        US;q=0.8,en;q=0.7",
      "cookie": 
        "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
         eyJpc3MiOiJjbG91ZCIsInN1YiI6NDAzMSwi
         dXNlcm5hbWUiOiJ0ZXBobG9uIiwiaWF0IjoxNj
         IwODIwMDYzLCJleHAiOjE2MjE0MjQ4NjN9.
         Q77PkeKY6OUbSJI5Ms56lWvTg8jqSvNOKCp325kTjKo"
    },
    "params": {},
    "query": {},
    "body": {}
  }
]

这是从网页浏览器发送到 n8n 的所有信息。虽然这里有一些有趣的数据，但目前没有有用的信息。

向 n8n 发送信息

由于我们有一个基本的 Webhook 在运行，让我们看看当我们向它发送一些信息作为 URL 中的查询时会发生什么。按照以下步骤操作：

在n8n编辑器UI中，打开Webhook节点并按下执行节点按钮。
在你之前使用的网页浏览器窗口中，将Webhook URL粘贴到地址栏中，但在按Enter之前，将?fname=Jim&lname=Nasium添加到URL的末尾。然后，按Enter。

在网页浏览器中看起来一切正常，但让我们仔细看看Webhook节点输出窗口中的query部分，如下所示：

"query": {
  "fname": "Jim",
  "lname": "Nasium"
},

这些值与在网页浏览器中输入的URL末尾输入的值匹配。你现在可以使用从客户端接收到的这些信息在你的工作流程的其余部分中使用。

响应客户端

既然我们知道我们可以从客户端接收信息，那么让我们向发送者发送一条确认消息！按照以下步骤操作：

在Webhook节点中，将Response Mode更改为Last Node。
在Webhook节点下，添加一个html。
接下来，添加一个Webhook节点并启用该选项。
关闭Webhook节点。
在n8n编辑器UI中添加一个Set节点，并将其连接到Webhook节点的输出。
打开Set节点并添加一个string值。
将值命名为html。
点击Value旁边的齿轮，然后点击添加表达式选项。
在表达式字段中的<H1>感谢光临，{{$json["query"]["fname"]}} {{$json["query"]["lname"]}}!</H1>。
关闭Set节点。

让我们看看这能为我们做什么。在n8n编辑器UI中，点击?fname=Jim&lname=Nasium。

如果一切设置正确，你应该会收到一条大字显示的消息，内容为"感谢光临，Jim Nasium！"。

这是如何工作的？

当网页浏览器将信息发送到Webhook时，Webhook会抓取URL中的fname=Jim&lname=Nasium部分，并将其发送到Set节点。然后Set节点使用fname和lname的值动态生成超文本标记语言（HTML），Webhook使用它将HTML发送回网页浏览器。然后，网页浏览器相应地显示HTML。

我们实际上已经把n8n转换成了一个可以生成实时动态网页的Web服务器！

在结束本章之前，我们还有一个部分要介绍。让我们谈谈如何操作存储在数组和JSON对象中的数据。

处理数组和JSON对象

n8n使用了大量的数组和JSON对象，因此你需要熟悉它们。在本节中，我们将学习如何通过拆分、合并和写入这些项来操作数组和对象。

在n8n工作流程中有很多数据在传输，学习一些关于操作这些存储在数组和JSON对象中的数据的技巧和窍门是有益的。

在以下代码片段中，我们将使用一个包含三个具有相同键的JSON对象的数组作为示例：

[
  {
    "species": "dog",
    "name": "Cocoa",
    "color": "brown"
  },
  {
    "species": "cat",
    "name": "Lucky",
    "color": "brown"
  },
  {
    "species": "cat",
    "name": "Skittles",
    "color": "grey"
  }
]

如果你使用n8n节点顶部表格选项卡查看这些信息，它看起来可能像这样：

![img/Table_3.03_B17493.jpg]

你可以在Function节点中通过将Function节点添加到n8n编辑器UI中，并将以下内容粘贴到JavaScript代码字段中生成此表格：

items = [ { "json": { "species": "dog", "name": "Cocoa", "color": "brown"}}, { "json": { "species": "cat", "name": "Lucky", "color": "brown"}}, { "json": { "species": "cat", "name": "Skittles", "color": "grey"} } ];
return items;

现在，Function节点的输出应该与前面的表格匹配。

接下来，让我们学习如何使用IF节点从Function节点中分割数据。

将猫和狗分开

我们将要做的第一件事是将这个数组分成两个数组，使用IF节点。我们将所有狗发送到true输出，所有猫发送到false输出。

要这样做，请按照以下步骤操作：

将一个IF节点连接到生成数组的节点的输出。
打开IF节点并向节点添加一个string条件。
在值 1字段中，点击齿轮图标并选择添加表达式。
在表达式字段中将{{$json["species"]}}输入，并关闭表达式编辑器。
在值 2字段中，将值输入为dog。
关闭IF节点并执行工作流程。
打开IF节点并查看true和false输出的结果。你应该会看到false输出中有两个条目，而true输出中有一个条目。

合并两个数组

现在我们已经将数组分开，让我们看看我们是否可以将它们再次合并在一起。我们将使用Merge节点来完成这项工作。请按照以下步骤操作：

将一个Merge节点添加到n8n编辑器UI中。
将IF节点的true输出连接到Merge节点的输入 1。
将IF节点的false输出连接到Merge节点的输入 2。
打开Merge节点。
对于模式参数，选择追加。
关闭Merge节点。

你的最终工作流程应该看起来像这样：

![Figure 3.5 – Splitting and merging an array workflow]

![img/Figure_3.05_B17493.jpg]

图3.5 – 分割和合并数组工作流程

现在是时候测试它了！执行工作流程。当它运行完成后，打开Merge节点。输出窗口应该显示数组再次合并在一起。

将相同的值添加到所有JSON对象中

现在，让我们假设我们想要向从Merge节点输出的所有记录中添加另一个键。让我们还假设每个键的副本都是相同的。

我们可以通过使用Set节点来完成这项工作。以下是你需要遵循的步骤：

将一个Set节点添加到n8n编辑器UI中，并将其连接到Merge节点的输出。
打开Set节点。
添加一个新的布尔值并命名为adopted。
将adopted的值设置为true。
关闭Set节点。

为了检查它是否工作，执行工作流程并打开IF节点。输出窗口中的表格现在应该看起来像这样：

![img/Table_3.04_B17493.jpg]

使用IF、Merge和Set节点，我们可以快速轻松地执行一些重要的数据处理任务，而无需使用Function节点进行自定义编码。

摘要

本章介绍了一些关键概念，我们学习了如何在n8n中构建一些强大的工具。

我们首先介绍了 n8n 如何使用键值对、对象和数组等主要组件来结构化 JSON 数据。随后，我们展示了 n8n 如何在内部存储 JSON 和二进制数据。然后，我们讨论了如何使用 Function 节点，以及如何理解 items 数组、点表示法和 $items 方法。一旦函数的概念被掌握，我们就学习了 API 以及如何使用基本和认证调用来发送和接收数据。接下来，我们回顾了 Webhooks，并在 n8n 中使用它们来发送信息和生成 HTML 文件。最后，我们探讨了 n8n 如何与 JSON 对象和数组协同工作，包括如何操作存储在这些项目中的数据。

拥有这些新信息，你将顺利地开始使用 n8n 构建实用的工具。

在下一章中，你将运用这些新知识，并在 n8n 中构建三个应用程序！

第五章：第 4 章：通过实践学习：构建两个 n8n 应用

在本章中，你将学习如何将前几章的概念结合起来，并使用它们来构建多个项目。其中一些项目将加强你之前学到的概念，而其他项目将介绍一些新想法。这将帮助你了解你可以使用 n8n 构建的产品类型。最后，我们将学习如何分享和发现新的工作流程，以及如何参与 n8n 的活跃社区。

本章将涵盖以下主要主题：

使用 n8n 构建产品
构建 Telegram 机器人
创建指标仪表板
分享和发现工作流程

技术要求

这是你在继续本章之前需要准备的技术要求列表：

安装 n8n。
确保 n8n 正在运行，并且编辑器 UI 已打开。
在 Telegram 上获取一个账户。
在 GitHub 上获取一个账户。

你可以在 GitHub 上找到本章的完整代码示例，地址为 https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/tree/main/Chapter%204

使用 n8n 构建产品

如果你和我一样，你有很多想法来构建新的和令人兴奋的在线服务或自动化每天重复的枯燥任务。从历史上看，许多这些想法从未进一步发展，我不知道如何进入实际构建解决方案或开始原型开发的下一步。

无代码工具提供了一种更简单的方法来生产早期的 最小可行产品（MVP）或设计下一个伟大的网络服务。

n8n 与此无代码理念相同，允许你在比使用常规编程语言构建它们的时间少得多的时间内构建应用程序和工具。这不仅更快，而且更容易，因为你只需要了解一点 JavaScript（对于更复杂的应用程序），也许甚至不需要，这取决于你想要构建什么！

为了激发你使用 n8n 开始构建一些应用程序的动力，这里有一些执行有趣功能并展示如何快速轻松地启动的示例应用程序。

构建 Telegram 机器人

宝可梦是我成长过程中最喜欢的节目之一。即使今天，我也喜欢玩 宝可梦 Go。有时，你会在游戏中遇到非常强大的对手，你必须研究一下对方宝可梦的弱点。我的搜索历史充满了像“如何击败泰兰蒂拉”这样的查询。让我们创建一个提供宝可梦能力、招式和类型的信息的 Telegram 机器人。

在 第 2 章 中，使用编辑器 UI 创建工作流程，我们学习了如何创建 Telegram 机器人，以及如何查询 REST API。我们将使用类似的流程，但也有一些需要注意的地方：

我们需要检查机器人用户是否输入了宝可梦的名字以及斜杠命令。
我们将查询宝可梦 API (https://pokeapi.co) 来获取数据。然而，该 API 非常全面，我们需要对数据进行处理，以便它符合我们想要消费这些信息的格式。

让我们按照 第 2 章，使用编辑器 UI 创建工作流程 中提供的说明创建一个新的 Telegram 机器人。我给我的机器人命名为 /setcommands。选择你刚刚创建的机器人，并输入以下内容：

pokemon - Get details about a specific pokemon

在运行命令后，你应该能看到以下截图类似的内容：

![图 4.1 – 为我们的 Telegram 机器人设置命令

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.01_B17493.jpg)

图 4.1 – 为我们的 Telegram 机器人设置命令

恭喜，你刚刚为你的机器人创建了一个命令。

让我们在 n8n 中开始构建这个机器人的后端。为此，请按照以下步骤操作：

打开你的 n8n 编辑器 UI 并添加一个 Telegram 触发 节点。
输入你新机器人的凭证，并在更新字段的下拉列表中选择 *****。
现在，保存并执行工作流程。

![图 4.2 – Telegram 触发节点设置

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.02_B17493.jpg)

图 4.2 – Telegram 触发节点设置

注意

如果你是在本地运行 n8n，请确保你正在使用隧道模式运行。

现在，前往你的机器人并输入 /pokemon ditto。

![图 4.3 – 向宝可梦机器人发送命令

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.03_B17493.jpg)

图 4.3 – 向宝可梦机器人发送命令

返回编辑器 UI，你将看到那里有一个响应。很可能是响应是 /start。如果是这样，请在响应中按 /pokemon ditto。

![图 4.4 – 使用 Telegram 触发节点接收 /pokemon ditto 作为命令

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.04_B17493.jpg)

图 4.4 – 使用 Telegram 触发节点接收 /pokemon ditto 作为命令

你会注意到，有人可能只是点击了命令而没有输入宝可梦的名字。我们必须考虑到有人在使用这个机器人时可能会犯同样的错误。为了确保这种情况不会发生，让我们添加一个 IF 节点来检查用户是否提供了宝可梦的名字。

在编辑器 UI 中添加一个 IF 节点，并确保它与 Telegram 触发 节点连接。进入节点编辑视图，点击 添加条件 按钮，并选择 字符串。将操作设置为为空。在 值 1 字段中添加一个表达式，并输入以下内容：

{{ $json["message"]["text"].split(' ')[1] }}

这个 JavaScript 片段使用 $json["message"]["text"] 指向 '/pokemon ditto'。.split(' ') 方法在空格处拆分字符串并将其转换为数组，看起来像这样：['/pokemon', 'ditto']。然后我们选择位置 1 的项，即 'ditto'。执行节点。

![图 4.5 – 执行的 IF 节点，对于真值没有输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.05_B17493.jpg)

图4.5 – 执行的IF节点，true没有输出

你会注意到true部分的输出为空，因为我们指定的条件是错误的。如果你在上面的输出字段中选择false而不是true，你会看到一个结果。现在让我们设置一个默认消息，以防没有指定宝可梦的名字。

在编辑器UI中添加一个Telegram节点，并将其连接到IF节点的true输出。
配置节点的凭据，并使用表达式设置Chat ID的值（你可以从Telegram触发节点中获取）。表达式应该看起来像这样：
```
{{$node["Telegram1 Trigger"].json["message"]["chat"]["id"]}}
```
注意

我们在这里使用了一个表达式，而不是第2章，使用编辑器UI创建工作流程中的Telegram节点，因为许多人可能在使用Telegram机器人，我们希望将答案发送给查询的人。
在文本字段中输入以下内容， 请输入宝可梦的名字。例如，'/pokemon ditto'（不带引号）。 随意自定义信息。
现在我们执行工作流程，这次我们只向机器人发送 /pokemon。响应应该看起来像这样。

![图4.6 – 向机器人发送/pokemon作为命令后的响应

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.06_B17493.jpg)

图4.6 – 向机器人发送/pokemon作为命令后的响应

现在我们已经解决了我们之前提到的一个挑战，让我们专注于从API获取数据并将其发送回用户。为此，请按照以下步骤操作：

在编辑器UI中添加一个HTTP请求节点，并将其连接到IF节点的false输出。现在工作流程应该看起来像这样。

![图4.7 – 添加HTTP请求节点后，你的工作流程应该看起来像这样

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.07_B17493.jpg)

图4.7 – 添加HTTP请求节点后，你的工作流程应该看起来像这样

在我们继续之前，再次执行工作流程，并向机器人发送/pokemon ditto。这将使工作流程中的数据流向我们正在构建的false分支。

打开HTTP请求节点，将表达式添加到URL字段，并输入以下内容：
```
https://pokeapi.co/api/v2/pokemon/{{$json["message"]["text"].split(' ')[1]}}
```

这将确保API返回你请求的宝可梦的详细信息。执行节点，你会注意到你得到了关于Ditto的大量数据。我们特别关注的是能力、招式和类型。然而，这些是包含对象的数组。我们将不得不调整数据，使其转换为对我们有用的格式。我们将使用函数节点来完成这项工作。

在编辑器UI中添加一个函数节点，并将其连接到HTTP请求节点。打开JavaScript代码字段，并输入以下代码：

const abilities = [];
const moves = [];
const types = [];
for (let i=0; i<items[0].json.abilities.length;i++) {
abilities.push(items[0].json.abilities[i].ability.name);
}
for (let i=0; i<items[0].json.moves.length;i++) {
moves.push(items[0].json.moves[i].move.name);
}
for (let i=0; i<items[0].json.types.length;i++) {
types.push(items[0].json.types[i].type.name);
}
return [{json: {name: items[0].json.name, abilities, moves, types}}];

让我们来理解这里发生了什么。我们创建了三个新的数组，分别命名为 abilities、moves 和 types。然后我们创建了一个循环，将每个能力、动作和类型的名称推入相应的数组。最后，我们以 n8n 预期的格式返回数据。执行节点后，它应该看起来像这样：

![图 4.8 – 函数节点的输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.08_B17493.jpg)

图 4.8 – 函数节点的输出

完美，我们现在只得到了我们需要的资料。现在我们需要将其发送到 Telegram 机器人。

添加一个新的 Telegram 节点，并将其与函数节点连接起来。配置您的凭据和之前讨论过的 聊天 ID。现在，在文本字段中添加一个表达式，并按您认为合适的方式格式化数据。

这就是我的表达式的样子：

<b>Name:</b> {{$json["name"]}}
<b>Abilities:</b> {{$json["abilities"].join(', ')}}
<b>Moves:</b> {{$json["moves"].join(', ')}}
<b>Types:</b> {{$json["types"].join(', ')}}

备注

当向表达式添加数组值时，例如 abilities，您可以在表达式编辑器中点击值旁边的灰色点，然后点击值，如下面的截图所示。

在前面的例子中，我使用了粗体的 HTML 标签来加粗一些文本。如果您也想包含这些，请点击 添加字段 按钮，选择 解析模式，并将其设置为 HTML。

![图 4.9 – 在表达式编辑器中添加数组值

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.09_B17493.jpg)

图 4.9 – 在表达式编辑器中添加数组值

现在，保存并激活您的流程。您的流程应该看起来像这样：

![图 4.10 – 最终工作流程

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.10_B17493.jpg)

图 4.10 – 最终工作流程

现在，在您的 Telegram 机器人中输入 /pokemon ditto。这是我得到的结果：

![图 4.11 – Telegram 机器人中 /pokemon ditto 命令的结果

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.11_B17493.jpg)

图 4.11 – Telegram 机器人中 /pokemon ditto 命令的结果

尝试更多。以下是一些宝可梦的名字：皮卡丘、小火龙、妙蛙种子。必须全部捕捉到。

让我们利用我们在 第 3 章，深入 n8n 的核心节点和数据 中对 webhooks 的了解，使用 n8n 构建一个指标仪表板。

构建指标仪表板

指标是任何业务的关键组成部分。关注指标以衡量社区、产品、收入以及许多其他事物的健康和增长非常重要。让我们构建一个指标仪表板，它将显示以下内容的计数：

GitHub 星标
GitHub 分支
Docker 拉取

添加或删除您想在该仪表板中看到的任何其他数字应该很简单。构建这个数字仪表板有两个主要组件：

以易于阅读的格式提供显示指标的网络页面
从不同的服务获取数据并将其插入到网页中

让我们从学习如何使用 n8n 提供网页开始。以下是它的步骤：

打开您的编辑器 UI 并添加一个 Webhook 节点。对于 响应模式 字段，从下拉列表中选择 上一个节点。
在属性名称字段中点击html。
保存工作流程并执行工作流程。复制测试 Webhook URL 并将其粘贴到你的网络浏览器中。Webhook节点现在应该看起来像这样。

![图 4.12 – 配置 Webhook 节点以提供网页

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.12_B17493.jpg)

图 4.12 – 配置 Webhook 节点以提供网页

在编辑器 UI 中添加一个设置节点，并将其连接到Webhook节点。将仅保留设置按钮切换到 true（绿色）。

在名称字段中点击html，并在值字段中输入以下表达式：

<html>
<body>
<h1>From n8n with love </h1>
<b>Host:</b> {{$json["headers"]["host"]}}
</br>
<b>User Agent:</b> {{$json["headers"]["user-agent"]}}
</body>
</html>

在这里，我们添加了一些 HTML 并使用表达式指向Webhook节点提供的宿主和用户代理值。执行你的工作流程，并在浏览器中再次打开测试 Webhook URL。你应该看到如下内容。

![图 4.13 – n8n 工作流程提供的网页

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.13_B17493.jpg)

图 4.13 – n8n 工作流程提供的网页

现在我们知道了如何使用 n8n 提供网页，让我们看看拼图中的下一部分——从 GitHub 和 Docker Hub 获取数据。为此，请按照以下步骤操作：

在你当前的工作流程中，删除设置节点。将GitHub节点添加到编辑器 UI，并与Webhook节点连接。
按照以下步骤配置GitHub节点的凭据：https://docs.n8n.io/credentials/github。
分别在字段中选择n8n-io和n8n。
点击执行节点按钮，它应该返回你指定的仓库的详细信息。它看起来应该像这样：

![图 4.14 – GitHub 节点的输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.14_B17493.jpg)

图 4.14 – GitHub 节点的输出

如果你浏览此节点的输出，你会注意到我们还会得到星级和分支计数的结果。接下来，我们需要从 Docker Hub 获取拉取次数。我们将使用HTTP 请求节点来完成此操作。

在编辑器 UI 中添加HTTP 请求节点，并将其连接到GitHub节点。在HTTP 请求节点中输入以下 URL：https://hub.docker.com/v2/repositories/n8nio/n8n。你可以自由地替换为你的仓库的 URL。执行节点，输出应该看起来像这样：

![图 4.15 – HTTP 请求节点的输出

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.15_B17493.jpg)

图 4.15 – HTTP 请求节点的输出

现在我们已经拥有了所有需要的信息，我们只需要创建一个漂亮的 HTML 模板来显示所有这些信息，我们就可以准备就绪了。

在编辑器 UI 中添加一个设置节点，并将其连接到HTTP 请求节点。将仅保留设置字段切换到 true（绿色）。

在名称字段中点击html，并将表达式添加到值字段中。将以下 HTML 代码粘贴到表达式编辑器中：

<html>
<head>
Add styling to our dashboard so that it looks nice
<style>
@importurl(https://fonts.googleapis.com/css?family=Droid+Sans);
@importurl(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
* {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
.fl{ float:left; }
.fr{ float: right; }
/*its also known as clearfix*/
.group:before,
.group:after {
     content: "";
     display: table;
}
.group:after {
     clear: both;
}
.group {
     zoom: 1;  /*For IE 6/7 (trigger hasLayout) */
}
body {
     background: #F2F2F2;
     font-family: 'Droid Sans', sans-serif;
     line-height: 1;
     font-size: 16px;    
}
.pricing-table {
     width: 80%;
     margin: 50px auto;
     text-align: center;
     padding: 10px;
     padding-right: 0;
}
.pricing-table.heading{
     color: #9C9E9F;
     text-transform: uppercase;
     font-size: 1.3rem;
     margin-bottom: 4rem;
}
.block{
     width: 30%;    
     margin: 015px;
     overflow: hidden;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;    
/*     border: 1px solid red;*/
}
/*Shared properties*/
.title,.pt-footer{
     color: #FEFEFE;
     text-transform: capitalize;
     line-height: 2.5;
     position: relative;
}
.content{
     position: relative;
     color: #FEFEFE;
     padding: 20px010px0;
}
.price{
     position: relative;
     display: inline-block;
     margin-bottom: 0.625rem;
}
.pricespan{    
     font-size: 3rem;
     letter-spacing: 8px;
     font-weight: bold;   
}
.pt-footer{
     font-size: 0.95rem;
     text-transform: capitalize;
}
/*PERSONAL*/
.block.personal.fl{ 
    background: #78CFBF;    
}
.block.personal.fl .content,.block.personal.fl .pt-footer{
     background: #82DACA;
}
.block.personal.fl .content:after{    
border-top-color: #82DACA;    
}
.block.personal.fl .pt-footer:after{
     border-top-color: #FFFFFF;
}
.block.business .title{
     background: #3EC6E0;
}
.block.business .content,.professional .pt-footer{
     background: #53CFE9;
}
.block.business .content:after{    
border-top-color: #53CFE9;    
}
.block.business .pt-footer:after{
     border-top-color: #FFFFFF;
}
/*BUSINESS*/
.block.business.fl .title{
     background: #E3536C;
}
.block.business.fl .content, .block.business.fl .pt-footer{
     background: #EB6379;
}
.block.business.fl .content:after{    
border-top-color: #EB6379;    
}
.block.business.fl .pt-footer:after {    
border-top-color: #FFFFFF;    
}
</style>
</head>
Create three different div elements to position and display the three metrics
<body>
     <div class="wrapper">
     <div class="pricing-table group">
     <h1 class="heading">
     Metrics overview
     </h1>
     <div class="block personal fl">
     <h2 class="title">GitHub Stars</h2>
     <div class="content">
     <p class="price">
     <span>{{$node["GitHub"].json
        ["stargazers_count"]}}</span>
     </p>
     </div>
     </div>
     <div class="block business fl">
     <h2 class="title">GitHub Forks</h2>
     <div class="content">
     <p class="price">
     <span>{{$node["GitHub"].json["forks"]}}</span>
     </p>
     </div>
     </div>
     <div class="block business">
     <h2 class="title">Docker Pulls</h2>
     <div class="content">
     <p class="price">
     <span>{{$node["HTTP 
       Request"].json["pull_count"]}}</span>
     </p>
     </div>
     </div>
     </div>
     </div>
</body>
</html>

我们使用了一些 HTML 和 CSS 使指标仪表板更具可展示性。您会注意到，我们有三个不同的容器来展示我们从 GitHub 和 Docker Hub 拉取的三个不同值。

保存并激活工作流程。现在获取生产 webhook URL 并在浏览器中打开它。它应该看起来像这样：

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.16_B17493.jpg)

图 4.16 – 使用生产 webhook URL 打开仪表板

恭喜您，您已经构建了一个指标仪表板，它从两个不同的来源拉取数据，并使用从您的 n8n 工作流程提供的网页显示它。

随着我们继续前进，您将构建许多不同的工作流程。让我们看看您如何发现和与 n8n 社区分享工作流程。

分享和发现工作流程

有时，与社区分享您的工作流程来展示您所构建的内容并激发他人是有意义的。发现其他社区成员提交的工作流程以获取您下一个项目的灵感也是很有用的。

n8n.io 网站有一个专门用于分享和发现工作流程的页面。您可以通过以下链接访问该页面：https://n8n.io/workflows。您可以使用标题、描述和 JSON 提交工作流程。这是提交的工作流程的样子：

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_4.17_B17493.jpg)

图 4.17 – n8n.io/workflows 上提交的工作流程示例

网站会自动识别您在工作流程中包含的节点，并在右侧列出它们。在提交工作流程时，请确保以下事项：

特定的工作流程尚未存在。
标题是描述性的。
描述解释了工作流程的功能，并附有截图以帮助说明。

这也是一个发现社区其他成员提交的工作流程以获取灵感的好地方。在构建您的工作流程时，如果您遇到任何问题，您总是可以在社区论坛中发布您的问题：https://community.n8n.io/。

n8n 拥有一个非常活跃的社区，论坛在您遇到问题时提供及时帮助非常有用。我们自己也在论坛上花费大量时间回答问题，所以如果您在阅读本书的任何地方遇到困难，请在社区论坛中告诉我们，我们会尽力帮助您。我们在论坛上的用户名是 @tanay 和 @tephlon。

摘要

在本章中，我们了解了为什么使用 n8n 构建产品是有意义的，并通过构建一个 Telegram 机器人和一个 指标仪表板 将我们的两个产品想法翻译成 n8n 工作流程。拥有产品思维并了解如何使用节点推动您的项目前进将在下一章中很有用，我们将使用 n8n 和 Bubble 构建自己的项目。

在下一章中，我们将探讨如何构建现代系统之间通用的通信方式：应用程序编程接口，或更常见的简称API。我们将学习如何使用n8n构建API，以便为那些尚未拥有这种信息访问方式系统的数据暴露和收集提供支持。

第六章：第2节 – 构建一个API来为您的应用程序提供动力

在本节中，您将构建一个完整的API解决方案，用于接收和响应来自外部系统的实时请求。

在本节中，包含以下章节：

第5章，构建您的第一个API端点
第6章，使用无代码数据库为您的API提供动力
第7章，在工作流中转换您的数据
第8章，在n8n中使用Bubble API

第七章：第五章：构建您的第一个API端点

沟通是所有关系的基础。良好或糟糕的关系通常由两个人传达他们的思想、感受和想法的能力来定义。沟通需要清晰、准确和值得信赖。

适当地共享信息对于计算机应用程序也是至关重要的。在两个不同的应用程序之间有标准的方式来发送和接收数据对于许多程序至关重要。

其中一个标准被称为API，代表应用程序编程接口。我们正在专门使用REST API架构风格。它被设计为快速提供信息并根据标准HTTP方法执行操作。

由于这是一个众所周知且理解的标准，在本章中，我们将向您展示如何使用n8n规划和构建API。我们将通过理解API的核心概念，并思考您希望最终产品执行的功能来帮助您规划API。您还将了解如何使用n8n构建、保护和测试您设计的API。

在本章中，我们将涵盖以下主题：

规划您项目的API
配置Webhook节点以处理请求
在n8n中构建API
保护您的API端点
测试您的API

到本章结束时，您将能够完成以下任务：

为API端点创建蓝图，以便在构建API时减少摩擦。
配置Webhook节点，使其能够处理发送到我们的API的请求并对其进行回复。
基于我们创建的蓝图，在n8n中构建一个API端点。
通过使用Webhook节点中可用的不同身份验证方法来确保您的API端点安全。
测试您的API以确保我们已实现的全部功能按预期工作。

技术要求

以下为本章节的技术要求：

n8n的一个工作版本。
一个网络浏览器。
访问本书的GitHub仓库：https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n。另一个有用的工具是Insomnia API工具，可在https://insomnia.rest/找到。

规划您项目的API

在您开始构建API之前，您必须有一个稳固的路线图。此计划允许您更快地创建API，并确保设计一致且准确。

当您规划API时，需要考虑几个不同的维度。例如，良好的API设计，请参阅https://swagger.io/specification/上的OpenAPI规范。

易于理解

对于使用API的开发者来说，API的工作原理应该是几乎显而易见的。API应该有与类似API一致的术语，并充分描述它使用的信息和执行的操作。

以JSON格式输出数据

尽管有几种不同的数据格式可供使用，例如 XML、YAML 和 SOAP，但 REST API 最常以 JSON 格式输出数据。为了保持一致性，建议所有 API 至少能够以 JSON 格式输出数据。

使用 GET、HEAD 和 POST HTTP 方法

n8n 支持三种不同的 HTTP 方法（你可以将 HTTP 方法视为动作动词，告诉系统如何处理它接收到的请求）：

GET
HEAD
POST
DELETE
PATCH
PUT

尽管有几种其他的 HTTP 方法可用，例如 UPDATE，但在撰写本书时，n8n 不支持它们。

最常用的两个 HTTP 方法是 GET 和 POST，每个都提供特定的操作。

GET 方法通常用于尝试从 API 中检索（或获取）信息。它不应用于向 API 传递敏感信息。查询参数通常以人类可读的 URL 格式传递，并且经常存储在网页浏览器的历史记录中。

然而，这种方法的一个缺点是，当提交给服务器时，它不会在 URL 中显示所请求的所有信息。

注意

这假设在 API 的头信息中没有应用任何安全措施。

POST HTTP 方法通常用于向提供 API 的系统创建或添加新的记录。在 n8n 中，它也常用于更改记录，因为目前没有 UPDATE HTTP 方法支持。

使用 POST HTTP 方法的优点之一是，当提交给服务器时，它不会在 URL 中显示。

注意

有关响应代码的更多信息，请参阅 HTTP 方法 子节，位于 HTTP 请求节点 – 与任何 API 交谈 部分，见 第 3 章，深入了解 n8n 的核心节点和数据。

了解你的 API 将做什么

精确了解你的 API 意在做什么至关重要，这不仅涉及 API 的功能，还涉及系统内部。一个简单的 API 调用可以在幕后高效地执行许多不同的操作。

一旦系统接收到 API 请求，就详细规划每个 API 调用的具体操作。这应该非常详细，并且要很好地记录。

有意义且一致的响应代码

在响应 API 调用时，可以使用几种不同的响应代码。然而，通常建议你限制自己使用 2xx 和 4xx 代码，因为大多数其他代码由其他系统处理，例如 web 服务器（尽管对此有一个例外）。

通常，建议你为每个声明的目的使用以下代码：

200 (OK): 所有数据都已接收、处理并正确返回。无需进一步操作。
201 (已创建): 通常与POST请求一起使用，这表示请求已导致创建新的资源，并且资源的信息已包含在结果中。
202 (已接受): 当信息异步处理时，系统可能已经接收到了信息，但尚未在系统中激活，因此API可以返回一个202代码。这会让请求者知道信息已经到达目的地，但还不能访问。
203 (非权威信息): 如果您正在缓存本地数据以减少对远程数据源的调用次数，您的API可以返回一个203响应代码，让用户知道他们接收到的信息是准确的，因为上次它拉取信息副本时是这样的，尽管在此期间可能已经发生了变化。
204 (无内容): 有时，向API发出信息请求，但没有内容可以返回给用户。例如，如果API引用了一个动物列表（例如，猫、狗和马）并且用户请求了所有爬行动物的列表，结果中就不会有动物。这时，API会以204响应代码响应，让用户知道API打算发送回没有信息，并且没有错误导致API没有返回结果。
206 (部分内容): API的GET请求生成数千条记录并不罕见。返回所有这些记录可能会对托管API的服务器和接收数据的客户端造成很大负担。在传输大量数据时，也可能会有相当大的带宽使用。
API只向请求者发送部分记录（通常称为分页）以减轻这个问题。它包括一个206响应代码，让我们知道还有更多信息要接收。
400 (错误请求): 错误地编写API请求很简单，并且重要的是要让请求者知道他们犯了错误。例如，如果请求者通过电子邮件地址搜索用户，但要求系统在名字字段中查找信息，那么应该返回一个400响应。
401 (未授权): 您应该使用某种类型的身份验证方案来保护您的API。当有人提供错误的身份验证信息时，应该生成并返回一个401响应代码给用户。
403 (禁止访问): 有时，人们试图访问他们不应该访问的信息，无论他们是否已正确认证到系统中。在这种情况下，系统会向用户返回一个403响应代码。我经常在我将API设置为只能从特定的IP地址访问时使用这个响应代码，而IP地址不匹配。
404 (未找到): 用户不小心输入错误的URL信息或资源移动的情况并不少见。当这种情况发生时，发起请求的用户将自动收到一个404错误。

注意

更多关于响应代码的信息，请参阅第3章的响应代码部分，深入n8n的核心节点和数据。

一致的主语/动词设计

一种非常常见的API布局方式是使用名词/动词架构。这种设计背后的理念是，请求者从一个对象或项目开始，紧接着是对该对象执行的操作。

例如，如果我们创建一个会更改数据库中设备名称的API，请求路径可能看起来像这样：

/device/rename

类似地，如果我们从数据库中删除该设备，API调用路径可能看起来像这样：

/device/remove

提交数据

向API提交数据有几种不同的方式。完全取决于你希望用户如何将信息发送到你的API：

主体: API请求的主体是放置信息的一个常见位置。这通常用于POST HTTP请求。
/record/237/delete来完成这项任务。
GET HTTP方法，因为它用于请求特定信息。查询通常由URL表示，甚至以这种方式显示。例如，如果你要使用查询从系统中请求第237条记录，URL路径可能看起来像这样：https://api.example.com/record/display?recordID=237。?字符将API路径和查询分开。recordID是要搜索的数据键，而237是系统正在寻找的键的值。你还可以通过使用&字符将查询连接起来，在查询中包含多个键/值对；例如，recordID=237&fname=Tim。
头部: 你也可以在请求中将信息作为头部的一部分发送。这通常发生在你发送认证信息，如API令牌到API时。

API版本控制

当你的系统发生变化和成熟时，你可能想要修改你的API。修改API工作方式的问题在于，这些更改可能会突然导致大量用户程序和脚本失败。这很快就会导致几个不满的客户。

一种解决这个问题的简单方法是为你的API创建多个版本。这样，人们可以继续使用他们之前的API版本的脚本，而新用户可以自动迁移到新版本。

然而，创建API的多个版本存在问题。随着版本数量的增加，维护整个系统和所有版本所需的工作量也会增加。

为了避免这种不断增长的努力，建议您在任何时候维护不超过两个版本的API。当API的新版本发布时，应明确通知用户，旧版本已被替换，并且将在合理的时间内停用（“合理”取决于受众，可能是几周或几年）。

记录您的API

设计过程中最重要的部分之一是记录API文档，以便其他人能够正确地使用它。这也有助于你在两年后回过头来排查问题时，能够弄清楚自己当时做了什么。

OpenAPI规范

较常见的文档形式之一是OpenAPI规范(https://github.com/OAI/OpenAPI-Specification)。学习这个规范只需要几个小时，并且可以与其他工具结合使用，以自动创建API测试平台和所有用户文档。

该规范使用JSON或YAML文件来概述API的行为以及如何为规范创建文档。

下面的内容是一个简单的JSON OpenAPI规范文件的详细内容：

{"openapi": "3.0.0",
  "servers": [
    {"description": "User Example",
      "url": "https://virtserver.swaggerhub.com/
        tephlon/user-example/1.0.0"}
  ],
  "info": {"version": "1.0.0",
    "title": "User Example",
    "description": "Add a user with the API"},
  "paths": {
    "/api/v1/user/add": {
      "post": {
        "tags": ["Users"],
        "operationId": "addUser",
        "parameters": [
          {"name": "email",
            "in": "query",
            "description": "User's Email Address",
            "schema": {"type": "string"}
          },
          {"name": "password",
            "in": "query",
            "description": "User's Password",
            "schema": {"type": "string"}
          }
        ],
        "responses": {
          "200": {
            "description": "User Added Successfully",
            "content": {
              "application/json": {
                "schema": {
                  "properties": {
                    "userID": {"type" : "integer"}
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

这只是我们将在本章接下来的几节中构建的API的一小部分。

下面的截图显示了从该规范文件生成的文档：

![图5.1 – 从OpenAPI规范文件生成的文档

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_5.01_B17493.jpg)

图5.1 – 从OpenAPI规范文件生成的文档

我们已经为这个创建了完整的API定义，您可以在以下位置找到：

https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/tree/main/Chapter%205

现在我们已经知道了如何设计API，是时候深入n8n并开始创建我们的API的基本设置了。

配置Webhook节点以处理请求

在n8n中构建API的核心节点是Webhook节点。虽然这表面上可能看起来有些奇怪，但当你以正确的思维方式去思考时，它就变得非常有意义。

Webhooks是一种位于系统上的网络服务，等待被调用以执行某些操作。与此同时，API是客户端用来在远程服务器上执行操作的服务的：

![图5.2 – Webhook节点

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_5.02_B17493.jpg)

图5.2 – Webhook节点

因此，从客户端的角度看，API与从服务器的角度看Webhook是相同的！这就是为什么我们使用Webhook来创建API的原因。

Webhook节点是一个触发节点，当它接收到远程连接时执行工作流程。它收集接收到的信息，并根据这些信息执行操作。

参数

Webhook 节点通过在节点本身设置参数进行配置。这些参数中的每一个都会修改 Webhook 的行为，一些参数，如认证和HTTP 方法参数，甚至为用户提供了更多选项。

Webhook URLs

如果你点击 Webhook 节点上显示为Webhook URLs的文本，它将在其下方打开一个小面板。你会看到两个按钮，一个上写着生产，另一个上写着测试。这些是可用的两种不同类型的 Webhook URL。

n8n 云中的这些 URL 通过组合 n8n 协议（https://）、主机名（tephlon.app.n8n.cloud/）、Webhook 根（生产为 webhook，测试为 webhook-test）和 Webhook 路径（f929fdc9-b62a-4661-913e-b5648c407edd）来构建。这创建了两个 Webhook 路径：https://tephlon.app.n8n.cloud/webhook/f929fdc9-b62a-4661-913e-b5648c407edd 用于生产，以及 https://tephlon.app.n8n.cloud/webhook-test/f929fdc9-b62a-4661-913e-b5648c407edd 用于测试：

![Figure 5.3 – Initial Webhook properties

Figure 5.3 – Initial Webhook properties

你可以通过将 f929fdc9-b62a-4661-913e-b5648c407edd 更改为 api/v1/user/add 来修改 Webhook 的端点位置，然后 Webhook 路径将更改为 https://tephlon.app.n8n.cloud/webhook/api/v1/user 用于 https://tephlon.app.n8n.cloud/webhook-test/api/v1/user/add 的测试：

Figure 5.4 – 修改 Webhook 路径

两种不同的 Webhook URL 类型 – 生产和测试 – 用于不同的目的。生产 URL 在你的工作流程已保存并设置为活动时使用。即使编辑器 UI 未打开，Webhook 也会响应。它旨在独立可用并完全自主工作。

测试 URL 设计用于在构建和调试你的 API 时使用。它仍然需要将你的工作流程保存以注册 Webhook URL，但它只有在满足以下条件之一时才会激活：

你在编辑器 UI 中按下执行工作流程按钮。
当你在一个开放的节点上按下执行节点按钮时，这个节点要么是 Webhook 节点，要么是 Webhook 节点的子节点，并且没有可处理的信息缓存。

测试 URL 在以下任一操作发生之前都可用：

进行连接尝试。
在编辑器 UI 中按下停止按钮。
自 Webhook 启动以来已过去 120 秒。

一旦发生这种情况，Webhook URL 将注销，工作流程将停止。

测试 URL 的目的是提供一个简单的方法来查看在请求时每个节点发生了什么，并调试开发中的工作流程。

认证

由于API是人们以编程方式从系统中访问纯数据的一种非常常见的方式，因此您很可能希望保护这些数据。即使您的API将公开对每个人可用，设置API的注册和认证也是一个好主意，这样您可以跟踪谁在使用（或滥用）您的API。

虽然有许多不同的方面可以保护您的API（其中许多将在本章稍后部分介绍），但我们想快速查看您的API认证。这可以通过使用认证参数来完成。

认证参数有三个不同的选项：

无
基本认证
头部认证

选择无作为认证参数是显而易见的：Webhook在执行工作流或返回信息之前不会寻找任何形式的认证。虽然不使用任何认证的API有有效的用例（例如，您希望将Webhook用作Web服务器并显示网页内容），但通常这种做法是不受欢迎的。

基本认证是n8n可以使用的最简单的认证形式。它本质上发送一个基于Base64计算的用户名和密码版本到n8n，并将其与它记录在案的密码信息进行比较。

例如，如果我们为我们的API使用基本认证，并且所需的用户名和密码是jim.nasium和123456，API客户端将计算jim.nasium:123456的Base64版本（即amltLm5hc2l1bToxMjM0NTY=），并将其发送在头部请求中。

计算Base64值

如果您需要为函数节点生成Base64值，您可以使用以下代码为您完成。只需替换用户名和密码的值即可：

var username = "jim.nasium";

var password = "123456";

var encoded = Buffer.from(username + ":" + password).toString('base64');

虽然这比完全没有认证要好，但它并不算很好。由于Base64编码的文本很容易逆向工程，建议通过SSL/TLS证书等补充手段正确地保护API。

头部认证与基本认证类似，因为它在API请求的头部发送一个值。然而，不同之处在于它只是一个非常难以记忆的随机字符序列。

在基本和头部认证场景中，您需要创建凭证，这些凭证包含用户访问API所需的信息。没有这些凭证，您的用户将无法使用API。

HTTP方法

正如我们在本章前面提到的，n8n Webhook节点支持三种不同的HTTP方法：

GET
HEAD
POST

根据您选择的HTTP方法，不同的选项将可供您使用。

一般选项

所有方法都提供了四种选项：

响应内容类型
响应头
属性名称
原始正文

/")字符。

例如，如果您的API返回JSON数据，您将设置text/json。

要查看所有可用媒体类型的官方列表，请访问https://www.iana.org/assignments/media-types/media-types.xhtml上的互联网数字分配机构（IANA）媒体类型网页。

响应头选项允许您向头部添加额外的键值对，以提供额外的元数据给响应。这是关于用户从API接收的数据的信息。

它通常用于确认数据在发送者和接收者之间准确无误且未被篡改。它可能包含接收者可以计算以确定信息准确性的哈希算法，或表示接收信息的时间戳。

属性名称选项允许您仅返回特定值/键对的值。

例如，假设您已设置一个Webhook，输出以下JSON对象：

{
  "response": "Hello!",
  "status": "Successful"
}

现在，如果我们修改该Webhook并添加属性名称选项，其值为状态，我们的输出将如下所示：

Successful

如果您在键值对中有HTML，并且只想输出HTML以显示网页，这很有用。

最后一个选项是原始体。原始体选项是一个二进制（开或关）值，表示进入Webhook的信息是以原始格式，如XML或JSON。

额外的POST选项

当您选择HTTP方法的POST时，将有一个额外的选项可用。这是二进制数据选项。此选项用于指示API期望请求中附加二进制数据。当您向系统上传文件时，这很有用。

响应代码

响应代码参数用于向发送者发送快速响应，让请求者知道其请求的结果。

我们在本章前面已经详细介绍了响应代码，所以我不打算再次讲解它们，但请确保您参考代码并回复适当的响应。

注意

当一切顺利时，您选择的响应代码将被发送。其他失败响应代码（例如，404）将由系统发送，此处不需要编程。

响应模式

响应模式选项控制Webhook如何响应请求。可以为响应模式选项设置两个选项：

接收时
最后一个节点

通常，如果您不向请求者返回数据，您将想要使用接收时选项。否则，如果您通过API发送信息，您应使用最后一个节点选项。

接收时选项将立即将响应代码选项的值发送回发送者。它不会等待工作流程完成再返回此代码。

与 最后一个节点 选项相比，事情变得更有趣。当你想向请求者返回信息时，此选项将启动一个工作流程，然后最后执行节点的结果（或部分结果）将以 JSON 格式返回给请求者。

响应数据选项

当你选择 响应模式 中的 最后一个节点 选项时，这将启用一个名为 响应数据 的新参数。响应数据 的三个选项如下：

所有条目
首条条目 JSON
首条目二进制

要了解此选项如何工作，我们将查看一个示例。假设我们有一个工作流程，其最终节点输出以下 JSON 数组：

[
  {
   "name": "Jim Nasium",
    "city": "Berlin"
  },
  {
    "name": "Kris P. Bayken",
    "city": "Edmonton"
  }
]

此外，对于数组中的每个 JSON 对象，都有一个与对象关联的二进制文件；第一个是 CV - Jim Nasium.pdf，第二个是 Resume - Kris P. Bayken.pdf。

如果我们将 响应数据 参数设置为 所有条目，请求者将收到整个数组内容，但没有任何文件。

当我们将 响应数据 更改为 首条目 JSON 时，接收者将收到以下 JSON 对象：

{
  "name": "Jim Nasium",
  "city": "Berlin"
}

最后，如果我们使用 CV - Jim Nasium.pdf 文件。

既然我们已经详细地了解了 Webhook 节点，现在是时候开始在 n8n 中构建我们的 API 了。

在 n8n 中构建 API

我们终于准备好开始在 n8n 中构建了！让我们先概述我们的项目。

API 项目规范

对于我们的项目，我们将构建一个简单的用户管理 API，该 API 将修改 Airtable 数据库中的用户信息。我们将构建的大部分工作流程对 API 本身并不重要。我们只需要关注每个 API 的结果。

我们的 API 将有五个端点：

POST /api/v1/user/add
GET /api/v1/user/list
GET /api/v1/user/search
POST /api/v1/user/delete
POST /api/v1/user/changepw

我们 API 的基本 URL 将是 https://tephlon.app.n8n.cloud/webhook，因为那是我的 n8n 云实例的 Webhook URL。

我们的 API 还将使用带有 675tryfhgui89765tyrfghjui89765uyr4thfgjuio 认证令牌值的头认证。

Airtable 数据库将存储以下信息：

名字：用户的名字
姓氏：用户的姓氏
电子邮件：用户的电子邮件地址
密码哈希：表示用户密码的计算值

注意

我们不存储用户密码的原因是为了安全。如果数据表遭到破坏，用户的密码就会泄露。通过存储基于用户密码的计算值，每次向 n8n 提供密码时都可以执行相同的计算，并将计算值与存储值进行比较。

创建凭证

第一步将是创建头认证：

在 n8n 编辑器 UI 中，点击 "^" 图标，然后点击新建。
当提示时，选择 头认证 作为 凭证类型。
在 Header Authentication
Auth
Bearer 675tryfhgui89765tyrfghjui89765uyr4thfgjuio
Webhook

最终凭据表单应如下所示：

图5.5 – 头部认证凭据

点击创建按钮以完成此过程。

创建Webhooks

接下来，让我们在n8n中创建Webhooks：

创建五个新的Webhook节点，并按如下命名：
- Add
- List
- Search
- Delete
- ChangePW
根据以下表格配置每个Webhook：

这样就应该完成了初始Webhook创建。请确保保存并激活工作流程。

工作流程的其余部分

虽然整个工作流程对于生成API的正确结果很重要，但它与API本身关系不大。

您可以在此处下载整个工作流程：https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/blob/main/Chapter%205/User_Management_API.json。

现在我们已经在n8n中构建了API，让我们看看如何进一步保护您的API端点。

保护您的API端点

在本章前面，我们讨论了使用Webhook授权来帮助保护您的API。这是一个重要的第一步，但这并不意味着您的API是安全的。您还可以采取一些额外措施来保护API。

使用SSL/TLS安全

SSL及其年轻的兄弟TLS是互联网上的常见安全标准。每次您在网站地址前看到https时，这意味着其中之一正在工作。

SSL/TLS的目的在于加密客户端软件（例如，网络浏览器、n8n和API客户端）与托管API的Web服务器之间的通信。这样，如果有人在你和API服务器之间设置自己，他们得到的将是一堆乱码，而不是用于访问该信息的API令牌和密码。

限制用户的来源

减少被恶意行为者关闭概率的一种方法是根据他们的来源限制谁可以访问您的API。例如，如果所有使用您的API的客户都来自德国，那么允许来自加拿大的人访问API就没有意义。

虽然这不是一个完美的解决方案，因为使用VPN相对容易绕过，但这意味着那些想要制造麻烦的人需要跳过另一个障碍。

如果您想将此选项提升到下一个层次，您甚至可以限制对单个IP地址的访问，这样只有来自特定办公室的人才能使用您的API。

代理您的API

将您的API放在代理后面是您可以做的最聪明的事情之一。以下是这样做的一些好处：

它阻止人们直接访问您的API服务器。
它隐藏了其他可能危险的开放端口。
它可以通过缓存请求并在不与API服务器通信的情况下返回结果来减少对API和其他工具的调用。
它可以将请求分散到多个服务器。

由于代理提供了所有这些优势，因此深入研究设置代理是值得的。

轮换安全令牌

由于每天都有安全漏洞发生，定期更改API令牌也是非常值得的。有几种不同的方法可以做到这一点，但你需要找到适合你的方法。

做这件事的最好方法之一是在一定期限后使令牌过期。到那时，用户将需要获取一个新的令牌。这可以自动化，以便在令牌过期后，系统知道去请求一个新的。

这样，即使你的令牌泄露，互联网上的人开始使用它，他们也只有短暂的访问权限，然后令牌会过期，需要生成新的令牌。

跟踪和限制请求数量

记录你API服务器上发生的每一个连接尝试非常重要。这为你提供了两个优势：

你可以识别你的API服务器上是否有任何异常行为发生。
你可以防止某个人或组织滥用API服务器。

用户（通过他们的令牌识别）和组织（通过他们的IP地址识别）应该将他们发出的调用数量限制在合理的速度。

在你的API响应中提供元数据

在你提供给用户的信息中嵌入有用的元数据是允许最终用户验证他们接收到的信息是否准确的好方法。以下是一些好的元数据示例：

在用户下载文件时提供MD5校验和值
指示查询返回的记录数
对用户来源的城市执行GeoIP查找，以便他们可以确认请求是合法的
以一定数量的字符返回结果的长度

一旦你的API安全，就是时候开始测试其健壮性了。

测试你的API

为你的API创建一个测试计划是设计和推出过程中的一个重要部分。如果你没有正确测试你的API，你无法预测你的客户将得到什么结果。

由于其重要性，让我们看看一些API测试的建议。

使用测试平台

虽然你可能能够手动测试一些小型或简单的API，但它们越大，测试就越困难。这不仅允许你进行更多的测试，而且在你做出更改后，你可以轻松地重新测试，知道测试与上一次相同。

如果你没有测试平台，你可以轻松地使用cURL命令行工具创建几个测试脚本，或者使用内置在Insomnia（https://insomnia.rest）中的文档和测试工具。

遵循文档

您创建或收到的文档非常重要。请确保您可以做文档所说的每一件事，而不会做它没有说您可以做的事情。

您应该能够毫无例外地完成文档中提到的每一件事。

尝试破坏它

这是测试过程中您可以玩得很开心的部分。以下是我过去成功尝试的一些想法：

使用不同的字符集发送信息。
将SQL命令作为用户名或密码输入，并查看这些命令是否在服务器上执行。
通过每秒成千上万次的调用来超载服务器。
尝试获取服务器上您不应能够访问的信息。

确认数据

当您测试API时，请确保您期望接收的数据就是您实际接收到的数据。查看一两个样本然后推断整个数据集返回的信息是准确的，这真的很简单。

持续测试

正如数据备份应该定期测试以确保数据可恢复一样，定期测试您的API也同样重要。

随着API运行的环境的改变，您的API的性能也会改变。以下是一些可能导致您的API开始表现不佳的环境变化：

用户数量突然增加
数据库大小增加
更大且更频繁的数据请求
设计不佳的代理
工作时间表的变化

通过持续测试和升级API，您可以确保API按预期运行，并继续让您的客户满意。

摘要

在本章中，我们向您展示了如何规划您的API并在n8n中使用Webhooks构建它。我们还介绍了如何测试和确保您的API在生产中正常工作。

虽然我们可能已经讨论了很多关于API的内容，但我们还有大量的内容需要探讨。

我没有详细讨论的一个API方面是，在n8n工作流程中操作API发送和接收的数据。如果API是计算机系统之间用来相互通信的语言，那么在n8n工作流程中发生的数据操作就是将那种API语言翻译成，以便两个或更多不同的系统可以通信，即使它们不知道彼此的语言。

我们将在下一章更深入地讨论这种数据操作，因为它不仅是一个重要的主题，而且是一个关键的主题。

第八章：第6章：用无代码数据库为您的API供电

在本章中，您将学习如何使用无代码数据库进行数据存储。您将了解无代码数据库、为您的项目选择数据库以及如何向Airtable读写。您还将了解在处理这些数据库时的一些最佳实践。本章中学习到的概念将帮助您使用数据存储来存储用户生成数据并构建完整的产品。

本章将涵盖以下主要主题：

了解无代码数据库
为您的项目选择数据库
使用Airtable读写数据
与数据库一起工作的最佳实践
优化您的应用程序编程接口（API）以用于生产

技术要求

在继续本章之前，您需要准备以下技术要求列表：

您已在Airtable上创建了一个账户
n8n正在运行，并且编辑用户界面（UI）已打开

了解无代码数据库

数据库通常是产品的骨架。数据库通常是存储大量数据的系统。用户可以在查看和执行数据计算的同时添加、删除或修改数据。

数据库有多种形式，例如结构化查询语言（SQL）数据库、NoSQL数据库和时间序列数据库。根据用例，通常选择其中一种而不是另一种是有意义的。许多这些数据库使用查询语言来与数据库交互，以执行基本查询，如插入、读取、更新和删除数据。您可以在以下屏幕截图中看到一些数据库示例：

图6.1 – 来自db-engines.com的历史趋势图

由于我们专注于使用无代码工具构建产品，而且我们没有时间快速学习这些查询语言，因此我们需要寻找一些替代方案。幸运的是，已经有一些非常好的替代方案可供选择。其中最受欢迎的两个是Airtable和Google Sheets。与传统的数据库相比，这些工具更容易使用，因为它们采用了熟悉的类似电子表格的设计，比数据库模型更容易理解。由于这些工具也非常强大，越来越多的人开始在他们的项目中使用它们。

Airtable和Google Sheets都有一个n8n节点，我们可以使用这些节点来执行创建、读取、更新和删除（CRUD）操作，以为我们的API和应用提供动力。现在我们已经了解了无代码数据库是什么，让我们考虑一下我们如何在本书的持续时间中选择一个可以使用的产品。

为您的项目选择数据库

除了Google Sheets和Airtable之外，还有许多真正酷的无代码数据库，如Baserow、Supabase、SeaTable和NocoDB。我们如何选择适合我们产品的正确数据库？你可以问自己一些问题，这些问题可能会帮助你更容易地做出这个决定：

我希望数据库为我的项目做什么？
这个工具是否有n8n节点或至少一个API？
这个工具的社区和支持生态系统有多活跃？
产品的成熟度水平如何？它是否稳定？它是否在市场上存在足够长的时间，以至于用户已经对其进行了实战测试？
关于这个工具的教育资源是否广泛可用？学习曲线是什么样的？

在选择要包含在这本书中的无代码数据库时，我们问了自己同样的问题。我们决定选择Airtable，原因如下：

Airtable有一个庞大的社区和令人难以置信的支持系统。
Airtable有一个相当不错的API，并且有一个简单的身份验证系统。n8n也有一个很好的文档Airtable节点！
Airtable已经存在一段时间了，许多制造商都使用它来构建他们的项目。
Airtable定期发布大量的教育资源，并且入门非常简单。

以下截图提供了Airtable数据库的概述：

![图6.2 – Airtable拥有大量的教育资源和一个强大的社区

图6.2 – Airtable拥有大量的教育资源和一个强大的社区

当你问自己这些问题时，你的答案可能会根据你计划工作的项目而有所不同。这是完全可以的！每个工具都有自己的利基和超级能力，这可能使它更适合某种类型的项目。

现在我们已经确定Airtable是我们目前正确的选择，让我们看看我们如何可以从n8n工作流中使用它。

使用Airtable读取和写入数据

让我们从在The n8n book中从头创建一个新的基础开始。编辑所有现有的字段，以便我们有以下四个字段，字段类型为单行文本：

用户ID
名字
姓氏
电子邮件

这与上一章中数据被插入的表格非常相似。为了简洁起见，我们移除了密码哈希字段。你的表格现在应该看起来像这样：

![图6.3 – 这是你Airtable表格应该看起来的样子

图6.3 – 这是你Airtable表格应该看起来的样子

现在我们已经准备好了我们的表格，让我们转到n8n的编辑器UI，并遵循以下步骤：

创建一个新的工作流，并向其中添加一个设置节点。我们需要设置节点来确保我们向Airtable节点发送格式良好的数据。

打开字符串类型。对于这四个值中的每一个，执行以下操作。在true（绿色）中。在值字段中，输入任何你喜欢的。

点击执行节点按钮，你的Set节点应该看起来像这样：

![图6.4 – 执行上述步骤后的Set节点输出

图6.4 – 执行上述步骤后的Set节点输出

现在我们已经以与Airtable列相对应的方式结构化了数据，让我们添加Airtable节点并将其与Set节点连接起来。此时，你的编辑器UI应该看起来像这样：

![图6.5 – 在这个阶段工作流程应该看起来像这样

图6.5 – 在这个阶段工作流程应该看起来像这样

打开Airtable节点并输入你的凭据。你可以通过遵循本页上提到的步骤找到API密钥：https://docs.n8n.io/credentials/airtable/.

修改Append，因为我们想从Table 1的Table字段插入数据，然后点击执行节点按钮。现在它应该看起来像这样：

![图6.6 – 执行上述步骤后的Airtable节点输出

图6.6 – 执行上述步骤后的Airtable节点输出

如果你回到你的Airtable基础，你会注意到记录已经被这个n8n工作流程添加到表中。恭喜你——你刚刚使用n8n在Airtable中添加了你的第一条记录！以下是展示你的Airtable表在这个阶段应该看起来什么样以及它与我们在Set节点中结构化的数据之间关系的截图：

![图6.7 – 插入到Airtable表中的记录以及它与Set节点中的数据的关系

图6.7 – 插入到Airtable表中的记录以及它与Set节点中的数据的关系

你可以用其他节点替换开始节点来获取你想要添加到Airtable的数据，并对Set节点进行适当的更改。你可能还记得上一章中，我们使用Webhook节点从我们创建的API中获取数据。

这种Set节点（用于以数据库期望的格式结构化数据）和Airtable节点（用于将数据插入到Airtable）的组合将在工作流程中保持不变。如果你想在某个其他项目中使用另一个数据库，你将用那个节点替换Airtable节点。

在数据库中插入数据时，以下是一些需要记住的关键事项：

电子表格和数据库都有列，例如名字和姓氏。你发送到数据库节点的数据需要与每行数据的这些列名相匹配。
很多次，你可能无法从API中获得最适合你的数据格式。在这种情况下，Set节点可以帮助你根据数据库的列重新建模你需要的数据，并丢弃你不需要的数据。
n8n中的电子表格和数据库节点会对输入数据的每个项目执行其配置的操作（例如Append）。

将操作作为List读取数据并输入与上一个工作流程相同的凭据和Base ID值。

点击执行节点按钮，输出应如下所示：

图6.8 – Airtable节点列表操作的输出

现在我们已经从Update和Delete的List操作中列出数据。

考虑以下场景：你需要找到一个名为Nathan的记录，并将该人的姓氏更新为Automaton。

然后，你可以构建一个类似于以下截图所示的流程来更新Airtable表中的特定记录：

图6.9 – 使用n8n工作流程在Airtable中更新特定记录

第一个Nathan。如果不是，n8n将转到Nathan，我们使用Set节点添加姓氏字段的新值。以下是配置和执行后的Set节点的外观：

图6.10 – 配置以Nathan为名的记录更新姓氏字段

最后，我们有Airtable1节点，它将更新记录。我们使用了来自第一个Set节点的记录ID（我们最初从Airtable节点获取）以及指定只更新姓氏字段。你可以在以下位置看到Airtable1节点：

图6.11 – 配置Airtable1节点以更新记录的姓氏字段

哇！该工作流程已更新Airtable中指定记录的姓氏列。你可以使用类似的工作流程来删除记录。

当将此流程作为API的一部分使用时，你可以获取要执行查找的文本以及要查找的列，以及使用Webhook节点更新的记录。然后，你可以使用表达式确保具有此工作流程的API端点可以处理动态请求，而无需为不同的列创建特定的流程。现在我们知道了如何使用n8n与无代码数据库一起工作，让我们来了解一下与数据库工作的最佳实践。

与数据库工作的最佳实践

在企业环境中使用数据库时，涉及到的不同方面有很多，但在无代码数据库中，情况可能略有不同。因为这些数据库的设计、构建和托管方式，我们在使用它们时需要稍微不同地思考。

让我们来看看一些关于数据库操作的最佳实践，以及你如何以既有效又高效的方式使用它们。

最小化带宽

虽然并非总是如此，但无代码数据库通常托管在互联网上的某个地方。这意味着你与数据库之间的可用带宽不如数据库托管在同一网络上的传统数据库那样多。

由于这种带宽现在非常宝贵（并且，根据你的数据库是如何托管/定价的，你可能真的在为发送和/或从数据库接收的每个字节付费），确保你明智地使用它非常重要。

压缩数据

通常，存储在数据库中的数据是文本形式的。文本数据具有非常高的压缩率，这减少了你与数据库之间需要发送或接收的信息量。

如果你能够在两个系统之间压缩数据，这将提高你事务的速度并减少你的带宽。

然而，请记住，这也会增加n8n和你的数据库上的中央处理单元（CPU）利用率，因为压缩需要在双方进行计算。

最小化API调用

对你的数据库的API调用，如带宽，可能很昂贵（如果你按API请求付费，实际上是这样）。它们占用资源，减慢你的应用程序（因为应用程序需要等待调用完成或超时），并增加对数据库的依赖性。

如果你尽一切可能减少API调用，这些问题可以最小化，在某些情况下，甚至可以完全避免。

最小化数据库查询

由于数据库通常运行非常快，我们作为开发者很容易在访问数据库时变得懒惰。为什么还要修改代码，用单个查询写入数据库中的三条记录，而直接在三个单独的查询中写入每条记录要容易得多呢？

这种类型的编程可能适用于位于你所在网络上的大型数据库，但当它们可以位于地球的另一端，通过波动互联网连接时，这些查询必须进行优化和最小化。

最小化数据库写入

虽然从数据库读取数据是一回事，但向数据库写入数据则是完全不同的事情。写入操作通常比数据库上的读取操作消耗更多的资源，并且执行时间更长，这通常是因为数据需要在内存中移动，有时甚至在磁盘上。

由于写入你数据库的成本相对较高，只有在你绝对需要时才写入数据，并且每次写入尽可能多的数据。这将使每次数据库写入都物有所值。

启用数据缓存

如果我们真正致力于最小化n8n和数据库之间读取和写入的数据量，一个很好的策略是将选定的数据库表的一个副本存储在n8n本地，无论是存储在内存中还是在本地JavaScript对象表示法（JSON）文件中。

然后，每次需要向数据库发出请求时，您可以先询问数据库自上次缓存更新以来是否已更改。如果已更改，则n8n应仅拉取对数据库所做的更改，并将这些更改写入缓存数据。如果没有更改，则可以跳过更新缓存，并可以在本地执行查询。

这可能是在数据库中查看数据的一种更有效的方式，而不是每次都查询数据库。这不仅加快了您的数据库查找速度，而且在长期内也减少了数据库调用次数。

备份数据库

您的数据库是您应用程序的核心。数据库必须尽可能可用，如果数据库丢失，您有方法可以恢复它。

您最好的防御措施是尽可能频繁地备份您的数据库。这样，您将最小化数据丢失量并减少恢复所需的时间。

记录交易

另一种确保您可以从数据丢失和数据覆盖中恢复的方法是记录数据库上发生的每笔交易到一个单独的交易表中。这样，如果您的数据库不可用的时间与最后备份的时间之间有差距，您可以重新创建那些交易。

此外，如果您的数据库备份完全丢失，您仍然可以通过再次执行交易来从数据丢失中恢复。这比从备份中恢复要慢得多，但比丢失所有数据要好得多。

使用记录引用和表视图

当您使用需要多次输入的数据时，在另一个数据库表中创建一个具有唯一记录ID的单独记录比每次都重复写入相同的数据更有效。

例如，如果我在创建一个需要引用用户信息（如姓名、姓氏和地址）的数据库，我可以在每次需要时将所有这些信息写入数据库表。但如果我们将这些信息写入用户表，我们就可以仅引用存储在表中的UserID值，而不是整个记录。

这允许您减少需要传输的信息量，并最小化写入的大小。

保护您的数据库

由于这些数据库托管在互联网上，并且通常可以从互联网上的任何地方访问，因此它们得到适当的保护至关重要。确保所有凭证和API密钥都安全存储，并且没有硬编码到您的应用程序中。

此外，确保所有事务都通过加密的连接（即超文本传输协议安全，简称HTTPS）进行，如果可能的话，只允许特定的互联网协议（IP）地址与数据库通信。

在数据库上执行计算

您的数据库可能比您用于托管n8n的系统强大得多。因此，如果可能的话，让数据库执行计算，特别是如果目标是提供数据库上已有数据的汇总统计信息。

而不是将所有数据发送到n8n进行处理，使用查询函数（如COUNT、MIN和MAX）在数据库上执行处理。这会将计算（即CPU负载）转移到数据库上，并减少需要在数据库和您的应用程序之间传输的信息量。

对数据库进行负载测试

开发者构建的应用程序在开发和测试中运行良好，但一旦投入生产，由于资源限制（例如，CPU达到最大值；存储太慢；带宽限制），数据库无法处理负载的情况并不少见。

确保您在数据库投入生产之前有负载测试数据库的方法。这样，您将能够确保在成为问题之前数据库拥有所有必要的资源。

现在我们数据库已准备就绪，让我们看看如何设计和构建API，以向用户提供最佳性能。

优化您的API以投入生产

您的API可能是您应用程序最重要的部分之一，因为它通常是您的客户读取和写入数据的主要方式。鉴于这种重要性，您的API从一开始就准备好投入生产至关重要。

这里有一些确保您的API准备好投入生产的方法。

减少数据库调用

与数据库的最佳实践非常一致，您需要读取和写入数据库的次数越少，您的应用程序性能越好。使用上一节中提到的许多策略来完成此操作。

在API之前缓存数据

如果您的API背后有相对静态的数据，您可以使用的技巧之一是在API前面放置一个缓存系统，这样您就可以在不实际接触API的情况下向用户提供用户请求的信息。缓存系统会定期用来自API的信息更新自己，如果它确定基于对API的相同调用，API提供的数据没有发生变化，缓存系统将仅发送它已存储在本地的数据，而不会打扰API。

最小化API调用

一些API要求你必须拥有数据库中的信息才能进行数据库查询。一个很好的例子是用户账户。通常，你会使用API查询用户表以找到所需的用户。然后，你会再次查询API，寻找该用户的具体信息。

你可以选择在应用程序中保留用户表的本地副本，并使用它来查找用户ID。然后，有了这些信息在手，你只需查询一次API就能获取所需的信息。

要求身份验证

虽然互联网上有许多公开的API，但即使你免费提供API服务，也非常重要要求进行身份验证。这增加了用户的责任感，并减少了API被滥用的可能性。

如果有人滥用你的API，身份验证可以使其更容易追踪该个人，并解决他们系统的问题或阻止他们干扰你的API。

在传输过程中加密API数据

除非你的数据在传输过程中被加密（即，当它在应用程序和数据库之间传输时），否则API密钥、凭证和敏感数据容易受到窃听的威胁。

在传输过程中保护这些数据的最简单方法是，在提供API的服务器上安装安全套接字层（SSL）证书。这加密了数据，大大减少了有人监听你的API对话的可能性。

跟踪API请求

确保如果你在互联网上提供API，肯定会有一些人试图滥用该API。这就是为什么在需要处理这些滥用者时，记录所有API交易日志至关重要。

确保你至少跟踪以下信息：

时间戳
API调用
参数
IP地址
认证密钥

这将为你提供进行数据分析的基础信息，以确定滥用者是谁以及他们可能在何处工作。

将API用户与IP地址关联

与前一项一致，如果你能让你的API只允许用户从特定的IP或IP范围内访问，这可以减少API被滥用的可能性，并在用户信息被泄露的情况下帮助他们。

限制每个用户每秒的API调用次数

如果你限制用户访问API的速度，这将有助于更均匀地分配资源给所有用户，同时减少用户意外对API进行拒绝服务（DoS）攻击的可能性。

正确记录API

如果您为您的用户和开发者提供了适当的 API 文档，他们将更容易正确使用您的 API，并保持错误日志的清洁。这将提高客户满意度，并减轻需要帮助这些人的支持团队的压力。

摘要

在本章中，我们学习了关于无代码数据库的知识，为您的项目选择无代码数据库，如何向 Airtable 读写数据，以及在与数据库工作以及优化生产环境中的 API 时的一些最佳实践。本章学到的概念将帮助您在项目中使用数据存储来存储用户生成数据并构建完整的产品。

在下一章中，我们将探讨如何在 n8n 工作流中转换您的数据。我们将进行一些实际操作练习，包括在不同 n8n 工作流之间共享数据，合并来自不同表格的数据集，以及在这些数据集上执行一些分析和计算。

第九章：第七章: 在工作流中转换您的数据

在本章中，您将学习如何在工作流中操作数据，以便您创建的API可以以有用的格式返回数据。您还将了解在工作流之间共享数据，处理数组和JSON对象，合并数据集，以及执行分析和计算。

本章将涵盖以下主要主题：

在工作流之间共享数据
合并数据集
执行计算和分析

技术要求

在继续本章之前，您需要准备以下技术要求：

您应该在Airtable上创建了一个账户。
n8n应该正在运行，并且编辑器UI应该已打开。

您可以在GitHub上找到本章的完整代码示例https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/tree/main/Chapter%207

在工作流之间共享数据

当您使用n8n构建工作流时，您可能会发现自己重复某些模式。这些模式的例子可能包括将数据推送到Airtable，将数据转换成特定格式，或执行有关传入数据有效性的检查。在其他时候，随着工作流中节点数量超过20或30个，管理这么多不同的节点和逻辑可能会变得困难。

如果您有编程背景，您可能可以将此与创建函数或模块联系起来，以便您可以创建可重用的代码块，这些代码块是模块化的且易于管理。n8n允许您使用执行工作流节点来完成此操作。

让我们考虑一个工作流：我们需要使用Hacker News节点获取数据，在工作流中过滤数据以仅包括文章的标题和URL，并将数据插入到Airtable中。为了说明目的，让我们将这个工作流分解成两部分：

从Hacker News获取数据
过滤数据并将其插入到Airtable

要执行此操作，请按照以下步骤进行：

打开n8n编辑器UI并创建一个新的工作流。添加一个Hacker News节点并将其连接到开始节点。
为Hacker News节点选择所有资源。现在，添加一个执行工作流节点并将其连接到Hacker News节点。从现在起，我们将把这个工作流称为工作流1。
保存这个工作流。现在它应该看起来像这样：

图7.1 – 使用执行工作流节点创建的工作流

在新标签页中创建一个新的工作流。在这个新的工作流中，添加一个设置节点和一个Airtable节点。
将文章的title和url属性连接并插入到{{{$json["title"]}}}
{{{$json["url"]}}}
现在，配置http://localhost:5678/workflow/297，因此ID将是297。

这就是我的工作流及其ID的样子：

![图7.2 – 过滤和将数据插入Airtable的工作流

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_7.02_B17493.jpg)

图7.2 – 过滤和将数据插入Airtable的工作流

现在，回到带有执行工作流节点的工作流，并输入新工作流的ID。执行工作流。

你会注意到工作流1运行工作流2，获取它返回的数据，并在执行工作流节点中显示。这就是你如何在n8n中在多个工作流之间共享数据并将它们分解成更易于管理的块的方法。

让我们了解我们创建的两个工作流之间数据是如何传递的。工作流1中的执行工作流节点将数据传递给工作流2的开始节点。正因为如此，工作流2中的所有节点都必须连接到开始节点。工作流2的最后一个节点将数据发送回工作流1中的执行工作流节点，如图所示：

![图7.3 – 两个工作流之间的数据流

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_7.03_B17493.jpg)

图7.3 – 两个工作流之间的数据流

让我们看看执行工作流节点提供的选项。源字段允许你指定节点应该如何查找工作流：

数据库：通过其ID从数据库加载工作流。
本地文件：从本地保存的文件加载工作流。此路径必须相对于n8n运行的位置。
参数：从参数加载工作流。在这里，你可以提供工作流JSON。
URL：从URL加载工作流。

现在，让我们看看我们如何使用合并节点在n8n工作流中合并数据集。

合并数据集

在第6章，用无代码数据库为API供电中，我们学习了如何将Airtable用作我们应用程序的无代码数据库。让我们在此基础上构建一个示例，以可视化新闻通讯管理应用程序的数据库可能看起来是什么样子。通常，数据库为不同类别的数据点有不同的表，我们可以使用唯一的ID在不同表之间引用数据。让我们通过以下示例来了解这一点：

打开你创建的名为n8n书籍的Airtable基础数据库，如第6章，用无代码数据库为API供电。将表1重命名为用户。
向其中添加两个新表，分别称为新闻通讯和统计。在新闻通讯表中，添加以下列：

NewsletterID（单行文本）

主题（单行文本）

内容（长文本）

点击量（单行文本）

在表中添加一个名为NewsletterID1的条目。现在它看起来应该是这样的：

![图7.4 – 创建和填充新闻通讯表

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_7.04_B17493.jpg)

图7.4 – 创建和填充新闻通讯表

在统计表中，添加以下列：

UserID（单行文本）

点击（单行文本）

向名为UserID1的表中添加一个条目。现在它应该看起来像这样：

![图7.5 – 创建和填充统计表

![img/Figure_7.05_B17493.jpg]

图7.5 – 创建和填充统计表

现在，我们有三个具有唯一ID的表，可以用来在不同表之间交叉引用数据。

假设我们想知道每个用户点击了多少次。我们想知道这个数字，以便在点击次数大于9时，我们可以发送电子邮件，感谢他们的积极参与。为了构建这个工作流程，我们需要两个关键信息：用户的电子邮件地址和他们的点击次数。这两个细节都位于不同的表中，仅通过唯一的UserID连接。让我们使用Merge节点来获取我们所需的所有信息。

打开编辑器UI并添加一个fields对象。由于我们不需要时间戳和Airtable节点的ID，我们可以去掉它们。您可以使用Set节点或Function/Function Item节点来完成此操作。我使用了Function节点，以下代码如下：
```
const newItems = [];
for(let i=0; i<items.length; i++) {
newItems.push({json: items[i].json.fields});
}
return newItems;
```

上述代码确保只有fields数组由该节点返回。数据现在应该如下所示：

![图7.6 – 这是函数节点应该看起来的数据

![img/Figure_7.06_B17493.jpg]

图7.6 – 这是函数节点应该看起来的数据

现在，添加一个Merge节点并将输入1连接到Function节点。
现在，我们需要从统计表中获取数据。通过添加一个Airtable节点（我们将称之为Airtable1），以及一个Function（或Set）节点（我们将称之为Function1），并将其连接到Merge节点的输入2，执行本节开头提到的相同步骤。工作流程应该如下所示：

![图7.7 – 这是工作流程应该看起来的样子

![img/Figure_7.07_B17493.jpg]

图7.7 – 这是工作流程应该看起来的样子

打开Merge节点并将模式设置为按键合并。
在属性输入1和属性输入2字段中输入UserID。我们这样做是因为UserID是连接两个不同表中的两个数据集的字段。
执行工作流程；Merge节点的结果应该看起来像这样：

![图7.8 – 合并节点合并来自两个不同表的数据

![img/Figure_7.08_B17493.jpg]

图7.8 – 合并节点合并来自两个不同表的数据

注意

n8n的最新版本也包含一个可以使用的项目列表节点。

现在我们已经得到了我们需要的两份数据，我们可以在Merge节点之后添加一个IF节点和电子邮件节点（例如发送电子邮件或Gmail节点），以便我们可以感谢新闻通讯的积极参与者。

合并节点有几种不同的模式，可以用来以最适合你用例的格式合并数据。现在我们已经知道如何使用n8n在流程中合并数据集，让我们学习如何在n8n中使用JavaScript进行计算和分析。

执行计算和分析

您可以在n8n中使用JavaScript在表达式中，并使用函数节点执行数学计算和基本分析。

让我们使用合并数据集部分中的新闻通讯数据库来尝试一些计算。我们已经向表中添加了一些更多记录。如果您想使用我们的记录，可以使用以下链接克隆Airtable：https://airtable.com/invite/l?inviteId=invRJMGCMu7HWQzKW&inviteToken=3b6fbc536ccc17cf24fbeb01b5e8a253fe99afd27616f3abaeaffb046cedf8aa&utm_source=email。

让我们从我们的Airtable数据库中计算一些东西：

用户数量
每个新闻通讯的平均点击次数
用户点击次数的最高值

要这样做，请按照以下步骤操作：

打开编辑器UI并打开一个新的工作流。添加一个Airtable节点并列出用户表中的所有记录。
添加一个集合节点并将其连接到Airtable节点。我们的工作流应该如下所示：

![图7.9 – 用户表中计算总用户数的工作流

图7.9 – 用户表中计算总用户数的工作流

将仅保留集合设置为true。这将移除所有传入的工作流数据，并且只追加在集合节点中配置的新值。
添加一个数字类型的值并命名为总用户数。为值字段添加一个表达式：
```
{{$items.length}}
```

这将计算Airtable节点返回的项目总数，这也就是用户的总数。执行此节点将导致此值被返回三次（每次为一个项目）。

在节点的设置区域，将执行一次设置为true。现在，你的工作流应该会为你计算用户表中的总用户数。来自集合节点的结果应该如下所示：

图7.10 – 集合节点的输出

让我们计算每个新闻通讯的平均点击次数值。

创建另一个工作流并添加一个列出新闻通讯表中所有条目的Airtable节点。添加一个函数节点并将其连接到Airtable节点。工作流应该如下所示：

![图7.11 – 计算每个新闻通讯平均点击次数的工作流

图7.11 – 计算每个新闻通讯平均点击次数的工作流

在函数节点中，添加以下JavaScript代码：

let total = 0;
let average = 0;
for (let i=0; i<items.length; i++) {
  total = total + parseInt(items[i].json.fields.Clicks);
}
average = total/items.length;
return [{json: {average_clicks: average}}];

在前面的代码中，我们遍历了由total变量返回的所有记录。我们使用parseInt()函数，因为Clicks的值是String数据类型，我们需要将其转换为integer数据类型。最后，我们通过将total点击次数除以新闻通讯的数量（我们使用items.length来计算，就像在先前的流程中做的那样）来计算average值。这为我们提供了每份新闻通讯的平均点击次数。以下截图说明了这一点：

![Figure 7.12 – 计算每份新闻通讯的平均点击次数

图7.12 – 计算每份新闻通讯的平均点击次数

最后，让我们计算每个用户的最高点击次数。

创建另一个工作流程，并添加一个列出Stats表中所有条目的Airtable节点。添加一个函数节点并将其连接到Airtable节点。工作流程应类似于图7.11中所示。

在函数节点中，添加以下JavaScript代码：

const clicks = [];
let highest = 0;
for (let i=0; i<items.length; i++) {
clicks.push(items[i].json.fields.Clicks);
}
highest = Math.max(...clicks);
return [{json: {highest_clicks: highest}}];

在前面的代码中，我们将所有点击次数添加到一个名为clicks的数组中。然后，我们使用Math.max()函数来找到该数组中的最大值。这为我们提供了每个用户的最高点击次数。以下截图说明了这一点：

![Figure 7.13 – 计算每个用户的最高点击次数

图7.13 – 计算每个用户的最高点击次数

Math是一个有用的内置对象，可以用于许多这些计算。你可以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math了解更多信息。

这些是一些基本的示例，说明了你可以如何使用JavaScript进行计算，创建用于分析的工作流程，从而从通过你的API和应用程序积累的数据中获得洞察。

摘要

在本章中，我们学习了在n8n中在多个工作流程之间共享数据，在工作流程内合并来自不同来源的数据，以及如何使用JavaScript在工作流程内执行计算和分析。本章学到的概念将帮助你在使用我们的自定义API将数据发送到其他服务或无代码工具时。

在下一章中，我们将介绍Bubble API并将其集成到n8n中。我们将学习如何处理Bubble数据和流程，以及如何配置n8n以接收由Bubble发起的事件和数据。

第十章：第 8 章：在 n8n 中利用 Bubble API

无论我们多么努力，我们不可能在所有事情上都做得很好！有些人擅长组织，有些人擅长规划，而有些人擅长公共演讲。当我们注意到我们在某件事上做得很好时，我们往往会专注于那件事并追求它，使我们在这方面变得更加出色。

无代码工具也是如此。它们发现它们真正擅长的事情并专注于它。n8n 真的很擅长连接系统和自动化它们的任务，这是这个工具的主要焦点。

有时，就像人一样，如果无代码工具想要完成某事但需要一点帮助，它们会转向朋友。

对于我们来说，我们已经转向 Bubble 成为 n8n 的合作伙伴。Bubble 被设计成一款非常好的网络应用程序开发工具，使我们能够为 n8n 创建网络前端。它允许无代码构建者设计网页以提交信息到 n8n，甚至完整的网络应用程序，以便 n8n 可以将数据连接到其他系统并自动化流程。

本章涵盖了以下主题：

介绍 Bubble 应用程序编程接口（API）
理解 Bubble 的数据结构
理解 Bubble 的工作流引擎
使用 Bubble 的 Data API
使用 Bubble 的 Workflow API
从 Bubble 接收事件和数据

一旦您完成本章，您将知道如何做以下事情：

在 Bubble 和 n8n 之间进行通信。
使用数据 API 访问 Bubble 的数据。
使用 Bubble 的工作流并通过 Workflow API 与它们交互。
在 n8n 中接收来自 Bubble 的事件和数据。

技术要求

您可以在 GitHub 上找到本章的完整代码示例，链接为 https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/tree/main/Chapter%208。

介绍 Bubble API

如果您以前使用过其他 API，您应该会完全舒适地使用 Bubble API。它遵循相对标准的 API 设计实践，例如使用常规 超文本传输协议（HTTP）响应和 HTTP 安全（HTTPS）进行线上加密。

然而，如果您提前了解一些关于 API 的具体信息，这将使您更容易早期取得成功。

Bubble API 端点

您应用程序的主要端点取决于几个因素，如下所示：

您是否正在使用自定义域名？
您是在使用实时环境还是开发环境？
您正在使用哪个版本的 API？

基础 URL

首先要考虑的是，您是否为您的 Bubble 应用程序使用了自定义域名。这用于确定您的基 统一资源定位符（URL）。您可以通过打开 Bubble 应用程序，转到设置菜单，然后点击 域名/电子邮件 选项卡来确定您是否正在使用自定义域名，如下面的截图所示：

![图8.1 – 无自定义域的Bubble域设置

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_8.01_B17493.jpg)

图8.1 – 无自定义域的Bubble域设置

如果你有一个自定义域，它将注册在这个位置。否则，它将显示默认设置，如图图8.1所示。

对于默认域设置，基础URL是https://<appname>.bubbleapps.io，其中<appname>是你为你的应用程序提供的名称。例如，如果你将你的应用程序命名为fancyApp，那么基础URL是https://fancyApp.bubbleapps.io。

如果你为你的应用程序有自定义域，那么URL是你的自定义域。

实时或开发

确定你的API端点的下一个因素是你在使用Bubble应用的实时版本还是开发版本。默认情况下，你将在开发版本中。一旦你准备好将你的应用程序公开，你就可以将其切换到实时版本。

注意，当你从开发版本切换到实时版本时，API端点会发生变化。

如果你使用应用程序的实时版本，那么基础URL之后的路径是/api，但如果你正在对你的应用程序的开发版本进行一些测试，那么这个子目录是/version-test/api。

API版本

很可能你正在使用API的最新版本。版本1.1于2017年1月19日发布，如果你是在2017年1月19日之后创建的应用程序，那么你很可能正在使用版本1.1。

指定你的环境之后的路径是你的API版本。这取决于你的应用程序是在何时创建的，要么是/1.0要么是/1.1。

工作流或数据

Bubble可以分为两个不同的部分：工作流和数据。工作流处理在Bubble中发生的事件（例如，按钮被点击），然后根据您对Bubble的配置执行特定的操作。

数据块指的是Bubble使用的内置数据库（例如，关于通讯录的信息）。它主要涉及在Bubble环境中保存、更改和删除数据。

一旦指定了API版本，你需要指出你是否访问工作流或数据API。这将在路径的下一部分完成。如果你正在访问工作流数据，路径的下一部分是/wf。同时，如果你想访问API的数据部分，这部分路径是/obj。

名称

端点的最后一部分是指定你要访问的项目名称。根据你是否访问工作流或数据项，这个值指定了那个项目。

例如，如果你正在访问一个名为users的数据项，那么/obj之后的路径部分是/users。

构建你的API端点

现在我们已经对API端点的构建有了稳固的理解，让我们通过一个示例来展示如何构建一个API端点。

假设我们正在访问2019年5月创建的myApp应用程序收集的新闻稿信息开发版本。有一个计划为该应用程序使用自定义域名，但尚未部署。

由于此应用程序没有自定义域名，基础URL是https://myApp.bubbleapps.io。我们正在访问开发环境，因此我们在路径中添加/version-test/api。此应用程序使用API的1.1版本，因为它是在2017年1月19日之后创建的，因此路径的这一部分是/1.1。然后我们在路径中添加/obj，后面跟着/newsletter数据项名称，以访问数据API。

在本例中，我们的最终API端点是https://myApp.bubbleapps.io/version-test/api/1.1/obj/newsletter。

Bubble API设置

您可以控制Bubble API的多个方面。通过访问应用程序中的设置并选择API选项卡，如图下所示，您可以进行多项更改：

![图8.2 – Bubble API设置选项

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_8.02_B17493.jpg)

图8.2 – Bubble API设置选项

启用/禁用API访问

您可以通过选择或取消选择启用工作流API和后端工作流或启用数据API旁边的复选框来启用或禁用API访问。

您也可以通过选择或取消选择其名称旁边的复选框来指定工作流或数据项。

API令牌

为了确保您的API访问安全，创建一个私有的API密钥是至关重要的。您可以在本节中重新生成API令牌，或者完全创建一个新的令牌。

您可以通过添加一个键为Bearer <API key>的头部来使用API令牌进行认证，如图下所示：

![图8.3 – Bubble API头部认证

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_8.03_B17493.jpg)

图8.3 – Bubble API头部认证

现在我们对Bubble的API工作方式有了更好的理解，以便我们可以从其他系统访问数据，让我们更深入地了解数据的实际结构。这很重要，这样您在使用API时就能确切知道您正在检索什么，您将能够正确地导航API以检索特定数据。

理解Bubble的数据结构

为了正确使用Bubble API访问和修改数据，了解数据在Bubble中的存储方式至关重要。

数据类型

在Bubble中，数据类型本质上等同于JavaScript对象表示法（JSON）对象。它在应用程序的数据部分下定义，并提供了一个字段列表（在JSON中表示为键）。每个字段都是数据类型的属性。您可以在以下屏幕截图中看到一个示例Bubble数据类型：

![图8.4 – 示例Bubble数据类型

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_8.04_B17493.jpg)

图8.4 – 示例Bubble数据类型

例如，如图所示的Newsletter数据类型有六个字段，其中两个是自定义的，如下所示：

内容 —新闻稿的实际正文
标题 —通讯录的标题

其中四个字段是默认字段，如下所示：

创建者—创建记录/通讯录条目的用户的用户名
修改日期—记录最后创建、更改或更新的日期
创建日期—记录最初创建的日期
别名—用于访问记录的快捷方式，通常在URL形式中使用

数据安全（隐私）

对于数据类型，存在两种一般的隐私或数据安全设置，如下所示：

公共
私有

公共隐私设置允许每个人访问读取数据类型中的数据。这通常是不被推荐的，除非数据确实是公共的，并且你不在乎谁可以读取信息。

私有隐私设置阻止除数据类型创建者之外的人实际与数据交互。这是数据类型的首选安全设置。

以下截图显示了Bubble具有API访问权限的私有权限：

![图8.5 – Bubble具有API访问权限的私有权限

图8.5 – Bubble具有API访问权限的私有权限

要通过API访问受保护的数据，你需要做几件事情，如下所示：

在应用程序的设置API选项卡中启用对数据类型的访问。
在应用程序的数据部分的隐私选项卡中选择至少一个API设置（通过API修改、通过API删除和通过API创建）。
使用应用程序的设置API选项卡中的API密钥进行身份验证。

理解Bubble的数据结构是实现自动化的关键步骤。虽然n8n是我们首选的自动化工具，但Bubble在系统中集成了自己的工作流引擎，我们将在下文中总结。

理解Bubble的工作流引擎

Bubble在系统中集成了自己的自动化版本。它不如n8n强大或功能丰富，因为它旨在自动化并与自身通信，在这方面表现卓越。每个工作流执行一个或多个步骤以执行Bubble应用程序支持的操作。

在Bubble环境中存在两种不同类型的工作流。第一种是前端工作流。这些工作流旨在用户在Bubble的应用程序页面上执行操作时与用户交互。例如，当你在Bubble中点击提交按钮时，这会执行一个前端工作流。

同样，也存在后端工作流。这些工作流旨在与用户非交互式地工作，并根据各种触发器自动执行任务，例如一天中的时间、数据的变化或API的输入/请求。

当与Bubble的工作流引擎交互时，n8n专门与后端API工作流进行通信。

根据API工作流的配置，你可以向API发送数据，这些数据将在工作流中使用。例如，发送电子邮件工作流将从API接受以下输入：

收件人
主题
正文

这在以下截图中得到了说明：

![图 8.6 – 示例后端 API 工作流程配置屏幕

图 8.6 – 示例后端 API 工作流程配置屏幕

因此，现在我们已经对工作流程引擎有了基本的了解，让我们开始使用实际的 Bubble API，从数据 API 开始。

使用 Bubble 的数据 API

使用数据 API 通过 n8n 访问 Bubble 的数据相对简单。根据访问的端点和使用的 HTTP 方法，您可以以任何您想要的方式操作 Bubble 应用程序中的数据。

要加载一些示例 n8n 节点以与数据 API 一起工作，请参阅 https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/blob/main/Chapter%208/Bubble_Data_API.json 中的 Bubble_API.json 工作流程。

认证

在您可以在 n8n 中使用 Bubble 数据 API 之前，您需要创建适当的凭据。我们将使用 HTTP 请求 节点进行所有 API 交互，因此我们需要创建一个 头部认证 凭据，如下面的截图所示：

![图 8.7 – 访问 Bubble API 的头部认证凭据

图 8.7 – 访问 Bubble API 的头部认证凭据

在 凭据数据 下的名称字段中填写授权是很重要的，并且值字段必须填写 Bearer，后跟您的 API 私钥，该私钥可以在 API 选项卡下的设置部分找到。

您还必须确保您提供了对 HTTP 请求 节点的访问权限。

数据操作

一旦您创建了凭据，现在您就可以使用它们来操作 Bubble 数据。

这里有一份您可以使用数据 API 在 Bubble 中检索和操作数据的不同方式的列表：

在每个端点中，两个特殊词汇代表来自您的 Bubble 应用程序的实际唯一值，如下所示：

typename—这是 Bubble 中数据类型的实际名称。这通常是移除了所有空格的小写数据类型名称。
id—Bubble 中记录的唯一标识符（UID）号码。

例如，如果您有一个数据类型为 1626690254917x279129440443256930，您将能够使用 https://appname.bubbleapps.io/api/1.1/obj/newsletter/1626690254917x279129440443256930 端点检索此记录。

我们现在有了开始处理 Bubble 应用程序中的数据所需的所有信息。

n8n 使用 HTTP 请求 节点执行所有数据操作，如下面的截图所示：

![图 8.8 – 使用 n8n HTTP 请求节点操作 Bubble 数据

图 8.8 – 使用 n8n HTTP 请求节点操作 Bubble 数据

使用前表中提供的信息，我们可以配置HTTP请求节点以按我们的意愿处理数据。在以下屏幕截图中，您可以看到HTTP请求节点的常规设置：

![Figure 8.9 – 一般HTTP请求节点设置]

Figure 8.9 – 一般HTTP请求节点设置

通常，所有HTTP请求节点都将具有以下共同设置：

头部认证—选择您之前创建的Bubble API凭证。
认证—头部认证。
忽略SSL问题—False。
响应格式—JSON。
JSON/RAW参数—False。

一旦设置好，您现在可以继续进行每个操作的定制设置。

要从API读取所有数据，请设置GET和URL到数据类型的端点（例如，https://appname.bubbleapps.io/api/1.1/obj/typename）。这将生成一个包含该数据类型中所有记录数组的JSON对象。输出将类似于以下内容：

[
  {
    "response": {
      "cursor": 0,
      "results": [
        {
          "content_text": "Welcome to the n8n Newsletter!",
          "Modified Date": "2021-07-25T13:00:35.174Z",
          "title_text": "First n8n Newsletter",
          "_id": "1627217777235x670007482175516000"
        }
      ],
      "remaining": 0,
      "count": 1
    }
  }
]

这将一次返回最多100条记录。

如果您只想获取特定记录的信息，可以通过将其附加到URL的末尾来指定ID（例如，https://appname.bubbleapps.io/api/1.1/obj/typename/1627217777235x670007482175516000）。这将仅返回单个记录。

要创建新记录，请设置POST和URL到数据类型的端点（例如，https://appname.bubbleapps.io/api/1.1/obj/typename）。然后，为每个自定义字段创建一个正文参数，并附带您希望字段值具有的值。该过程在以下屏幕截图中进行说明：

![Figure 8.10 – 创建、更新或替换记录数据的正文参数]

Figure 8.10 – 创建、更新或替换记录数据的正文参数

API将返回状态值和新的记录ID，格式为JSON。

您还可以通过设置PATCH并将请求提交到记录的端点（例如，https://appname.bubbleapps.io/api/1.1/obj/typename/1627217777235x670007482175516000）来更新数据类型中的特定记录，同时附带一个或多个包含需要更新的字段信息的正文参数。如果此更新成功，它将不会返回任何数据，并以204状态代码响应。

替换整个记录类似于使用两个例外来更新记录。首先，PUT中的值，其次，正文必须包含所有自定义字段值。成功时，它也不会返回数据，并返回204响应代码。

您可以使用API执行的最后一个操作是删除记录。与返回单个记录类似，您使用记录的端点（例如，https://appname.bubbleapps.io/api/1.1/obj/typename/1627217777235x670007482175516000）并设置DELETE。

搜索数据

有时，当你不知道记录ID时，使用GET请求方法请求数据时，记录太多以至于无法处理。幸运的是，有一些额外的搜索选项可以让你减少每次API请求返回的记录数。

搜索条件作为HTTP请求节点中的查询参数以名称-值对的形式输入，如下面的截图所示：

![图8.11 – 使用查询参数设置搜索限制

图8.11 – 使用查询参数设置搜索限制

通过使用limit参数减少返回的记录数是第一种方法。例如，将limit参数设置为2将每次只返回一条记录。

如果你想要的记录在第一组记录中（称为cursor参数开始发挥作用。cursor参数，你可以从特定的记录开始搜索。记录索引从零开始，每次增加一个。

当你通过使用之前GET查询返回的三个键/值对来确定其值时，设置cursor参数可能会有用。这三个对在此处描述：

cursor—结果中第一个条目的记录索引
remaining—此页面之后剩余的记录数
count—返回的项目数

你还可以通过使用sort_field参数并设置为其中的一个数据字段名称来控制返回数据的顺序。添加descending参数并将其设置为true或false也将控制数据是按降序还是升序排序。

如果你将sort_field参数设置为_random_sorting，它将以随机顺序返回记录。因此，为了接收一条随机记录，你可以将limit参数设置为1并将sort_field参数设置为_random_sorting！

限制从API返回的记录数的另一种方法是使用constraints参数。它包含一个或多个JSON对象数组，告诉API如何限制传入的数据。每个JSON对象有三个键值对，如下所示：

key—用于约束的字段名称。你可以使用_all关键字来检查所有字段。
constraint_type—要应用的约束类型，可以是以下之一：
- equals
- not equal
- is_empty
- is_not_empty
- text contains
- not text contains
- greater than
- less than
- in
- not in
- contains
- not contains
- empty
- not empty
- geographic_search
value—用于约束搜索的值。

例如，如果我们只想返回title_text字段包含单词Newsletter的记录，我们会将constraints参数设置为以下内容：

[
  { 
    "key": "title_text", 
    "constraint_type": "text contains", 
    "value": "Newsletter" 
  }
]

你可以在这个数组中包含任意数量的JSON记录。

到目前为止，你应该已经很好地理解了Bubble Data API的工作方式，因此让我们更深入地看看Workflow API。

使用Bubble的Workflow API

工作流程API通常用于激活Bubble工作流程，有时也用于向Bubble应用程序传递信息。您将使用相同的凭据和HTTP请求节点来激活工作流程和发送数据。

激活工作流程

激活工作流程的POST请求方法将正确运行时接收"status": "success"响应。

HTTP请求节点的URL字段将由以下两部分组成：

https://<appname>.bubbleapps.io/api/1.1/wf，其中<appname>是您Bubble应用程序的名称。
工作流程名称—这是您工作流程的名称。

因此，例如，为了在我的n8n-book应用程序中激活send-email工作流程，我会使用https://n8n-book.bubbleapps.io/version-test/api/1.1/wf/send-email作为URL。

向工作流程发送数据

为了将数据发送到工作流程，工作流程需要定义API工作流程中的参数（见图8.6），然后这些参数需要在操作中定义为动态数据。

在我们的示例中，可以通过API将以下三个参数发送到send-email工作流程：

to
subject
body

这在下面的屏幕截图中有说明：

![图8.12 – 带有动态数据的示例工作流程操作

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_8.12_B17493.jpg)

图8.12 – 带有动态数据的示例工作流程操作

要通过n8n的HTTP请求节点将此信息发送到工作流程，为每个值添加一个正文参数，如下面的截图所示：

![图8.13 – 发送到工作流程API的正文参数

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_8.13_B17493.jpg)

图8.13 – 发送到工作流程API的正文参数

当HTTP请求节点执行时，它将信息发送到工作流程，并使用它作为相应处理的输入，如下所示：

![图8.14 – 使用Bubble工作流程API和提交的数据发送的电子邮件

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_8.14_B17493.jpg)

图8.14 – 使用Bubble工作流程API和提交的数据发送的电子邮件

您可以从GitHub存储库中获取此示例工作流程的副本，网址为https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/blob/main/Chapter%208/Bubble_Workflow_API.json。

现在我们知道了如何激活工作流程并向Bubble发送数据，让我们反过来，让Bubble激活工作流程并向n8n发送数据。

从Bubble接收事件和数据

Bubble可以向n8n发送事件，甚至发送数据。通过设计n8n接收这些信息，Bubble可以直接执行n8n工作流程并扩展其功能。

配置n8n

要做到这一点，首先创建一个简单的Webhook节点，设置如下：

身份验证—无
POST
bubble
200
响应模式—最后一个节点
响应数据—第一个条目JSON

你还可以复制测试Webhook URL，因为配置Bubble时你需要这些信息。

接下来，添加n8n在{{new Date().toDateString()}}于{{new Date().toTimeString()}}接收了以下数据：{{$json["body"]["data"]}}。

现在，保存工作流以便初始化Webhook。

你可以从GitHub上获取此工作流的副本，链接为https://github.com/PacktPublishing/Rapid-Product-Development-with-n8n/blob/main/Chapter%208/Bubble_Events.json。

配置Bubble

现在n8n已经准备就绪，是时候准备Bubble了。

首先，确保API连接器插件已安装在你的Bubble应用程序中。如果没有，现在就安装它。你可以在https://manual.bubble.io/core-resources/bubble-made-plugins/api-connector上了解更多关于API连接器插件的信息。

接下来，我们将配置API连接器插件。在API连接器插件页面上，点击添加另一个API按钮。将API名称字段设置为n8n工作流。

要配置API调用，点击GET到POST，然后将测试Webhook URL传递到旁边的字段中。

通过点击添加参数按钮向n8n发送一个参数。然后，对于键值，输入data，对于值，输入Running Sloth Festival。

插件现在应该已经准备好通过向n8n发送信息并查看它发送回的响应来初始化。要初始化插件，首先，返回到你的n8n工作流并点击执行工作流按钮以启动监听输入的Webhook。你应该会看到一个类似这样的屏幕：

![图8.15 – 从n8n初始化响应

图8.15 – 从n8n初始化响应

接下来，返回到Bubble插件并点击初始化调用按钮。应该会出现一个弹出窗口，显示n8n发送的响应。点击显示原始数据文本以查看n8n发送的确切响应。这应该与n8n 设置节点中显示的信息相匹配，如下面的截图所示：

![图8.16 – 完成的Bubble API连接器插件

图8.16 – 完成的Bubble API连接器插件

现在，无论你在Bubble中工作在哪个工作流上，你都可以在插件部分使用n8n工作流 - 发送n8n数据操作，如下面的截图所示：

![图8.17 – Bubble工作流编辑器中的新n8n操作

图8.17 – Bubble工作流编辑器中的新n8n操作

现在你已经配置了n8n和Bubble协同工作，你可以利用n8n的所有功能，包括其节点和它可以访问的任何服务，来扩展Bubble。这将为你的Bubble应用程序打开几乎可以实现你所有梦想的功能。

摘要

在本章中，我们学习了Bubble API。我们使用数据API在Bubble中操作信息，并使用工作流API执行工作流。我们还学习了如何使用n8n来完成所有这些操作，主要使用HTTP请求节点。

我们还学习了如何使用Bubble激活n8n中的Webhooks，并在两个系统之间传递信息。

在下一章中，我们将使用Bubble来学习如何构建一个应用的前端，该应用将在后端使用n8n来处理信息。

第十一章：第3节 – 构建用户界面和连接API

在本节中，您将构建应用程序的用户界面，并将所有部分整合成一个完整的应用程序。

在本节中，包含以下章节：

第9章，构建应用程序的用户界面
第10章，我们才刚刚开始

第十二章：第9章：构建应用程序的用户界面

尽管本书的主要重点是教授您如何使用n8n构建应用程序工作流程并将各种工具连接起来，但您的应用程序拥有适当的用户界面（UI）至关重要。这是人们与您的产品互动的主要方式，也是用户体验（UX）最重要的方面。

在上一章中花费时间学习Bubble 应用程序编程接口（API）的工作原理后，我们对Bubble“内部”发生的事情有了很好的理解。现在，我们将使用Bubble来构建一个UI和设计模型，这将允许您创建自己的UI。

本章涵盖了以下主题：

为您的Web应用程序实现响应式设计
在Bubble中处理事件
在Bubble中验证数据
设计应用程序结构
在Bubble中处理错误

完成本章后，您将了解如何进行以下操作：

使用Bubble 图形用户界面（GUI）设计响应式应用程序。
学习应用程序的外观和感觉如何改变用户体验。
理解底层数据结构。
引导用户输入适当的数据以适应数据结构。
识别应用程序和工作流程中的错误。
积极处理向用户展示错误的方式。
设计一个日志系统来捕获事件和错误。
分析日志中捕获的数据以改进应用程序。

让我们从研究响应式设计并将其实现到您的Bubble Web应用程序中开始本章。

为您的Web应用程序实现响应式设计

响应式设计是一种构建基于Web的应用程序的方法，无论设备或屏幕/窗口大小如何，都能正确显示信息。在过去十年中，在各种设备和屏幕尺寸上查看信息的能力变得越来越重要。以下截图反映了这一趋势：

![图9.1 – 过去十年桌面与移动使用对比

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_9.01_B17493.jpg)

图9.1 – 过去十年桌面与移动使用对比

根据StatCounter (https://gs.statcounter.com/platform-market-share/desktop-mobile/worldwide/#monthly-201111-202111)，十年前，超过93%的人使用电脑上网。如今，这个数字下降到大约44%。更多的人从大电脑屏幕转向了更小的移动设备来与基于Web的UI交互。因此，无论您是在30英寸的电脑显示器上还是在4英寸的手机屏幕上使用，您的Web应用程序看起来都很好，并且易于使用。

响应式设计因素

为了使您的应用程序能够响应式工作，在构建应用程序时需要考虑以下因素。

使用响应式查看器

在 Bubble 应用程序界面的设计选项卡中，您可以在 UI 构建器 选项卡的右侧找到 响应式 选项卡。响应式查看器允许您查看您的页面在不同尺寸的设备上的外观。

最小宽度

增加元素的最小宽度以使用更多的页面边距。更大的最小宽度使设计在小屏幕上看起来更好。

固定宽度

一些元素，例如图标，应该具有固定的宽度。这可以防止元素在屏幕尺寸变化时变得过大或过小。

最大宽度

如果按钮和输入项太大，它们可能会看起来很奇怪。通过设置控制最大宽度侧来纠正此问题。

边距

一致的边距大小是设计美学的组成部分。尽可能保持边距大小一致。

收缩边距

当屏幕尺寸变小时，移除特定元素（例如，图形；嵌入元素）周围的左右边距。这更有效地利用了宝贵的屏幕空间。

对齐

将元素对齐到左或右边距，使其“粘”到一边。这使设计在屏幕尺寸变化时更具可预测性。

隐藏元素

当父元素（例如，页面）的宽度下降到指定大小以下时，不要显示该元素。在较小的屏幕上，这为用户提供了一个更好的体验。

换行到上一行

如果页面大小足够大，可以容纳上一行的元素，则将其移动到上一行。这可以防止在大屏幕上沿右侧边距出现大片空白区域。

文本元素选项

当处理文本元素时，还有一些其他选项应该考虑，如下所述：

….
如果文本变短则缩小—如果存在空白空间，则减少文本元素的长度。

图片/谷歌地图/形状元素比例

使用 保持元素比例 选项来保持宽度和高度比，无论屏幕大小如何。

重复组单元格宽度

当前单元格最小宽度 选项允许您“堆叠”单元格，而不是仅仅将单元格缩小到难以阅读的程度。您通过增加 当前单元格最小宽度 值来实现这一点。

使用响应式查看器

默认情况下，响应式查看器处于大屏幕模式，它显示您的页面在宽度为 1,200 像素（px）的屏幕上看起来如何，如下面的截图所示：

图 9.2 – 大屏幕模式下的响应式查看器

您可以更改此视图以查看，例如，页面在从手机等移动设备查看时的外观，如下面的截图所示：

图 9.3 – 从移动设备查看的响应式查看器

在整个设计过程中，当你构建你的应用程序时，经常回到响应式查看器是一个好主意，以确保你的应用程序无论使用哪种设备都能保持良好的外观。

学习更多

这只是一个响应式设计的概述，你还可以从Bubble和响应式设计如何实现中学到更多。如果你想要深入了解Bubble的响应式设计，请参阅Bubble文档中的构建响应式页面网页（https://manual.bubble.io/help-guides/building-a-user-interface/building-responsive-pages）。

响应式页面对于现代网络应用程序的用户非常重要，它可以决定应用程序的有用性，但即使是最优秀的响应式网络应用程序，如果它没有设计成能够正确处理事件，那么它也将完全无用。幸运的是，这正是我们接下来要讨论的主题！

在Bubble中处理事件

事件是在Bubble应用程序内部发生以触发工作流程的操作。Bubble界面内的操作通常会触发事件，但系统也可以在Bubble之外触发事件，例如n8n。

事件类型

虽然在Bubble中存在许多不同类型的事件，但大多数事件都是设计用于在Bubble内部使用，并且不与Bubble环境之外的系统交互。当与Bubble一起工作时，这些内部事件非常重要，我们强烈建议你熟悉它们。

通用事件

这些事件在Bubble的多数区域都很常见，并且可以相应地访问。它们在此概述：

用户登录—每当用户登录到你的Bubble应用程序时，都会触发此事件。
用户登出—与该事件相关的操作将在用户从Bubble应用程序登出时执行。
页面加载—当一个人在他们的电脑上打开一个网页时，就会发生页面加载。每当这种情况发生时，都会触发此事件。
每X秒执行一次—根据自上次事件发生以来经过的时间来重复执行操作可能是有用的。此事件每X秒触发一次，其中X代表事件之间的秒数。
当条件为真时—此事件将系统的一些参数（例如，星期几）与一个值（例如，星期二）进行比较，并且仅在比较为真时执行操作（例如，如果星期几是星期二，则将执行该操作）。

元素事件

元素事件与实际的UI本身相关，并设计为通过Web UI与用户交互。这些事件通常是对用户在应用程序中执行的操作做出响应。它们在此概述：

元素点击—当用户在Web UI中点击特定元素时，会触发此事件。
输入值更改—如果表单中的一个字段具有用户随后更改的值，则此事件被触发。
地图标记点击—Bubble 中的地图元素可以放置标记。当用户点击这些元素之一时，此事件被触发。
弹出打开—气泡允许您以弹出窗口的形式向用户显示消息。当其中一个这样的弹出窗口打开时，此事件被触发。
弹出关闭—您还可以在用户关闭显示给用户的弹出窗口时触发事件。

触发事件

触发事件是 Bubble 系统中的特殊事件，当数据库中发生更改时发生。这些事件可以引用数据库更改之前的数据值，或者可以引用数据库更改后的值。

关于触发事件的一些注意事项。首先，这些事件以完全权限运行，并可以访问系统中的所有数据，而不仅仅是触发事件的用户的个人数据。其次，触发事件只能触发一个操作，并且该操作不能用来触发其他操作。

设置事件

在 Bubble 中，事件在 工作流 编辑器标签中管理。您可以通过此页面配置在特定事件被触发时发生的操作，如下面的截图所示：

![图 9.4 – 工作流编辑器中的事件

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_9.04_B17493.jpg)

图 9.4 – 工作流编辑器中的事件

例如，图 9.4 展示了当用户登录到 Bubble 应用程序时，个人可以运行 n8n Workflows - Send n8n Data 插件操作。

当一个事件发生时，您也可以运行多个操作，将操作链起来依次执行。这允许您执行复杂操作，同时保持单个操作简单。以下截图展示了这个过程：

![图 9.5 – 将操作链接到事件

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_9.05_B17493.jpg)

图 9.5 – 将操作链接到事件

深入了解

这只是对 Bubble 事件的简要介绍，您可以更深入地了解这个主题。如果您想更深入地了解 Bubble 环境中的事件，我建议您从 Bubble 文档中的 构建工作流 (https://manual.bubble.io/help-guides/building-workflows) 和事件 (https://manual.bubble.io/core-resources/events) 开始。

事件是 Bubble 架构的一个重要方面，并且是正确数据操作的关键部分。但是，如果输入到您的 Bubble 应用程序中的数据有误或系统混淆了不同类型的数据，那么应用程序突然就变得无用了。

下一个部分通过向我们展示如何验证输入或分析的数据是正确数据来帮助避免这些问题。

在气泡中验证数据

许多应用程序的核心是数据。这些应用程序依赖于一致、准确和结构化的数据来提供分析和有洞察力的信息。它们还使用数据来控制应用程序本身的不同方面。

因此，重要的是你所收集和保存的数据尽可能准确，尤其是在从用户那里收集数据时。

字段类型

控制数据的第一种方式是通过字段类型。字段类型描述了可以输入到特定字段中的数据，并限制可以输入到该字段的信息为该类型的数据。如果你有数据库背景，这些可以等同于数据库中的数据类型。

在Bubble中，有九种内置字段类型，如下所示：

文本——任何基于美国信息交换标准代码（ASCII）的文本。类似于可变字符字段（VARCHAR）。
FLOAT或DECIMAL，但没有精度要求。
CHECK范围到INT字段值。
DATETIME数据类型。
CHECK范围用于DATETIME数据类型的列。
TRUE)或FALSE)。类似于数据库中的BOOLEAN数据类型。此字段没有NULL值，因为空字段转换为FALSE)值。
VARCHAR值，引用文件系统中的文件位置。
VARCHAR值，引用文件系统中的文件位置。
地理地址——这是一种独特的字段类型，它以经过Google Maps API验证的文本形式存储地理信息。它看起来就像邮寄信件时找到的街道地址。

自定义数据类型

你还可以创建自定义数据类型。这些通常是字段或其他自定义数据类型的组合，它们协同工作。例如，会议类型可能由日期、地点和主题组成。

使用字段

一旦定义了字段和数据类型，这就可以控制数据输入所需的数据类型。根据数据库中存储的数据类型，你将拥有不同的选项来限制字段可接受的数据类型，如下面的截图所示：

![图9.6 – 日期和时间字段限制

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_9.06_B17493.jpg)

图9.6 – 日期和时间字段限制

例如，图9.6显示了日期和时间输入类型中可用的某些限制。你可以控制日期和小时的最低值和最高值，并要求字段不能为空。

设计应用程序结构

一个应用程序并不是凭空出现的。在正确构建一个既简单又实用的应用程序结构之前，需要大量的规划和思考。在设计应用程序结构时需要考虑的因素包括以下内容：

用户需要执行多少个活动？
将收集哪些类型的数据？
用户是否需要身份验证？
用户体验是否简单且逻辑？

极其重要的是，你要考虑这些（以及其他）因素如何影响你的应用程序以及你的用户如何与之互动。这有助于使你的应用程序易于管理和维护。

你应该完成的第一项任务之一，甚至在开始编码单个页面之前，是创建一个流程图，显示用户如何通过每个他们将执行的操作在应用程序中移动。这应该显示用户如何与应用程序互动，以及用户和应用程序如何与应用程序中的数据进行互动。

以下截图展示了这样的工作流程。这显示了每个页面显示的数据/用户，以及用户必须遵循的路径才能到达每个页面：

![图9.7 – 简单的应用程序工作流程

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_9.07_B17493.jpg)

图9.7 – 简单的应用程序工作流程

这是一种极其宝贵的资产，特别是如果你的团队很大，不同的人分别开发应用程序的不同部分时。这确保了每个人都理解应用程序将如何工作以及数据将如何被管理。

确保应用程序的范围不发生变化或扩展也是有用的。它清楚地说明了应该和不应该设计的内容。

审查设计

一旦你完成了整体设计，让团队中的其他人（或者如果你是一个人的团队，自己审查）来确保设计符合应用程序的目标和需求是非常值得的。

一种优秀的方法是创建用户故事，从用户的角度描述一项活动。这些故事通常以 作为 <用户类型>，我想 <要达成的目标> 以便 <活动的理由> 的形式出现。

例如，你可能有以下用户故事：

作为作者，我希望能够编辑已经发布的通讯稿，以便我可以更新可能不再有效的信息。

你现在可以采取这个用户故事，看看你的工作流程中是否有路径可以实现这一点。如果结果证明没有实现这一点的途径（正如我们的图9.7所示），你可能需要回过头来更新你的应用程序设计。

一旦你对应用程序的设计感到满意，确保将其标记为最终设计，并与你的开发团队分享，这样每个人都在使用相同的设计，并朝着相同的目标努力。

即使设计得非常好，事情仍然可能出错。这就是错误处理和故障排除发挥作用的地方。

在Bubble中处理错误

应用程序本质上是非常复杂的系统。幕后发生着各种事件，用户以意想不到的方式行为，以及意外的平台升级可能会破坏之前可用的代码。有时，真是个奇迹，任何应用程序都能正常工作。

由于这种复杂性，设计应用程序时必须能够预见用户可能会滥用系统的方式，同时处理尽管应用程序的设计师和开发者尽了最大努力仍然发生的错误。

Bubble提供了一些工具来帮助处理可能出现在应用程序中的错误，并且如果出现问题需要重新正确工作，一些最佳实践将帮助你。

为用户错误做准备

用户通常是你应用程序中错误的一个重要来源。要么是因为他们根本不理解你的应用程序试图实现什么，要么是恶意尝试绕过设置的安全和限制，用户可以并且会破坏你的应用程序。但你可以通过遵循一些最佳实践来最小化用户对应用程序的影响。

其中一种最好的方法是像用户一样思考。让一个标准用户测试应用程序，他在推出到全世界之前对应用程序的工作方式一无所知。仔细记录用户是如何进入产生错误的情况的，以及错误是如何处理的。然后，更新工作流程，处理错误，再次测试。

加密应用程序

应用程序内部有许多不同的区域，如果允许用户进入，可能会引起问题。例如，如果用户可以进入用户管理部分，他们可以随意添加或删除用户，造成各种混乱。

因此，确保应用程序被锁定，防止随机用户访问他们不应能够访问的应用程序部分，这是至关重要的。这不仅适用于应用程序本身，还适用于任何管理控制台、管理员面板和数据管理门户。

详细记录

如果确实发生了错误，重要的是你需要一种方法来确定导致错误的原因。内置详细的日志服务将允许你追踪错误发生之前发生的事情，以便你可以排查问题并希望解决导致错误的原因。

调试工具

Bubble 有两款出色的工具，可以帮助你解决在开发应用程序时遇到的问题。

第一款工具是问题检查器。它以红色警告图标和红色文字的形式出现，指示你的应用程序中存在的问题数量。

你可以通过点击问题检查器来获取更多关于问题的信息。这将弹出一个包含所有问题的列表。点击问题列表中的任何一项将打开存在问题的屏幕。

第二款调试工具是调试器。调试器允许你逐步遍历你的应用程序，并看到用户看不到的幕后问题。

要启动调试器，只需打开你的应用程序中的任何页面，然后在统一资源定位符（URL）的末尾添加 &debug_mode=true。这将重新打开你的应用程序页面，并在底部显示调试器工具栏，如下面的截图所示：

![图 9.8 – 带有调试工具栏的应用程序

](https://github.com/OpenDocCN/freelearn-dl-zh/raw/master/docs/rpd-prod-dev-n8n/img/Figure_9.08_B17493.jpg)

图 9.8 – 带有调试工具栏的应用程序

这让你能够获得更多关于应用程序正在做什么的详细信息，并为你提供如何纠正问题的线索。

摘要

设计和构建一个合适的基于网络的 UI 是你应用程序构建中最关键的方面之一。这是用户与你和你的品牌互动的主要方式，也是你组织的代表。因此，它必须尽可能用户友好、易于访问、易于理解且无错误。希望现在你已经完成了这一章，对构建此 UI 所需采取的步骤充满信心。

但当你完成了 UI 设计，所有的工作流程都已被优化，而应用程序仍然无法完成你所需要的功能时，会发生什么？如何扩展功能，使其超越 Bubble 开发环境允许的范围？

这就是 n8n 在扩展这些功能中扮演重要角色的地方。我们将在下一章中介绍如何做到这一点。

第十三章：第10章：我们才刚刚开始

有时候，很难相信在阅读一本书的过程中你取得了多大的成就。有时，完成一本书既令人兴奋，因为取得了成就，又令人悲伤，因为旅程已经结束。

在如此短的时间内取得如此大的进步，真是令人兴奋！让我们看看我们从这本书中学到了什么，并帮助你找到并开始下一个n8n项目！

我们已经走了很长的路

学习一项新技能可能是一项艰巨的任务。我们看看我们现在在哪里，并在脑海中计算我们还需要走多远才能达到目标。它似乎如此遥远。它似乎几乎无法想象要达到终点线需要什么。

但有时，我们花了太多时间关注终点线，以至于忘记了是旅程，而不是终点线，教会了我们，塑造了我们，并带我们到了下一个层次。是旅程让我们变得更好、更强、更快。

因此，回顾我们在旅途中取得的成就，并为我们取得的进步感到自豪是很重要的。让我们回顾一下我们在阅读这本书的过程中学到了什么。

介绍无代码工具

在第1节中，我们介绍了一种新的代码开发方式，称为无代码。无代码的概念是将应用程序的构建从软件开发团队转移到实际使用应用程序的人，例如办公室工作人员或业务分析师。

我们还了解了主角——n8n！我们发现了这个自动化工具如何将不同的系统连接在一起，即使它们从未被设计成可以相互通信。我们学习了n8n中的节点如何以无限组合的方式连接在一起，以处理数据、连接系统和创建应用程序。

在本节的最后一章中，我们构建了三个不同的应用程序来展示n8n的强大功能。这些应用程序展示了使用n8n连接和自动化的可能性。

API和数据

在第2节中，我们重点关注了API。正如你将记得的，API（应用程序编程接口）允许不同的系统相互通信，而无需依赖人来执行手动任务。

第1章教我们如何使用n8n构建自己的API端点。这使得远程系统可以按需激活n8n工作流程，并允许n8n为可能没有API的系统创建API。

我们随后更仔细地观察了n8n在其工作流程中如何处理数据。数据处理是n8n内在灵活性的关键部分，这使得它如此强大。能够转换数据使n8n成为一个“通用翻译器”，允许不同的系统根据需要存储信息。

存储数据可能和转换数据一样重要。因此，我们学习了如何使用无代码数据库解决方案来存储短期和长期使用的数据。这些数据库允许我们在数据静止时工作，以确保信息在工作流程执行之间不会丢失。

最后，我们介绍了如何使用 Bubble 无代码工具的 API 访问 Bubble 数据并与工作流交互。这是使用 Bubble 作为 n8n 网络前端的开端。

构建用户界面

到目前为止，重点一直是使用 n8n 在幕后执行大多数人看不到的操作。在本节的最后，我们专注于构建一种让用户能够与使用 n8n 的应用程序交互的方法。

我们向您展示了如何设计一个无论在哪种设备上运行都能良好工作的界面。我们还学习了如何设计应用程序的结构及其背后的数据，以确保应用程序易于使用和故障排除。

最后，我们将 Bubble 应用程序连接到 n8n，以自动化和处理应用程序提供的信息。

接下来是什么？

您是否曾经第一次走进一家新餐厅，发现几乎不可能决定要点什么？有如此多的主菜、配菜和甜点的组合，以至于不可能只选择一个要求服务员点的东西。

这是新 n8n 用户面临的问题之一。n8n 最大的优势之一，其灵活性，也可能成为想要开始使用 n8n 创建的新用户最大的障碍。您该如何选择？

这里有一些关于确定您接下来应该为 n8n 项目做什么的建议。

寻找需要解决的问题

n8n 被设计成允许用户解决日常问题。当我们构建“寻找问题的解决方案”时，这会非常令人沮丧。所以，寻找那些可以用 n8n 自动化的日常烦恼。

您的硬盘是否总是被旧文件填满？构建一个工作流程，每天检查您电脑上的所有用户文件，然后将任何两年内未修改的文件推送到云端存储，并从硬盘上删除它。

您是否经常忘记回复收件箱中的电子邮件？设计一个 n8n 应用程序，它会扫描您的电子邮件收件箱，并发送一条消息询问您如何处理该电子邮件，然后适当地处理它。

每天晚餐不知道做什么？让 n8n 从您的食谱列表中随机抽取一个食谱，并为您创建购物清单。

一旦您开始将日常任务视为提高效率或使其更轻松的机会，您很快就会发现自己对 n8n 项目的想法无穷无尽。

梦想大，起步小

如我们之前提到的，重要的是旅程而不是目的地。您在旅途中学到的教训通常适用于您正在经历的其他挑战。

所以，想出一个真正的大胆项目，然后开始！将项目分解成更小的子项目，并继续分解，直到它变成你可以做的事情！

这里是我目前正在着手的一些疯狂的想法：

将我的卡车变成一个带有n8n控制超现实附加功能的版本，如后置投影仪和弹出式视频屏幕，用于即时电影院，计算机控制的激光，以及单独控制的LED灯升级
创建一个批量乐高管理机器，它可以识别、分类和编目每个部件，确定可以从库存中的乐高制作哪些套装，然后根据需求组装套装的所有部件，并附上构建说明的打印件
设计一种方法来拍摄书架上的书籍的照片，通过视觉识别这些书籍，然后查找每本书二手的价值，并将信息上传到网站以出售这些书籍

我会完成这些项目吗？谁知道呢！

我会学到一些有趣的技术，并找出如何以新的有趣方式使用n8n吗？绝对会的！

开始一个自动化日志

有时候，想法会在最奇怪的时刻出现：在淋浴时，散步时，通勤工作时，在观光巴士上。尽快将这些想法记录下来很重要，以免它们丢失或遗忘。

但是，由于这些顿悟的时间往往并不总是有利于传统的良好旧式笔和纸，我购买了一个防水笔记本，并随身携带，无论我去哪里。一旦我有了下一个重大想法，它总是触手可及！

从他人那里获取想法

通常，灵感会来自他人的做法（为什么我之前列出了我的疯狂想法？）。浏览n8n网站上的部分项目或回顾一些其他n8n用户创建的工作流程。

开始你的下一个项目

现在你有了新的想法，你该如何开始？这通常是新n8n用户遇到的下一个障碍。克服这个障碍可能很困难，因为很容易被实际项目的潜在巨大规模所压倒（尤其是如果它是一个大型的、疯狂的项目）。

为了让你开始，这里有一些启动新项目的技巧！

分解它

有时候，当查看整个项目时，它似乎太多了。你怎么能期望有人设计出整个解决方案呢？

但是，如果你将其分解成更小的部分，然后查看每个部分，这些部分可能是可行的。如果不可以，就进一步分解每个部分，直到你认识到一个可以完成的部分！

继续这样做，直到整个项目完成！

写下来

尝试将所有事情都记在脑子里，特别是如果你在项目之间有很长的时间间隔，这可能会非常困难。通过写下它们，你将计划和想法从脑海中移出，并记录在纸上。

复习n8n节点

如果你不了解你手头的工具，很难知道你能做什么。由于n8n经常更新，定期升级你的n8n版本并查看不仅新节点，还有对现有节点的更改，这会是个好主意。

借鉴他人的代码

如果有人已经构建了它，那么重新发明轮子就没有意义了。看看其他人已经创建的工作流程，看看你是否可以使用它或其一部分来完成你的项目的一部分。

结论

我们真心希望您阅读这本书时，觉得它像我们撰写它时一样信息丰富和教育性。如果您有任何问题或有趣的项目的想法，请通过n8n社区网站联系我们。

感谢您加入我们的旅程！

posted @ 2025-09-20 21:33 绝不原创的飞龙阅读(7) 评论(0) 收藏举报

刷新页面返回顶部

龙哥盟

掠夺·扩张·投机·博弈

N8n-快速产品开发-全-

N8n 快速产品开发（全）

前言

本书面向的对象

本书涵盖的内容

为了充分利用本书

下载示例代码文件

下载彩色图像

使用的约定

联系

分享您的想法

第一章：第1节 – 工具包简介

第二章：第一章：无代码、n8n和Bubble简介

技术要求

什么是无代码？

为什么无代码很重要？

n8n简介

安装 n8n

前提条件

1. 更新操作系统

2. 安装先决条件

3. 安装 Node.js

4. 配置 Node.js 环境

5. 安装 n8n

6. 使用 PM2 将 n8n 作为服务运行

7. 打开 n8n 编辑器 UI

人们如何使用 n8n 解决问题？

CRM 电话录音访问

Goomer 在 COVID-19 期间转型

n8n航行于七大洋

Bubble简介

摘要

第三章：第二章：使用编辑器 UI 创建工作流程

技术要求

编辑器 UI 简介

探索常规和触发节点

表达式 – 使用动态数据

工作流 – 整合一切

创建你的第一个工作流程 – Hello World

摘要

第四章：第 3 章：深入 n8n 的核心节点和数据

技术要求

n8n中的数据结构简介

JSON 语法

值

键值对

对象

数组

n8n JSON结构

json对象

二进制对象

函数节点 – 工作流程中的自定义JavaScript

项目数组

点符号

输出数据

来自其他节点的数据（$items方法）

数据操作

字符串

数学

HTTP请求节点 - 与任何API通信

Web API 101

API URL的解剖结构

协议

基础URL

端点

查询参数

其他参数

标头

主体参数

HTTP 方法

GET

POST

DELETE

HEAD

PATCH

PUT

响应代码

1xx (信息性)