小窍门

轻松集成：将 Google 表格连接到 ProtoPie 原型

将 Google 表格与 ProtoPie 集成，突破静态原型限制，创建实时响应的动态数据驱动型原型。

Tim Weydert, Content Writer

June 30, 2025

金融科技原型设计与 Google 表格集成

突破静态限制：金融科技原型如何接入 Google 表格实时数据

静态模型虽然方便，但在某些时候却远不够用——特别是在金融科技领域，实时数据至关重要，简单的图片根本无法满足需求。为了打造真正沉浸式、逼真的用户体验，你需要动态的、实时的数据。想象一下，你的原型中支出图表和财务数据能像最终产品一样实时更新，那该多棒！
本教程将一步步指导你如何将 Google 表格与你的 ProtoPie 原型进行集成。我们将向你展示如何直接从电子表格中提取数据，从而创建出强大的数据驱动型原型。

第一部分：获取 Google 表格数据

第一步是将你的 Google 表格数据导入 ProtoPie。我们将使用 ProtoPie Connect 及其内置的 API 插件来实现这一点。

步骤 1：在 ProtoPie Connect 中设置 API 请求

在 ProtoPie Connect 的 API 插件中，你需要创建一个新的请求，并填写以下详细信息：
ProtoPie Connect API 请求
  • Method: GET
  • URL: 这个网址是您的表格 ID、您想要导入的数据范围以及您的独有 Google API 密钥的组合。
URL
  • Header: None
  • Body: None

步骤 2：找到您的表格 ID

表格 ID 是您的 Google 表格的唯一标识符。
您可以在 Google 表格的 URL 中直接找到它。它是一长串字符，位于 /d/ 和 /edit 之间。
表格 ID

步骤 3：定义数据范围

接下来，你需要告诉 ProtoPie 抓取哪些数据。数据范围指定了你想要导入的单元格。
这可以是一组列（例如 A:C）或者整个工作表。
你可以通过 Sheet1!A1:D1 这样的格式来指定工作表名称和范围，或者只列出工作表名称来导入它的所有数据。
范围

步骤 4：生成您的 Google 表格 API 密钥

这个密钥将授权 ProtoPie 访问您的表格数据。
  1. 前往 Google Cloud 控制台。
  2. 从顶部菜单中创建一个新项目。
创建一个新的项目
  1. 在搜索栏中，找到“Google Sheets API”并为您的项目启用它。
  2. 导航到左侧的“凭据（Credentials）”选项卡。
  3. 点击“创建凭据（Create Credentials）”并选择“API 密钥（API key）”。
创建凭据
  1. 密钥将生成。复制它，然后将其添加到您在 ProtoPie Connect 中的 URL 里。
API 钥匙创建

步骤 5：测试与故障排除

拼接好你的 URL 后，在 ProtoPie Connect 中测试请求。如果出现错误，最常见的问题是你的 Google 表格的共享权限设置不正确。
API 钥匙测试
重要提示： 务必将您的 Google 表格分享设置从“受限”更改为“任何知道链接的人都可以查看”。受限表格需要 OAuth 授权才能访问，如果您想在原型中使用数据但又保持数据受限，可以使用这种授权方式。不过，本教程不涉及 OAuth 授权类型。

第二部分：在 ProtoPie 中解析数据

API 请求成功后，ProtoPie 会从您的表格中接收到一长串原始数据。现在，我们需要解析这些数据（将其拆分），以便在原型中使用。
来自 Google 表格的数据是按“值”（values）组织的，这些“值”代表了您电子表格中的行。通常，第一行包含您的列标题（例如：“姓名”、“日期”、“金额”），随后的行则包含实际数据。
解析数据

步骤 1：使用 parseJson 解析基本数据

parseJson() 函数是获取特定数据的关键。我们来看一个检索元数据的基本示例：
公式： parseJson(metaData, "values." + (ID + 1) + ".0")
  • metaData: 这是您存储 API 调用返回的原始数据的变量名称。
  • "values.": 这告诉公式在数据的 "values" 部分中查找。
  • (ID + 1): 这用于选择您想要的行。我们使用 +1 是因为第一行（索引为 0 的行）通常是标题，而我们希望访问后面的实际数据行。因此，要获取第一个数据行（表格中的第二行）的数据，您需要查找第二个集合。
  • ".0": 这用于选择行中的特定项。每行的数据项索引从 0 开始。所以，.0 获取第一个项，.1 获取第二个，依此类推。
公式一

步骤 2：动态图表数据的高级示例

有时，Google 表格的数据结构并不适合直接解析。例如，如果你的月度支出数据是按年份列出的，要找到特定月份的支出就需要一些巧妙的方法。
公式： parseJson(googleSheet, "values." + ((year * 12) + monthID + 1) + ".2")
这个公式看起来可能有点复杂，但它只是利用数学来精确找到我们需要的数据。
  • 我们使用变量来表示想要的年份和 monthID（月份 ID）。
  • (year * 12)：这部分完成了主要的计算。如果你的数据每年有 12 个月，这个计算会以 12 行为一个块跳过行，从而定位到正确的年份。
  • + monthID：在找到正确的年份后，这会加上月份的数字来找到正确的行。
  • +1：这再次是为了跳过表格中的标题行。
  • ".2"：这会抓取该行中的第三个数据项（例如，支出金额）。
公式二

大功告成！

就是这样！通过将 Google 表格连接到 ProtoPie，您就能突破静态设计的局限，构建出像真实产品一样动态、响应式的原型。现在，您可以提取实时数据来驱动图表、列表和其他组件，从而创建更丰富、更具说服力的用户测试。
完成的Google表格集成Pie
现在轮到你了！
记住，别忘了生成你自己的 Google API 密钥，并正确设置你的表格权限。
祝你原型设计愉快！
立刻开始 联系销售顾问