Compila una app de Google Chat para Dialogflow CX que comprenda y responda con lenguaje natural

En esta página, se explica cómo compilar una app de Google Chat que pueda comprender y responder con lenguaje natural con Dialogflow. En esta guía, se usa Dialogflow CX, que tiene una integración directa con Google Chat. También puedes usar Dialogflow ES para compilar una app de Google Chat de Dialogflow ES. Para ello, sigue la guía de Google Chat de Dialogflow ES.

Por ejemplo, piensa en una app de Chat que ayude a las personas a alquilar vehículos. Un usuario podría escribir “Me gustaría alquilar un automóvil”. La app de Chat podría responder con una pregunta como "¿Dónde te gustaría retirar el vehículo?", que inicia una conversación similar a la de un ser humano con el usuario en la que la app de Chat comprende y responde con voz humana mientras reserva el alquiler de automóvil.

Este es solo un ejemplo. Las apps de Dialogflow Chat son útiles para todo tipo de interacciones. Si requiere voz humana natural, se requiere una app de Dialogflow Chat. Los agentes compilados previamente te ayudan a comenzar rápidamente y a mostrar lo que puede hacer Dialogflow, como lo siguiente:

• Reservar vuelos
• Programar citas médicas
• Pedir comida a domicilio
• Responder preguntas sobre un catálogo de productos de venta minorista, como si los artículos están disponibles en otros colores

Objetivos

• Configura el entorno.
• Crea e implementa un agente de Dialogflow CX.
• Crea e implementa una app de chat con el agente de Dialogflow CX.
• Prueba la app de Chat.

Requisitos previos

• Una cuenta de Google Workspace para empresas o empresas con acceso a Google Chat
• Un proyecto de Google Cloud con facturación habilitada. Para verificar que un proyecto existente tenga habilitada la facturación, consulta Verifica el estado de facturación de tus proyectos. Para crear un proyecto y configurar la facturación, consulta Crea un proyecto de Google Cloud.

Arquitectura

En el siguiente diagrama, se muestra la arquitectura de una app de chat compilada con Dialogflow:

En el diagrama anterior, un usuario que interactúa con una app de chat de Dialogflow tiene el siguiente flujo de información:

1. Un usuario envía un mensaje en Chat a una app de Chat, ya sea en un mensaje directo o en un espacio de Chat.
2. Un agente virtual de Dialogflow, que reside en Google Cloud, recibe y procesa el mensaje para generar una respuesta.
3. De forma opcional, con un webhook de Dialogflow, el agente de Dialogflow puede interactuar con servicios externos de terceros, como un sistema de administración de proyectos o una herramienta de generación de tickets.
4. El agente de Dialogflow envía una respuesta al servicio de la app de Chat en Chat.
5. La respuesta se entrega al espacio de Chat.

Configura el entorno

1. En la consola de Google Cloud, habilita la API de Google Chat y la API de Dialogflow.

   Habilitar las API

2. Confirma que estás habilitando las APIs en el proyecto de Cloud correcto y, luego, haz clic en Siguiente.

3. Confirma que estás habilitando las APIs correctas y, luego, haz clic en Habilitar.

Crear un agente de Dialogflow CX

Un agente de Dialogflow CX es un agente virtual que controla las conversaciones simultáneas con tus usuarios finales. Es un módulo de comprensión del lenguaje natural que comprende los matices del lenguaje humano. Dialogflow traduce el texto del usuario final durante una conversación a datos estructurados que tus apps y servicios pueden comprender. Cada agente de Dialogflow debe diseñarse y crearse para manejar los tipos de conversaciones que requiera el sistema en el que se va a utilizar.

Un agente de Dialogflow es como un agente humano de un centro de llamadas. Al igual que este, necesita que se lo entrene para manejar las situaciones de conversación previstas, pero no hace falta que el entrenamiento sea demasiado explícito.

Sigue estos pasos para crear el agente de Dialogflow CX:

1. En la consola de Dialogflow CX, abre la consola de Dialogflow CX. Haz clic en Menú menu > Dialogflow CX.

   Ve a la consola de Dialogflow CX

2. Elige un proyecto de Google Cloud. Para encontrar tu proyecto, es posible que debas hacer clic en Todos y, luego, buscarlo.

3. Ahora tienes la opción de elegir un agente precompilado o crear uno propio. Si prefieres explorar la personalización de agentes en detalle más adelante, elige uno de los agentes precompilados, que también son útiles para aprender sobre lo que pueden hacer los agentes.

   Para elegir un agente compilado previamente, sigue estos pasos:

   1. Haz clic en Usa agentes compilados con anterioridad.

   2. Selecciona un agente precompilado. Para esta guía, selecciona Viajes: alquiler de automóviles.

      Los agentes se clasifican como principiantes, medianos o avanzados según la cantidad de funciones que usan y la sofisticación de su lógica de conversación. Elegir un agente Intermedio o Avanzado puede requerir personalizaciones y parámetros de configuración específicos del agente, lo que incluye habilitar funciones y APIs en la consola de Google Cloud.

   3. Haz clic en Importar como agente.

   Para crear tu propio agente, sigue estos pasos:

   1. Haz clic en Create Agent.
   2. Selecciona Generar automáticamente para crear un agente de almacén de datos o Crea tu propio agente para crear otros tipos de agentes.

   Para obtener una explicación detallada del proceso de compilación del agente, consulta Cómo crear un agente de Dialogflow CX.

4. Configura la configuración básica del agente:

   1. En Nombre visible, ingresa un nombre visible.
   2. Selecciona tu ubicación preferida. Si quieres cambiar la configuración de la ubicación avanzada, haz clic en Editar.
   3. Selecciona tu zona horaria preferida.
   4. Selecciona el idioma predeterminado para tu agente. No puedes cambiar el idioma predeterminado de un agente después de crearlo.

5. Haz clic en Crear. Dialogflow CX comienza a crear el agente y, luego, muestra el flujo de inicio predeterminado del agente.

6. De manera opcional, puedes personalizar el agente. Para obtener una explicación detallada del proceso de personalización del agente, consulta Cómo crear un agente de Dialogflow CX.

7. Como práctica recomendada, prueba el agente:

   1. Haz clic en Test agent.
   2. Selecciona Probar agente en el entorno.
   3. En Entorno, selecciona Borrador.
   4. En Flujo, selecciona Flujo de inicio predeterminado.
   5. En Página, selecciona Página principal.
   6. En la barra de redacción Hablar con un agente, escribe Hello y presiona Intro. El agente se presenta.
   7. Para completar la prueba, realiza la conversación de prueba de muestra.

8. Se crea el agente de Dialogflow CX. Regresa a la consola de Dialogflow CX. Haz clic en Menú menu > Dialogflow CX.

   Ve a la consola de Dialogflow CX.

9. En Agentes, haz clic en more_vert > Copiar nombre. Guarda este nombre, ya que lo usarás cuando configures la app de Chat.

Crea una app de chat y conéctala con el agente de Dialogflow

Después de crear un agente de Dialogflow CX, sigue estos pasos para convertirlo en una app de chat:

1. En la consola de Google Cloud, ve a la API de Google Chat. Busca “API de Google Chat” y haz clic en API de Google Chat. Luego, haz clic en Administrar.

   Ir a la API de Chat

2. Haz clic en Configuración y configura la app de Chat:

   1. En Nombre de la app, ingresa Dialogflow App.
   2. En URL del avatar, ingresa https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png.
   3. En Descripción, ingresa Responds to real human conversation.
   4. En Funcionalidad, selecciona Recibir mensajes 1:1 y Unirse a espacios y conversaciones grupales.
   5. En Configuración de conexión, selecciona Dialogflow.
   6. En Configuración de Dialogflow, selecciona Dialogflow CX.
   7. En Nombre del recurso del agente o entorno, pega el nombre del agente de Dialogflow CX que copiaste al final de Crea un agente de Dialogflow CX.
   8. Haz que esta app de Chat esté disponible para personas y grupos específicos de tu dominio y, luego, ingresa tu dirección de correo electrónico.
   9. En Registros, selecciona Registrar errores en Logging.

3. Haz clic en Guardar.

La app de Chat está lista para recibir y responder mensajes en Chat.

Prueba la app de Chat

Para probar la app de chat de Dialogflow CX, envíale un mensaje en Google Chat.

1. Abre Google Chat con la cuenta de Google Workspace que proporcionaste cuando te agregaste como verificador de confianza.

   Ve a Google Chat

2. Haz clic en add Nuevo chat.
3. En el campo Agregar 1 o más personas, escribe el nombre de tu app de Chat.

4. Selecciona tu app de Chat en los resultados. Se abrirá un mensaje directo.

5. En el nuevo mensaje directo con la app, escribe Hello y presiona enter.

   La app de Dialogflow Chat se presenta como respuesta.

6. Para completar la prueba, realiza la conversación de prueba de muestra.

Ejemplo de conversación de prueba

Para probar la app de Dialogflow CX Chat en la consola de Dialogflow CX o en Google Chat, ten la siguiente conversación. La explicación te ayuda a comprender cómo el agente de Dialogflow CX interpreta el lenguaje natural del usuario y produce su propia respuesta en cada paso de la conversación. Esta conversación de ejemplo se basa en el agente precompilado llamado Viajes: alquiler de automóviles.

Cómo enviar mensajes de tarjetas desde Dialogflow

Dialogflow puede responder con mensajes de texto o tarjeta. Para responder con un mensaje de tarjeta, especifícalo como una carga útil personalizada en entrega.

En el siguiente JSON, se muestra cómo enviar un mensaje de tarjeta como una carga útil personalizada en la entrega:

{
  'cardsV2': [{
    'cardId': 'createCardMessage',
    'card': {
      'header': {
        'title': 'A card message!',
        'subtitle': 'Sent from Dialogflow',
        'imageUrl': 'https://developers.google.com/chat/images/chat-product-icon.png',
        'imageType': 'CIRCLE'
      },
      'sections': [
        {
          'widgets': [
            {
              'buttonList': {
                'buttons': [
                  {
                    'text': 'Read the docs!',
                    'onClick': {
                      'openLink': {
                        'url': 'https://developers.google.com/workspace/chat'
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }]
}

Límites y consideraciones

• Los eventos de interacción por chat tienen compatibilidad limitada y algunas consideraciones:
  • Se admiten los siguientes tipos de eventos de interacción:
    • MESSAGE
    • ADDED_TO_SPACE
    • CARD_CLICKED
  • En el caso de los eventos MESSAGE o ADDED_TO_SPACE, la entrada de consulta que se envía al agente de Dialogflow corresponde al valor del campo argumentText en el mensaje de chat. Si el mensaje incluye un comando de barra, se usa el valor del campo text.
  • En el caso de los eventos CARD_CLICKED, la entrada de consulta que se envía al agente de Dialogflow tiene el formato CARD_CLICKED.functionName, donde functionName corresponde al valor del campo function del objeto Action adjunto al elemento de tarjeta interactiva (como un botón).
  • La carga útil de JSON completa de cada evento de interacción de chat se envía a Dialogflow como una carga útil personalizada en el parámetro de consulta y se puede acceder a ella con un webhook de Dialogflow mediante la consulta del valor del campo WebhookRequest.payload.
• Consideraciones para responder a comandos de barra y recibir datos de tarjetas o diálogos:
  • Cuando las apps de Dialogflow Chat reciben un mensaje con un comando de barra, la entrada de consulta solo contiene el valor del campo text. El campo text comienza con el nombre del comando de barra (por ejemplo, /command), que puedes usar para configurar el intent de un agente de Dialogflow para detectar un comando de barra.
  • Si el agente de Dialogflow necesita procesar la carga útil de JSON del evento de interacción por chat, puede hacerlo con un webhook de Dialogflow para inspeccionar la carga útil personalizada en el parámetro de consulta.
  • Para mostrar un diálogo desde el agente de Dialogflow, responde con una sola carga útil de JSON personalizada que incluya un mensaje que contenga una respuesta de acción DIALOG.
  • Para procesar los datos ingresados desde las tarjetas, el agente de Dialogflow puede detectar intents que comienzan con el texto CARD_CLICKED y responder con una sola carga útil de JSON personalizada que contenga la acción adecuada.
• No se admiten las vistas previas de vínculos.
• Si el agente de Dialogflow responde con un solo mensaje, este se envía a Google Chat de forma síncrona. Si el agente de Dialogflow responde con varios mensajes, todos se envían a Chat de forma asíncrona llamando al método create en el recurso spaces.messages de la API de Chat una vez por cada mensaje.
• Cuando se usa la integración de Dialogflow CX con Chat, el agente de Dialogflow y la app de Chat se deben configurar en el mismo proyecto de Google Cloud. Si necesitas configurar Dialogflow y Chat en diferentes proyectos de Cloud, puedes configurar un servidor intermedio para facilitar la conexión. Para obtener más información, consulta este ejemplo de integración de chat para Dialogflow CX en GitHub.

Solucionar problemas

Cuando una app de Google Chat o una tarjeta muestran un error, la interfaz de Chat muestra un mensaje que dice "Se produjo un error". o "No se puede procesar tu solicitud". A veces, la IU de Chat no muestra ningún mensaje de error, pero la app o la tarjeta de Chat producen un resultado inesperado. Por ejemplo, es posible que no aparezca un mensaje de la tarjeta.

Aunque es posible que no se muestre un mensaje de error en la IU de Chat, los mensajes de error descriptivos y los datos de registro están disponibles para ayudarte a corregir errores cuando se activa el registro de errores de las apps de Chat. Si necesitas ayuda para ver, depurar y corregir errores, consulta Cómo solucionar problemas y corregir errores de Google Chat.

Limpia

Para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este instructivo, te recomendamos que borres el proyecto de Cloud.

1. En la consola de Google Cloud, ve a la página Administrar recursos. Haz clic en Menú menu > IAM y administración > Administrar recursos.

   Ve al Administrador de recursos.

2. En la lista de proyectos, selecciona el proyecto que deseas borrar y haz clic en Borrar delete.
3. En el cuadro de diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.

Temas relacionados

• Dialogflow CX adopta un enfoque de máquina de estados para el diseño de agentes de Dialogflow, lo que te brinda un control claro y explícito sobre una conversación, una mejor experiencia del usuario final y un mejor flujo de trabajo de desarrollo. Cuando compilas una app de Dialogflow Chat, te recomendamos usar Dialogflow CX.
  • Para obtener más información sobre la compilación y configuración de agentes, consulta Agentes de Dialogflow CX.
  • Para obtener una explicación detallada sobre cómo compilar y configurar agentes, consulta Cómo crear un agente de Dialogflow CX.
  • code Codelab: Para ver un ejemplo de cómo compilar un agente de almacén de datos de Dialogflow CX, consulta la app de Knowledge Chat del codelab Crea apps para Google Chat con Gemini.
  • code Codelab: Para ver un ejemplo de cómo compilar un agente de conversación de Dialogflow CX, consulta la app de Chat de comentarios del codelab Compila apps para Google Chat con Gemini.
• Dialogflow ES es otra forma de usar Dialogflow con una app de chat.