使用 ToolJet 构建 AWS S3 浏览器

Amazon S3（简单存储服务）因其可靠性、可扩展性和成本效益而成为热门选择。S3 服务为开发人员提供灵活的对象存储服务，使其成为随时存储和检索任意数量数据的绝佳选择。

然而，以编程方式与 Amazon S3 交互有时可能是一项艰巨的任务。在本教程中，我们将向您介绍一种高效的方法，它简化了构建功能强大的 AWS S3 浏览器应用程序的过程，而无需大量的开发工作。

什么是 ToolJet？

ToolJet 是一个开源的低代码框架，它使我们能够在几分钟内构建一个全栈 Web 应用程序。使用 ToolJet，您可以创建独立的、功能齐全的全栈应用程序，也可以将应用程序嵌入到其他网站中。

ToolJet 允许您构建使用关系型和非关系型数据库、REST API、OpenAI 技术以及云存储（例如 Google Cloud Storage、  AWS S3和 Minio）的应用程序。它是一款出色的开发工具，可帮助个人、开发人员和企业更快地创建和发布产品。

在我们继续之前，
如果你能给我们一颗星，我会非常高兴！也请在评论区告诉我。❤️

https://github.com/ToolJet/ToolJet

概述

为了开发此应用程序，我们将利用 ToolJet 及其 S3 集成，从而执行各种操作。这些操作包括获取所有可用存储桶的列表、从选定的存储桶中检索数据以及将数据上传到选定的存储桶中。

在深入探讨技术细节之前，我们先来看一下该应用程序的界面及其整体功能。该应用程序有两个选项卡。第一个选项卡名为“浏览器”，用户可以浏览现有存储桶并探索其中包含的数据。

浏览器

上传者

在第二个选项卡中，用户可以将数据上传到选定的存储桶中。此功能允许他们选择特定的存储桶，然后将所需的数据上传到其中。

为了理解此应用程序的构建方式，我们使用 ToolJet 的 UI 组件及其属性开发了用户界面 (UI) 及其功能行为。另一方面，通过 ToolJet 提供的 AWS S3 集成来简化与 Amazon S3 相关的操作。此集成允许应用程序与 Amazon S3 交互并执行特定操作。在本教程中，我们将介绍三个具体的 S3 操作

1. “列出存储桶”：此操作使应用程序能够检索 Amazon S3 账户中所有可用存储桶的列表。
2. “列出存储桶中的对象”：通过此操作，应用程序可以获取选定存储桶内的数据，并在“浏览器”选项卡中向用户显示其内容。
3. “上传对象”：“上传对象”操作允许用户选择一个存储桶，然后使用应用程序第二个选项卡中提供的功能将他们选择的数据上传到该存储桶中。

出于本教程的目的，我们将操作限制为仅三个；但是，值得一提的是，AWS S3 集成也提供了许多其他操作。您可以探索这些附加操作，并将其合并到应用程序中，以构建超出本教程范围的任何所需功能。

创建 ToolJet 应用程序
首先，我们将指导您创建一个新的 ToolJet 应用程序。无论您使用的是云端版 ToolJet 还是自托管版，步骤都非常简单。

1. 注册或登录：如果您还没有账户，请访问 tooljet.com 并注册一个免费账户。如果您已有账户，请登录。
2. 仪表板：登录后，您将进入 ToolJet 仪表板。在这里，您可以查看现有应用程序的概览以及其他功能的访问权限。
3. 创建新应用程序：要创建新应用程序，请单击“创建新应用程序”按钮，这将带您进入“应用程序构建器”。
4. 命名应用程序：您可以从应用程序构建器的左上角命名您选择的应用程序；我们可以称之为“库存和订单管理器”。

连接到 AWS S3

要执行从 ToolJet 到 S3 的所有操作，第一步是配置并建立与数据源的连接。操作方法如下：

1. 返回 ToolJet 仪表板。
2. 从左侧边栏导航到“全局数据源”。
3. 点击“添加新数据源”。
4. 在数据源库中，搜索“AWS S3”并选择它。
5. 填写所需的详细信息并在保存之前测试连接。

应用程序构建器的各个方面

让我们探索应用程序构建器的主要领域，它们将简化您使用 ToolJet 的开发过程。

1. Canvas：Canvas 是您构建应用程序用户界面 (UI) 的场地。在这里，您可以直观地设计和排列应用程序界面的组件。将组件拖放到 Canvas 上，为您的应用程序创建无缝且用户友好的 UI。
2. 组件管理器：组件管理器位于应用程序构建器的右侧，为您提供了可在应用程序中使用的完整组件列表。这些预置组件可用于各种用途，例如按钮、表单、表格等。使用各种组件，您可以快速为您的应用程序组装强大且视觉上吸引人的 UI。
3. 查询面板：可扩展的查询面板位于应用程序构建器的底部。此面板在将您的应用程序连接到数据源方面起着至关重要的作用。它允许您列出和访问连接的数据源，无缝集成您的 Google 表格数据和其他数据源。通过从查询面板中选择数据源，您可以创建查询来执行特定操作并动态检索数据。
4. 左侧边栏：左侧边栏提供方便访问的功能，例如创建和管理页面、检查组件和调试器，以便高效地开发和调试应用程序。

现在您已经熟悉了应用程序构建器，让我们深入了解每个领域，并探索如何利用其功能从头开始构建应用程序。

构建应用程序。

我们已经了解了 ToolJet 应用程序构建器，现在是时候逐步深入构建应用程序了。如您所知，此应用程序包含两个选项卡，因此我们先从创建“浏览器”选项卡开始开发。我们将重点实现允许用户浏览现有存储桶并探索其中数据的功能。让我们开始吧！

首先，让我们为应用设置导航栏。为此，我们将使用“容器”组件作为导航栏。您可以在组件列表中找到“容器”组件，然后将其拖放到画布上即可。放置完成后，将其排列在页面顶部，以确保其能够正常显示导航栏。

接下来，让我们自定义导航栏的外观。您可以选择任何您喜欢的颜色，也可以使用哈希码#2C3748来匹配图片中显示的颜色。要设置颜色，请点击容器组件，然后导航到右侧组件管理器中的“样式”选项卡。然后，将“背景颜色”字段的值更新为您想要的颜色。

现在，让我们为导航栏添加一个标题。在组件列表中搜索“text”组件，并将其添加到当前容器的顶部。要更新组件的默认文本，请转到其属性并将“Text”字段的值修改为“AWS S3 文件浏览器”或您喜欢的任何其他标题。

类似地，对于导航栏右侧的注销图标，您可以使用“icon”组件，并将“IconLogout”作为组件属性中“Icon”字段的值。

现在导航栏的 UI 已经完成，还有一个功能需要解决：让注销图标可以正常使用。请按照以下步骤操作：

1. 单击注销图标组件以选择它。
2. 在组件属性中，找到“事件”部分并展开它。
3. 单击“+ 添加处理程序”按钮以​​添加新的事件处理程序。
4. 为事件处理程序设置以下值：
5. 事件：“点击时”
6. 操作：“注销”

通过这种方式设置事件处理程序，当用户单击注销图标时，当前登录的用户将被注销，并需要重新登录才能访问应用程序。

通过此实现，注销功能将全面运行，用户可以安全地从应用程序中注销。

为了同时容纳应用程序的“浏览器”和“上传器”部分，我们将使用 Tabs 组件。让我们将 Tabs 组件添加到画布并将其居中。

1. 单击 Tabs 组件并访问其属性。
2. 将“tabs”字段值更新为以下内容：

{[
  { title: 'Browser', id: '0' },
  { title: 'Uploader', id: '1' }
]}

此配置将确保 Tabs 组件显示两个必需的选项卡，一个用于“浏览器”部分，另一个用于“上传器”部分。此外，您可以移除 Tabs 组件中的任何默认组件以创建一个干净的选项卡，并将“样式”中的“突出显示颜色”设置为 #ec912dff，以便进一步自定义。

构建浏览器标签页

在“浏览器”选项卡中，我们将使用两个表。第一个表将列出所有可用的存储桶，第二个表将显示所选存储桶内的所有对象。

首先，在 Tab 组件中添加两个表格：table1 和 table2。首先，通过配置最左侧表格（table1）的属性，调整其仅显示一列。然后，将另一个表格（table2）排列在 table1 的右侧。

对于 table1，我们将通过关闭属性中除“显示搜索框”字段之外的所有选项来对其进行自定义。此外，在组件管理器的“样式”选项卡中，将表格的边框半径设置为“5”。

类似地，对于表2，我们可以关闭所有选项，同时保持“显示搜索框”启用，以便在表加载后帮助进行数据搜索。

在 table2 上方，我们添加一个“输入”组件以及两个按钮。一个按钮用于搜索，另一个位于右侧的按钮标记为“上传器”。

通过实施这些步骤，“浏览器”选项卡将以可视化的方式进行组织，其中表 1 显示可用的存储桶，表 2 显示所选存储桶内的对象，而相应的搜索和上传器功能则适当地位于第二个表的上方。

创建 S3 查询

现在，让我们通过创建第一个查询来向 UI 添加功能，这将使我们能够从 S3 数据源获取所有存储桶。

首先，从屏幕底部向上拉起查询面板。接下来，点击“+ 添加”按钮，或者您也可以直接从可用选项中选择之前连接的 S3 数据源。

选择数据源后，查询面板中将出现一个新窗口。在这里，您可以为查询命名，例如“getBuckets”，并选择操作“列出存储桶”。然后，点击“预览”按钮测试示例请求，并点击“创建”保存。

注意：启用“在应用程序加载时运行此查询”后，您的查询将在应用加载时自动执行。这意味着无需用户进行任何额外输入，即可获取并显示必要的数据。这有助于确保应用以最新信息启动。

有了这个查询，我们将能够获取所有存储桶的列表，这对于填充“浏览器”选项卡中的表 1 是必需的。

要将查询与 table1 组件连接起来，请按照以下简单步骤操作：

1. 单击 table1 组件以选择它，然后导航到其属性。
2. 在属性部分中，找到“表格数据”字段，并将其当前值替换为{{queries.getBuckets.data.Buckets}}。这将建立查询和组件之间的连接，从而使表格填充从“getBuckets”查询检索到的数据。
3. 如果需要，您可以进一步自定义表格，删除任何不必要的列，只留下“Buckets”列来显示可用存储桶的名称。

通过这些调整，table1 将动态显示可用 bucket 的列表，当获取所选 bucket 的对象的查询准备就绪时，我们可以对 table2 执行相同的操作。

要将表 1 中选定存储桶中的所有对象移至表 2，请按照以下步骤操作：

1. 创建一个名为“getObjects”的新查询，并选择操作“列出存储桶中的对象”。需要通过选择 table1 中的一行来动态填充“存储桶”字段的值。为此，请插入{{components.table1.selectedRow.Name}}。此外，将 maxkeys 值设置为 1000。
2. 创建查询后，单击表1中的一行，然后单击“预览”以测试查​​询。单击“创建”按钮保存。
3. 现在，就像我们将“getBuckets”查询连接到 table1 一样，让我们​​将“getObjects”查询连接到 table2。将 table2 的“Table data”属性更新为{{queries.getObjects.data.Contents}}。

作为所需功能的一部分，我们希望table2每次单击新行时都进行更新table1。为此，请转到 table1 的属性并添加具有以下设置的事件处理程序：

• 事件：单击行
• 操作：运行查询
• 查询：getObjects

通过这些更改，现在每次在 table1 中选择新行时都会执行“getObjects”查询并填充 table2。

完成这些步骤后，“浏览器”选项卡中的两个表格现在都已完全可用。用户可以使用组件的搜索功能轻松查找特定项目。此外，还可以为 table2 上方的 TextInput 字段实现自定义搜索功能，从而提供更强大的搜索功能。

关于“上传文件”按钮，其目的是当用户点击时将用户带到“上传器”选项卡。为此，您可以从按钮的属性中添加一个事件处理程序：

• 事件：点击时
• 动作：控制组件
• 组件：tabs1
• 操作：设置当前选项卡
• ID：1

通过实现此事件处理程序，“上传文件”按钮将成功将用户导航到“上传器”选项卡，我们将在该选项卡中探索如何将文件上传到选定的存储桶。

构建上传器标签

在“上传器”选项卡中，我们需要添加多个字段，用于接收诸如存储桶名称、文件名以及待上传文件等输入。为了构建 UI，我们可以使用图中所示的组件。由于“浏览器”选项卡已经设置完毕，因此安排这些组件将非常简单。

对于下拉列表组件，我们希望将所有存储桶名称列为选项。为此，我们可以将选项值和选项标签设置为{{queries.getBuckets.data.Buckets.map(item => item.Name)}}。这将使用从“getBuckets”查询检索到的所有存储桶名称动态填充下拉列表选项。此外，我们可以将默认选项设置为{{components.table1.selectedRow.Name}}，这会将下拉列表的默认值设置为“浏览器”选项卡中 table1 的选定行。

创建 S3 查询

为了能够将文件上传到选定的 S3 存储桶，我们将按照以下步骤创建一个名为“uploadObject”的新查询：

1. 在查询面板中点击“+ 添加”，并选择 S3 数据源。将查询命名为“uploadObject”，并选择“上传对象”操作。这将打开一个窗口，请求您输入待上传文件的详细信息。

动态填充查询字段如下：

• 桶：{{components.table2.selectedRow.Name}}
• 钥匙：{{components.textinput2.value}}
• 内容类型：{{components.filepicker1.file[0].type}}
• 上传数据：{{components.filepicker1.file[0].dataURL}}

请注意，插值文本中组件的 ID 可能会根据组件命名而有所不同。

1. 要测试查询，您可以向字段添加一些虚拟数据，单击“预览”，然后单击“创建”以保存查询。
2. 要在单击“上传”按钮时触发此查询，您可以添加一个事件处理程序，该事件处理程序在单击按钮时运行“uploadObject”查询。

完成这些步骤后，您已成功构建一个应用程序，该应用程序允许您浏览 S3 存储桶并执行文件上传。虽然本教程的范围仅限于这些功能，但 S3 集成提供了广泛的操作，您可以利用这些操作根据特定需求扩展应用程序的功能。

下一步

为了继续您的旅程并探索 ToolJet 的更多可能性，我们鼓励您访问 blog.tooljet.com 并尝试我们的更多教程。我们的博客充满了教程、指南和实用资源，可以帮助您进一步提升知识水平，并充分发挥 ToolJet 的潜力。

除了博客之外，我们还建议您参考docs.tooljet.com上提供的全面文档。该文档涵盖了广泛的主题，包括组件的详细解释、高级查询技术等。

此外，我们诚邀您加入我们在Slack 工作区上充满活力的社区。加入我们的社区，您可以与其他活跃的 ToolJet 用户联系，分享您的经验，并在需要时寻求帮助。

再次祝贺您迄今为止取得的成就！我们真诚感谢您阅读本教程并选择 ToolJet 来满足您的应用程序开发需求。我们希望本教程能为您提供宝贵的见解，并帮助您轻松构建强大的 Web 应用程序。

我们期待看到您使用 ToolJet 的精彩创作。祝您构建愉快！