开发人员花费大量时间为后台任务构建内部工具、管理面板和应用程序,以帮助自动化日常基本业务流程。这些涉及多项工作,从维护特殊数据库到编写大量前端和后端代码。但是,如果我们告诉您,您可以利用现代堆栈来构建可以帮助您完成后端、前端和自动化任务的应用程序怎么办?听起来不错吧?这是!

我们很高兴推出一个很棒的新堆栈来构建应用程序:Supabase、Appsmith和n8n堆栈(SAN 堆栈),供开发人员构建和维护现代自定义内部工具。

什么是 SAN 堆栈?

SAN 代表 Supabase、Appsmith 和 n8n,在构成堆栈的三个新兴且著名的软件之后。

Supabase:在几分钟内创建后端的开源 firebase 替代方案。从 Postgres 数据库、身份验证、即时 API、实时订阅和存储开始您的项目。

Appsmith:一个开源框架,用于构建自定义业务软件,带有连接到任何数据源的预构建 UI 小部件,并且可以使用 JavaScript 进行广泛控制。

n8n:可扩展的工作流自动化工具。使用公平代码分发模型,n8n 将始终拥有可见的源代码,可用于自托管,并允许您添加自定义功能、逻辑和应用程序。

此堆栈可让您在几分钟内构建任何应用程序。您可以将 Supabase 用于数据库和后端,将 Appsmith 用于 UI 和添加功能,将 n8n 用于自动化后台任务。

Appsmith 的联合创始人之一兼产品负责人 Nikhil Nandagopal 将应用程序构建的基础分解为三个步骤。

这在开发人员中获得了相当大的吸引力,尤其是那些希望构建内部工具或应用程序的开发人员。

为什么选择 Supabase、Appsmith 和 n8n?

• 免费/开源:Supabase 和 Appsmith 完全开源,可以在其服务器上自托管。而 n8n 遵循公平代码分发模型,并且始终具有可见的源代码,可用于自托管。

• **低代码高功能:**所有三个平台都遵循低代码模型的原则,以帮助开发人员以最快的方式部署和扩展他们的应用程序。但是,开发人员可以利用 SQL、JavaScript 和数据结构来定制他们的应用程序。

• 编辑体验:Supabase、Appsmith、n8n拥有优秀的UI界面,从一开始就为开发者提供丰富的编辑调试体验。 Appsmith 和 n8n 都分别提供了用于构建 UI 和自动化工作流程的拖放界面。相比之下,Supabase 提供了一个实时 SQL 编辑器来测试和使用您的数据库,并且能够直接从平台将它们导出到 API 中。

• **协作:**与团队合作时,这三个平台都提供了出色的协作工具;您可以与任何人共享这些应用程序或工作流程,并设置特定权限,例如仅查看或编辑模式。他们在未来的路线图中不断得到改进。

• 自托管: 开发人员可以在其服务器上免费自托管所有三个平台。当您希望数据更安全、完全控制自定义并拥有自定义域选项时,它很有用。

• 很棒的社区:社区在所有三个平台上都令人难以置信;他们提供了出色的支持和透明的路线图。根据优先级立即处理新功能请求或现有错误。有了一个很棒的社区,内容会变得越来越好,并且他们提供了丰富的文档和许多教程供开发人员入门。

使用 SAN Stack 构建一个简单的票务管理器

有很多工具和应用程序可以跨 SAN 堆栈构建。以下是几个示例:员工调查仪表板和工单管理管理面板。

使用 SAN 堆栈,您可以在几分钟内构建任何仪表板。

作为示例,我将向您展示如何创建支持仪表板管理器应用程序。

使用此应用程序:

• 用户将能够为特定查询创建或提出新票证

• 支持团队将能够看到这些工单并将其分配给工程师

• 票证解决后,我们将向用户发送一封自动电子邮件

让我们开始吧!

在 Supabase 上设置您的后端

第一步是为应用程序设置后端;为此,我们将在 Supabase 上使用 Postgres 数据库。

1. 如果您是 Supbase 的新手,您可以创建一个新帐户(它是免费的!)或使用您现有的凭据登录。

2. 您将被重定向到 Supabase 仪表板;在这里,您可以管理所有项目。

3. 创建一个新项目,并将名称设置为 Support Dashboard。通过单击侧面导航上的Create Table选项创建一个新表。

4. Supabase 为我们提供了许多向表添加数据的方法,从编写查询到使用 UI 创建模式再到简单地上传 CSV 文件;开发人员可以选择任何选项。

5. 对于我们的支持仪表板,我们将通过在 Supabase 上上传 CSV 文件来创建一个表。

数据库现已建立;让我们使用 Appsmith 连接这个 PostgresDB 并为应用程序构建 UI。为此,我们可能需要记下 Supbase 上项目设置中的连接信息。以下是它的样子:

在 Appsmith 上构建 UI 并编写查询

我们的后端准备好了;现在,让我们将它连接到 Appsmith 以构建 UI 并添加功能。请按照以下步骤操作:

1. 如果您是 Appsmith 的新手,您可以创建一个新帐户(它是免费的!)或使用您现有的凭据登录。

2. 登录后,我们将被重定向到仪表板以创建新应用程序。

3.接下来,让我们连接一个新的数据源。为此,请单击侧栏中 Datasources 旁边的+图标,然后选择 PostgresDB。

4. 现在,将数据库连接详细信息从 Supabase 复制到此处,然后单击测试按钮以验证身份验证。

太棒了,我们现在已经建立了与数据源的连接。接下来,让我们使用 Appsmith 上的小部件构建 UI。

• 单击小部件旁边的+图标并拖放一个 Tab 小部件。我们可以通过单击右上角的齿轮图标来使用属性窗格进行配置。

• 如下图所示,我们添加了四个选项卡来支持仪表板。

• 现在,我们将添加一个按钮,该按钮应该打开一个模式,并具有一个表单以在单击时提出新票。为此,只需从小部件部分拖放一个新按钮小部件并将其移动到画布上。

• 添加一些输入小部件和一个提交表单的按钮;这是 UI 完成后表单的外观:

• 我们现在有了创建工单的 UI。让我们在 Appsmith 上编写两个查询,这将允许我们创建票证和列出票证。为此,请单击数据源旁边的 + 图标,并在此处使用 Supabase 连接来创建新查询。

• 在查询窗格下将查询重命名为create_new_ticket;在这里,我们可以编写可以使用 mustache 绑定收集输入的 SQL。以下是它的样子:

INSERT INTO PUBLIC."tickets"
            (
                        "id",
                        "createdAt",
                        "user",
                        "updatedAt",
                        "description",
                        "status",
                        "priority",
                        "category",
                        "assignedTo"
            )
            VALUES
            (
                        '{{appsmith.store.ticket.id}}',
                        '{{moment().format('yyyy-mm-ddHH:MM:ss')}}',
                        '{{c_user.text}}',
                        '{{moment().format('yyyy-mm-ddHH:MM:ss')}}',
                        '{{c_description.text}}',
                        '{{c_status.selectedOptionValue}}',
                        '{{c_proporty.selectedOptionValue}}',
                        '{{c_category.selectedOptionValue}}',
                        '{{c_assignee.selectedOptionValue}}'
            );

在 Appsmith 上,我们可以在应用程序的任何位置使用 mustache 绑定来绑定数据或编写 javascript 代码来自定义小部件并为其添加功能。

• 最后,我们现在设置按钮的 onClick 属性以执行查询并选择create_new_ticket。就这样,我们应该能够在应用程序上创建新票证。

• 现在,让我们再写一个查询,我们可以在其中列出用户创建的所有票证。我们将这个查询命名为get_tickets;以下是 SQL 片段。

SELECT * FROM public."tickets";

• 现在,将一个表格小部件拖放到Assigned To Me选项卡下的选项卡小部件上。打开属性窗格并添加以下代码段以绑定票证:

{{
get_tickets.data.filter(t => t.assignedTo === 'confidence@appsmith.com' && t.status !== 'closed')
}}

太棒了,我们应该能够看到分配给特定用户的所有票证!在 Appsmith 上编写自定义 JS 来配置我们的内部应用程序就这么简单。现在让我们使用 webhook 并构建自动化,使用 n8n 从票证发送电子邮件!

在 n8n 上构建可扩展的工作流

如果您想构建一个需要发送电子邮件的内部工具,那么 n8n 是您的最佳选择。 n8n 是一种工具,可用于在您喜欢的 Web 应用程序(如 Slack、Google Drive、Dropbox 等)之间自动化工作流程。但是,n8n 可用于连接您使用的几乎任何两个 Web 应用程序。现在,让我们创建一个工作流并使用 webhook 从 Appsmith 向 n8n 发送请求。

• 如果您是 n8n 的新手,请在此处注册他们的云版本。

• 接下来,通过选择工作流菜单下的New创建一个新的工作流

• 现在,将 Webhook 节点拖放到画布上;您可以通过单击它们来配置节点。

• 现在将 HTTP 方法设置为 POST 并复制 TEST URL

太棒了,现在我们有了 Webhook,让我们通过将它添加为数据源来将它与 Appsmith 连接起来。

• 在 appsmith 应用程序上,单击数据源旁边的+图标并创建一个新 API。

• 将 API 类型设置为 POST 并粘贴 API webhook URL,

• 现在将以下代码片段粘贴到正文选项卡下以收集来自仪表板的输入。

{
"message": "({this. params. message})",
"email": (this. params. email})",
"ticket": "((appsmith. store. ticket. id}}"
}

• 接下来,将 Gmail 节点连接到 webhook 并使用您的 Google ID 进行身份验证。

• 要将数据从 webhook 传递到 Gmail 节点,请使用左侧窗格中的变量选择器节点配置消息属性。

• 最后,确保将工作流状态设置为活动。

就像这样,我们应该能够使用 n8n 发送电子邮件,而无需编写任何代码。

---

从头开始构建这个应用程序,包括编写代码片段,可能需要 30 分钟!这不是很快吗?

如果您正在寻找构建内部应用程序的现代方法,请查看 Supabase、Appsmith 和 n8n!这些工具简单、强大,可以帮助您比以往更快地构建应用程序。那你还在等什么?立即开始构建您的下一个内部应用程序。