Предварительный просмотр ссылок из Google Книг с помощью смарт-чипов

Уровень кодирования : Средний
Продолжительность : 30 минут
Тип проекта : Надстройка Google Workspace.

Цели

  • Узнайте, что делает дополнение.
  • Узнайте, как создать надстройку с помощью Apps Script, и поймите, что делают службы Apps Script.
  • Настройте свою среду.
  • Настройте сценарий.
  • Запустите сценарий.

Об этом дополнении Google Workspace

В этом примере вы создаете надстройку Google Workspace, которая просматривает ссылки из Google Книг в документе Google Docs. Когда вы вводите или вставляете URL-адрес Google Книг в документ, надстройка распознает ссылку и запускает предварительный просмотр ссылки. Чтобы просмотреть ссылку, вы можете преобразовать ее в смарт-чип и навести курсор на ссылку, чтобы просмотреть карточку, на которой отображается дополнительная информация о книге.

Это дополнение использует службу UrlFetch Apps Script для подключения к API Google Книг и получения информации о Google Книгах для отображения в Документах Google.

Как это работает

В файле манифеста надстройки Google Workspace сценарий настраивает надстройку для расширения возможностей Документов Google и запуска предварительного просмотра ссылок для URL-адресов, соответствующих определенным шаблонам с веб-сайта Google Книги ( https://books.google.com ).

В файле кода скрипт подключается к API Google Книг и использует URL-адрес для получения информации о книге (которая является экземпляром ресурса Volume ). Сценарий использует эту информацию для создания интеллектуального чипа, отображающего название книги, и карты предварительного просмотра, на которой отображается краткое содержание, количество страниц, изображение обложки книги и количество оценок.

Службы сценариев приложений

Это дополнение использует следующие сервисы:

  • Служба UrlFetch – подключается к API Google Книг для получения информации о книгах (которые являются экземплярами ресурса Volume API).
  • Сервис карт – Создает пользовательский интерфейс дополнения.

Предварительные условия

Для использования этого образца необходимы следующие предварительные условия:

  • Учетная запись Google (для учетных записей Google Workspace может потребоваться одобрение администратора).

  • Веб-браузер с доступом в Интернет.

  • Проект Google Cloud со связанным платежным аккаунтом. См. раздел Включение выставления счетов для проекта .

Настройте свою среду

Откройте свой облачный проект в консоли Google Cloud.

Если он еще не открыт, откройте проект Cloud, который вы собираетесь использовать для этого примера:

  1. В консоли Google Cloud перейдите на страницу «Выбор проекта» .

    Выберите облачный проект

  2. Выберите проект Google Cloud, который вы хотите использовать. Или нажмите «Создать проект» и следуйте инструкциям на экране. Если вы создаете проект Google Cloud, вам может потребоваться включить для него оплату .

Включите API Google Книг.

Это дополнение подключается к API Google Книг. Прежде чем использовать API Google, вам необходимо включить их в проекте Google Cloud. Вы можете включить один или несколько API в одном проекте Google Cloud.

Для этого дополнения требуется облачный проект с настроенным экраном согласия. Настройка экрана согласия OAuth определяет, что Google отображает пользователям, и регистрирует ваше приложение, чтобы вы могли опубликовать его позже.

  1. В консоли Google Cloud выберите > API и службы > Экран согласия OAuth .

    Перейдите на экран согласия OAuth.

  2. В качестве типа пользователя выберите «Внутренний» , затем нажмите «Создать» .
  3. Заполните форму регистрации приложения, затем нажмите «Сохранить и продолжить» .

  4. На данный момент вы можете пропустить добавление областей и нажать «Сохранить и продолжить» . В будущем, когда вы создадите приложение для использования за пределами вашей организации Google Workspace, вам необходимо изменить тип пользователя на Внешний , а затем добавить области авторизации, необходимые вашему приложению.

  5. Просмотрите сводку регистрации приложения. Чтобы внести изменения, нажмите «Изменить» . Если регистрация приложения выглядит нормально, нажмите «Вернуться на панель управления» .

Получите ключ API для API Google Книг.

  1. Перейдите в консоль Google Cloud . Убедитесь, что ваш проект с включенной оплатой открыт.

  2. В консоли Google Cloud выберите > API и службы > Учетные данные .

    Перейти к учетным данным

  3. Нажмите Создать учетные данные > Ключ API .

  4. Запишите свой ключ API, чтобы использовать его на следующем этапе.

Настройте сценарий

Создайте проект скрипта приложений.

  1. Нажмите следующую кнопку, чтобы открыть ссылки для предварительного просмотра из проекта сценария Google Книги .
    Открыть проект
  2. Нажмите Обзор .
  3. На странице обзора нажмите Значок для создания копии Сделать копию .
  4. В своей копии проекта Apps Script перейдите в файл Code.gs и замените YOUR_API_KEY ключом API, который вы создали в предыдущем разделе.

Скопируйте номер облачного проекта

  1. В консоли Google Cloud выберите > IAM и администрирование > Настройки .

    Перейдите в IAM и настройки администратора.

  2. В поле Номер проекта скопируйте значение.

Установите облачный проект проекта Apps Script.

  1. В проекте Apps Script нажмите Значок настроек проекта Настройки проекта .
  2. В разделе «Проект Google Cloud Platform (GCP)» нажмите «Изменить проект» .
  3. В поле «Номер проекта GCP» вставьте номер проекта Google Cloud.
  4. Нажмите Установить проект .

Протестируйте дополнение

Установите тестовое развертывание

  1. В проекте Apps Script нажмите «Редактор » .
  2. Откройте файл Code.gs и нажмите «Выполнить» . При появлении запроса авторизуйте сценарий.
  3. Щелкните Развертывание > Тестовые развертывания .
  4. Нажмите «Установить» > «Готово» .
  1. Создайте документ Google Docs по адресу docs.new .
  2. Вставьте следующий URL-адрес в документ и нажмите клавишу табуляции , чтобы преобразовать URL-адрес в смарт-чип: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
  3. Удерживайте указатель над смарт-чипом и при появлении запроса разрешите доступ для выполнения надстройки. Карточка предварительного просмотра отображает информацию о книге.

На следующем изображении показан предварительный просмотр ссылки:

Ссылка на книгу «Разработка программного обеспечения в Google».

Просмотрите код

Чтобы просмотреть код скрипта приложений для этого дополнения, нажмите «Просмотреть исходный код» ниже:

Посмотреть исходный код

appsscript.json

решения/дополнение/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"
          }
        }
      ]
    }
  }
}

Код.gs

решения/надстройка/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();
  }
}

Следующие шаги