Google Sheets

从 Google Sheets 快速获取数据以构建 Toolpad Studio 应用程序。

您可以编写自定义函数来读取或写入 Google Sheet 中的数据。我们将使用 google-auth-library 和 googleapis 包来实现这一点。

如 google-auth-library 中所述，有很多种方法可以验证 Google API。本指南使用 JWT（JSON Web 令牌），这适用于基于服务器的应用程序。

连接到 Google Sheet

先决条件

1. 您需要从 Google 开发者控制台创建一个服务帐户。
2. 将密钥文件下载到本地环境。它是一个 JSON 文件，其中包含需要谨慎处理的密钥。
3. 使用您下载的 JSON 文件中的 client_email 和 private_key 在 .env 文件中设置身份验证。
4. 与具有相同 client_email 的服务帐户共享您要显示的 Google Sheet。

自定义函数

在我们的代码编辑器中，在 /resources/functions.ts 内部，我们将创建一个函数 fetchList 以获取此 client_email 服务帐户允许访问的文件列表

export async function fetchList() {
  const service = google.drive({ version: 'v3', auth: googleAuth });
  const sheets = await service.files.list({
    pageSize: 10,
    fields: 'nextPageToken, files(id, name)',
  });

  return sheets.data.files;
}

现在在 Toolpad Studio 编辑器中，单击 添加查询 并选择“自定义函数”。您应该能够看到我们创建的函数 fetchList。然后将一个 Select 组件拖到画布上，并将其与上述查询绑定，以向最终用户显示可访问的文件列表。

现在我们将创建另一个函数 fetchSheet 以显示所选 Sheet 的详细信息。

export async function fetchSheet(spreadsheetId: string, range: string) {
  const service2 = google.sheets({ version: 'v4', auth: googleAuth });

  const res = await service2.spreadsheets.values.get({
    spreadsheetId,
    range,
  });

  const [header, ...rows] = res.data.values;
  return rows.map((row) =>
    Object.fromEntries(header.map((key, i) => [key, row[i]])),
  );
}

创建一个对应的 fetchList 查询。当您运行上述函数时，您应该能够在您的 Toolpad Studio 应用程序中看到数据。您可以将其绑定到应用程序中的数据网格。