谷歌表格API v4集成指南

热门技术勘探工
954 阅读5分钟

谷歌表格API v4集成指南

谷歌网络服务已经成为许多项目基础设施的重要组成部分，是一个重要的集成元素。我们再也无法想象没有它们的在线服务。同时，谷歌的开发人员正在努力扩大他们的服务能力，开发新的API，并提高我们数据的安全性。通常情况下，更新对用户来说是顺利发布的，不需要你做任何改变。但这次新的Google Sheets API就不一样了。

前言 进步是一种痛苦

2021年，谷歌推出了第四版的Sheet API，与之前的不兼容。这影响了数据安全和隐私。Sheets API v3的支持被 延长到2021年8月，以便为开发者提供更多的时间来迁移到新的API版本。自从对v3 API的支持结束后，许多JavaScript开发者面临着迁移问题。而尽管谷歌提供了一份详细的迁移指南，但就像通常发生的那样，其中缺少几个关键的细节。

作为AnyChart的支持工程师，我已经收到并继续处理我们的JS图表库用户的大量求助，他们在用谷歌电子表格中的数据输入可视化时突然面临问题。这表明这个问题一直是而且仍然是非常热门的问题。所以我决定为其他用户做一个快速的Google Sheets API v4整合指南。

这篇文章展示了访问谷歌电子表格文档的基本方法，并从其中加载数据，这显然是最常见的使用情况。

从JavaScript访问谷歌电子表格

要从JavaScript代码中访问谷歌电子表格，你需要google-api-javascript-client和Sheet API，以及一个配置好的谷歌项目和一个文档本身。

让我一步一步地引导你完成这一切。

在谷歌方面的配置

1) 创建一个项目

  1. 转到谷歌云平台。

Google Cloud Platform

  1. 创建一个新的项目。

2) 启用API

  1. 进入 "启用APIS和服务"。

Enable API Screen

  1. 在搜索栏中输入 "google sheets"，找到API。

Google Sheets Search Screen

  1. 选择 "Google Sheets API"。

  1. 启用Google Sheets API。

Enable Sheets API Screen

3) 凭证

  1. 转到 "证书 "选项卡。

Credentials Screen

  1. 点击 "创建凭证"，选择 "API密钥"。

Create Credentials Screen

**注意：复制并存储API密钥。**你将在以后的JavaScript代码中需要它({GOOGLE_API_KEY} in the JS code)。

c) 点击 "限制密钥"。

Restrict Key Screen

注意： 在存储和传输过程中保持你的API密钥安全。谷歌在这篇文章中很好地介绍了这方面的最佳做法。下面所有的代码片段都是为了演示而简化的，并没有描述安全方面。

d) 在 "限制密钥 "下拉菜单中，找到 "Google Sheets API "项目。

Restrict Key Google Sheets API screen

e) 选择它，点击 "OK "和 "SAVE"。

OK screen

4) 创建一个文档

  1. 按照你通常的方式创建一个谷歌表文档，并在其中填入一些数据。用你的数据为工作表设置一个名字，或者复制默认的名字--它在后面的JS代码中是必需的*（{SHEET_NAME}*）。

Create Sheet Screen

  1. 通过一个链接启用对文件的访问。你可以通过点击 "共享 "按钮并选择 "任何有链接的人 "来实现。("查看者 "的权限就足够了)。

Share Sheet Screen

  1. 复制该文件的ID。它可以在文档的URL中找到，在"/spreadsheets/d/"和"/edit "部分之间。这个ID将在后面的JS代码中被要求*（{SPREADSHEET_ID}*）。

Copy ID from URL bar

谷歌方面的所有必要设置都已完成。让我们转到一个应用程序。

从JavaScript应用程序中访问谷歌电子表格数据

现在，我将解释如何创建一个简单的JavaScript应用程序，从电子表格中获取数据并显示给用户。为了将应用程序连接到Sheet API，我将使用Google API Client Library for JavaScript（又称gapi），该库在其GitHub仓库中有详细的描述。

1) 创建一个基本的JavaScript应用程序

首先，使用直接链接将gapi库包含在你的页面中。

在HTML代码中添加<table> 标签，并为表格及其未来内容应用你喜欢的CSS代码。

在JavaScript代码中，创建一个将用于获取数据的函数。

const start = () => {};

在该函数中，用先前创建的谷歌API密钥初始化gapi客户端。

 gapi.client.init({
    'apiKey': '{GOOGLE_API_KEY}',
    'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  })

然后执行一个请求，通过gapi客户端获取数值。在请求中，你应该提供电子表格的ID和你想访问的数据所在的单元格范围。

.then(() => {
    return gapi.client.sheets.spreadsheets.values.get({
      spreadsheetId: '{SPREADSHEET_ID}',
      range: '{SHEET_NAME}!{DATA_RANGE}', // for example: List 1!A1:B6
    })
  })

如果所有的设置都是正确的，解析后的承诺会返回一个带有所获取数据的响应。现在你可以使用一个简单的JS脚本从响应中获取数据并填充到HTML表格中。

.then((response) => {
    // parse the response data
    const loadedData = response.result.values;

    // populate the HTML table with the data
    const table = document.getElementsByTagName('table')[0];
    
    // add column headers
    const columnHeaders = document.createElement('tr');
    columnHeaders.innerHTML = `<th>${loadedData[0][0]}</th>
<th>${loadedData[0][1]}</th>`;
    table.appendChild(columnHeaders);

    // add table data rows
    for (let i = 1; i < loadedData.length; i++) {
      const tableRow = document.createElement('tr');
      tableRow.innerHTML = `<td>${loadedData[i][0]}</td>
<td>${loadedData[i][1]}</td>`;
      table.appendChild(tableRow);
    }
  }).catch((err) => {
  	console.log(err.error.message);
  });

要执行代码，请调用gapi库中的*load()*函数，并将上面创建的函数作为参数传递。

gapi.load('client', start);

由此产生的应用程序看起来就像下面这样。欢迎你在JSFiddle上查看这个带有谷歌表数据的HTML表的完整代码模板。要让你自己的东西像这样工作，只要用你自己的信息替换*{GOOGLE_API_KEY}、{SPREADSHEET_ID}、{SHEET_NAME}和{DATA_RANGE}*（不要保留大括号）。

Code View

2）修补输出--以图表形式显示数据

在现实世界的应用中，简单的HTML表格通常是不够的；我们想对数据进行可视化和分析。让我告诉你如何创建一个仪表盘，增加数据的可读性，使我们更接近真实世界的用例。当我在值班时，被要求协助进行Google Sheets API整合时，这实际上是我分享的第一个例子，基本上，几乎总是最后一个，因为它非常具有说明性，不需要进一步帮助。

因此，让我们使用AnyChart JS库进行数据可视化。它包括柱状图和饼状图，这对这个简单的仪表盘来说已经足够了。

在做其他事情之前，将AnyChart的基础JS模块添加到HTML中。

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>

同时，为仪表盘容器添加<div> 标签，并为每个容器应用一个合适的ID。

<div id="container1"></div>
<div id="container2"></div>

大部分的JavaScript代码绝对保持不变。我只是会重新编写处理Sheet API响应的代码。

所以，保持JS代码的第一部分不变。

const start = () => {
  // Initialize the JavaScript client library
  gapi.client.init({
    'apiKey': '{GOOGLE_API_KEY}',
    'discoveryDocs': ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  }).then(() => {
    return gapi.client.sheets.spreadsheets.values.get({
      spreadsheetId: '{SPREADSHEET_ID}',
      range: '{SHEET_NAME}!{DATA_RANGE}', // for example: List 1!A1:B6
    })
  }).then((response) => {

In the response handler, parse the data to compose a structure compatible with the AnyChart API:

    const loadedData = response.result.values;
    const parsedData = {
      'header': loadedData.shift(),
      'rows': loadedData,
    };

Now we’ve got everything we need to create and configure charts for the dashboard: 

    // create an instance of a column chart
    const columnChart = anychart.column();

    // set the data
    columnChart.data(parsedData);

    // configure chart appearance settings
    columnChart.title('Sales volume by manager');
    columnChart.xAxis().title('Manager');
    columnChart.yAxis().title('Sales volume, $');

    // set the container element and draw the chart
    columnChart.container('container1').draw();

    // create a pie chart likewise
    const pieChart = anychart.pie(parsedData);
    pieChart.title('Sales volume distribution in the department');
    pieChart.legend().itemsLayout('vertical').position('right');
    pieChart.container('container2').draw();

Then goes the same ending part as with the HTML table — let’s recall it just in case:

  }).catch((err) => {
  	console.log(err.error.message);
  });
};

// load the JavaScript client library
gapi.load('client', start);

下面是产生的仪表板的样子。你可以在JSFiddle上查看这个仪表盘的完整模板代码，该仪表盘使用V4 API从Google Sheets可视化数据。要得到你自己的这样的项目，只需把你自己的信息放在*{GOOGLE_API_KEY}、{SPREADSHEET_ID}、{SHEET_NAME}和{DATA_RANGE}*的位置。(而不要保留大括号）。

Dashboard Screen

后记和链接

我希望这篇文章对那些决定建立一个使用Google表的数据并从JavaScript应用程序中访问它的应用程序的人有帮助。如果你有任何进一步的问题，请随时与我联系，我很乐意尽我所能帮助你。

为了您的方便，这里列出了本文中所有有用的链接，集中在一处。

先决条件

集成实例

avatar
文章
阅读
粉丝