使用智能条状标签预览 Google 图书中的链接

编码级别：中级
时长：30 分钟（
） 项目类型：Google Workspace 插件

目标

  • 了解该插件的用途。
  • 了解如何使用 并了解 Apps 脚本， 服务。
  • 设置环境。
  • 设置脚本。
  • 运行脚本。

关于此 Google Workspace 插件

在此示例中，您将创建一个 Google Workspace 插件，用于预览 使用 Google 图书 Google 文档。当您在 那么该插件会识别 然后触发链接预览如需预览链接，您可以将 链接至智能条状标签，然后将指针悬停在链接上以查看 会显示有关图书的更多信息。

此插件会使用 Apps 脚本的 UrlFetch 服务 连接到 Google 图书 API 并获取 有关显示在 Google 文档中的 Google 图书的信息。

工作原理

在 Google Workspace 插件的清单中 文件，该脚本会将 用于扩展 Google 文档和触发器链接的插件 与 Google 图书网站中某些格式相匹配的网址的预览 (https://books.google.com).

在代码文件中，脚本会连接到 Google Books API 并使用网址 以获取有关图书的信息（这是 Volume 资源）。通过 脚本利用这些信息生成智能条状标签，以显示图书的 以及预览卡片，卡片上显示了摘要、页数、 图书封面和评分数量

Apps 脚本服务

此插件使用以下服务：

前提条件

如需使用此示例，您需要满足以下前提条件：

  • Google 账号（Google Workspace 账号可能 需要管理员批准）。

  • 可以访问互联网的网络浏览器。

  • 一个 Google Cloud 项目 具有关联的结算账号。请参阅为 项目。

设置环境

以下部分将设置用于构建 插件。

在 Google Cloud 控制台中打开您的 Cloud 项目

如果尚未打开，请打开您要使用的 Cloud 项目 示例：

  1. 在 Google Cloud 控制台中，前往选择项目页面。

    选择一个 Cloud 项目

  2. 选择您要使用的 Google Cloud 项目。或者，点击创建项目，然后按照屏幕上的说明操作。如果您创建的是 Google Cloud 项目，则可能需要为项目启用结算功能。

启用 Google Books API

此插件会连接到 Google Books API。 在使用 Google API 之前，您需要先在 Google Cloud 项目中启用这些 API。 您可以在单个 Google Cloud 项目中启用一个或多个 API。

  • 在您的 Cloud 项目中，启用 Books API。

    <ph type="x-smartling-placeholder"></ph> 启用 API

此插件需要使用符合以下条件的 Cloud 项目： 已配置的同意屏幕配置 OAuth 权限请求页面定义了 Google 会向用户显示并注册您的应用，以便您发布应用 。

  1. 在 Google Cloud 控制台中，点击“菜单”图标 &gt; API 和服务 &gt; OAuth 同意屏幕。

    转到 OAuth 同意屏幕

  2. 对于用户类型，选择内部，然后点击创建。
  3. 填写应用注册表单，然后点击保存并继续。

  4. 现在，您可以跳过添加范围，然后点击保存并继续。 以后，如果您要创建一款应用供用户使用 Google Workspace 组织，您必须将用户类型更改为外部，然后执行以下操作： 添加您的应用所需的授权范围。

  5. 查看您的应用注册摘要。如要进行更改，请点击修改。如果应用 点击 Back to Dashboard（返回信息中心）。

获取 Google Books API 的 API 密钥

  1. 前往 Google Cloud 控制台。 确保您的启用了结算功能的项目已打开。

  2. 在 Google Cloud 控制台中，点击“菜单”图标 &gt; API 和服务 &gt; 凭据。

    转到“凭据”页面

  3. 依次点击创建凭据 &gt; API 密钥。

  4. 记下您的 API 密钥，以便在后续步骤中使用。

设置脚本

以下部分用于设置用于构建 插件。

创建 Apps 脚本项目

  1. 点击以下按钮，打开预览 Google 图书中的链接 Apps 脚本项目。
    打开项目
  2. 点击 概览。
  3. 在概览页面上，点击 用于制作副本的图标 复制。
  4. 在您的 Apps 脚本项目副本中，前往 Code.gs 并将 YOUR_API_KEY 替换为您在 上一节。

复制 Cloud 项目编号

  1. 在 Google Cloud 控制台中，点击“菜单”图标 &gt; IAM 和管理 &gt; 设置。

    前往“IAM”和管理员设置

  2. 复制项目编号字段中的值。

设置 Apps 脚本项目的 Cloud 项目

  1. 在您的 Apps 脚本项目中， 点击“项目设置的图标” 项目设置。
  2. 在 Google Cloud Platform (GCP) 项目下，点击更改项目。
  3. 在 GCP 项目编号中，粘贴 Google Cloud 项目编号。
  4. 点击设置项目。

测试插件

以下几个部分将测试您创建的插件。

安装测试部署

  1. 在您的 Apps 脚本项目中，点击 Editor。
  2. 将 YOUR_API_KEY 替换为 Google Books API 的 API 密钥（在 上一节。
  3. 点击部署 &gt; 测试部署。
  4. 依次点击安装 &gt; 完成。
  1. 在 创建 Google 文档 docs.new.
  2. 将以下网址粘贴到文档中，然后按 Tab 键 将网址转换为智能条状标签： https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
  3. 将指针悬停在智能条状标签上，并在出现提示时授予以下访问权限： 执行该插件。预览卡片会显示 图书信息。

以下图片显示了链接预览：

图书《软件工程》一书的链接预览。

查看代码

为此，请查看 Apps 脚本代码 插件，请点击查看源代码以展开 部分：

查看源代码

appsscript.json

solutions/add-on/book-smartchip/appsscript.json
{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "urlFetchWhitelist": [
    "https://www.googleapis.com/books/v1/volumes/"
  ],
  "addOns": {
    "common": {
      "name": "Preview Books Add-on",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/library-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "bookLinkPreview",
          "patterns": [
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books"
            },
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books/edition"
            }
          ],
          "labelText": "Book",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/book-icon.png",
          "localizedLabelText": {
            "es": "Libros"
          }
        }
      ]
    }
  }
}

Code.gs

solutions/add-on/book-smartchip/Code.js
function getBook(id) {
  const apiKey = 'YOUR_API_KEY'; // Replace with your API key
  const apiEndpoint = `https://www.googleapis.com/books/v1/volumes/${id}?key=${apiKey}&country=US`;
  const response = UrlFetchApp.fetch(apiEndpoint);
  return JSON.parse(response);
}

function bookLinkPreview(event) {
 if (event.docs.matchedUrl.url) {
    const segments = event.docs.matchedUrl.url.split('/');
    const volumeID = segments[segments.length - 1];

    const bookData = getBook(volumeID);
    const bookTitle = bookData.volumeInfo.title;
    const bookDescription = bookData.volumeInfo.description;
    const bookImage = bookData.volumeInfo.imageLinks.small;
    const bookAuthors = bookData.volumeInfo.authors;
    const bookPageCount = bookData.volumeInfo.pageCount;

    const previewHeader = CardService.newCardHeader()
      .setSubtitle('By ' + bookAuthors)
      .setTitle(bookTitle);

    const previewPages = CardService.newDecoratedText()
      .setTopLabel('Page count')
      .setText(bookPageCount);

    const previewDescription = CardService.newDecoratedText()
      .setTopLabel('About this book')
      .setText(bookDescription).setWrapText(true);

    const previewImage = CardService.newImage()
      .setAltText('Image of book cover')
      .setImageUrl(bookImage);

    const buttonBook = CardService.newTextButton()
      .setText('View book')
      .setOpenLink(CardService.newOpenLink()
        .setUrl(event.docs.matchedUrl.url));

    const cardSectionBook = CardService.newCardSection()
      .addWidget(previewImage)
      .addWidget(previewPages)
      .addWidget(CardService.newDivider())
      .addWidget(previewDescription)
      .addWidget(buttonBook);

    return CardService.newCardBuilder()
    .setHeader(previewHeader)
    .addSection(cardSectionBook)
    .build();
  }
}