Guía de inicio rápido sobre el complemento de Google Workspace

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En esta guía de inicio rápido, se crea un complemento simple de Google Workspace que demuestra las páginas principales, los activadores contextuales y la conexión a API de terceros.

El complemento crea interfaces contextuales y no contextuales en Gmail, Calendario y Drive. El complemento muestra una imagen aleatoria de un gato con texto superpuesto. El texto es estático para las páginas principales o se toma del contexto de la aplicación host para activadores contextuales.

Objetivos

  • Configurar el entorno
  • Configura la secuencia de comandos.
  • Ejecuta la secuencia de comandos.

Requisitos previos

Para usar esta muestra, necesitas los siguientes requisitos previos:

  • Una Cuenta de Google (las cuentas de Google Workspace pueden requerir la aprobación del administrador).
  • Un navegador web con acceso a Internet.

  • Un proyecto de Google Cloud

Configura tu entorno

Abre tu proyecto de Cloud en Google Cloud Console.

Si aún no está abierto, abre el proyecto de Cloud que deseas usar para este ejemplo:

  1. Ve a la consola de Google Cloud.
  2. Junto a Google Cloud, haz clic en la flecha hacia abajo . Aparecerá un diálogo en el que se enumeran los proyectos actuales.
  3. Selecciona tu proyecto y haz clic en Open. La consola abre tu proyecto.

Los complementos de Google Workspace requieren una configuración de pantalla de consentimiento. La configuración de la pantalla de consentimiento de OAuth de tu complemento define lo que Google muestra a los usuarios.

  1. En tu proyecto de Google Cloud, ve a Menú > API y servicios > Pantalla de consentimiento de OAuth.

    Ir a la pantalla de consentimiento de OAuth

  2. Seleccione el tipo de usuario para su aplicación y, luego, haga clic en Crear.
  3. Complete el formulario de registro de la aplicación y, luego, haga clic en Guardar y continuar.
  4. Por ahora, puedes omitir el agregado de 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, deberás agregar y verificar los alcances de autorización que requiere tu app.
  5. Si seleccionaste Externo como tipo de usuario, agrega los usuarios de prueba:
    1. En Usuarios de prueba, haga clic en Agregar usuarios.
    2. Ingresa tu dirección de correo electrónico y cualquier otro usuario de prueba autorizado. Luego, haz clic en Guardar y continuar.
  6. Revisa el resumen del registro de tu app. Para realizar cambios, haz clic en Editar. Si el registro de la aplicación es satisfactorio, haga clic en Volver al panel de control.

Configure la secuencia de comandos

Cree el proyecto de Apps Script

  1. Para crear un proyecto nuevo de Apps Script, ve a script.new.
  2. Haz clic en Proyecto sin título (Untitled project).
  3. Cambie el nombre del proyecto de Apps Script a Gatos y haga clic en Cambiar nombre.
  4. Junto al archivo Code.gs, haz clic en Más > Cambiar nombre. Asígnale el nombre Common al archivo.
  5. Haz clic en Agregar un archivo > Secuencia de comandos. Asígnale el nombre Gmail al archivo.
  6. Repite el paso 5 para crear 2 archivos de secuencia de comandos más llamados Calendar y Drive. Cuando termines, deberías tener 4 archivos de secuencias de comandos separados.
  7. Reemplaza el contenido de cada archivo por el siguiente código:

    Common.gs

      /**
     * This simple Google Workspace Add-on shows a random image of a cat in the
     * sidebar. When opened manually (the homepage card), some static text is
     * overlayed on the image, but when contextual cards are opened a new cat image
     * is shown with the text taken from that context (such as a message's subject
     * line) overlaying the image. There is also a button that updates the card with
     * a new random cat image.
     *
     * Click "File > Make a copy..." to copy the script, and "Publish > Deploy from
     * manifest > Install add-on" to install it.
     */
    
    /**
     * The maximum number of characters that can fit in the cat image.
     */
    var MAX_MESSAGE_LENGTH = 40;
    
    /**
     * Callback for rendering the homepage card.
     * @return {CardService.Card} The card to show to the user.
     */
    function onHomepage(e) {
      console.log(e);
      var hour = Number(Utilities.formatDate(new Date(), e.userTimezone.id, 'H'));
      var message;
      if (hour >= 6 && hour < 12) {
        message = 'Good morning';
      } else if (hour >= 12 && hour < 18) {
        message = 'Good afternoon';
      } else {
        message = 'Good night';
      }
      message += ' ' + e.hostApp;
      return createCatCard(message, true);
    }
    
    /**
     * Creates a card with an image of a cat, overlayed with the text.
     * @param {String} text The text to overlay on the image.
     * @param {Boolean} isHomepage True if the card created here is a homepage;
     *      false otherwise. Defaults to false.
     * @return {CardService.Card} The assembled card.
     */
    function createCatCard(text, isHomepage) {
      // Explicitly set the value of isHomepage as false if null or undefined.
      if (!isHomepage) {
        isHomepage = false;
      }
    
      // Use the "Cat as a service" API to get the cat image. Add a "time" URL
      // parameter to act as a cache buster.
      var now = new Date();
      // Replace forward slashes in the text, as they break the CataaS API.
      var caption = text.replace(/\//g, ' ');
      var imageUrl =
          Utilities.formatString('https://cataas.com/cat/says/%s?time=%s',
              encodeURIComponent(caption), now.getTime());
      var image = CardService.newImage()
          .setImageUrl(imageUrl)
          .setAltText('Meow')
    
      // Create a button that changes the cat image when pressed.
      // Note: Action parameter keys and values must be strings.
      var action = CardService.newAction()
          .setFunctionName('onChangeCat')
          .setParameters({text: text, isHomepage: isHomepage.toString()});
      var button = CardService.newTextButton()
          .setText('Change cat')
          .setOnClickAction(action)
          .setTextButtonStyle(CardService.TextButtonStyle.FILLED);
      var buttonSet = CardService.newButtonSet()
          .addButton(button);
    
      // Create a footer to be shown at the bottom.
      var footer = CardService.newFixedFooter()
          .setPrimaryButton(CardService.newTextButton()
              .setText('Powered by cataas.com')
              .setOpenLink(CardService.newOpenLink()
                  .setUrl('https://cataas.com')));
    
      // Assemble the widgets and return the card.
      var section = CardService.newCardSection()
          .addWidget(image)
          .addWidget(buttonSet);
      var card = CardService.newCardBuilder()
          .addSection(section)
          .setFixedFooter(footer);
    
      if (!isHomepage) {
        // Create the header shown when the card is minimized,
        // but only when this card is a contextual card. Peek headers
        // are never used by non-contexual cards like homepages.
        var peekHeader = CardService.newCardHeader()
          .setTitle('Contextual Cat')
          .setImageUrl('https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png')
          .setSubtitle(text);
        card.setPeekCardHeader(peekHeader)
      }
    
      return card.build();
    }
    
    /**
     * Callback for the "Change cat" button.
     * @param {Object} e The event object, documented {@link
     *     https://developers.google.com/gmail/add-ons/concepts/actions#action_event_objects
     *     here}.
     * @return {CardService.ActionResponse} The action response to apply.
     */
    function onChangeCat(e) {
      console.log(e);
      // Get the text that was shown in the current cat image. This was passed as a
      // parameter on the Action set for the button.
      var text = e.parameters.text;
    
      // The isHomepage parameter is passed as a string, so convert to a Boolean.
      var isHomepage = e.parameters.isHomepage === 'true';
    
      // Create a new card with the same text.
      var card = createCatCard(text, isHomepage);
    
      // Create an action response that instructs the add-on to replace
      // the current card with the new one.
      var navigation = CardService.newNavigation()
          .updateCard(card);
      var actionResponse = CardService.newActionResponseBuilder()
          .setNavigation(navigation);
      return actionResponse.build();
    }
    
    /**
     * Truncate a message to fit in the cat image.
     * @param {string} message The message to truncate.
     * @return {string} The truncated message.
     */
    function truncate(message) {
      if (message.length > MAX_MESSAGE_LENGTH) {
        message = message.slice(0, MAX_MESSAGE_LENGTH);
        message = message.slice(0, message.lastIndexOf(' ')) + '...';
      }
      return message;
    }
    
      

    Gmail.gs

      /**
     * Callback for rendering the card for a specific Gmail message.
     * @param {Object} e The event object.
     * @return {CardService.Card} The card to show to the user.
     */
    function onGmailMessage(e) {
      console.log(e);
      // Get the ID of the message the user has open.
      var messageId = e.gmail.messageId;
    
      // Get an access token scoped to the current message and use it for GmailApp
      // calls.
      var accessToken = e.gmail.accessToken;
      GmailApp.setCurrentMessageAccessToken(accessToken);
    
      // Get the subject of the email.
      var message = GmailApp.getMessageById(messageId);
      var subject = message.getThread().getFirstMessageSubject();
    
      // Remove labels and prefixes.
      subject = subject
          .replace(/^([rR][eE]|[fF][wW][dD])\:\s*/, '')
          .replace(/^\[.*?\]\s*/, '');
    
      // If neccessary, truncate the subject to fit in the image.
      subject = truncate(subject);
    
      return createCatCard(subject);
    }
    
    /**
     * Callback for rendering the card for the compose action dialog.
     * @param {Object} e The event object.
     * @return {CardService.Card} The card to show to the user.
     */
    function onGmailCompose(e) {
      console.log(e);
      var header = CardService.newCardHeader()
          .setTitle('Insert cat')
          .setSubtitle('Add a custom cat image to your email message.');
      // Create text input for entering the cat's message.
      var input = CardService.newTextInput()
          .setFieldName('text')
          .setTitle('Caption')
          .setHint('What do you want the cat to say?');
      // Create a button that inserts the cat image when pressed.
      var action = CardService.newAction()
          .setFunctionName('onGmailInsertCat');
      var button = CardService.newTextButton()
          .setText('Insert cat')
          .setOnClickAction(action)
          .setTextButtonStyle(CardService.TextButtonStyle.FILLED);
      var buttonSet = CardService.newButtonSet()
          .addButton(button);
      // Assemble the widgets and return the card.
      var section = CardService.newCardSection()
          .addWidget(input)
          .addWidget(buttonSet);
      var card = CardService.newCardBuilder()
          .setHeader(header)
          .addSection(section);
      return card.build();
    }
    
    /**
     * Callback for inserting a cat into the Gmail draft.
     * @param {Object} e The event object.
     * @return {CardService.UpdateDraftActionResponse} The draft update response.
     */
    function onGmailInsertCat(e) {
      console.log(e);
      // Get the text that was entered by the user.
      var text = e.formInput.text;
      // Use the "Cat as a service" API to get the cat image. Add a "time" URL
      // parameter to act as a cache buster.
      var now = new Date();
      var imageUrl = 'https://cataas.com/cat';
      if (text) {
        // Replace forward slashes in the text, as they break the CataaS API.
        var caption = text.replace(/\//g, ' ');
        imageUrl += Utilities.formatString('/says/%s?time=%s',
            encodeURIComponent(caption), now.getTime());
      }
      var imageHtmlContent = '<img style="display: block; max-height: 300px;" src="'
          + imageUrl + '"/>';
      var response = CardService.newUpdateDraftActionResponseBuilder()
          .setUpdateDraftBodyAction(CardService.newUpdateDraftBodyAction()
              .addUpdateContent(imageHtmlContent,CardService.ContentType.MUTABLE_HTML)
              .setUpdateType(CardService.UpdateDraftBodyType.IN_PLACE_INSERT))
          .build();
      return response;
    }
    
      

    Calendario.gs

      /**
     * Callback for rendering the card for a specific Calendar event.
     * @param {Object} e The event object.
     * @return {CardService.Card} The card to show to the user.
     */
    function onCalendarEventOpen(e) {
      console.log(e);
      var calendar = CalendarApp.getCalendarById(e.calendar.calendarId);
      // The event metadata doesn't include the event's title, so using the
      // calendar.readonly scope and fetching the event by it's ID.
      var event = calendar.getEventById(e.calendar.id);
      if (!event) {
        // This is a new event still being created.
        return createCatCard('A new event! Am I invited?');
      }
      var title = event.getTitle();
      // If necessary, truncate the title to fit in the image.
      title = truncate(title);
      return createCatCard(title);
    }
    
      

    Drive.gs

      /**
     * Callback for rendering the card for specific Drive items.
     * @param {Object} e The event object.
     * @return {CardService.Card} The card to show to the user.
     */
    function onDriveItemsSelected(e) {
      console.log(e);
      var items = e.drive.selectedItems;
      // Include at most 5 items in the text.
      items = items.slice(0, 5);
      var text = items.map(function(item) {
        var title = item.title;
        // If neccessary, truncate the title to fit in the image.
        title = truncate(title);
        return title;
      }).join('\n');
      return createCatCard(text);
    }
    
      

  8. Haz clic en Configuración del proyecto Ícono de la configuración del proyecto.

  9. Marque la casilla Mostrar archivo de manifiesto "appsscript.json" en el editor.

  10. Haz clic en Editor .

  11. Abre el archivo appsscript.json, reemplaza el contenido con el siguiente código y, luego, haz clic en Guardar Ícono Guardar.

    appsscript.json

       {
      "timeZone": "America/New_York",
      "dependencies": {
      },
      "exceptionLogging": "STACKDRIVER",
      "oauthScopes": [
        "https://www.googleapis.com/auth/calendar.addons.execute",
        "https://www.googleapis.com/auth/calendar.readonly",
        "https://www.googleapis.com/auth/drive.addons.metadata.readonly",
        "https://www.googleapis.com/auth/gmail.addons.current.action.compose",
        "https://www.googleapis.com/auth/gmail.addons.current.message.readonly",
        "https://www.googleapis.com/auth/gmail.addons.execute",
        "https://www.googleapis.com/auth/script.locale"],
      "runtimeVersion": "V8",
      "addOns": {
        "common": {
          "name": "Cats",
          "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png",
          "useLocaleFromApp": true,
          "homepageTrigger": {
            "runFunction": "onHomepage",
            "enabled": true
          },
          "universalActions": [{
            "label": "Learn more about Cataas",
            "openLink": "https://cataas.com"
          }]
        },
        "gmail": {
          "contextualTriggers": [{
            "unconditional": {
            },
            "onTriggerFunction": "onGmailMessage"
          }],
          "composeTrigger": {
            "selectActions": [{
              "text": "Insert cat",
              "runFunction": "onGmailCompose"
            }],
            "draftAccess": "NONE"
          }
        },
        "drive": {
          "onItemsSelectedTrigger": {
            "runFunction": "onDriveItemsSelected"
          }
        },
        "calendar": {
          "eventOpenTrigger": {
            "runFunction": "onCalendarEventOpen"
          }
        }
      }
    }
    
      

Copia el número del proyecto de Cloud

  1. Ve a tu proyecto de Cloud en Google Cloud Console.
  2. Haz clic en Configuración y utilidades > Configuración del proyecto.
  3. Copia el Número de proyecto.

Configure el proyecto de Cloud de su proyecto de Apps Script

  1. En el proyecto de Apps Script, haz clic en Configuración del proyecto Ícono de la configuración del proyecto.
  2. En Proyecto de Google Cloud Platform (GCP), haga 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 proyecto.

Instala una implementación de prueba

  1. En tu proyecto de Apps Script, haz clic en Editor .
  2. Abre el archivo Common.gs y haz clic en Ejecutar. Cuando se te solicite, autoriza la secuencia de comandos.
  3. Haz clic en Implementar > Probar implementaciones.
  4. Haz clic en Instalar > Listo.

Ejecuta la secuencia de comandos:

  1. Ve a Gmail.
  2. Para abrir el complemento, en el panel lateral derecho, haga clic en Cats .
  3. Si se le solicita, autorice el complemento.
  4. El complemento muestra la imagen y el texto de un gato. Para cambiar la imagen, haz clic en Change cat (Cambiar gato).
  5. Si abres un correo electrónico mientras el complemento está abierto, la imagen se actualiza y el texto cambia a la línea de asunto del correo electrónico (truncada si es demasiado larga).

Puedes ver una funcionalidad similar en Calendario y Drive. No es necesario que vuelvas a autorizar el complemento para usarlo en esas apps host.

Próximos pasos