谷歌Sheets API v4集成指南
谷歌web服务已经成为许多项目基础设施的重要组成部分，是一个重要的集成元素。我们无法想象没有它们的在线服务。与此同时，谷歌的开发人员正在努力扩展他们的服务功能，开发新的api，并提高我们数据的安全性。通常情况下，更新会顺利地发布给用户，不需要你自己做任何更改。但这次不是新的谷歌Sheets API。
前言:进步是一种痛苦
2021年，谷歌推出了第4版床单API，这是不兼容的前一个。这影响了数据安全和隐私。Sheets API v3支持延长至2021年8月为开发人员提供更多时间迁移到新的API版本。自从停止对v3 API的支持以来，许多JavaScript开发人员都面临着迁移问题。尽管谷歌提供了详细的迁移指南在美国，就像通常发生的那样，它缺少了几个关键的细节。
作为AnyChart的支持工程师，我已经收到并继续处理来自我们的许多帮助请求JS制图库用户突然遇到了使用谷歌电子表格中的数据进行可视化的问题。这表明，这个问题一直是而且仍然是非常热门的话题。所以我决定为其他人做一个快速的谷歌Sheets API v4集成指南。
本文展示了访问谷歌Sheets上的电子表格文档并从其中加载数据的基本方法，这显然是最常见的用例。
从JavaScript访问谷歌电子表格
要从JavaScript代码访问谷歌Sheets电子表格，您需要google-api-javascript-client而且床单API，以及已配置的谷歌项目和文档本身。
让我一步一步地告诉你。
谷歌侧配置
1)创建一个项目
- 去谷歌云平台：
- 创建一个新项目:
2)启用API
- 进入“启用api和服务”:
- 在搜索栏中输入“谷歌sheets”来查找API:
- 选择“谷歌Sheets API”:
- 启用谷歌Sheets API:
3)凭证
- 进入“凭证”选项卡:
- 点击“创建凭证”，选择“API密钥”:
注意:复制并存储API密钥。稍后您将在JavaScript代码中需要它({GOOGLE_API_KEY}在JS代码)。
c)点击“限制键”:
注意:在存储和传输过程中保持API密钥的安全．谷歌中详细介绍了这方面的最佳实践这篇文章．出于演示目的，下面的所有代码片段都进行了简化，没有描述安全方面的内容。
d)在“限制键”下拉菜单中，找到“谷歌Sheets API”项:
e)选中，点击“确定”并“保存”:
4)创建一个文档
- 创建一个谷歌Sheets文档，用一些数据填充它。为你的数据表设置一个名称或复制默认的一个-它将需要在稍后的JS代码({SHEET_NAME}）.
- 允许通过链接访问文档。你可以点击“分享”按钮，然后选择“任何有链接的人”。(“查看器”权限就足够了。)
- 复制文档的ID。它可以在文档的URL中找到，在“/spreadsheets/d/”和“/edit”部分之间。稍后在JS代码中需要这个ID ({SPREADSHEET_ID}）.
谷歌侧已完成所有必要的设置。让我们转向一个应用程序。
从JavaScript应用程序访问谷歌电子表格数据
现在，我将解释如何创建一个简单的JavaScript应用程序，从电子表格中获取数据并将其显示给用户。为了将应用程序连接到Sheets API，我将使用用于JavaScript的谷歌API客户端库(又名gapi)，它在其GitHub库．
1)创建一个基本的JavaScript应用程序
方法在页面中包含gapi库直接的联系．
添加<表>标记到HTML代码中，并为表及其未来内容应用您喜欢的CSS代码。
在JavaScript代码中，创建一个用于获取数据的函数。
常量开始＝（）= >｛｝；在该函数中，使用前面创建的谷歌API密钥初始化gapi客户机。
gapi．客户端．初始化（｛“apiKey”：“{GOOGLE_API_KEY}”，“discoveryDocs”：［“https://sheets.googleapis.com/发现美元/休息? version = v4 "］，｝）然后通过gapi客户端执行请求以获取值。在请求中，您应该提供电子表格ID和您想要访问的数据所在的单元格范围。
．然后（（）= >｛返回gapi．客户端．表．电子表格．值．得到（｛spreadsheetId：“{SPREADSHEET_ID}”，范围：“{SHEET_NAME} !{DATA_RANGE}’，List 1!A1: B6｝）｝）如果所有设置都正确，已解析的promise将返回一个带有所取数据的响应。现在您可以从响应中获取数据，并使用一个简单的JS脚本填充HTML表。
．然后（（响应）= >｛//解析响应数据常量loadedData＝响应．结果．值；//用数据填充HTML表常量表格＝文档．getElementsByTagName（“表”）［0］；//添加列标题常量columnHeaders＝文档．createElement（“tr”）；columnHeaders．innerHTML＝｀<th>$ {loadedData［0］［0］｝th><th>$ {loadedData［0］［1］｝th>｀；表格．列表末尾（columnHeaders）；//添加表数据行为（让我＝1；我<loadedData．长度；我++）｛常量tableRow＝文档．createElement（“tr”）；tableRow．innerHTML＝｀<道明>$ {loadedData［我］［0］｝道明><道明>$ {loadedData［我］［1］｝道明>｀；表格．列表末尾（tableRow）；｝｝）．抓（（犯错）= >｛控制台．日志（犯错．错误．消息）；｝）；要执行代码，请调用load ()函数，并将上面创建的函数作为参数传递。
gapi．负载（“客户”，开始）；生成的应用程序如下所示。欢迎您查看这个HTML表格的完整代码模板，其中包含来自谷歌Sheets的数据JSFiddle．要让你自己的东西像这样工作，只需更换{GOOGLE_API_KEY}，{SPREADSHEET_ID}，{SHEET_NAME},{DATA_RANGE}用你自己的信息(不要保留大括号)。
2)修补输出-以图表形式显示数据
在实际应用程序中，简单的HTML表通常是不够的;我们想要可视化和分析数据。让我向您展示如何创建一个仪表板，以提高数据的可读性，并使我们更接近真实的用例。当我值班并要求协助谷歌Sheets API集成时，它实际上是我分享的第一个示例，基本上，几乎总是最后一个示例，因为它非常具有说明性，不需要进一步的帮助。
我们用AnyChart JS库用于数据可视化。它包括列图表而且饼图，这对于这个简单的仪表盘来说就足够了。
在做任何其他事情之前，添加AnyChart基本JS模块HTML:
<脚本src＝＂https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js＂>脚本>此外,添加< div >标签为仪表盘容器，并为每个容器应用合适的ID:
<divid＝＂container1＂>div><divid＝＂container2＂>div>大多数JavaScript代码完全保持不变。我将重写处理Sheets API响应的代码。
所以，保持JS代码的第一部分不变:
常量开始＝（）= >｛//初始化JavaScript客户端库gapi．客户端．初始化（｛“apiKey”：“{GOOGLE_API_KEY}”，“discoveryDocs”：［“https://sheets.googleapis.com/发现美元/休息? version = v4 "］，｝）．然后（（）= >｛返回gapi．客户端．表．电子表格．值．得到（｛spreadsheetId：“{SPREADSHEET_ID}”，范围：“{SHEET_NAME} !{DATA_RANGE}’，List 1!A1: B6｝）｝）．然后（（响应）= >｛在响应处理程序，解析数据以组成一个兼容的结构与的AnyChartAPI：常量loadedData＝响应．结果．值；常量parsedData＝｛“头”：loadedData．转变（），“行”：loadedData，｝；现在我们已经有了创建和配置图表所需的一切为仪表板：//创建一个列图实例常量columnChart＝anychart．列（）；//设置数据columnChart．数据（parsedData）；//配置图表外观columnChart．标题（“经理销售额”）；columnChart．xAxis（）．标题（“经理”）；columnChart．桠溪（）．标题（销售额，$）；//设置容器元素并绘制图表columnChart．容器（“container1”）．画（）；//创建饼图常量pieChart＝anychart．派（parsedData）；pieChart．标题（《部门销量分布》）；pieChart．传说（）．itemsLayout（“垂直”）．位置（“对”）；pieChart．容器（“container2”）．画（）；然后同样的结尾部分作为与的超文本标记语言表- - -让让我们回忆一下吧在情况下：｝）．抓（（犯错）= >｛控制台．日志（犯错．错误．消息）；｝）；｝；//加载JavaScript客户端库gapi．负载（“客户”，开始）；下面是生成的仪表板的外观。您可以使用v4 API on查看这个仪表板的完整模板代码，该仪表板可视化了来自谷歌Sheets的数据JSFiddle．要获得这样的项目，只需将您自己的信息放在{GOOGLE_API_KEY}，{SPREADSHEET_ID}，{SHEET_NAME},{DATA_RANGE}(不要保留牙套)。
结语及连结
我希望这篇文章对任何决定构建使用谷歌Sheets数据并从JavaScript应用程序访问它的应用程序的人都有帮助。如果您还有任何问题，请随时与我联系，我很乐意尽我最大的努力帮助您。
为方便起见，这里列出了本文中所有有用的链接:
先决条件
- 谷歌Sheets API:https://developers.google.com/sheets/api
- 谷歌Sheets API迁移指南:https://developers.google.com/sheets/api/guides/migration
- 谷歌API JavaScript客户端:https://github.com/google/google-api-javascript-client/blob/master/docs/start.md
- 获取密钥:https://cloud.google.com/docs/authentication/api-keys#securing_an_api_key
集成的例子
- HTML表格模板在JSFiddle:https://jsfiddle.net/7ngrfpxk/
- JSFiddle上的JavaScript仪表板模板:https://jsfiddle.net/82hn9dmL/
