使用 Google Sheets 和 ToolJet 构建库存和订单管理应用程序

2025-06-10

使用 Google Sheets 和 ToolJet 构建库存和订单管理应用程序

对于致力于优化运营和提高生产力的企业来说，高效的供应链管理至关重要。在构建经济高效的供应链管理工具时，将 Google Sheets 作为数据库，将 ToolJet 作为强大的低代码平台相结合，可以带来颠覆性的改变。

在本教程中，我们将深入研究如何利用 Google Sheets 和 ToolJet 的功能来构建一个强大且精简的库存和订单管理应用程序，该应用程序可以根据您的具体需求进行定制

什么是 ToolJet？

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

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

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

https://github.com/ToolJet/ToolJet

https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZjlhNzRjMWJlYzgyNWZjYjcyOGMxYjJiYjQxOTQzYTU1NTg5YzAzNiZjdD1n/dfbMVqwq8GrC19xSEF/giphy.gif

概述

为了让您对即将推出的功能有个大致的了解，我们首先展示完整的应用程序。

仪表板

图片描述

仪表板页面提供您订单和库存的全面概览。它以直观的方式呈现您的整体订单状态和库存数量。通过此概览视图，您可以快速评估供应链的健康状况并做出明智的决策。

库存管理器

图片描述
库存管理器页面让您高效地管理产品并追踪其状态。表格会显示产品及其数量、价格和类别。您可以完全掌控库存，并可无缝添加、删除和编辑产品。这确保您始终掌握准确的库存信息，并轻松进行必要的更新。

订单经理

图片描述
订单管理器页面增强了订单处理方式。它提供看板视图，让您可以直观地查看和跟踪不同状态的订单，例如待办、进行中和已完成。这个直观的界面让您可以轻松管理订单、添加新订单、更新订单状态以及根据需要删除订单。使用订单管理器，您可以确保及时履行订单并提供卓越的客户服务。

在整个应用程序中，我们充分利用了 ToolJet 组件及其提供的强大的 Google Sheets 集成功能。此集成功能可让您将 Google Sheets 数据无缝连接到应用程序。鉴于本教程涵盖了广泛的功能，我们将介绍一些可满足定制需求的基本操作。

创建 ToolJet 应用程序

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

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

图片描述

连接到 Google 表格

  1. 返回 ToolJet 仪表板。
  2. 从左侧边栏导航到“全局数据源”。
  3. 点击“添加新数据源”。
  4. 在数据源库中，搜索“Google Sheets”并选择它。
  5. 根据您的需求选择“只读”或“读写”。在本教程中，我们将选择“读写”，以便能够从 Google 表格中读取和写入数据。
  6. 按照提示继续授权 ToolJet 访问您的 Google 表格。
  7. 授权过程完成后，您可以返回应用程序构建器继续应用程序开发。

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

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

图片描述

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

现在您已经熟悉了应用程序构建器，让我们深入了解每个领域，并探索如何利用其功能为您的供应链管理构建一个强大而高效的应用程序。

构建应用程序。

我们已经了解了 ToolJet 应用程序构建器，现在是时候逐步构建应用程序了。
首先，我们先创建“库存管理”和“订单管理”两个页面。此外，我们还将设计应用程序的左侧边栏，使其包含导航功能，方便用户在这两个页面之间轻松切换。要继续创建页面并设计左侧边栏，请按照以下步骤操作：

打开 ToolJet 应用程序生成器并导航到左侧边栏中的“页面”部分。

  1. 点击左侧栏中的“页面”选项，为“库存管理器”创建一个新页面。
  2. 设置您选择的页面名称，您可以将其命名为“库存管理器”
  3. 重复该过程为“订单管理器”创建一个新页面。
  4. 在页面设置中切换“禁用菜单”以在查看模式下隐藏页面导航侧边栏。
  5. 创建两个页面后，您可以从全局设置中设置应用程序布局。
  6. 另外，您可以将画布的背景颜色设置为完全白色，#ffffff

图片描述

现在，让我们为应用创建一个侧边栏，以增强导航并提供直观的用户体验。侧边栏将允许用户在不同页面之间无缝切换。请按照以下步骤添加侧边栏：

  1. 将“容器”组件从组件管理器拖放到画布上。
  2. 将容器放置在页面左侧并根据需要调整其高度。
  3. 通过设置容器的颜色来自定义其外观。例如，您可以将颜色设置为鲜艳的绿色，例如 #237A6F。
  4. 要表示应用程序的不同页面，请在组件管理器中搜索“图标”组件，并将三个图标添加到侧边栏容器中。这些图标将作为导航的视觉提示。
  5. 考虑使用侧边栏容器顶部的图像组件添加徽标或品牌图像。这将为您的应用程序提供统一且专业的外观。

图片描述

要通过单击侧边栏中的图标来实现页面之间的导航，请按照以下步骤操作：

在容器中点击所需的图标组件。组件管理器将在单独的选项卡中显示用于设置组件属性和样式的选项。

  1. 在“属性”选项卡中，展开“事件”部分。
  2. 为“点击时”事件添加事件处理程序。
  3. 将操作指定为“切换页面”
  4. 从下拉列表中选择相应的页面。例如，您可以选择“主页”作为主页图标。

图片描述

对要链接到侧边栏图标的其他页面重复这些步骤。向图标添加事件处理程序会在点击事件和相应页面之间建立连接，从而实现应用程序内的流畅导航。

通过遵循这些步骤，您将成功地向您的应用程序添加侧边栏，增强其视觉吸引力并为用户提供在页面之间导航的便捷方式。

接下来，我们首先重点构建“库存管理”页面。此页面将允许您管理产品并有效跟踪其状态。让我们开始吧。

库存管理器页面

库存管理器页面提供了全面的产品数量视图，其中包含一个显示产品详情的表格，以及一个“添加新产品”按钮，可用于创建新产品或将新产品添加到产品列表中。我们将分两步构建该页面：创建 UI，然后将其连接到 Google 表格数据源。

构建 UI

要开始构建库存管理器页面的 UI，我们将设计分为两个部分。在第一部分中，我们将重点关注页面标题和用于显示不同状态下产品数量的界面。

图片描述

  1. 在组件管理器中搜索“文本”组件，并将其添加到应用程序的左上角。添加后，在属性中将默认文本修改为“产品库存”，并将其颜色设置为与左侧边栏设计相同的鲜绿色。
  2. 接下来，使用“容器”组件创建计数容器。将它们放置在先前添加的文本组件旁边，并保持一定距离，并相应地调整其大小以适应计数。在每个容器内，添加一个“文本”组件来显示标签，例如“总数量”、“库存数量”、“库存不足”和“缺货”。此外，添加另一个“文本”组件来保存每个计数的相应数值。
  3. 为了在视觉上分隔标题和计数部分，请在“产品库存”文本和计数容器下方插入“分隔符”组件。

按照这些步骤操作，您就成功创建了库存管理器页面的第一部分。要继续构建库存管理器页面的第二部分，其中包括一个带有按钮的搜索输入框和一个用于打开模态框的按钮，请按照以下步骤操作：

  1. 在组件管理器中搜索“TextInput”组件，并将其添加到分隔线下方。使用组件的“样式”选项卡设置输入字段 6 的边框半径。
  2. 在搜索输入旁边，添加一个按钮组件，其大小、颜色适当，边框半径设置为 6。
  3. 在搜索按钮的最右侧找到并添加“Modal”组件，配置按钮的属性和样式，将其命名为“Add a Product”，并设置所需的颜色和边框半径。下一步我们将设计模态框的 UI。
  4. 在搜索输入框和按钮下方添加一个表格组件，用于保存所有产品详情。使用表格组件的“样式”选项卡，将表格类型设置为“经典”，并将边框半径设置为 12。

请参考提供的图像进行模式设计并将组件相应地放置在模式内。

图片描述

按照这些步骤，您将成功添加库存管理器页面第二部分所需的组件。搜索输入框、按钮和表格将允许用户以结构化的方式搜索产品、添加新产品和查看产品详情。

要从 Google 表格获取数据，请按照以下步骤操作：

  1. 从 Google 表格网址获取电子表格 ID。通过查找 spreadsheets/d/ 之后、/edit#gid=... 之前的字符串来找到 ID。例如，如果网址为https://docs.google.com/spreadsheets/d/1n_Sm_NYQMwBanxGrHJaKvBJuz94U-xlfFJK3Knf32343OZS8/edit#gid=1311251363，则电子表格 ID 为 1n_Sm_NYQMwBanxGrHJaKvBJuz94U-xlfFJK3Knf32343OZS8。
  2. 在“查询”窗格中，点击之前连接的“Google Sheets”数据源。选择“从电子表格读取数据”操作。
  3. 在第二个字段中，输入在步骤 1 中获得的电子表格 ID。
  4. 或者，指定范围和工作表值来定义您想要检索的特定数据。
  5. 为该查询命名，例如“getProducts”或您选择的任何名称。
  6. 单击预览按钮以验证查询是否成功从电子表格中检索数据。
  7. 要在应用程序加载时自动执行此查询，请启用选项“在应用程序加载时运行此查询？”。
  8. 保存查询，它将被成功创建以供进一步使用。

图片描述

按照这些步骤，您已创建查询，用于从已连接的 Google 表格中获取所有产品数据。这些数据现在可以显示在库存管理器页面的表格组件中。此外，该查询可以在应用程序加载时自动执行，确保表格填充最新数据。

下面介绍如何使用 getProducts 查询中的数据填充表格

  1. 单击应用程序构建器中的表格组件。
  2. 转到表组件的属性部分。
  3. 找到“表格数据”字段并将其值更新为{{queries.getProducts.data}}。
  4. 一旦更新，表格就会自动填充查询的数据。
  5. 如果数据没有立即出现，您可以从查询面板手动运行“getProducts”查询，确保表中填充了查询数据。
  6. 要在表格组件中显示图片，请在属性部分中选择相应的列。在列设置中，将列类型设置为“图片”。此配置会自动将列中的 URL 值转换为可见的图片。

图片描述

此外，您可以从同一属性部分排列和自定义表中显示的列。

要使“添加产品”模式正常运行并能够将产品添加到已配置的 Google 表格中，请按照以下步骤操作：

  1. 访问查询面板并单击 Google Sheets 数据源以查看查询选项。
  2. 将操作设置为“将数据附加到电子表格”，以表明您想要向电子表格添加新数据。
  3. 指定电子表格 ID 来识别将附加数据的目标电子表格。

在“行”部分，您将定义要以 JSON 格式添加的数据。JSON 中的字段值将从输入组件动态更新。

下面是如何设置 Rows 值的示例：[{"Name": "{{components.textinput4.value}}", "Description": "{{components.textarea1.value}}", "Price": "{{components.textinput2.value}}", "Category": "{{components.textinput5.value}}", "Status": "{{components.textinput3.value}}", "Image":"{{components.textinput7.value}}"}]使用{{}}符号，您可以访问用户填写的各个输入组件中的值。

  1. 将此查询保存为“addProducts”以用于将产品添加到电子表格。
  2. 要在点击“添加产品”按钮时执行此查询，请向按钮的属性添加一个事件。将事件设置为“点击时”，操作设置为“运行查询”，然后选择“addProducts”查询。
  3. 同样，对于“取消”按钮，添加一个事件，以便在点击时关闭模态框。您也可以在执行“添加产品”按钮的“运行查询”事件后添加相同的事件，以关闭模态框。

图片描述

按照这些步骤，您已设置好向 Google 表格添加新产品的查询。“添加产品”模式将捕获用户的输入，点击“添加产品”按钮后，数据将附加到电子表格中。该模式还提供一个取消选项，用于关闭模式而不添加产品。

现在，为了动态更新库存管理器页面中计数器的值，我们将利用 JavaScript 代码和 ToolJet 的 RunJS 查询功能。通过执行自定义脚本，我们可以根据产品状态计算产品数量并返回结果。这种方法可以实时更新并准确显示库存状态。让我们逐步了解如何使用 RunJS 查询执行 JavaScript 代码，并将计数值连接到相应的文本组件。

  1. 打开查询面板并从默认数据源中选择“RunJS”
  2. 这将打开 RunJS 查询选项。将查询保存为“getProductsCount”。
  3. 在 RunJS 查询中，添加提供的代码片段
const counts = queries.getProducts.data.reduce(
  (acc, item) => {
    acc.totalCount++;
    if (item.Status === "In Stock") {
      acc.inStockCount++;
    } else if (item.Status === "Low Stock") {
      acc.lowStockCount++;
    } else if (item.Status === "Out of Stock") {
      acc.outOfStock++;
    }
    return acc;
  },
  { inStockCount: 0, lowStockCount: 0, outOfStock: 0, totalCount: 0 }
);

return counts;
Enter fullscreen mode Exit fullscreen mode

保存“getProductsCount”查询，并确保其在“getProducts”查询成功完成后执行。为此，请在查询成功时向“getProducts”查询添加一个事件处理程序，以触发“getProductsCount”查询。

图片描述

恭喜您成功构建库存管理器页面！您已经学习了如何设计 UI、如何连接 Google 表格作为数据源、如何向表格填充数据、如何添加新产品以及如何动态更新计数值。

现在您已经对如何在 ToolJet 中构建 UI 和创建查询有了深入的了解，我们将在接下来的章节中以更快的速度进行学习。利用您新获得的知识和熟练程度，我们将探索如何构建订单管理器页面。

订单管理页面

在订单管理器页面中，我们将重点转移到高效地跟踪和管理订单。为了检索订单数据，我们将使用另一个电子表格，其中每个订单的产品名称都使用产品 ID 作为键从产品表中进行索引。此过程将涉及利用查询转换来建立数据集之间的必要连接。
在 UI 方面，我们将引入一个名为看板的新组件，它以可视化的方式呈现不同阶段的订单。

图片描述

订单管理器页面的 UI 构建过程与前面几节类似。但是，如上所述，我们引入了一个名为看板的新组件。

  1. 按照博客中提供的图像，将看板组件添加到页面。
  2. 看板组件内的每个卡片都应包含三个文本组件：一个用于产品名称，一个用于客户名称，一个用于订单总价。
  3. 自定义看板组件的样式和布局以符合您的设计偏好。
  4. 除此之外，“创建订单”是一个“模态”组件，而“所有订单”文本是文本组件。

这是创建订单的模式的用户界面。

图片描述

通过遵循提供的图像并合并必要的组件，您可以创建一个看板视图，有效地显示订单详细信息并设置用于添加可用于将数据附加到订单电子表格的输入的模式。

设置查询

我们将利用查询转换来整合来自不同查询的信息，并增强数据检索流程。具体来说，我们将重点从单独的电子表格中检索订单数据，并使用产品 ID 将产品名称与每个订单关联起来。这将使我们能够在应用程序中呈现全面且有意义的信息。

要使用相同的数据源连接到新的电子表格并检索订单数据，请按照以下步骤操作：

  1. 在 ToolJet 查询面板中创建一个新的 Google Sheets 查询。
  2. 将此查询的操作设置为“从电子表格读取数据”。
  3. 指定适当的电子表格 ID 来识别包含订单数据的目标电子表格。
  4. 保存此查询，您可以将其命名为“getOrdersWithProductId”

此查询将能够在每个对象中带来带有产品 ID 的订单数据，使用产品 ID 检索每个订单的产品名称，还可以根据状态添加一个名为“columnId”的新键（看板组件需要），我们将利用查询转换。

  1. 在查询选项中切换“启用转换”选项。
  2. 在代码编辑器中添加提供的 JavaScript 代码片段
const products = queries.getProducts.data;
const orders = data;

const updatedData = orders.map(obj => {
  const productId = obj.ProductID;
  const product = products.find(prod => prod.Id === productId);
  const productName = product ? product.Name : "Unknown Product";

  return {
    ...obj,
    ProductName: productName,
    columnId: obj.Status
  };
});

return updatedData;
Enter fullscreen mode Exit fullscreen mode

图片描述

您可以保存查询并预览它，下面是如何发现有和没有查询转换之间的差异。

{
  id: "2",
  OrderDate: "02/02/2023",
  Name: "Bob Smith",
  ProductID: "1",
  Phone: "9876543210",
  Address: "456 Elm St, Town",
  Comment: "Call before delivery",
  Status: "todo",
  Quantity: "3",
  TotalPrice: "343"
}
Enter fullscreen mode Exit fullscreen mode 
{
  id: "2",
  OrderDate: "02/02/2023",
  Name: "Bob Smith",
  ProductID: "1",
  Phone: "9876543210",
  Address: "456 Elm St, Town",
  Comment: "Call before delivery",
  Status: "todo",
  Quantity: "3",
  TotalPrice: "343",
  ProductName: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
  columnId: "todo"
}
Enter fullscreen mode Exit fullscreen mode

要将查询响应连接到看板组件并配置列数据和卡片数据，请按照以下步骤操作：

  1. 将看板组件的列数据字段值设置为以下 JSON 格式：[{ "id": "todo", "title": "Orders Placed" },{ "id": "inprogress", "title": "Shipped" },{ "id": "done", "title": "Delivered" }]此配置将在看板组件中将列定义为“已下订单”、“已发货”和“已交付”。
  2. 将看板组件的卡片数据字段值设置为{{queries.getOrdersWithProductId.data}}。这会将查询响应连接到看板组件，确保数据正确显示。
  3. 要在相应的卡片组件中显示产品名称、客户名称和价格，请点击第一列第一张卡片中的文本组件。将文本属性设置为{{cardData.ProductName}}显示产品名称、{{cardData.Name}}显示客户名称和$ {{cardData.TotalPrice}}显示价格。
  4. 除此之外，单击特定卡片会显示该卡片的扩展视图；您可以设置所需的组件并显示必要的订单详细信息。

图片描述

现在，您可以尝试实现“创建订单”模式及其相应的查询。该过程与我们在上一节中实现“添加产品”模式的过程非常相似。

要开始，请按照下列步骤操作：

  1. 使用适当的组件（例如文本输入、下拉菜单和按钮）设计“创建订单”模式的 UI。
  2. 在 ToolJet 查询面板中创建一个新查询，以将数据附加到 Google Sheets 电子表格。
  3. 将查询的操作设置为“将数据附加到电子表格”并指定适当的电子表格 ID。
  4. 配置查询以包含来自模式的必要输入字段来捕获订单详细信息。
  5. 向模式中的相关按钮添加事件处理程序，以便在单击时执行查询。
  6. 或者，设置额外的查询或查询转换来获取更新的订单数据并实时显示。

按照以下步骤，您可以通过模态框创建新订单，并将订单详情无缝更新到 Google 表格中。这不仅能实现顺畅的数据管理，还能增强您的库存和订单管理应用的功能。

仪表板页面

图片描述

到目前为止，您已经积累了设计 UI 组件、创建查询以及将数据集成到应用程序中的宝贵经验。现在，让我们继续构建激动人心的仪表板任务，它将提供您库存和订单的全面概览。

构建仪表板是展示您新技能的绝佳机会。凭借目前掌握的知识，您可以自信地创建一个视觉上美观且信息丰富的仪表板，用于显示申请中的关键计数和亮点。您可以使用上方“概览”部分中的申请导出共享功能。

首先，请参考提供的包含第 1 部分和第 2 部分的仪表板布局图片。由于您已经构建了两个完整的页面，因此您已经做好了应对这一挑战的准备；请按照图片所示，将组件放置在应用程序构建器画布中的适当位置。

仪表板的一个重要功能是显示不同状态下产品的数量，类似于您在“库存管理器”页面中所做的操作。为此，您可以创建查询来检索必要的数据，并根据产品状态计算数量。您可以参考“产品库存”页面中创建查询以更新数量字段的部分，以回顾此过程。

利用您以往的经验和所学知识，您将拥有将仪表盘变为现实的技能和创造力。您可以随意自定义组件、样式和布局，以符合您期望的设计美感。请记住，仪表盘是您应用程序的视觉快照，可让您快速浏览关键指标和洞察。专注于呈现最相关、最有影响力的信息，以赋能决策制定并简化您的业务运营。

下一步

恭喜您成功使用 ToolJet 构建了库存和订单管理应用！您已经展现了 UI 设计、查询创建和应用程序开发方面的技能。现在您已经完成了本教程，您可能想知道下一步该做什么。

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

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

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

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

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

链接链接 https://dev.to/tooljet/building-an-inventory-and-order-management-app-with-google-sheets-and-tooljet-4jjf
Devto 翻译
PREV
使用 ToolJet 和 Python 5 分钟创建二维码生成器！🛠️
NEXT
使用 ToolJet 构建 Ed-Tech 销售 CRM