谷歌搜索引擎的主页是世界上浏览量最大的网页。人们每天进行数十亿次的搜索。

当你登陆该网页时，在搜索框的正上方，你会看到谷歌的标志。在许多情况下，这个标志会有所不同，并伴随着所谓的涂鸦（Doodle）。

这些涂鸦的范围包括对传统标志的小的、简单的和临时的改动。但更多时候，它们是非常有创意和艺术的表达。

它们突出了世界性问题、重大历史事件、世界性节日、当地庆祝活动、纪念日和重要人物的生日（包括先驱者、艺术家和科学家）以及他们对社会的贡献。

当你点击涂鸦动画时，你可以找到关于该特定主题的更多信息，有时伴随着涂鸦还会有一个小游戏或互动。

第一幅谷歌涂鸦

1998 年 8 月 30 日，谷歌联合创始人拉里·佩奇和谢尔盖·布林参加在美国内华达州沙漠举行的年度火人节，创作了第一个涂鸦。

他们在第二个 “O” 后面放了一个类似于火人节标志的棍状图标，作为“下班”的信息，以一种有趣和创造性的方式让用户知道他们不在办公室。

谷歌当时非常年轻——自从这两名斯坦福大学学生建立搜索引擎以来，只有几年的时间。而这时距离它正式成立为一家公司还不到一个星期。

你还可以看到，标志是不同的，在结尾处有一个感叹号。

谷歌涂鸦的发展

从那时起，这种在庆祝著名事件时改变标志的新想法就诞生了，涂鸦也随之发展起来。

将近两年后，佩奇和布林要求当时的实习生丹尼斯·黄创作一个涂鸦，以纪念 2000 年 7 月 14 日的巴士底狱日。这款涂鸦深受欢迎，丹尼斯·黄被任命为首席涂鸦官（Chief Doodler）。

涂鸦开始更经常地出现在主页上。

从那时起，谷歌有一个由天才插画师（被称为涂鸦者）组成的专门团队，负责创作全球各地的谷歌主页上出现的涂鸦。

早期的涂鸦是相当简单的。当你将鼠标悬停在涂鸦上时，会出现一个小的弹出式文字，指出所纪念的内容。

在 2000 年的万圣节，特邀艺术家 Lorie Loeb 创作了第一个动画涂鸦。它的特点是用两个南瓜灯代替 “O”，一只蜘蛛从 “L” 上垂下。

另一个值得注意的与科技有关的怀旧涂鸦是 2019 年 3 月 12 日的涂鸦，谷歌用它纪念万维网诞生 30 周年。

你可以查看主页上出现过的所有谷歌涂鸦的历史档案，让你重温任何涂鸦，并发现你可能还没有看到的新涂鸦。

第一个谷歌涂鸦游戏

涂鸦技术不断改进，2010 年 5 月 21 日，谷歌发布了它的第一个互动游戏——第一个可玩的谷歌涂鸦游戏。

这次发布是为了庆祝 1980 年发布的最受欢迎的经典街机游戏之一《吃豆人》（Pac Man）的 30 周年纪念。

这对谷歌来说是一个巨大的发展，通过带回这样一个有趣和令人上瘾的回归游戏，它一定照亮了许多人的日子。据估计，在游戏发布的前三天，有超过 10 亿人玩过这个游戏。

吃豆人涂鸦游戏唤起了 8 位的怀旧记忆，因为它使用了相同的图形，以及相同的原始颜色、声音和标志性人物。它甚至包含了相同的原始游戏逻辑和错误（！）。

如果你想回味一下，或者第一次接触这个游戏，你可以在这里玩。

只需按下“插入硬币”并使用键盘上的方向键。你是一个黄色的英雄，目的是吃掉所有的点，而不被不同颜色的鬼抓住。

做好可能在这个游戏上花费太多时间的准备吧。

如何玩涂鸦谷歌游戏

此后，又出现了许多有趣的互动游戏和拼图。

涂鸦和游戏通常会停留一天，以纪念一个特定的事件。但谷歌将所有旧的涂鸦和涂鸦游戏存档在专门的页面上，而不是直接将其删除。

正因为如此，你可以玩任何在搜索引擎主页上出现过的游戏。

玩这些游戏很容易，而且不费力气。

它们都是基于 web 的，可以在桌面和手机上玩，不需要下载任何东西或设置控制台。你不需要任何设备——只需要一个浏览器和互联网连接。

点击链接，进入特定游戏的页面，然后点击开始游戏。

在大多数情况下，你会使用你的鼠标或触控板和键盘。如果你用手机玩，你会用滑动或轻敲的方式。

流行的涂鸦谷歌游戏

下面是一些最知名的和最受欢迎的涂鸦游戏的列表，根据不同的类别分组。

涂鸦脑筋急转弯游戏

鲁比克魔方

魔方于 2014 年 5 月 19 日出现在主页上，是最大的和最迷人的智力挑战之一。

颜色是水平移动的，但你可以通过点击魔方上的任何地方来移动它的每一片，让它在所有的侧面上转动。

纵横字谜

2013 年 12 月 21 日，谷歌出了一个向填字游戏致敬的活动，以纪念填字游戏的 100 年。

在最好的和最知名的填字游戏导师之一 Merl Reagle 的帮助下，谷歌创造了他们自己版本的带线索的填字游戏。它还在整个过程中分享了谜题的历史片段。

涂鸦编码游戏

胡萝卜编码

胡萝卜编码通过连接代表编码概念的积木，将儿童（或你！）引入编程的世界。引导一只兔子穿越 6 个关卡，到达它最喜欢的食物——胡萝卜——并收集它。

该游戏于 2017 年 12 月 4 日在计算机科学教育周期间与麻省理工学院合作发布，以庆祝儿童编码和儿童编码语言的 50 周年。它是基于 Scratch 编程语言。

体育爱好者的涂鸦游戏
板球

板球是为了庆祝 2017 年 ICC 冠军杯而推出的，你在一个动画里玩板球。

当你看到球过来了，想要击球得分，只需点击球棒就可以挥动它。这是对这项运动的巧妙再创造。

棒球

棒球是为了纪念 2019 年 7 月 4 日美国独立日而推出的。球员是经典的美国小吃，如热狗、薯条和番茄酱。

点击挥动球棒，如果你像我一样，准备好听到“你出局了”的次数（否则你会看到大量的烟花）。

篮球

篮球于 2012 年问世，以这款互动式篮球游戏向 2012 年夏季奥运会致敬。你尝试在 24 秒内尽可能多地上篮。

除了这个游戏，在此期间，谷歌还发布了其他三个独立的互动体育游戏，如足球。在这款游戏中，你是一名守门员，用空格键阻止来球入网，用方向键改变你的位置。

2020 东京奥运会

为了庆祝 2020 年东京奥运会，谷歌发布了其迄今为止最雄心勃勃、最精心设计、最复杂的游戏——一个名为涂鸦冠军岛游戏的完整动漫体育游戏。

这是对复古的 16 位日本视频游戏的致敬，有 7 个迷你奥运游戏的体育赛事主题可供选择（包括乒乓球、滑板和艺术游泳等等）。这是谷歌发布的最大的游戏。

你扮演的是一只名叫 Lucky 的 Calico 忍者战士猫，它来到了正在举行节日的岛上。你可以从 4 个团队中选择一个——蓝队、红队、黄队或绿队——由 Ushi、Karasu、Inari 或 Kappa 代表。

在游戏中，使用方向键和空格键，通过庆祝日本的历史、文化和体育来表达敬意。它是与日本动画工作室 Studio 4°C 合作制作的。

音乐爱好者的涂鸦游戏

纪念奥斯卡·菲辛格

菲辛格于 2017 年 6 月 17 日创建，以庆祝奥斯卡·菲辛格的 117 岁生日。

为了纪念这位电影制片人和视觉艺术家，谷歌发布了一个带有视觉音乐创作工具的互动设计，让用户点击并通过你可以改变的各种设置来创造自己的视觉音乐作品。

纪念嘻哈音乐的诞生

Hip Hop 是为了纪念嘻哈音乐诞生 44 周年，于 2017 年 8 月 11 日发行的。

通过交叉推杆，你可以将传奇的节拍混合在一起，改变音量和播放速度的强度，并挑选曲目。经典的 DJ 互动转盘将让你切割和拖动曲目，重温嘻哈历史。

这款涂鸦由艺术家 Cey Adams 制作，并由嘻哈偶像 Fab Five Freddy 讲述。它向 Kool Herc 和 Coke La Rock 这两位嘻哈创始人致敬。

Rockmore

Rockmore 模拟了 Theremin 的体验。这是一种电子乐器，没有身体接触——只能通过手势控制。

该游戏在 2016 年 3 月 9 日庆祝 Clara Rockmore 105 岁生日，他是该乐器的发明者和最知名的演奏者。

它将让你创造音乐并尝试不同的设置和复制不同的音符。在屏幕上的音符上移动你的光标或鼠标，使用虚拟特雷门琴创作音乐。

创意者的涂鸦游戏

快速绘画

Quick draw! 是一个有自己网站的游戏。你会在屏幕上得到关于画什么的指示，并有 20 秒的时间来完成。然后谷歌的神经网络进行猜测，并告诉你你的画像什么。

这个游戏是用机器学习构建的，是最受欢迎的涂鸦游戏之一。

科幻小说爱好者的涂鸦游戏

Doctor Who

2013 年 11 月 23 日发布的 Doctor Who 涂鸦游戏，是为了纪念英国经典和流行的电视节目《神秘博士》50 周年而制作。

这是一个简单但令人印象深刻的冒险解谜游戏，以当时所有的 13 位博士为主角。

游戏的目标是找回谷歌标志中所有的 6 个字母，这些字母是 Daleks 从博士们那里偷来的，要通过游戏的 6 个关卡。

涂鸦食物游戏

Scoville 于 2016 年 1 月 22 日发布，以庆祝 Wilbur Scoville 的 151 岁生日。

斯科维尔量表是一个衡量辣椒辣度的系统。在这个游戏中，你是一个冰激凌，通过向辣椒投掷勺子来对抗辛辣的辣椒。辣椒逐渐变得更辣。

喜欢万圣节的人的涂鸦游戏

魔法猫学院

The Magic Cat Academy 在 2016 年庆祝万圣节，讲述了一只名叫 Momo 的猫想要恢复她所在的魔法猫学院的和平，这样她就可以拯救学校。

这款游戏的缪斯是一只黑猫，它属于制作这款游戏的涂鸦者 Juliana Chen。

Momo 要在她的学校里经历 5 个关卡——图书馆、食堂、教室、体育馆和大楼屋顶。一路上，她要用魔杖在出现的鬼魂头顶上描画符号！这样，Momo 就可以施展魔法，不会被潜伏的鬼魂夺走她的魔法书。

用你的键盘在鬼魂的头顶上滑动，把它们变成稀薄的空气。

喜欢纸牌游戏的人的涂鸦游戏

Loteria

Loteria 是一种传统的墨西哥纸牌游戏。你可以与你的朋友或来自全球各地的随机人员开始比赛。

它于 2019 年 12 月 9 日发布，以虚拟版本的方式庆祝这一传统游戏。如果你以前没有玩过 Lotería，在你第一轮试玩之前可以看一个教程。

总结

我希望你喜欢这篇关于谷歌最受欢迎的涂鸦游戏的文章。

你可以在专门的存档网页上查看更多，看你对什么感兴趣。

谢谢你阅读本文！

版权所有：所有图片属于谷歌公司

你几乎可以在互联网上搜索到任何内容，而Google是大多数人选择搜索信息的主要途径之一。

尽管频繁地使用Google，但是大部分互联网用户都不知道如何快速和高效地使用Google搜索。

可以说使用Google是一门艺术。

想要获得正确的答案，你需要提出正确的问题。想要快速地获得正确的答案，你必须知道 如何 提正确的问题。

每一个人都应该学学这个实操（how） 部分，这也是一篇教程教学目的所在。 以下是一些提示和技巧，帮助你快速、高效地寻找到问题的正确答案。

如何高效地使用Google搜索

1. 使用引号来获得“完全一致”的匹配搜获

当我们按照惯常的习惯在Google上搜索的时候，实际上我们使用的是浅搜索。 这样得到的搜索结果可能会包括你的搜索查询里没有的词。

但如果你将自己的查询请求或者问题（词汇或者短语）用引号打包，像这样 —— "你的问题"，Google就会进入深度搜索模式。这样的搜索结果会包含所有在引号内你的搜索问题里的词汇。

当你需要在搜索结果中呈现出某个特定的词汇或者短语的时候，这个方法就十分有用。

2. 使用 site: 在特定网站搜索

如果你希望Google返回的搜索结果是来自某个特定的网站，仅需要在你的搜索问题前添加site: 。

当你想要在某个没有内置搜索选项的网站，或者内置搜索不太好用的网站进行搜索的时候，这个方法可以派上用场。

假设，你的搜索问题是 site:freecodecamp.org react， 返回的搜索结果仅会是来自www.freecodecamp.org 关于React的话题。

3. 使用-在搜索结果中排除某个词汇

如果你不希望自己的搜索结果中出现某个词汇或者短语，可以在那个单词前添加 - 。

假设你的搜索内容是 => how to write components in React -class（如何编写React组件 -class），返回的搜索结果会不包含“class”。所以， (如果你了解一点React)，你会发现搜索结果只包含函数式组件。

4. 使用imagesize:搜索特定大小的图片

如果你想搜索特定大小的图片，可以在你的搜索查询中使用imagesize:标签，并且标注好以pixels（像素） 为单位的宽和高。

尺寸仅以 pixels 为单位 – 例如：imagesize:500x500的搜索结果是尺寸为 500px x 500px的图片。 所以如果搜索查询是 => "cute dog images imagesize:500x600"（可爱小狗图片 imagesize：500*600）的搜索结果是尺寸为500px x 600px的可爱小狗的图片。

5. 使用filetype:搜索特定文件类型

如果你希望搜索的结果包含了某个特定的文件类型，如：PDF或者PPT，就可以添加filetype:<扩展名>（不需要尖括号）。 如，react tutorial filetype:pdf（react教学 filetype：pdf）的搜索结果是PDF格式的，如图：

6. 在搜索中使用通配符*

如果你不确定搜索查询/问题或者忘记了其中的词汇，你可以在搜索中使用通配符*，Google会用相关的词汇来替换通配符。

例如，如果你搜索 => the * of money（钱的 *），会产生如下结果。 Google会返回一系列搜索页面，包括 "the exchange of money"（金钱交易）、 "the use of money"（金钱的用途）、 "the role of money"（金钱的角色）、 "the psychology of money"（金钱心理学）等。

7. 使用 OR（或）、 AND（且）逻辑合并搜索

如果你希望搜索结果包含两个词汇，可以在其中使用AND 关键字。例如，你搜索=> React AND Angular， Google会返回即包含React，又包含Angular的结果。

同样的，如果你希望搜索结果包含两个词汇中的任意一个， 可以在其中使用 OR 关键字。 例如，你搜索 => React OR Angular，Google会返回包含React或者Angular的结果，甚至包含两者的结果。

8. 在两个数字间使用 AFTER:（在……之后）、 BEFORE:（在……之前） 或 .. 来筛选结果

如果你希望Google的搜索结果是发布在特定年份之后的，你可以使用AFTER:标签。例如，你搜索 => React tutorials AFTER:2020（React教程 AFTER：2020）会返回迟于2020年发布的结果。

同样的，如果添加BEFORE: 标签，会返回早于某个特定年份的结果。

你也可以搜索发布在某个年份范围内的结果，或者介于两个数字之间的任意事物。仅在两个数字之间添加 ..即可，如果有计算单位，也可以添加计算单位。

9. 使用 related:查询相关网站

如果你想知道和某个特定网站相关的其他网站，可以使用related:标签。

例如，你搜索 related:google.com 就会得到所有和Google类似的网站，如：Bing、Yahoo、DuckDuckGo等。

10. 使用cache:查看Google对某个网站的缓存版本

Google提供网站的缓存版本以提高搜索速度。想要知道Google是否缓存了某个网站，可以在网站URL前面添加cache:。

这一招对于web开发来说非常管用，可以检查现在浏览的到底是Google缓存的网站，还是提交了一些修改之后的最近版本的网站。 例如，在写这篇教程的时候（2022年8月4日）搜索 => cache:www.sohamderoy.dev ，得到的结果如下：

你可以看到，即便我是在2022年8月4日搜索这个网站，我得到的搜索结果是Google缓存的2022年8月3日的版本。

正如Google自己描述的一样，我们必须知道“不是所有的搜索运算都会穷举所有结果。”

但我仍相信以上的方法可以帮助你提高使用Google搜索的效率。我希望我的解释足够清晰，并且在日后你能够将这些方法运用在日常的Google搜索中。

总结

感谢阅读！希望你喜欢这篇关于提高Google搜索效率的简短教程。

希望你可以转发给自己的朋友——我将非常感谢。你可以在LinkedIn和Twitter上关注我的最新精彩内容！

社交媒体链接

• LinkedIn
• Website
• 我的其他博文
• Twitter

还记得 Adob​​e Flash 播放器吗？正是这款漂亮的软件可以让网站嵌入视频和网络游戏。整个网站甚至可以由 Flash 驱动。

尽管 Flash 的使用率大幅下降，并且 Adob​​e 将于 2020 年停用该软件，但某些网站今天仍在使用它。如果你遇到其中一个网站，你可能会想看看该内容是什么。

在本教程中，我们将了解在 Chrome 中启用 Flash 播放器所需遵循的步骤。

如何在 Chrome 中启用 Flash 播放器

由于 Google Chrome 会自动禁用 Flash 播放器，因此如果你希望它工作，则需要启用它。

访问内容设置

由于 Chrome 有自己的内置 Flash 版本，因此你无需安装插件或任何东西。

进入 Chrome 设置的最简单方法是访问 chrome://settings/content。一旦你在那里，向下滚动，直到你看到 Flash 播放器的选项：

允许 Flash 运行

单击 “Flash”，然后在显示 “Block sites from running Flash (recommended) 阻止站点运行 Flash（推荐）”的位置打开开关，你会看到 “Ask first”：

现在，当你访问使用 Flash 的站点时，它会询问你是否要允许 Flash 执行其操作。仔细检查总是好的。

恭喜 - 你已经成功了一半。

如何授予特定站点运行 Flash 的权限

现在你已授予 Chrome 请求你允许使用 Flash 运行网站的权限（哇），你需要告诉它允许哪些网站。

转到你最喜欢的使用 Flash 的站点

让我们拥抱一个小孩子般的奇迹和魔法，好吗？迪士尼的魔法王国网站使用 Flash，我们希望看到所有闪闪发光的魔法善意。

导航到该站点后，在地址栏中查找小灰色锁：

更新其 Flash 设置

单击它，然后选择底部的 “Site settings 站点设置”：

这将带你进入一个包含多个选项的菜单，你会看到 Flash。在右侧，你会看到一个下拉菜单，上面写着 “Block 阻止”。

要允许 Flash，你必须单击该下拉菜单并选择 “Allow 允许”：

现在，如果你再次在 Chrome 中检查你的 Flash 设置，你将在 “allowed 允许”列表中看到该站点：

返回站点并重新加载页面，所有的 Flash 内容都会运行。

注意：如果你使用的是不认识的网站，Flash 容易出现安全漏洞，因此启用它时要小心。

最后一点：如果你关闭浏览器，下次要启用 Flash 时，你将不得不再次执行此过程。 Chrome 正在积极劝告用户不要启用 Flash，因此他们尽可能地让 Flash 变得烦人。

Google 表单提供了一种创建在线表单和收集用户数据的简单方法。在本教程中，我们将使用 Google Sheets 和 Next.js 来构建一个简单的表单。

我们将使用 Next.js 作为前端，使用 Google Sheets 作为后端，来发送我们通过表单接收到的数据。这样我们就可以学习如何使用 Next.js 和 Google Sheets 来构建一个简单的表单。

这是我们将在本教程中介绍的内容：
1. 如何在 Google Cloud Console 中创建新项目
2. 如何将新项目与 Google Sheet 连接
3. 如何在 Next.js 应用程序中创建前端表单
4. 如何将表单连接到 Google Sheet

为了帮助你理解，我创建了一个 GitHub 仓库，如果你有不清楚的地方，可以参考。

如何在 Google Cloud Console 中创建新项目

要访问 Google Sheets API，我们首先需要在 Google Cloud Console 上创建一个新项目。访问这个站点，转到控制台并创建一个新项目。

创建新项目后，转到 APIs and Services，然后单击 Enable APIs and Services。

从库中搜索 Google Sheets 并启用它。

现在，转到 APIs and Services，点击 Credentials，然后点击 New Credential，创建一个新的 Service 账号。

给它一个合适的名字并填写所有细节。生成服务帐户后，将电子邮件 ID 复制到某处。之后我们需要将其添加到我们的 Google 表单中。我们刚刚创建了一个 Bot 帐户来处理将从前端发送的各种请求。

接下来，单击 Credentials 中的 Service account，然后将它们移至 Keys。单击 Add Key，确保将其设置为 JSON 格式。

创建新密钥时将下载一个文件，它包含我们将前端应用程序连接到 Google 表单时所需的所有环境变量。

如何将新项目连接到 Google Sheet

现在让我们将 Google Cloud Console 上新创建的项目与 Google Sheet 连接起来。访问 Google Sheets 并创建一个新的电子表单。

在我们继续之前，请随意放入一些原始数据，以便我们在下一节中调用请求时可以获取一些内容。

完成后，单击 Share 并添加我们刚刚创建的服务帐户电子邮件。确保你授予它编辑器访问权限 Editor access 并取消 Notify people（选中通知人员）。

现在是有趣的部分。让我们转到代码编辑器并为我们的表单创建前端。

如何创建前端表单

为了构建前端，我们将使用 Next.js，并使用 API-routes 功能将 POST 请求发送到我们的 Google Sheet。

使用以下命令安装 Next：

npx create-next-app

为了构建表单，并加快开发过程，我们将使用一些第三方包。所以继续安装以下内容：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 react-hook-form

• Chakra-UI：一个可访问的框架，它帮助我加快了大多数应用程序的前端设计。
• React-Hook-Form：帮助你即时构建具有客户端验证的高效表单。

在本教程中，我将更多地关注执行表单的功能，而不是构建客户端验证。这里是使用 React-Hook-Form 添加客户端验证的完整指南。当然也可以随意访问 Chakra-UI 文档。

安装所有软件包后，使用任何代码编辑器打开它。在 Next.js 中，你在 /pages 文件夹中创建的每个文件都是一个单独的路由。你可以创建一个新文件，但在这里我将使用根文件本身，即 /pages/index.js。

清除所有预先生成的代码行。现在，让我们为 Form 创建一个基本结构。

import { VStack, Text, Input } from "@chakra-ui/react"

function Home () {
    function submitHandler () {
     // POST request
    }
    
    return (
        <VStack>
          <Text fontSize="2xl" fontWeight="bold">
            Your response matters!
          </Text>
          
          <form onSubmit={submitHandler}>
              <Input placeholder="Enter Name" />
              <Button>Submit!</Button>
          </form>
        </VStack>
    )
}

VStack 包含下方所有元素。这是 flex-direction: column 的简写。其余的代码应该是不言自明的。

Chakra-UI 的美妙之处在于它的每个组件都非常类似于 HTML 元素，大大减少了学习曲线。

你可以添加更多你选择的输入字段。这是最终结果：

现在让我们处理用户提交时的表单响应。为此，我们将使用 react-hook-form。

为了从表单中获取响应，我们必须导入 useForm 钩子，如下所示：

import { useForm } from 'react-hook-form';

从钩子中，解构以下内容：

const {
    register,
    handleSubmit
  } = useForm();

用 handleSubmit 包裹我们之前创建的 submitHandler：

<form onSubmit={handleSubmit(submitHandler)}>
   {/* Input fields here */}               
</form>

现在将 register 添加到所有输入字段，如下所示：

<Input placeholder="Enter your message" {...register('name') />

现在，当点击按钮时，我们应该能够看到输入的数据。只需将数据记录到控制台，如下所示：

function submitHandler (data) {
	console.log(data);
}

完成后，让我们现在为要从表单发送的 POST 请求创建一个新的 API 路由。

如何将表单连接到 Google Sheet

在 ./pages/api/ 路由中创建一个新文件。你在此路由中创建的每个文件都是一个 api-route，它提供对所有 Node.js 功能的访问。

继续在路由中创建一个新文件，比如 ./pages/api/sheet.js。构建一个基本的 GET 请求，看看是否一切正常：

function handler (req, res) {
	res.json({message: "It works!"});
}

export default handler;

要检查 API 请求此时是否有效，请转到 http://localhost:3000/api/sheet。

完成后，让我们首先使用本机 Fetch 方法设置要从前端发送的 POST 请求。

async function submitHandler (data) {
	const response = await fetch("/api/sheet", {
    		method: "POST",
        	body: JSON.stringify(data),
        	headers: {
        		'Content-Type': 'application/json',
      		},
    	})
}

在做任何其他事情之前，我们必须下载另一个包：

npm install googleapis

在 API-route（/pages/api/sheet）上，解构我们从前端得到的数据。

import {google} from "googleapis"

async function handler (req, res) {
    if (req.method === "POST"){
    		const {name, message} = req.body;
		res.json({message: "It works!"});
    }
}

export default handler;

注意：默认情况下，API 路由将侦听 GET 请求，所以我们必须明确地检查该方法是否是一个 POST 请求。

在继续之前，还有最后一件事要设置，那就是环境变量。在我们创建新密钥时，打开包含所有 credential 的 JSON 文件。

在根目录中创建一个新文件 .env.local，继续，并输入以下变量。

CLIENT_EMAIL=yourclientemail
CLIENT_ID=yourclientid
PRIVATE_KEY=yourprivatekey
SPREADSHEET_ID=yourspreadsheetid

完成后，我们几乎完成了设置 API 路由来处理我们将发送到 Google Sheet 的请求。首先，让我们创建一个身份验证令牌：

const auth = new google.auth.GoogleAuth({
    credentials: {
      client_email: process.env.CLIENT_EMAIL,
      client_id: process.env.CLIENT_ID,
      private_key: process.env.PRIVATE_KEY.replace(/\\n/g, '\n'),
    },
    scopes: [
      'https://www.googleapis.com/auth/drive',
      'https://www.googleapis.com/auth/drive.file',
      'https://www.googleapis.com/auth/spreadsheets',
    ],
  });

要访问 Google Sheet，我们的应用程序首先需要提供一些范围——通常是读写访问权限。

你可以在官方 Google 表单文档中找到有关范围的更多信息。

你可能想知道我在第三个环境变量中使用的 replace 方法。这是由于我之前遇到的一个典型错误。浏览 Stack Overflow 后，我终于找到了解决方案。看起来 PRIVATE_KEY 需要通过删除原始密钥中的斜杠来正确解析。这可以使用替换方法轻松解决。

你可以在我创建的这个拉取请求中找到这个错误。

接下来，传入身份验证令牌并指定 API 的版本。最新的是 v4。

const sheets = google.sheets({
    auth,
    version: 'v4',
  });

然后我们调用 spreadsheets.value.append 方法将用户条目附加到电子表单的单元格中。

const response = await sheets.spreadsheets.values.append({
      spreadsheetId: process.env.DATABASE_ID,
      range: 'Sheet1!A2:C',
      valueInputOption: 'USER_ENTERED',
      requestBody: {
        values: [[name, message]],
      },
    });

你可以从 URL 本身找到电子表单 ID：

https://docs.google.com/spreadsheets/d/{spreadsheetID}/edit#gid=0

范围决定了应用程序必须读取或写入的行和列。如果你对如何查找范围感到困惑，你可以通过用户界面使用 Google 表单本身来确定它。

第三个属性 valueInputOption 确定如何将用户输入的值解析到电子表单中。

例如，如果用户输入了一个数字，那么电子表单也会将其作为数字读取。

第四个属性携带要附加到特定单元格中的数据。要附加多个值，你可以将它们全部放在一个数组中，例如在这个示例下——名称和消息。

要结束 API 路由，最后将响应发送回前端：

res.status(201).json({response, result: "Feedback posted to spreadsheet!"})

如果一切顺利，你应该能够发出 POST 请求，并成功地将新的单元格值添加到电子表单中。

总结

恭喜！你已准备好开始收集反馈。你可以在你的网站上创建自己的反馈表，或者你可以与现有服务（如 Typeform）集成。

但是如果你希望将反馈表保留在你的网站上，在你的页面上，这就是与 Google Sheets API 集成的用武之地。

Google Sheets API 非常基础——它可以读取和写入电子表格。此外，它是完全免费的，尽管你在特定时间范围内可以发出的 API 请求有限制。

因此，Google Sheets API 非常适合小型应用程序和受众较少的平台。如果你有任何问题，请在 Twitter 上联系我。

如果知道如何正确使用 Google，它就是世界上最强大的工具。让我们来看一下如何在谷歌搜索上做得更好。

1. 使用引号进行精确匹配搜索

可以使用引号来强制进行完全匹配搜索。如果确切知道要查找的搜索短语，这将非常有用。如果这样做，会只返回精确的结果。

"what is javascript"

2. 使用 AND 操作符

AND 操作符将仅返回与这两个术语都相关的结果。在下面的示例中，可以看到此操作符的用例。

html AND css

3. 使用 OR 操作符

可以使用 OR 操作符来获取与输入的搜索词任意一个相关的结果。

(javascript OR python) free course

4. 使用 -（减号）操作符

- 运算符将排除相关术语或短语的结果。在下面的例子中，想要获得与 JavaScript 相关的结果，但排除任何包含的 CSS 结果。

javascript -css

5. 使用 (*) 通配符作为占位符

可以使用 (*) 通配符作为占位符，它将被任何单词或短语替换。

这个是我的最爱。当我大概知道整个搜索短语并用星号替换我不知道的部分时，我会使用它。 超级好用。

"how to start * in 6 months"

6. 如何在指定网站内搜索

这也是我经常使用的方式。如果我只想在指定网站上搜索某些内容，我会这样做。

site:freecodecamp.org

7. 如何查找特定文件类型

还可以使用这个非常有用的功能来帮助找到特定的文件类型。如果正在寻找诸如 PDF 之类的材料，它会很方便。如果以前没有使用过它，那么从现在开始使用它吧。

filetype:pdf learn css

8. 如何搜索一个范围内的数字

这可以是任何东西。如果想购买特定价格区间的商品，或者正在搜索包含特定年份范围的结果，那么这很好用。

ecmascript 2016..2018

9. 使用 before 操作符

使用 before 操作符可以只返回给定日期之前的结果。

必须提供年-月-日格式的日期或仅提供年，例如：

javascript before:2020

10. 使用 after 操作符

使用 after 操作符仅返回给定日期之后的结果。必须提供年-月-日格式日期或仅提供年。如果想排除过时的结果，则非常有用。

web development after:2020

如你所见，如果知道如何正确使用它，Google 可以成为一个强大的工具。

如果有任何问题，可以在 Twitter 上与我联系。

也可以在我的 博客 上找到大量实际工作中用到的技巧和资源。