Obtén una vista previa de los vínculos de Google Libros con chips inteligentes

Nivel de programación: Intermedio
Duración: 30 minutos
Tipo de proyecto: Complemento de Google Workspace

Objetivos

  • Comprende qué hace el complemento.
  • Comprender cómo crear un complemento usando de Google Apps Script y comprenderás lo que y servicios de Google.
  • Configurar el entorno
  • Configura la secuencia de comandos.
  • Ejecuta la secuencia de comandos.

Acerca de este complemento de Google Workspace

En esta muestra, se crea un complemento de Google Workspace que muestra una vista previa de los vínculos de Google Libros en una Documentos de Google. Cuando escribes o pegas una URL de Google Libros en un documento, el complemento reconoce el del vínculo y activa una vista previa del vínculo. Para obtener una vista previa del vínculo, puedes convertir el un vínculo en un chip inteligente y mantén el puntero sobre el vínculo para ver una tarjeta que muestra más información sobre el libro.

Este complemento usa Servicio UrlFetch de Apps Script a conéctate a la Google Libros API y obtén información sobre Google Libros para mostrar en Documentos de Google.

Cómo funciona

En el manifiesto del complemento de Google Workspace archivo, la secuencia de comandos configura el complemento para extender Documentos de Google y activar el vínculo vistas previas de las URLs que coinciden con ciertos patrones del sitio web de Google Libros (https://books.google.com).

En el archivo de código, la secuencia de comandos se conecta a la API de Google Books y usa la URL. para obtener información sobre el libro (que es una instancia de Volume recurso). El secuencia de comandos usa esta información para generar un chip inteligente que muestra la título y una tarjeta de vista previa que muestra un resumen, la cantidad de páginas, una imagen de la portada del libro y el número de calificaciones.

Servicios de Apps Script

Este complemento usa los siguientes servicios:

Requisitos previos

Para usar esta muestra, necesitas los siguientes requisitos previos:

Configura tu entorno

En las siguientes secciones, se configura el entorno para compilar la complemento.

Abre tu proyecto de Cloud en la consola de Google Cloud

Si aún no está abierto, abre el proyecto de Cloud que quieres usar. para esta muestra:

  1. En la consola de Google Cloud, ve a la página Selecciona un proyecto.

    Selecciona un proyecto de Cloud

  2. Selecciona el proyecto de Google Cloud que deseas usar. También puedes hacer clic en Crear proyecto y seguir las instrucciones en pantalla. Si creas un proyecto de Google Cloud, es posible que debas activar la facturación para el proyecto.

Activa la API de Google Libros

Este complemento se conecta a la API de Google Books. Antes de usar las APIs de Google, debes activarlas en un proyecto de Google Cloud. Puedes activar una o más APIs en un solo proyecto de Google Cloud.

Este complemento requiere un proyecto de Cloud con una pantalla de consentimiento configurada. La configuración de la pantalla de consentimiento de OAuth define Google muestra a los usuarios y registra tu app para que puedas publicarla más adelante.

  1. En la consola de Google Cloud, ve a Menú > APIs y Servicios > Pantalla de consentimiento de OAuth.

    Ir a la pantalla de consentimiento de OAuth

  2. En Tipo de usuario, selecciona Interno y, luego, haz clic en Crear.
  3. Completa el formulario de registro de apps y, luego, haz clic en Guardar y continuar.
  4. Por ahora, puedes omitir el paso de agregar permisos y hacer clic en Guardar y continuar. En el futuro, cuando crees una app para usarla fuera de tu organización de Google Workspace, debes cambiar el Tipo de usuario a Externo y, luego, agregar los permisos de autorización que requiere tu app.

  5. Revisa el resumen del registro de tu app. Para realizar cambios, haz clic en Editar. Si la aplicación el registro parece estar bien, haz clic en Volver al panel.

Obtén una clave de API para la API de Google Libros

  1. Ve a la consola de Google Cloud. Asegúrate de que tu proyecto con facturación habilitada esté abierto.
  2. En la consola de Google Cloud, ve a Menú > APIs y Servicios > Credenciales.

    Ir a Credenciales

  3. Haz clic en Crear credenciales > Clave de API.

  4. Toma nota de tu clave de API para usarla en un paso posterior.

Configura la secuencia de comandos

En las siguientes secciones, se configura la secuencia de comandos para compilar la complemento.

Crea el proyecto de Apps Script

  1. Haz clic en el siguiente botón para abrir los vínculos de vista previa de Google Libros Proyecto de Apps Script.
    Abrir el proyecto
  2. Haz clic en Descripción general.
  3. En la página de descripción general, haz clic en El ícono para hacer una copia Crear una copia.
  4. En tu copia del proyecto de Apps Script, ve a Code.gs. y reemplaza YOUR_API_KEY por la clave de API que generaste en el sección anterior.

Copia el número del proyecto de la nube

  1. En la consola de Google Cloud, ve a Menú > IAM y Administrador > Configuración.

    Ir a IAM y Configuración del administrador

  2. Copia el valor en el campo Número del proyecto.

Configura el proyecto de Cloud del proyecto de Apps Script

  1. En tu proyecto de Apps Script, haz clic en El ícono de configuración del proyecto Configuración del proyecto.
  2. En Proyecto de Google Cloud Platform (GCP), haz clic en Cambiar proyecto.
  3. En Número de proyecto de GCP, pega el número de proyecto de Google Cloud.
  4. Haz clic en Establecer el proyecto.

Prueba el complemento

En las siguientes secciones, se prueba el complemento que creaste.

Instala una implementación de prueba

  1. En tu proyecto de Apps Script, haz clic en Editor.
  2. Reemplaza YOUR_API_KEY por la clave de API para la API de Google Libros, creada en en una sección anterior.
  3. Haz clic en Implementar > Implementaciones de prueba.
  4. Haz clic en Instalar > Listo.
  1. Crea un archivo de Documentos de Google en docs.new.
  2. Pega la siguiente URL en el documento y presiona la tecla Tab para convierte la URL en un chip inteligente: https://www.google.com/books/edition/Software_Engineering_at_Google/V3TTDwAAQBAJ
  3. Mantén el puntero sobre el chip inteligente y, cuando se te solicite, autoriza el acceso a ejecutar el complemento. Aparecerá la tarjeta de vista previa específica del libro.

En la siguiente imagen, se muestra la vista previa del vínculo:

Vista previa del vínculo del libro Ingeniería de software en Google.

Revisa el código

Para revisar el código de Apps Script para esto haz clic en Ver código fuente para expandir el sección:

Ver el código fuente

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