MUI 如何使用 Toolpad？
Prakhar Gupta
@prakhargupta1Toolpad 帮助全栈工程师快速构建内部工具。内部工具包括数据密集的 CRUD 界面、分析仪表板或使团队高效工作的自定义应用程序。Toolpad 提供了一种低代码、基于 GUI、代码友好的应用程序构建方式，并作为 npm 包导入到现有代码库中。
我们一直在 MUI 使用 Toolpad Studio 来构建我们的内部工具，事实证明，它有助于我们轻松地组装组织良好、集中管理的 KPI 仪表板和运营应用程序。在这篇博文中，我们将讨论四个这样的应用程序，并解释我们如何使用 Toolpad 将我们的想法变为现实。
通过 Toolpad 解决的问题
现在我们的内部工具更容易使用，并且更不容易出错；在我们构建这些应用程序之前，其中一些必要的功能只不过是 Google 文档或 Notion 中的一组说明。用户必须登录多个服务才能管理他们的日常事务。现在，一个界面即可完成所有操作。我们利用 Pipedream、Metabase、Google Sheets 和其他工具来简化我们的日常运营。这意味着我们有分布在多个地方的代码，只有少数人可以访问。现在我们所有的东西都在 GitHub 上，协作变得更加简单。
让我们深入研究 Toolpad 成功解决的四个场景
1. 支持密钥验证器
我们为 MUI X Premium 客户提供优先支持服务：他们的问题将在 24 小时内得到快速响应。他们通过我们存储库中的优先支持模板分享他们的问题，在该模板中，他们被引导验证他们的许可证密钥，一旦验证通过，24 小时倒计时就开始了。
以下是我们如何为此构建应用程序
updateMuiPaidSupport.ts 文件托管了从 Toolpad 调用的所有函数。它使用自定义函数功能，并结合 GitHub Actions、Google Sheets 和 Octokit 来读取和验证用户信息。然后，将获取的数据绑定到 UI 组件。它使用 Toolpad 的 页面参数、密钥处理、外壳移除和自定义样式功能。这个应用程序只花了一个开发人员几个小时就构建完成，否则这将花费更长的时间。
2. 客户支持 KPI 跟踪器
下面展示的只读页面使用 HTTP 请求作为其数据源。通过查询构建器 UI，我们从 Zendesk 获取最新的 100 个支持工单，以计算我们响应和解决客户请求的平均时间。它使用一个自定义组件，我们称之为“健康徽章”。根据指标值，该组件显示三种颜色编码状态：问题（红色）、警告（黄色）和正常（绿色）。其他 KPI 页面也使用此健康徽章和预构建的图表组件来比较统计数据、观察趋势和发现异常。
下面的视频演示了此应用程序在开发模式下的用法
我们选择 Toolpad 是因为 Metabase 不支持从 REST API 导入数据。这在 Google Sheets 中是可能的，但这需要编写大量的 JavaScript 代码，而且由于我们想将其嵌入到 Notion 页面中，Toolpad 是理想的选择。Toolpad 处理状态管理和路由，并简化查询构建和数据绑定，从而无需编写粘合代码。
您可以通过运行底层的 Node 应用程序，在您的设备上以开发模式探索上述两个应用程序。接下来讨论的两个应用程序是 MUI 内部的。
3. 管理逾期发票
我们有一个内部运营流程来提醒客户注意逾期发票：在到期日之后，会定期发送提醒电子邮件。在 Toolpad 应用程序中，运营团队可以查看所有需要联系的客户的表格。他们选择一个客户，从 Zendesk 发送电子邮件给他们，并将状态更新为 CONTACTED，然后写回数据库。这是一个供内部使用的私有应用程序，无法共享，但以下视频提供了一个快速演示
在此之前，我们依靠 Metabase 和 Google Sheets 的组合来获取和编辑记录——但这操作起来很麻烦，有时会导致数据不一致问题。感谢 Toolpad，我们已经设法将其全部集中在一个地方，从而大大提高了我们运营团队的效率和生产力。
4. 贡献者付款
我们有一个脚本来获取 MUI Store 贡献者的每月付款数据。我们的运营团队负责向贡献者付款，但事实证明，该脚本在技术上对于他们来说太具挑战性，以至于没有我们工程师的帮助就无法运行。我们通过将脚本导入 Toolpad 并为其创建 UI 来解决了这个问题。下面的视频展示了用户如何选择日期、运行脚本并接收正确格式化的文本，以便直接复制并粘贴到 Slack 通信中
结论
正如您所看到的，在 MUI，我们通过 Toolpad 简化了我们的内部工具，帮助我们保持精简和快速行动。内部应用程序通常非常特定于组织的需求，但希望您已从我们这里的一些用例中获得启发
- 您是否在您的组织内遇到过关于运营、管理或分析的任何类似需求？
- 您是否希望您可以重用低代码构建器中的现有代码，而不是重新开始？
- 您是否希望不必对内部工具的前端进行任何维护？
Toolpad 处理状态管理、数据获取、路由和 UI 创建，并且可以直接导入到您的代码库中以节省您的时间。我鼓励您查看更多示例并访问 GitHub 存储库来评估该产品。如果您需要任何进一步的信息，请随时通过 toolpad@mui.com 与团队联系。