此页面由 Cloud Translation API 翻译。

在 Looker Studio 中关联并直观呈现您的所有数据

1. 简介

借助 Looker Studio，您可以免费构建具有精美数据可视化效果的实时交互式信息中心。使用 Looker Studio 的完整修改和分享功能，从各种来源提取数据，并创建无限量的报告。以下屏幕截图是 Looker Studio 信息中心示例：

2f296fddf6af7393

（点击此处即可在 Looker Studio 中查看此报告示例）

社区连接器是 Looker Studio 的一项功能，可让您使用 Apps 脚本构建连接到任何可通过互联网访问的数据源的连接器。社区连接器由 Looker Studio 社区构建。这意味着任何人都可以构建社区连接器。您还可以与其他人共享社区连接器，以便他们在 Looker Studio 中访问自己的数据。

您可以在不同的用例中使用社区连接器：

您正在直观呈现来自商业平台（例如社交媒体、营销、分析等）的数据
您正在直观呈现本地企业数据（例如来自预置 MySQL 数据库的销售数据）
您为客户提供了一种方式，让他们能够通过您的服务直观呈现他们的数据
您正在创建按钮报告平台
您正在直观呈现来自网络来源的数据（例如，创建 Google 健身信息中心）

学习内容

Looker Studio 社区连接器的运作方式
如何使用 Google Apps 脚本构建社区连接器
如何在 Looker Studio 中使用社区连接器

所需条件

访问互联网和网络浏览器
Google 账号
熟悉基本的 JavaScript 和 Web API

2. 快速调查问卷

您为何选择此 Codelab？

<ph type="x-smartling-placeholder"></ph> 我总体上对数据可视化感兴趣。

我想详细了解 Looker Studio

我想构建自己的社区连接器。

我正在尝试将 Looker Studio 与其他平台集成。

我对 Google Cloud 解决方案感兴趣。

您计划如何使用此 Codelab/教程？

<ph type="x-smartling-placeholder"></ph> 仅快速浏览

阅读并完成练习

您如何评价自己对 Looker Studio 的熟悉程度？

<ph type="x-smartling-placeholder"></ph> 从未听说过

我知道这是什么，但并没有使用。

我经常使用。

我是专家用户。

以下哪一项最能准确描述您的背景？

<ph type="x-smartling-placeholder"></ph> 开发者

商业 / 金融 / 数据分析师

数据科学家 / 数据工程师

营销 / 社交媒体 / 数字分析专家

设计人员

其他

您可以转到下一页以提交调查问卷信息。

3. 社区连接器概览

Looker Studio 社区连接器支持从 Looker Studio 直接连接到任何可通过互联网访问的数据源。您可以连接到商业平台、公共数据集或您自己的本地私有数据。社区连接器可以通过 Web API、JDBC API、平面文件（CSV、JSON、XML）和 Apps 脚本服务提取数据。

设想一下这样一种场景：您已在 npm 上发布了软件包，并且希望每天跟踪软件包的下载次数。在此 Codelab 中，您将构建一个社区连接器，该连接器使用 npm 软件包下载计数 API 来提取数据。然后，您就可以在 Looker Studio 中使用社区连接器构建一个信息中心，直观呈现下载次数。

4. 社区连接器工作流

在基本的社区连接器中，您将定义以下四个函数：

getAuthType()
getConfig()
getSchema()
getData()

根据工作流的当前步骤，Looker Studio 会执行这些连接器函数，并在后续步骤中使用响应。下面的视频简要介绍了：

社区连接器的工作原理
工作流程中的不同步骤
调用不同函数时
当 Looker Studio 显示不同的界面时
不同步骤的预期用户操作

您可以在观看视频后继续学习此 Codelab。

您无需记住该工作流程，只需看一下，即可大致了解连接器中的情况。您可以随时回到此图表。

在下一步中，您将开始在 Google Apps 脚本中创建连接器。您必须在 Apps 脚本界面与此 Codelab 之间来回切换。

5. 设置您的 Apps 脚本项目

第 1 步：访问 Google Apps 脚本。

第 2 步：点击“+ 新项目”以创建新的 Apps 脚本项目。

您会在 Code.gs 文件中看到一个包含空白 myFunction 函数的 shell 项目。

第 3 步：删除 myFunction 函数。

第 4 步：为项目命名：

点击页面左上角的 Untitled project
输入项目标题。

7172aebc181c91d4

开始在 Code.gs 文件中编写连接器代码。

6. 定义 getAuthType()

当 Looker Studio 需要知道连接器使用的身份验证方法时，它会调用 getAuthType() 函数。此函数应返回连接器在向第三方服务授权时所需的身份验证方法。

对于您正在构建的 npm 下载连接器，您无需通过任何第三方服务进行身份验证，因为您使用的 API 不需要任何身份验证。复制以下代码并将其添加到 Code.gs 文件中：

Code.gs

var cc = DataStudioApp.createCommunityConnector();

function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

在这里，这表示您的连接器不需要任何第三方身份验证 (AuthTypes.NONE)。如需查看所有支持的身份验证方法，请参阅 AuthType() 参考文档。

7. 定义 getConfig()

您的连接器用户需要先配置连接器，然后才能开始使用它。getConfig() 函数响应定义了用户将看到的配置选项。Looker Studio 会调用 getConfig() 函数来获取连接器的配置详细信息。Looker Studio 会根据 getConfig() 提供的响应呈现连接器配置界面，并更改某些连接器行为。

在配置屏幕中，您可以使用以下表单元素提供信息或获取用户输入：

`TEXTINPUT`	输入元素	单行文本框。
`TEXTAREA`	输入元素	多行文本框框。
`SELECT_SINGLE`	输入元素	包含单选选项的下拉菜单。
`SELECT_MULTIPLE`	输入元素	包含多选选项的下拉菜单。
`CHECKBOX`	输入元素	可用于捕获布尔值的单个复选框。
`INFO`	显示元素	可用于向用户提供说明或信息的静态纯文本框。

使用 INFO 元素向用户提供说明，并使用 TEXTINPUT 元素从用户获取输入软件包名称。在 getConfig() 响应中，您需要将这些表单元素划分到 configParams 键下。

由于您要连接的 API 需要日期作为参数，因此请在 getConfig() 响应中将 dateRangeRequired 设置为 true。这会告知 Looker Studio 为所有数据请求提供日期范围。如果您的数据源不需要将日期作为参数，则可以忽略此字段。

将以下 getConfig() 代码添加到 Code.gs 文件中，使其位于 getAuthType() 的现有代码下方：

Code.gs

function getConfig(request) {
  var config = cc.getConfig();
  
  config.newInfo()
    .setId('instructions')
    .setText('Enter npm package names to fetch their download count.');
  
  config.newTextInput()
    .setId('package')
    .setName('Enter a single package name')
    .setHelpText('e.g. googleapis or lighthouse')
    .setPlaceholder('googleapis');
  
  config.setDateRangeRequired(true);
  
  return config.build();
}

根据这些 configParams，当您在 Looker Studio 中使用连接器时，您应该会看到如下所示的配置屏幕。稍后会详细介绍。

7de872f17e59e92

我们继续看下一个函数 - getSchema()。

8. 定义 getSchema()

Looker Studio 会调用 getSchema() 函数，以获取与用户为连接器选择的配置相关联的架构。根据 getSchema() 提供的响应，Looker Studio 将向列出连接器中所有字段的用户显示字段屏幕。

对于连接器的任何特定配置，架构都是连接器可以提供数据的所有字段的列表。连接器可能会根据各种配置返回包含不同字段的不同架构。架构可以包含您从 API 来源提取的字段、您在 Apps 脚本中计算的字段，以及在 Looker Studio 中使用计算字段公式计算的字段。连接器提供了有关架构中每个字段的元数据，包括：

字段名称
字段的数据类型
语义信息

如需了解详情，请稍后查看 getSchema() 和 Field 参考文档。

在调用 getSchema() 时，架构可以是固定的，也可以是动态计算的，具体取决于您的连接器的提取方式。由用户定义的 getConfig() 配置参数将在 getSchema() 函数的 request 参数中提供。

对于此 Codelab，您无需访问 request 参数。在下一部分中，您将在为 getData() 函数编写代码时详细了解 request 参数。

对于连接器，架构是固定的，包含以下 3 个字段：

`packageName`	用户提供 npm 软件包的名称
`downloads`	npm 软件包的下载计数
`day`	下载内容统计的日期

以下是连接器的 getSchema() 代码。getFields() 辅助函数会抽象化处理字段的创建过程，因为 getSchema() 和 getData() 都需要此功能。将以下代码添加到 Code.gs 文件中：

Code.gs

function getFields(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;
  
  fields.newDimension()
    .setId('packageName')
    .setType(types.TEXT);
  
  fields.newMetric()
    .setId('downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);
  
  fields.newDimension()
    .setId('day')
    .setType(types.YEAR_MONTH_DAY);
  
  return fields;
}

function getSchema(request) {
  var fields = getFields(request).build();
  return { schema: fields };
}

根据此架构，当您在 Looker Studio 中使用连接器时，您应该会在 Looker Studio 字段屏幕中看到以下字段。稍后，当您测试连接器时，会介绍更多相关信息。

下面我们来看看最后一个函数 getData()。

9. 定义 getData()：第 1 部分

Looker Studio 会在需要提取数据时随时调用 getData() 函数。Looker Studio 会根据 getData() 提供的响应，在信息中心内渲染和更新图表。在以下情况下，系统可能会调用 getData()：

用户将图表添加到信息中心
用户修改图表
用户查看信息中心
用户修改与过滤器或数据控制相关的
Looker Studio 需要数据样本

无需从此页面复制任何代码，因为您只需将完整的

getData()

调用的代码

了解 `request` 对象

Looker Studio 会在每次调用 getData() 时传递 request 对象。请查看以下 request 对象的结构。这将帮助您为 getData() 函数编写代码。

`request` 对象结构

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}

configParams 对象将包含 getConfig() 中定义的参数并由用户配置的配置值。
scriptParams 对象将包含与连接器执行相关的信息。在此 Codelab 中，您不需要使用它。
如果在 getConfig() 响应中提出请求，dateRange 将包含所请求的日期范围。
fields 将包含数据请求所针对的字段的名称列表。

对于连接器，getData() 函数中的 request 示例可能如下所示：

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    startDate: '2017-07-16',
    endDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

对于上述 request 中的 getData() 调用，虽然连接器架构具有其他字段，但仅请求了两个字段。下一页将包含此 getData() 调用的示例响应和常规 getData() 响应结构。

10. 定义 getData()：第 2 部分

在 getData() 响应中，您需要为请求的字段提供架构和数据。您需要将代码分为三段：

为所请求的字段创建架构。
从 API 提取和解析数据。
转换已解析的数据并过滤所请求的字段。

无需从此页面复制任何代码，因为您只需将完整的

getData()

下一个页面中会介绍代码

以下是连接器的 getData() 结构。

function getData(request) {

  // TODO: Create schema for requested fields.
  
  // TODO: Fetch and parse data from API.
  
  // TODO: Transform parsed data and filter for requested fields.

  return {
    schema: <filtered schema>,
    rows: <transformed and filtered data>
  };
}

为所请求的字段创建架构

// Create schema for requested fields
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

通过 API 提取和解析数据

npm API 网址将采用以下格式：

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

使用 Looker Studio 提供的 request.dateRange.startDate、request.dateRange.endDate 和 request.configParams.package 创建 API 网址。然后使用 UrlFetchApp（Apps 脚本类：reference）从 API 提取数据。然后，解析提取的响应。

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;

转换已解析的数据并过滤所请求的字段

npm API 的响应将采用以下格式：

{
  downloads: [
    {
    day: '2014-02-27',
    downloads: 1904088
    },
    ..
    {
    day: '2014-03-04',
    downloads: 7904294
    }
  ],
  start: '2014-02-25',
  end: '2014-03-04',
  package: 'somepackage'
}

转换来自 npm API 的响应，并按以下格式提供 getData() 响应。如果这种格式不清楚，请参阅以下段落中的示例响应。

{
  schema: [
    {
      object(Field)
    }
  ],
  rows: [
    {
      values: [string]
    }
  ]
}

在响应中，使用 schema 属性仅返回所请求字段的架构。您将使用 rows 属性以行列表的形式返回数据。对于每一行，values 中的字段序列必须与 schema 中的字段序列一致。根据之前的 request 示例，getData() 的响应如下所示：

{
  schema: requestedFields.build(),
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

您已经创建了架构的子集。使用以下函数转换解析后的数据，并针对请求的字段对其进行过滤。

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

11. 定义 getData()：第 3 部分

组合后的 getData() 代码将如下所示。将以下代码添加到 Code.gs 文件中：

Code.gs

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

function getData(request) {
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;
  var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);

  return {
    schema: requestedFields.build(),
    rows: rows
  };
}

您已完成 Code.gs 文件的创建！接下来，更新清单。

12. 更新清单

在 Apps 脚本编辑器中，选择项目设置 >显示“appsscript.json”清单文件中列出。

90a68a58bbbb63c4

这将创建一个新的 appsscript.json 清单文件。

1081c738d5d577a6

将 appscript.json 文件替换为以下代码：

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",

  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
    "company": "Codelab user",
    "companyUrl": "https://developers.google.com/looker-studio/",
    "addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}

保存 Apps 脚本项目。

5701ece1c89415c

恭喜！您已经构建了第一个社区连接器，可以对其进行测试了！

13. 在 Looker Studio 中测试连接器

使用部署

第 1 步：在 Apps 脚本开发环境中，点击部署 >测试部署，打开“测试部署”对话框。

3f57ea0feceb2596

系统将列出默认部署 Head Deployment。

第 2 步：点击 Copy（复制）以复制 Head 部署 ID。

第 3 步：如需在 Looker Studio 中加载连接器，请将 <HEAD_DEPLOYMENT_ID>占位符替换为连接器的 Head 部署 ID，然后在浏览器中点击链接：

https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>

为连接器授权

首次使用 Looker Studio 的用户：如果您之前未使用过 Looker Studio，系统会要求您授权 Looker Studio 并同意条款及条件。完成授权流程。首次使用 Looker Studio 时，您可能还会看到一个对话框，供您更新营销偏好设置。如果您想通过电子邮件了解最新的功能、更新和产品公告，请订阅产品公告。

加载完成后，系统会提示您授权连接器。

点击“授权”，并为连接器提供所需的授权。

配置连接器

授权完成后，系统会显示配置屏幕。输入“灯塔”，然后点击右上角的“连接”。

确认架构

您会看到字段屏幕。点击右上角的创建报告。

4a9084bd51d2fbb8

创建信息中心

您将进入 Looker Studio 信息中心环境。点击添加到报告。

1ca21e327308237c

在 Looker Studio 中，每当用户访问连接器并添加新配置时，用户的 Looker Studio 账号中都会创建新的数据源。您可以将数据源视为基于特定配置的连接器实例化。根据连接器和用户所选的配置，数据源会返回一个包含一组特定字段的数据表。用户可以从同一连接器创建多个数据源。一个数据源可以在多个报告中使用，并且同一个报告可以使用多个数据源。

现在添加时序图！在菜单中点击插入 >时间序列。然后，将时间序列放置在画布中。您应该会看到所选软件包的 npm 下载计数的时间序列图表。添加日期过滤器控件并查看信息中心，如下所示。

大功告成！您刚刚创建了您的第一个社区连接器！此 Codelab 到此结束。现在，我们来看看您可以采取哪些后续步骤。

14. 后续步骤

改进您构建的连接器

改进您刚构建的连接器：

在 Looker Studio 中，如果您未在连接器的配置屏幕中提供软件包名称，则会在绘制时间序列图表时看到错误消息。请尝试在连接器配置中添加输入验证或默认选项。
请尝试在连接器配置中添加对同时查询多个软件包名称的支持。提示：npm package download count API 支持输入多个软件包名称（以英文逗号分隔）。
您可以在我们的 npm 连接器代码中找到这两个问题的解决方案。

利用社区连接器执行更多操作

查看连接器 API 和清单的参考文档。
探索我们的开源代码库中的示例连接器代码，了解最佳做法。
完成 clasp Codelab，以便您在本地环境中开发社区连接器。
构建完完整的社区连接器后，请考虑可用的发布方式。
为 Looker Studio 构建社区可视化图表。

其他资源

您可以访问以下各种资源，帮助您深入了解此 Codelab 中涵盖的内容。

资源类型	用户功能	开发者功能
文档	帮助中心	开发者文档
新闻和最新动态	在 Looker Studio 中注册 >用户设置	开发者邮寄名单
提问	用户论坛	Stack Overflow [looker-studio]
视频	DataVis DevTalk
示例	报告库连接器资源库	开源代码库

在 Looker Studio 中关联并直观呈现您的所有数据

1. 简介

学习内容

所需条件

2. 快速调查问卷

您为何选择此 Codelab？

您计划如何使用此 Codelab/教程？

您如何评价自己对 Looker Studio 的熟悉程度？

以下哪一项最能准确描述您的背景？

3. 社区连接器概览

4. 社区连接器工作流

5. 设置您的 Apps 脚本项目

6. 定义 getAuthType()

Code.gs

7. 定义 getConfig()

Code.gs

8. 定义 getSchema()

Code.gs

9. 定义 getData()：第 1 部分

了解 request 对象

request 对象结构

10. 定义 getData()：第 2 部分

为所请求的字段创建架构

通过 API 提取和解析数据

转换已解析的数据并过滤所请求的字段

11. 定义 getData()：第 3 部分

Code.gs

12. 更新清单

appsscript.json

13. 在 Looker Studio 中测试连接器

使用部署

为连接器授权

配置连接器

确认架构

创建信息中心

14. 后续步骤

改进您构建的连接器

利用社区连接器执行更多操作

其他资源

了解 `request` 对象

`request` 对象结构