构建你的第一个应用

通过创建一个小型应用程序，学习使用 Toolpad Studio 构建应用的基础知识。

本指南将引导你完成创建小型 Toolpad Studio 应用程序的过程。你将使用 MUI X Data Grid 组件来显示来自 Dog API 的犬种列表。当你点击一个犬种的名称时，将使用 Material UI Image 组件显示该犬种的随机照片。

目的

本指南旨在向你介绍使用 Toolpad Studio 进行构建的基础知识。完成本指南后，你应该能够：

• 设置一个新的 Toolpad Studio 应用
• 浏览你的工作区
• 设计页面并连接其数据

先决条件

请确保在你的系统上安装 Node.js。

构建你的第一个应用程序

创建一个新应用

1. 创建一个新的应用程序

   npx create-toolpad-app@latest --studio dog-app
   

   复制已复制（或 $keyC）

2. 启动开发服务器

   cd dog-app
   npm run dev
   

   复制已复制（或 $keyC）

   Toolpad Studio 应用程序编辑器将在你的浏览器中自动打开。

组装 UI

1. 将鼠标悬停在组件库上，并将一个 Data Grid 组件拖到画布中。现在重复该过程，并拖入一个 Image 组件。完成后，画布应如下所示：

获取数据

1. 在查询资源管理器中找到 + (创建新的) 按钮。按下它并选择 REST API。

2. 在本教程中，我们将使用 dog API。设置

   https://dog.ceo/api/breeds/list/all
   

   复制已复制（或 $keyC）

   作为 URL。点击 运行 按钮以检查此请求的结果，并在响应中展开 message 对象。如果一切顺利，它将如下所示：

3. 为了根据我们的需要转换响应，我们选择 转换 选项卡并启用 转换响应 选项。在编辑器中编写 JavaScript 表达式：

   return Object.entries(data.message);
   

   复制已复制（或 $keyC）

   再次点击 运行 以验证结果。

5. 点击 保存 以保存查询，然后在资源管理器中双击将其重命名为 dogQuery。

将数据绑定到 UI

1. 接下来，我们将把这些数据绑定到页面上的组件。点击 Data Grid 组件以选中它。

2. 在检查器中找到 rows 属性。请注意，在其右侧有一个小的 绑定 按钮。旁边有此按钮的属性可以绑定到页面上可用的状态

3. 点击该按钮以打开绑定编辑器。在左侧，你将看到页面中所有可绑定的状态的列表，在右侧，有一个代码编辑器，它接受任何 JavaScript 表达式。

4. 使用作用域中可用的 dogQuery 作为绑定表达式。

   dogQuery.data;
   

   复制已复制（或 $keyC）

   保存绑定并关闭绑定编辑器。

5. 如果一切顺利，Data Grid 现在将显示来自我们查询的数据

使应用具有交互性

1. 现在，我们可以通过显示所选犬种的随机图像来使此应用具有交互性。我们将创建另一个查询，该查询对 Data Grid 组件内的选择做出反应。

2. 创建另一个 REST API 类型的查询，并在右侧的 参数 部分添加一个 breed 参数

2. 点击犬种参数值旁边的 绑定 按钮，并在绑定编辑器中添加以下 JavaScript 表达式：

   dataGrid.selection?.[0] ?? 'akita'
   

   复制已复制（或 $keyC）

   这将使用 Data Grid 中的选定值，并在未选择任何行时默认为 “akita” 犬种。

3. 然后将查询 URL 绑定到以下 JavaScript 表达式：

   `https://dog.ceo/api/breed/${parameters.breed}/images/random`
   

   复制已复制（或 $keyC）

4. 保存绑定并关闭绑定编辑器。保存查询并退出查询编辑器。

5. 在查询资源管理器中双击将查询重命名为 imageQuery。

6. 在画布中，选择 Image 组件以在检查器中查看其属性。点击 src 属性旁边的 绑定 按钮以打开绑定编辑器，并将其绑定到 imageQuery.data.message。

6. 尝试在数据网格中选择不同的行，以查看图像更新为所选犬种的随机图像。

预览应用

1. 点击 预览 按钮，以查看你的应用在部署后的外观预览

2. 就是这样！请随意浏览文档的其余部分，以了解有关 Toolpad Studio 的更多信息。