Crea chips inteligentes para la vista previa de vínculos en Documentos de Google

DIC 19, 2023
Chanel Greco Developer Advocate Google Workspace

A principios de este año, anunciamos la disponibilidad general de chips inteligentes de terceros en Documentos de Google. Con esta nueva función, puedes agregar, ver e interactuar con información importante de apps de terceros directamente en Documentos de Google. Varios socios, incluidos Asana, Atlassian, Figma, Loom, Miro, Tableau y Whimsical, ya crearon chips inteligentes para que los usuarios puedan comenzar a incorporar contenido de sus apps directamente en Documentos de Google. Sourabh Choraria, un experto desarrollador de Google para Google Workspace y desarrollador aficionado, publicó una solución de chips inteligentes de terceros llamada “Link Previews” en Google Workspace Marketplace. Esta app agrega información a Documentos de Google desde varias herramientas SaaS de uso común.

En esta entrada de blog, descubrirás cómo tu también puedes crear tus propios chips inteligentes para Documentos de Google.

image1
Ejemplo de un chip inteligente que se creó para obtener una vista previa de la información de un sistema de administración de eventos

Cómo funcionan los chips inteligentes para servicios de terceros

Los chips inteligentes de terceros funcionan con complementos de Google Workspace y se pueden publicar en Google Workspace Marketplace. Desde ahí, un administrador o un usuario pueden instalar el complemento y aparecerá en la barra lateral ubicada en el margen derecho de Documentos de Google.

El complemento de Google Workspace detecta los vínculos de un servicio y solicita a los usuarios de Documentos de Google que obtengan una vista previa de ellos. Esto significa que puedes crear chips inteligentes para cualquier servicio que tenga una URL de acceso público. Puedes configurar un complemento para obtener una vista previa de varios patrones de URL, como vínculos a casos de ayuda, clientes potenciales de ventas, perfiles de empleados y mucho más. Esta configuración se realiza en el archivo de manifiesto del complemento.

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "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"
          }
        }
      ]
    }
  }
}

El archivo de manifiesto contiene el patrón de URL de la API de Google Libros.

El chip inteligente muestra un ícono y un título corto o una descripción del contenido del vínculo. Cuando el usuario coloca el cursor sobre el chip, ve una interfaz de tarjeta que muestra una vista previa con más información sobre el archivo o el vínculo. Puedes personalizar la interfaz de la tarjeta que aparece cuando el usuario coloca el cursor sobre un chip inteligente. Cuando creas la interfaz de la tarjeta, utilizas widgets para mostrar información sobre el vínculo. También puedes crear acciones que permitan a los usuarios abrir el vínculo o modificar su contenido. Para obtener una lista de todos los componentes compatibles con las tarjetas de vista previa, consulta la documentación para desarrolladores.

function getBook(id) {
// Code to fetch the data from the Google Books API
}
 
function bookLinkPreview(event) {
 if (event.docs.matchedUrl.url) {
// Through getBook(id) the relevant data is fetched and used to build the smart chip and card
 
    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();
  }
}

Este es el código de Apps Script para crear un chip inteligente.

image2
El estado de un chip inteligente cuando se coloca el cursor sobre él. Los datos que se muestran se obtienen de la URL de la entrada de blog de Google para desarrolladores que pegó el usuario.

Para obtener una explicación detallada del código utilizado en esta entrada, consulta el instructivo de muestra Vista previa de vínculos de Google Libros con chips inteligentes.

Cómo elegir la tecnología para tu complemento

Al crear chips inteligentes para la vista previa de vínculos, puedes elegir entre dos tecnologías diferentes para crear tu complemento: Google Apps Script o tiempo de ejecución alternativo.

Apps Script es una plataforma de desarrollo rápido de apps integrada en Google Workspace. Por este motivo, es una buena opción para crear prototipos y validar tu solución de chips inteligentes, ya que no requiere un entorno de desarrollo preexistente. Sin embargo, Apps Script no solo sirve para crear prototipos, ya que algunos desarrolladores eligen crear su complemento de Google Workspace con esta plataforma e incluso publicarlo en Google Workspace Marketplace para que los usuarios lo instalen.

Si quieres crear tu chip inteligente con Apps Script, puedes ver el siguiente video, en el que aprenderás todo lo necesario a fin de crear un chip inteligente para la vista previa de vínculos en Documentos de Google. ¿Quieres el código que se utiliza en el instructivo en video? Echa un vistazo a la página de muestra Vista previa de vínculos de Google Libros con chips inteligentes.

Link to Youtube Video (visible only when JS is disabled)

Si prefieres crear tu complemento de Google Workspace utilizando tus propios entorno de desarrollo, lenguaje de programación, hosting, paquetes, etc., entonces el tiempo de ejecución alternativo es la opción correcta. Puedes elegir entre diferentes lenguajes de programación como Node.js, Java, Python y mucho más. El hosting del código de tiempo de ejecución del complemento puede estar en cualquier infraestructura de nube o local, siempre que pueda exponerse como un extremo HTTP(S) público. Puedes obtener más información sobre cómo crear chips inteligentes utilizando tiempos de ejecución alternativos en la documentación para desarrolladores.

Cómo compartir tu complemento con otras personas

Puedes compartir tu complemento con otras personas mediante Google Workspace Marketplace. Supongamos que deseas que tu solución de chips inteligentes esté disponible para tu equipo. En ese caso, puedes publicar el complemento en Google Workspace para tu organización, también conocido como una app privada. Por otro lado, si quieres compartir tu complemento con cualquier persona que tenga una cuenta de Google, puedes publicarlo como una app pública.

Para obtener más información sobre cómo hacer publicaciones en Google Workspace Marketplace, puedes ver este video, que te servirá de guía en el proceso.

Cómo comenzar

Obtén más información sobre la creación de chips inteligentes para la vista previa de vínculos en la documentación para desarrolladores. Allí encontrarás más información y muestras de código en las que puedes basar tu solución. Esperamos ver qué soluciones de chips inteligentes crearás.