Programa reuniones desde Google Chat

Nivel de programación: Intermedio
Duración: 25 minutos
Tipo de proyecto: App de Google Chat

Objetivos

• Comprender qué hace la solución
• Comprender qué hacen los servicios de Apps Script dentro de la solución
• Configura el entorno.
• Configura la secuencia de comandos.
• Ejecuta la secuencia de comandos.

Acerca de esta solución

Programa una reunión en el Calendario de Google desde un mensaje directo (MD) o un espacio en Google Chat. Puedes establecer detalles específicos para la reunión, como el asunto, la hora de inicio o la duración, o usar la configuración predeterminada para la programación de reuniones instantáneas.

Cómo funciona

La secuencia de comandos de la app de Chat usa comandos de barra y diálogos para obtener detalles de las reuniones de los usuarios y programar un evento de Calendario. La secuencia de comandos incluye la configuración predeterminada de las reuniones que se puede personalizar para satisfacer tus necesidades.

Servicios de Apps Script

En esta solución, se usan los siguientes servicios:

• Servicio de Calendario: Crea el evento de calendario a partir de la información de la reunión proporcionada.
• Servicio base: Usa la clase Session para obtener la zona horaria de la secuencia de comandos. El Calendario usa esta zona horaria cuando programa el evento.
• Servicio de utilidades: Establece el formato de la fecha del evento de calendario y codifica el ID del evento para ayudar a obtener la URL del evento.

Requisitos previos

• Una cuenta de Google Workspace para empresas o negocios con acceso a Google Chat
• Crea un proyecto de Google Cloud

Configura tu entorno

Abre tu proyecto de Cloud en la consola de Google Cloud

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

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

   Selecciona un proyecto de Cloud

2. Selecciona el proyecto de Google Cloud que deseas usar. También puedes hacer clic en Create project 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

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.

• En tu proyecto de Cloud, activa la API de Google Chat.

  Activa la API

Cómo configurar la pantalla de consentimiento de OAuth

Todas las apps de Chat requieren una configuración de pantalla de consentimiento. Cuando configuras la pantalla de consentimiento de OAuth de tu app, defines lo que Google muestra a los usuarios y registras 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 la aplicación y, luego, haz clic en Guardar y continuar.

4. Por ahora, puedes omitir 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 el registro de la app parece correcto, haz clic en Volver al panel.

Configura la secuencia de comandos

Crea el proyecto de Apps Script

1. Haz clic en el siguiente botón para abrir el proyecto de Apps Script Programa reuniones desde Google Chat.
   Abre el proyecto
2. Haz clic en Resumen .
3. En la página de descripción general, haz clic en Crear una copia .

Copia el número del proyecto de Cloud

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

   Ir a Configuración de IAM y administrador

2. En el campo Número del proyecto, copia el valor.

Configura el proyecto de Cloud del proyecto de Apps Script

1. En el proyecto de Apps Script copiado, haz clic en 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.

Crea una implementación de prueba

1. En el proyecto de Apps Script copiado, haz clic en Implementar > Probar implementaciones.
2. Copia el ID de implementación principal para usarlo en un paso posterior y haz clic en Listo.

Configura la API de Chat

1. En la consola de Google Cloud, ve a la página API de Chat.
   Ir a la API de Chat
2. Haz clic en Configuración.
3. Configura la API de Chat con la siguiente información:
   • Nombre: Meeting Scheduler
   • URL del avatar: Agrega una URL que dirija a una imagen con un tamaño mínimo de 256 × 256 píxeles.
   • Descripción: Quickly create meetings.
   • Funcionalidad: Marca ambas casillas para permitir que los usuarios envíen mensajes directamente a la app y la agreguen a espacios.
   • Configuración de la conexión: Haz clic en Apps Script y, luego, ingresa el ID de implementación principal.
   • Comandos de barra: Para agregar comandos de barra para /help y /schedule_Meeting, sigue estos pasos:
     1. Haz clic en Agregar comando de barra y configúralo con la siguiente información:
        • Nombre: /help
        • ID de comando: 1
        • Descripción: Learn what this app does.
     2. Vuelve a hacer clic en Agregar comando de barra y configúralo con la siguiente información:
        • Nombre: /schedule_Meeting
        • ID de comando: 2
        • Descripción: Schedule a meeting.
        • Marca la casilla Abrir un diálogo.
   • Permisos: Selecciona Personas y grupos específicos de tu dominio y escribe tu dirección de correo electrónico.
4. Haz clic en Guardar y actualiza la página.
5. En la página de configuración, en Estado de la app, establece el estado como Activo: Disponible para los usuarios.
6. Haz clic en Guardar.

Ejecuta la secuencia de comandos:

1. Abre Google Chat.
2. Haz clic en Iniciar un chat .
3. Busca el nombre de la app, Meeting Scheduler.
4. Envía un mensaje inicial, como hello, para solicitar la autorización.

5. Cuando la app responda, haz clic en Configurar y autoriza la app. Si la pantalla de consentimiento de OAuth muestra la advertencia Esta app no está verificada, continúa seleccionando Configuración avanzada > Ir a {nombre del proyecto} (no seguro).

6. Envía /schedule_Meeting a la app.

7. En el diálogo, agrega al menos una dirección de correo electrónico de invitado. Puedes actualizar los otros campos o usar las entradas predeterminadas.

8. Haz clic en Enviar.

9. Para ver la reunión, haz clic en Abrir evento de Calendario.

Revisa el código

Para revisar el código de Apps Script de esta solución, haz clic en Ver código fuente a continuación:

Ver el código fuente

Code.gs

solutions/schedule-meetings/Code.js

Ver en GitHub

// To learn how to use this script, refer to the documentation:
// https://developers.google.com/apps-script/samples/chat-apps/schedule-meetings

/*
Copyright 2022 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

    https://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.
*/

// Application constants
const APPNAME = 'Chat Meeting Scheduler';
const SLASHCOMMAND = {
  HELP: 1, // /help
  DIALOG: 2, // /schedule_Meeting
};

/**
 * Responds to an ADDED_TO_SPACE event in Google Chat.
 * Called when the Chat app is added to a space. The Chat app can either be directly added to the space
 * or added by a @mention. If the Chat app is added by a @mention, the event object includes a message property. 
 * Returns a Message object, which is usually a welcome message informing users about the Chat app.
 *
 * @param {Object} event The event object from Google Chat
 */
function onAddToSpace(event) {
  let message = '';

  // Personalizes the message depending on how the Chat app is called.
  if (event.space.singleUserBotDm) {
    message = `Hi ${event.user.displayName}!`;
  } else {
    const spaceName = event.space.displayName ? event.space.displayName : "this chat";
    message = `Hi! Thank you for adding me to ${spaceName}`;
  }

  // Lets users know what they can do and how they can get help.
  message = message + '/nI can quickly schedule a meeting for you with just a few clicks.' +
    'Try me out by typing */schedule_Meeting*. ' +
    '/nTo learn what else I can do, type */help*.'

  return { "text": message };
}

/**
 * Responds to a MESSAGE event triggered in Chat.
 * Called when the Chat app is already in the space and the user invokes it via @mention or / command.
 * Returns a message object containing the Chat app's response. For this Chat app, the response is either the
 * help text or the dialog to schedule a meeting.
 * 
 * @param {object} event The event object from Google Chat
 * @return {object} JSON-formatted response as text or Card message
 */
function onMessage(event) {

  // Handles regular onMessage logic.
  // Evaluates if and handles for all slash commands.
  if (event.message.slashCommand) {
    switch (event.message.slashCommand.commandId) {

      case SLASHCOMMAND.DIALOG: // Displays meeting dialog for /schedule_Meeting.

        // TODO update this with your own logic to set meeting recipients, subjects, etc (e.g. a group email).
        return getInputFormAsDialog_({
          invitee: '',
          startTime: getTopOfHourDateString_(),
          duration: 30,
          subject: 'Status Stand-up',
          body: 'Scheduling a quick status stand-up meeting.'
        });

      case SLASHCOMMAND.HELP: // Responds with help text for /help.
        return getHelpTextResponse_();

      /* TODO Add other use cases here. E.g:
      case SLASHCOMMAND.NEW_FEATURE:  // Your Feature Here
        getDialogForAddContact(message);
      */

    }
  }
  else {
    // Returns text if users didn't invoke a slash command.
    return { text: 'No action taken - use Slash Commands.' }
  }
}

/**
 * Responds to a CARD_CLICKED event triggered in Chat.
 * @param {object} event the event object from Chat
 * @return {object} JSON-formatted response
 * @see https://developers.google.com/chat/api/guides/message-formats/events
 */
function onCardClick(event) {
  if (event.action.actionMethodName === 'handleFormSubmit') {
    const recipients = getFieldValue_(event.common.formInputs, 'email');
    const subject = getFieldValue_(event.common.formInputs, 'subject');
    const body = getFieldValue_(event.common.formInputs, 'body');

    // Assumes dialog card inputs for date and times are in the correct format. mm/dd/yyy HH:MM
    const dateTimeInput = getFieldValue_(event.common.formInputs, 'date');
    const startTime = getStartTimeAsDateObject_(dateTimeInput);
    const duration = Number(getFieldValue_(event.common.formInputs, 'duration'));

    // Handles instances of missing or invalid input parameters.
    const errors = [];

    if (!recipients) {
      errors.push('Missing or invalid recipient email address.');
    }
    if (!subject) {
      errors.push('Missing subject line.');
    }
    if (!body) {
      errors.push('Missing event description.');
    }
    if (!startTime) {
      errors.push('Missing or invalid start time.');
    }
    if (!duration || isNaN(duration)) {
      errors.push('Missing or invalid duration');
    }
    if (errors.length) {
      // Redisplays the form if missing or invalid inputs exist.
      return getInputFormAsDialog_({
        errors,
        invitee: recipients,
        startTime: dateTimeInput,
        duration,
        subject,
        body
      });
    }

    //  Calculates the end time via duration.
    const endTime = new Date(startTime.valueOf());
    endTime.setMinutes(endTime.getMinutes() + duration);

    // Creates calendar event with notification.
    const calendar = CalendarApp.getDefaultCalendar()
    const scheduledEvent = calendar.createEvent(subject,
      startTime,
      endTime,
      {
        guests: recipients,
        sendInvites: true,
        description: body + '\nThis meeting scheduled by a Google Chat App!'
      });

    // Gets a link to the Calendar event.
    const url = getCalendarEventURL_(scheduledEvent, calendar)

    return getConfirmationDialog_(url);

  } else if (event.action.actionMethodName === 'closeDialog') {

    // Returns this dialog as success.
    return {
      actionResponse: {
        type: 'DIALOG',
        dialog_action: {
          actionStatus: 'OK'
        }
      }
    }
  }
}

/**
 * Responds with help text about this Chat app.
 * @return {string} The help text as seen below
 */
function getHelpTextResponse_() {
  const help = `*${APPNAME}* lets you quickly create meetings from Google Chat. Here\'s a list of all its commands:
  \`/schedule_Meeting\`  Opens a dialog with editable, preset parameters to create a meeting event
  \`/help\`  Displays this help message

  Learn more about creating Google Chat apps at https://developers.google.com/chat.`

  return { 'text': help }
}

Dialog.gs

solutions/schedule-meetings/Dialog.js

Ver en GitHub

/**
 * Copyright 2022 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.
 */

/**
* Form input dialog as JSON.
* @return {object} JSON-formatted cards for the dialog.
*/
function getInputFormAsDialog_(options) {
  const form = getForm_(options);
  return {
    'actionResponse': {
      'type': 'DIALOG',
      'dialogAction': {
        'dialog': {
          'body': form
        }
      }
    }
  };
}

/**
* Form JSON to collect inputs regarding the meeting.
* @return {object} JSON-formatted cards.
*/
function getForm_(options) {
  const sections = [];

  // If errors present, display additional section with validation messages.
  if (options.errors && options.errors.length) {
    let errors = options.errors.reduce((str, err) => `${str}• ${err}<br>`, '');
    errors = `<b>Errors:</b><br><font color="#ba0000">${errors}</font>`;
    const errorSection = {
      'widgets': [
        {
          textParagraph: {
            text: errors
          }
        }
      ]
    }
    sections.push(errorSection);
  }
  let formSection = {
    'header': 'Schedule meeting and send email to invited participants',
    'widgets': [
      {
        'textInput': {
          'label': 'Event Title',
          'type': 'SINGLE_LINE',
          'name': 'subject',
          'value': options.subject
        }
      },
      {
        'textInput': {
          'label': 'Invitee Email Address',
          'type': 'SINGLE_LINE',
          'name': 'email',
          'value': options.invitee,
          'hintText': 'Add team group email'
        }
      },
      {
        'textInput': {
          'label': 'Description',
          'type': 'MULTIPLE_LINE',
          'name': 'body',
          'value': options.body
        }
      },
      {
        'textInput': {
          'label': 'Meeting start date & time',
          'type': 'SINGLE_LINE',
          'name': 'date',
          'value': options.startTime,
          'hintText': 'mm/dd/yyyy H:MM'
        }
      },
      {
        'selectionInput': {
          'type': 'DROPDOWN',
          'label': 'Meeting Duration',
          'name': 'duration',
          'items': [
            {
              'text': '15 minutes',
              'value': '15',
              'selected': options.duration === 15
            },
            {
              'text': '30 minutes',
              'value': '30',
              'selected': options.duration === 30
            },
            {
              'text': '45 minutes',
              'value': '45',
              'selected': options.duration === 45
            },
            {
              'text': '1 Hour',
              'value': '60',
              'selected': options.duration === 60
            },
            {
              'text': '1.5 Hours',
              'value': '90',
              'selected': options.duration === 90
            },
            {
              'text': '2 Hours',
              'value': '120',
              'selected': options.duration === 120
            }
          ]
        }
      }
    ],
    'collapsible': false
  };
  sections.push(formSection);
  const card =  {
    'sections': sections,
    'name': 'Google Chat Scheduled Meeting',
    'fixedFooter': {
      'primaryButton': {
        'text': 'Submit',
        'onClick': {
          'action': {
            'function': 'handleFormSubmit'
          }
        },
        'altText': 'Submit'
      }
    }
  };
  return card;
}

/**
* Confirmation dialog after a calendar event is created successfully.
* @param {string} url The Google Calendar Event url for link button
* @return {object} JSON-formatted cards for the dialog
*/
function getConfirmationDialog_(url) {
  return {
    'actionResponse': {
      'type': 'DIALOG',
      'dialogAction': {
        'dialog': {
          'body': {
            'sections': [
              {
                'widgets': [
                  {
                    'textParagraph': {
                      'text': 'Meeting created successfully!'
                    },
                    'horizontalAlignment': 'CENTER'
                  },
                  {
                    'buttonList': {
                      'buttons': [
                        {
                          'text': 'Open Calendar Event',
                          'onClick': {
                            'openLink': {
                              'url': url
                            }
                          }
                        }

                      ]
                    },
                    'horizontalAlignment': 'CENTER'
                  }
                ]
              }
            ],
            'fixedFooter': {
              'primaryButton': {
                'text': 'OK',
                'onClick': {
                  'action': {
                    'function': 'closeDialog'
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Utilities.gs

solutions/schedule-meetings/Utilities.js

Ver en GitHub

/**
 * Copyright 2022 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.
 */

/**
* Helper function that gets the field value from the given form input.
* @return {string} 
*/
function getFieldValue_(formInputs, fieldName) {
  return formInputs[fieldName][''].stringInputs.value[0];
}

// Regular expression to validate the date/time input.
const DATE_TIME_PATTERN = /\d{1,2}\/\d{1,2}\/\d{4}\s+\d{1,2}:\d\d/;

/**
* Casts date and time from string to Date object.
* @return {date} 
*/
function getStartTimeAsDateObject_(dateTimeStr) {
  if (!dateTimeStr || !dateTimeStr.match(DATE_TIME_PATTERN)) {
    return null;
  }

  const parts = dateTimeStr.split(' ');
  const [month, day, year] = parts[0].split('/').map(Number);
  const [hour, minute] = parts[1].split(':').map(Number);


  Session.getScriptTimeZone()

  return new Date(year, month - 1, day, hour, minute)
}

/** 
* Gets the current date and time for the upcoming top of the hour (e.g. 01/25/2022 18:00).
* @return {string} date/time in mm/dd/yyy HH:MM format needed for use by Calendar
*/
function getTopOfHourDateString_() {
  const date = new Date();
  date.setHours(date.getHours() + 1);
  date.setMinutes(0, 0, 0);
  // Adding the date as string might lead to an incorrect response due to time zone adjustments.
  return Utilities.formatDate(date, Session.getScriptTimeZone(), 'MM/dd/yyyy H:mm');
}


/** 
* Creates the URL for the Google Calendar event.
*
* @param {object} event The Google Calendar Event instance
* @param {object} cal The associated Google Calendar 
* @return {string} URL in the form of 'https://www.google.com/calendar/event?eid={event-id}'
*/
function getCalendarEventURL_(event, cal) {
  const baseCalUrl = 'https://www.google.com/calendar';
  // Joins Calendar Event Id with Calendar Id, then base64 encode to derive the event URL.
  let encodedId = Utilities.base64Encode(event.getId().split('@')[0] + " " + cal.getId()).replace(/\=/g, '');
  encodedId = `/event?eid=${encodedId}`;
  return (baseCalUrl + encodedId);

}

Próximos pasos

• Descripción general para desarrolladores de Chat
• Compila una app de Google Chat con Apps Script