En este instructivo, se muestra cómo crear una app de Google Chat que ayude a los usuarios de Google Chat a administrar sus contactos personales y comerciales. Para recopilar información, la app de Chat les solicita a los usuarios que completen un formulario de contacto en los diálogos y mensajes de tarjeta.
Mira la app de Chat en acción:
-
Figura 2: La app de Chat abre un diálogo en el que los usuarios pueden ingresar información sobre un contacto. -
Figura 3: La app de Chat muestra un diálogo de confirmación para que los usuarios puedan revisar y confirmar la información antes de enviarla. -
Figura 4: Después de que el usuario envía el formulario, la app de Chat envía un mensaje de texto privado para confirmar el envío. -
Figura 5: La app de Chat también les solicita a los usuarios que agreguen un contacto desde una tarjeta en un mensaje.
Requisitos previos
- Una cuenta de Google Workspace para empresas o empresas con acceso a Google Chat
Objetivos
- Diseña y compila interfaces de usuario (IU) como objetos
card
, y muestra las IUs en mensajes y diálogos. - Recibir y procesar la información que los usuarios envían con widgets de entrada de formularios
- Responde a los comandos de barra mediante el envío de mensajes que contengan texto, tarjetas y widgets complementarios.
Arquitectura
La app de Chat está integrada en Google Apps Script y usa eventos de interacción para procesar y responder a los usuarios de Chat.
A continuación, se muestra cómo un usuario podría interactuar con la app de Chat de forma habitual:
Un usuario abre un mensaje directo con la app de Chat o la agrega a un espacio existente.
La app de Chat le solicita al usuario que agregue un contacto compilando y mostrando un formulario de contacto como un objeto
card
. Para presentar el formulario de contacto, la app de Chat les responde a los usuarios de las siguientes maneras:- Responde a @menciones y mensajes directos con un mensaje de tarjeta que contiene el formulario de contacto.
- Responde al comando de barra
/addContact
abriendo un diálogo con el formulario de contacto. - Responde al comando de barra
/about
con un mensaje de texto que tiene un botón Agregar un contacto en el que los usuarios pueden hacer clic para abrir un diálogo con el formulario de contacto.
Cuando se le presenta el formulario de contacto, el usuario ingresa la información de contacto en los siguientes campos y widgets:
- Nombre y apellido: Un widget
textInput
que acepta cadenas. - Fecha de nacimiento: Es un widget
dateTimePicker
que solo acepta fechas. - Tipo de contacto: Es un widget
selectionInput
de botones de selección que permite a los usuarios seleccionar y enviar un solo valor de cadena (Personal
oWork
). - Botón Revisar y enviar: Es un array
buttonList
con el widgetbutton
en el que el usuario hace clic para enviar los valores que ingresa.
- Nombre y apellido: Un widget
La app de Google Chat controla un evento de interacción
CARD_CLICKED
para procesar los valores que ingresa el usuario y mostrarlos en una tarjeta de confirmación.El usuario revisa la tarjeta de confirmación y hace clic en el botón Enviar para finalizar la información de contacto.
La app de Google Chat envía un mensaje de texto privado que confirma el envío.
Prepare el entorno
En esta sección, se muestra cómo crear y configurar un proyecto de Google Cloud para la app de Chat.
Crea un proyecto de Google Cloud
Consola de Google Cloud
- En la consola de Google Cloud, ve a Menú > IAM y administración > Crear un proyecto.
-
En el campo Nombre del proyecto, ingresa un nombre descriptivo para tu proyecto.
Opcional: Para editar el ID del proyecto, haz clic en Editar. El ID del proyecto no se puede cambiar después de que se crea el proyecto. Por lo tanto, elige un ID que abarque tus necesidades durante todo el ciclo de vida del proyecto.
- En el campo Ubicación, haz clic en Explorar para mostrar las posibles ubicaciones de tu proyecto. Luego, haga clic en Seleccionar.
- Haz clic en Crear. La consola de Google Cloud navega a la página Panel y se crea tu proyecto en pocos minutos.
gcloud CLI
En uno de los siguientes entornos de desarrollo, accede a Google Cloud CLI (gcloud
):
-
Cloud Shell: Para usar una terminal en línea con la CLI de gcloud ya configurada, activa Cloud Shell.
Activar Cloud Shell -
Shell local: Para usar un entorno de desarrollo local, instala e inicializa la CLI de gcloud.
Para crear un proyecto de Cloud, usa el comandogcloud projects create
: Reemplaza PROJECT_ID mediante la configuración del ID del proyecto que deseas crear.gcloud projects create PROJECT_ID
Configura la autenticación y la autorización
Las apps de Google Chat requieren que configures una pantalla de consentimiento de OAuth para que los usuarios puedan autorizar tu app en las aplicaciones de Google Workspace, incluido Google Chat.
En este instructivo, implementarás una app de chat solo para pruebas y uso interno, por lo que está bien usar información de marcador de posición para la pantalla de consentimiento. Antes de publicar la app de Chat, reemplaza la información de los marcadores de posición por información real.
En la consola de Google Cloud, ve a Menú > APIs y servicios > Pantalla de consentimiento de OAuth.
En Tipo de usuario, selecciona Interno y, luego, haz clic en Crear.
En Nombre de la app, escribe
Contact Manager
.En Correo electrónico de asistencia al usuario, selecciona tu dirección de correo electrónico o un Grupo de Google apropiado.
En Información de contacto del desarrollador, ingresa tu dirección de correo electrónico.
Haga clic en Guardar y continuar.
En la página Permisos, haz clic en Guardar y continuar. (la app de Chat no requiere ningún permiso de OAuth).
Revisa el resumen y, luego, haz clic en Volver al panel.
Crea y, luego, implementa la app de Chat
En la siguiente sección, copiarás y actualizarás un proyecto completo de Apps Script que contiene todo el código de la aplicación requerido para tu app de chat, por lo que no es necesario copiar y pegar cada archivo.
De forma opcional, puedes ver todo el proyecto en GitHub.
A continuación, se incluye una descripción general de cada archivo:
main.gs
Controla toda la lógica de la app, incluidos los eventos de interacción sobre cuándo los usuarios envían mensajes a la app de Chat, hacen clic en botones de un mensaje de la app de Chat o abren y cierran diálogos.
Ver código
main.gs
contactForm.gs
Contiene los widgets que reciben datos de formularios de los usuarios. Estos widgets de entrada de formularios se muestran en tarjetas que aparecen en mensajes y diálogos.
Ver código
contactForm.gs
appsscript.json
El manifiesto de Apps Script que define y configura el proyecto de Apps Script para la app de Chat
Ver código
appsscript.json
Busca el número y el ID de tu proyecto de Cloud
En la consola de Google Cloud, ve a tu proyecto de Cloud.
Haz clic en Configuración y utilidades > Configuración del proyecto.
Anota los valores de los campos Número de proyecto y ID de proyecto. Los usarás en las siguientes secciones.
Crea el proyecto de Apps Script
Para crear un proyecto de Apps Script y conectarlo con tu proyecto de Cloud, haz lo siguiente:
- Haz clic en el siguiente botón para abrir el proyecto de Apps Script Administrar contactos en Google Chat.
Abrir el proyecto - Haz clic en Descripción general.
- En la página de descripción general, haz clic en Crear una copia.
Asigna un nombre a tu copia del proyecto de Apps Script:
Haz clic en Copia de Administrar contactos en Google Chat.
En Título del proyecto, escribe
Contact Manager - Google Chat app
.Haga clic en Cambiar nombre.
Configura el proyecto de Cloud del proyecto de Apps Script
- En tu proyecto de Apps Script, haz clic en Configuración del proyecto.
- En Proyecto de Google Cloud Platform (GCP), haz clic en Cambiar proyecto.
- En Número de proyecto de GCP, pega el número de proyecto de tu proyecto de Cloud.
- Haz clic en Establecer el proyecto. El proyecto de Cloud y el proyecto de Apps Script ahora están conectados.
Crea una implementación de Apps Script
Ahora que todo el código está en su lugar, implementa el proyecto de Apps Script. Usas el ID de implementación cuando configuras la app de Chat en Google Cloud.
En Apps Script, abre el proyecto de la app de Chat.
Haz clic en Implementar > Nueva implementación.
Si aún no se seleccionó Complemento, junto a Seleccionar tipo, haz clic en Tipos de implementación y selecciona Complemento.
En Descripción, ingresa una descripción para esta versión, como
Test of Contact Manager
.Haz clic en Implementar. Apps Script informa que la implementación se realizó correctamente y proporciona un ID de implementación.
Haz clic en
Copiar para copiar el ID de implementación y, luego, en Listo.
Configura la app de Chat en la consola de Google Cloud
En esta sección, se muestra cómo configurar la API de Google Chat en la consola de Google Cloud con información sobre tu app de Chat, incluido el ID de la implementación que acabas de crear desde tu proyecto de Apps Script.
En la consola de Google Cloud, haz clic en Menú > Más productos > Google Workspace > Biblioteca de productos > API de Google Chat > Administrar > Configuración.
En Nombre de la app, escribe
Contact Manager
.En URL del avatar, escribe
https://developers.google.com/chat/images/contact-icon.png
.En Description, escribe
Manage your personal and business contacts
.Haz clic en el botón de activación Enable Interactive features.
En Funcionalidad, selecciona las casillas de verificación Recibir mensajes 1:1 y Unirse a espacios y conversaciones grupales.
En Configuración de conexión, selecciona Apps Script.
En ID de implementación, pega el ID de implementación de Apps Script que copiaste en la sección anterior cuando creaste la implementación de Apps Script.
En Comandos de barra, configura los comandos de barra
/about
y/addContact
:- Haz clic en Agregar un comando de barra para configurar el primer comando de barra.
- En Nombre, escribe
/about
. - En ID de comando, escribe
1
. - En Descripción, escribe
Learn how to use this Chat app to manage your contacts
. - Selecciona Abrir un diálogo.
- Haz clic en Listo.
- Haz clic en Agregar un comando de barra para configurar otro comando de barra.
- En Name, escribe
/addContact
. - En ID de comando, escribe
2
. - En Description, escribe
Submit information about a contact
. - Selecciona Abrir un diálogo.
- Haz clic en Listo.
En Visibilidad, selecciona la casilla de verificación Hacer que esta app de Chat esté disponible para personas y grupos específicos de YOUR DOMAIN y escribe tu dirección de correo electrónico.
En Registros, selecciona Registrar errores en Logging.
Haz clic en Guardar. Aparecerá un mensaje de configuración guardada.
La app de Chat está lista para instalarse y probarse en Chat.
Prueba la app de Chat
Para probar tu app de Chat, abre un espacio de mensajes directos con la app de Chat y envía un mensaje:
Abre Google Chat con la cuenta de Google Workspace que proporcionaste cuando te agregaste como verificador de confianza.
- Haz clic en Nuevo chat.
- En el campo Add 1 or more people, escribe el nombre de tu app de Chat.
Selecciona tu app de Chat en los resultados. Se abrirá un mensaje directo.
En el nuevo mensaje directo con la app de Chat, escribe
/addContact
y presiona Intro.En el diálogo que se abre, ingresa la información de contacto:
- En el campo de texto Nombre y apellido, ingresa un nombre.
- En el selector de fecha Fecha de nacimiento, selecciona una fecha.
- En Tipo de contacto, selecciona el botón de selección Trabajo o Personal.
Haz clic en Revisar y enviar.
En el diálogo de confirmación, revisa la información que enviaste y haz clic en Enviar. La app de Chat responde con un mensaje de texto que dice
✅ CONTACT NAME has been added to your contacts.
.De manera opcional, también puedes probar y enviar el formulario de contacto de las siguientes maneras:
- Usa el comando de barra
/about
. La app de Chat responde con un mensaje de texto y un botón de widget complementario que diceAdd a contact
. Puedes hacer clic en el botón para abrir un diálogo con el formulario de contacto. - Envía un mensaje directo a la app de Chat sin un comando de barra, como
Hello
. La app de Chat responde con un texto y una tarjeta que contiene el formulario de contacto.
- Usa el comando de barra
Limpia
Para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que se usaron en este instructivo, te recomendamos borrar el proyecto de Cloud.
- En la consola de Google Cloud, ve a la página Administrar recursos. Haz clic en Menú > IAM y administración > Administrar recursos.
- En la lista de proyectos, selecciona el proyecto que deseas borrar y haz clic en Borrar .
- En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
Temas relacionados
- Cómo responder a los comandos de barra
- Recopila y procesa información de los usuarios de Google Chat
- Abrir diálogos interactivos
- Explora otras muestras de apps de Google Chat