Visualizar links do Google Livros com ícones inteligentes

Nível de programação: intermediário
Duração: 30 minutos
Tipo de projeto: complemento do Google Workspace

Objetivos

  • Entenda o que o complemento faz.
  • Entenda como criar um complemento usando o Apps Script e o que os serviços do Apps Script fazem.
  • Prepare o ambiente.
  • Configure o script.
  • Execute o script.

Sobre este complemento do Google Workspace

Neste exemplo, você vai criar um complemento do Google Workspace que mostra uma prévia de links do Google Livros em um documento do Google Docs. Quando você digita ou cola um URL do Google Livros em um documento, o complemento reconhece o link e aciona uma prévia. Para visualizar o link, converta-o em um ícone inteligente e mantenha o ponteiro sobre ele para ver um card com mais informações sobre o livro.

Esse complemento usa o serviço UrlFetch do Apps Script para se conectar à API Google Books e receber informações sobre o Google Books para mostrar no Google Docs.

Como funciona

No arquivo de manifesto do complemento do Google Workspace, o script configura o complemento para estender o Google Docs e acionar prévias de links para URLs que correspondem a determinados padrões do site do Google Livros (https://books.google.com).

No arquivo de código, o script se conecta à API Google Books e usa o URL para receber informações sobre o livro (que é uma instância do Volume recurso). O script usa essas informações para gerar um smart chip que mostra o título do livro e um card de prévia com um resumo, o número de páginas, uma imagem da capa do livro e o número de avaliações.

Serviços do Apps Script

Esse complemento usa os seguintes serviços:

Pré-requisitos

Para usar esta amostra, você precisa atender aos seguintes pré-requisitos:

  • Uma Conta do Google (as contas do Google Workspace podem exigir a aprovação do administrador).

  • Um navegador da Web com acesso à Internet.

  • um projeto do Google Cloud;

Configurar o ambiente

As seções a seguir configuram seu ambiente para criar o complemento.

Abra seu projeto do Cloud no console do Google Cloud.

Se ele ainda não estiver aberto, abra o projeto do Google Cloud que você pretende usar para esta amostra:

  1. No console do Google Cloud, acesse a página Selecionar um projeto.

    Selecione um projeto do Cloud

  2. Selecione o projeto do Google Cloud que você quer usar. Ou clique em Criar projeto e siga as instruções na tela. Se você criar um projeto do Google Cloud, talvez seja necessário ativar o faturamento dele.

Ativar a API Google Books

Esse complemento se conecta à API Google Books. Antes de usar as APIs do Google, é necessário ativá-las em um projeto do Google Cloud. É possível ativar uma ou mais APIs em um único projeto do Google Cloud.

Esse complemento exige um projeto do Google Cloud com uma tela de consentimento configurada. Ao configurar a tela de permissão OAuth, você define o que o Google mostra aos usuários e registra o app para que ele possa ser publicado mais tarde.

  1. No console do Google Cloud, acesse Menu > Google Auth platform > Branding.

    Acessar a página "Branding"

  2. Se você já tiver configurado o Google Auth platform, poderá definir as seguintes configurações da tela de permissão do OAuth em Branding, Público-alvo e Acesso a dados. Se você receber uma mensagem informando que Google Auth platform ainda não foi configurado, clique em Começar:
    1. Em Informações do app, no campo Nome do app, insira um nome para o app.
    2. Em E-mail para suporte do usuário, escolha um endereço de e-mail para que os usuários possam entrar em contato com você se tiverem dúvidas sobre o consentimento deles.
    3. Clique em Próxima.
    4. Em Público-alvo, selecione Interno.
    5. Clique em Próxima.
    6. Em Informações de contato, insira um Endereço de e-mail para receber notificações sobre mudanças no seu projeto.
    7. Clique em Próxima.
    8. Em Concluir, leia a Política de dados do usuário dos serviços de API do Google e, se concordar, selecione Concordo com a Política de dados do usuário dos serviços de API do Google.
    9. Clique em Continuar.
    10. Clique em Criar.
  3. Por enquanto, você pode pular a adição de escopos. No futuro, quando você criar um app para uso fora da sua organização do Google Workspace, mude o Tipo de usuário para Externo. Em seguida, adicione os escopos de autorização necessários para o app. Para saber mais, consulte o guia completo Configurar a permissão OAuth.

Gerar uma chave de API para a API Google Books

  1. Acesse o Console do Google Cloud. Verifique se o projeto com faturamento ativado está aberto.

  2. No console do Google Cloud, acesse Menu > APIs e serviços > Credenciais.

    Ir para Credenciais

  3. Clique em Criar credenciais > Chave de API.

  4. Anote a chave de API para usar em uma etapa posterior.

Configurar o script

As seções a seguir configuram o script para criar o complemento.

Criar o projeto do Apps Script

  1. Clique no botão a seguir para abrir o projeto do Apps Script Visualizar links do Google Livros.
    Abrir o projeto
  2. Clique em Visão geral.
  3. Na página de visão geral, clique em O ícone para fazer uma cópia Fazer uma cópia.
  4. Na sua cópia do projeto do Apps Script, acesse o arquivo Code.gs e substitua YOUR_API_KEY pela chave de API gerada na seção anterior.

No futuro, se você quiser usar determinadas APIs do Google ou publicar seu app, será necessário associar o projeto do Cloud ao projeto do Apps Script. Para este guia, não é necessário fazer isso. Para saber mais, consulte o guia de projetos do Google Cloud.

Testar o complemento

As seções a seguir testam o complemento que você criou.

Instalar uma implantação de teste

  1. No projeto do Apps Script, clique em Editor.
  2. Clique em Implantar > Testar implantações.
  3. Clique em Instalar > Concluído.
  1. Crie um arquivo do Google Docs em docs.new.
  2. Cole o seguinte URL no documento e pressione a tecla Tab para converter o URL em um ícone inteligente: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
  3. Passe o cursor sobre o ícone inteligente e, quando solicitado, autorize o acesso para executar o complemento. O card de visualização mostra informações sobre o livro.

A imagem a seguir mostra a prévia do link:

Uma visualização do link do livro "Engenharia de software no Google".

Revisar o código

Para revisar o código do Apps Script deste complemento, clique em Ver código-fonte para expandir a seção:

Acessar o código-fonte

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
/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

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();
  }
}