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 en 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 basada en Dialogflow ES siguiendo 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 quieres retirar el vehículo?", lo que inicia una conversación similar a la humana 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 Chat de Dialogflow son útiles en todo tipo de interacciones. Si requiere voz humana natural, se necesita una app de chat de Dialogflow. Los agentes compilados previamente te ayudan a comenzar rápidamente y muestran lo que Dialogflow puede hacer, como lo siguiente:

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

• 

  Figura 1: Selecciona un agente precompilado para una app de chat de Dialogflow.

• 
  Figura 2: Probar el agente en Dialogflow CX para asegurarse de que la lógica y la configuración del agente funcionen según lo previsto El diagrama muestra un conjunto secuencial de páginas temáticas que se relacionan con pasos específicos de la conversación, como establecer una ubicación de retiro y devolución para un automóvil de alquiler, y configura la lógica que las conecta. La conversación se prueba en un simulador.
• 
  Figura 3: Configura una app de Chat para procesar respuestas con el agente de Dialogflow CX en la página de configuración de la API de Chat en la consola de Google Cloud.
• 
  Figura 4: Tener una conversación sobre la reserva de un auto de alquiler con la app de Dialogflow Chat en Google Chat

Objetivos

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

Requisitos previos

• Una cuenta de Google Workspace para empresas o Enterprise 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 creada 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 producir una respuesta.
3. De manera 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 tickets.
4. El agente de Dialogflow envía una respuesta al servicio de la app de Chat en Chat.
5. La respuesta se entrega en el espacio de Chat.

Configura el entorno

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.

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

   Habilitar las API

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

3. Confirma que habilitarás 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 maneja conversaciones simultáneas con tus usuarios finales. Es un módulo de comprensión del lenguaje natural que entiende 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. Diseña y crea un agente de Dialogflow para manejar los tipos de conversaciones que requiere tu sistema.

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ú > Dialogflow CX.

   Ir 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 prediseñado o crear el tuyo propio. Si prefieres explorar la personalización de agentes en detalle más adelante, elige uno de los agentes prediseñados, 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 Usar 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, intermedios 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, incluida la habilitación de 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 selecciona Crea tu propio para crear otros tipos de agentes.

   Para obtener una guía detallada del proceso de creación de agentes, consulta Crea un agente de Dialogflow CX.

4. Configura los parámetros básicos del agente:

   1. En Nombre visible, ingresa un nombre visible.
   2. Selecciona tu ubicación preferida. Si deseas cambiar la configuración de 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, personaliza el agente. Para obtener una guía detallada sobre el proceso de personalización del agente, consulta Crea un agente de Dialogflow CX.

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

   1. Haz clic en Test agent.
   2. Selecciona Probar el agente en el entorno.
   3. En Entorno, selecciona Borrador.
   4. En Flow, selecciona Flujo de inicio predeterminado.
   5. En Page, selecciona Start Page.
   6. En la barra de redacción Habla con el agente, escribe Hello y presiona Intro. El agente responde presentándose.
   7. Completa la prueba con la conversación de prueba de muestra.

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

   Ir a la consola de Dialogflow CX

9. En Agentes, haz clic en > 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”, haz clic en API de Google Chat y, luego, 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 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. Hacer que esta app de Chat esté disponible para personas y grupos específicos de tu dominio y escribir 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

Prueba la app de chat de Dialogflow CX enviándole mensajes en Google Chat.

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

   Ir a Google Chat

2. Haz clic en Nuevo chat.
3. En el campo Agrega 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.

   Nota: Si no ves tu app de Chat en la lista de resultados, asegúrate de haber incluido tu cuenta de Google Workspace en la configuración de Visibilidad de la página de Configuración de la API de Chat en la consola de Google Cloud.

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

   La app de chat de Dialogflow responde presentándose.

6. Completa la prueba con la conversación de prueba de muestra.

Conversación de prueba de ejemplo

Para probar la app de chat de Dialogflow CX en la consola de Dialogflow CX o en Google Chat, mantén 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 lenguaje natural en cada paso de la conversación. Esta conversación de muestra se basa en el agente prediseñado llamado Viajes: alquiler de automóviles.

Diálogo	Explicación
Usuario final: Hola Agente: ¡Hola! Soy el agente virtual de alquiler de automóviles. Puedo ayudarte a iniciar una nueva reserva de alquiler de automóviles. ¿En qué puedo ayudarte?	Se llama a la ruta del intent de bienvenida predeterminado en el flujo de inicio predeterminado. La entrega para este controlador de estado ("Hola. Soy…"). se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: Me gustaría alquilar un auto. Agente: ¿Dónde desea recoger el vehículo?	Se encuentra la ruta del intent car_rental.reservation_create en la página de inicio. La sesión pasa a la página Ubicación de recogida. El formulario de la página Ubicación de retiro no está completo, por lo que el agente usa el parámetro pickup_location para solicitarle al usuario ("¿Dónde quieres retirar…"). que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: Las Vegas Agente: De acuerdo. La entrega se realizará en Las Vegas. Agente: ¿La ubicación de destino es diferente de la ubicación de retiro?	La entrada del usuario final completa el parámetro pickup_location que solicitó el agente en el turno de la conversación anterior. Se encuentra una coincidencia con la ruta del intent car_rental.return_different_location en el flujo de inicio predeterminado. La ruta de finalización del formulario de la página de Ubicación de retiro se evalúa y se llama. Tiene una entrega ("De acuerdo, tu retiro…"), que se agrega a la cola de respuestas con las referencias del parámetro resueltas con los valores reales que proporcionó el usuario final. La sesión pasa a la página Confirm Location. La página Confirmar ubicación tiene una entrega de entrada (“¿Tu ubicación de entrega es diferente…?”), que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: Sí. Dejaré el auto en Los Ángeles. Agente: De acuerdo, dejarás el vehículo en Los Ángeles. Agente: ¿Qué fecha y hora te gustaría retirar el vehículo?	Se encuentra una coincidencia con la ruta del intent car_rental.return_different_location en el flujo de inicio predeterminado. La sesión pasa a la página Ubicación de destino. La entrada del usuario final completa el parámetro drop_off_location que solicitó el agente en el turno de la conversación anterior. La ruta de finalización del formulario de la página de ubicación de entrega se evalúa y se llama. Tiene una entrega (“De acuerdo, tu entrega…”), que se agrega a la cola de respuestas. La sesión pasa a la página Duración del alquiler. La página Duración del alquiler tiene valores de formulario incompletos, por lo que solicita al usuario el parámetro pickup_date_time ("¿Qué fecha y hora le gustaría retirar…?"). que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: Me gustaría retirar el automóvil el 5 de marzo a las 12 p.m. Agente: ¿Qué fecha y hora te gustaría dejar el vehículo?	La entrada del usuario final completa el parámetro pickup_date_time que solicitó el agente en el turno de la conversación anterior. La página Rental Duration tiene otro valor de formulario faltante, por lo que le solicita al usuario el parámetro drop_off_date_time ("¿Qué fecha y hora le gustaría devolver el vehículo…?"). que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: 15 de marzo a las 12 p.m. Agente: Entonces, para confirmar: Retirarás el vehículo en Las Vegas el 2024-03-05 a las 12:00:00 y lo dejarás en Los Ángeles el 2024-03-15 a las 12:00:00 ¿Es correcto?	La entrada del usuario final completa el parámetro drop_off_date_time que solicitó el agente en el turno de la conversación anterior. La sesión pasa a la página Confirm Rental Duration. La página Confirmar duración del alquiler tiene una entrega de entrada (“Entonces, para confirmar…”), que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: Sí, gracias. Agente: ¡Excelente! Ahora elijamos un vehículo. Agente: ¿Quieres un vehículo económico o de lujo?	Se coincide con la ruta del intent small_talk.confirmation.yes en la página Confirm Rental Duration. El agente confirma la elección del usuario con un mensaje ("¡Excelente! Ahora, elijamos…"), que se agrega a la cola de respuestas. La sesión pasa a la página Desambiguación de vehículos. El formulario de la página Desambiguación de vehículos no está completo, por lo que el agente usa el parámetro vehicle_type para solicitarle al usuario ("¿Desea un vehículo económico o de lujo…?"). que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: En clase económica, por favor. Agente: ¿Quieres el Cymbal Car o el Cymbal Truck?	Se detecta la coincidencia con la ruta del intent $session.params.vehicle_type="economy_vehicle". La sesión pasa a la página Opciones de economía. La página Opciones de economía tiene una entrega de entrada (“¿Te gustaría…?”), que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final.
Usuario final: Cymbal Truck. Agente: El camión de Cymbal cuesta USD 50.33 por día. Tiene capacidad para 4 personas y cuenta con una radio AM/FM. ¿Quieres continuar con el pago? Usuario final: Sí, por favor.	La ruta de intent $session.params.vehicle_type="Cymbal Truck" coincide y se completa el parámetro vehicle_model. La sesión pasa a la página Confirmar Cymbal Truck. La página Confirmar camión Cymbal tiene una entrega de entrada (“El camión Cymbal cuesta USD 50.33 por día…”) que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final. La respuesta del usuario coincide con la ruta small_talk.confirmation.yes.
Agente: ¿Qué tipo de tarjeta usarás? Usuario final: Altostrat Agente: Ingresa el número de la tarjeta. Usuario final: 1234 1234 1234 1234 Agente: ¿Cuál es el nombre que aparece en la tarjeta? Usuario final: Charlie Agente: ¿Cuál es la dirección de facturación? Usuario final: 1800 Amphibious Blvd., Mountain View, CA Agente: ¿Cuál es el código postal de facturación? Usuario final: 94045 Agente: Recogerás el Cymbal Car en Las Vegas el 2024-03-05 a las 12:00:00 y lo dejarás el 2024-03-15 a las 12:00:00. El total de este viaje será de USD 175.38. Agente: Gracias por alquilar con nosotros. ¡Que tengas un excelente día!	La sesión pasa a la página Pago. El formulario Payment no está completo, por lo que el agente le solicita al usuario los parámetros card_type, card_number, billing_name, billing_street_address y billing_zip_code ("¿Qué tipo de tarjeta…"). que se agregan de forma secuencial a la cola de respuestas y se envían a medida que el usuario responde. Las respuestas del usuario establecen cada valor del parámetro. La sesión pasa a la página de confirmación de alquiler. La página de confirmación de alquiler tiene una entrega de entrada (“De acuerdo, tu retiro será…”), que se agrega a la cola de respuestas. El agente envía la cola de respuestas al usuario final. La sesión pasa a la página End Session.

Envía mensajes de tarjetas desde Dialogflow

Codelab: Para ver un ejemplo aplicado del envío de mensajes de tarjetas desde Dialogflow, consulta Cómo mostrar fuentes en las respuestas de la app de chat de conocimiento en el codelab Compila apps para Google Chat con Gemini.

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

El siguiente JSON muestra cómo enviar un mensaje de tarjeta como carga útil personalizada en el cumplimiento:

json

{
  '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 de chat tienen asistencia 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 la búsqueda 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 la búsqueda que se envía al agente de Dialogflow se formatea como 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 consultando el valor del campo WebhookRequest.payload.
• Consideraciones para responder a comandos de barra y recibir datos de tarjetas o diálogos:
  • Cuando las apps de chat de Dialogflow reciben un mensaje con un comando de barra, la entrada de la 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 la intención de un agente de Dialogflow para detectar un comando de barra.
  • Si el agente de Dialogflow necesita procesar la carga útil JSON del evento de interacción de 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 DIALOG respuesta de acción.
  • 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 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 los mensajes 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 deben configurarse 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 en Dialogflow CX en GitHub.

Solucionar problemas

Cuando una app o una tarjeta de Google Chat muestra un error, la interfaz de Chat muestra un mensaje que dice "Se produjo un error". o "No se pudo 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.

Si bien es posible que no se muestre un mensaje de error en la IU de Chat, hay mensajes de error descriptivos y datos de registro disponibles para ayudarte a corregir errores cuando se activa el registro de errores para las apps de Chat. Para obtener ayuda para ver, depurar y corregir errores, consulta Soluciona y corrige 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.

Precaución: Borrar un proyecto tiene las siguientes consecuencias:

• Se borra todo en el proyecto. Si utilizaste un proyecto existente para este instructivo, cuando lo borres, también borrarás cualquier otro trabajo que hayas realizado en el proyecto.
• Se pierden los ID personalizados de proyectos. Cuando creaste este proyecto, es posible que hayas creado un ID del proyecto personalizado que desees utilizar en el futuro. Para conservar las URLs que utilizan el ID del proyecto, como una URL en appspot.com, borra los recursos seleccionados dentro del proyecto en lugar de todo el proyecto.

Si planeas explorar varios instructivos y guías de inicio rápido, la reutilización de proyectos puede ayudarte a evitar exceder los límites de las cuotas del proyecto.

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

   Ir al administrador de recursos

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

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 compiles una app de Chat de Dialogflow, te recomendamos que uses Dialogflow CX.
  • Para obtener más información sobre cómo compilar y configurar agentes, consulta Agentes de Dialogflow CX.
  • Para obtener una guía detallada que te indique cómo compilar y configurar agentes, consulta Crea un agente de Dialogflow CX.
  • Codelab: Para ver un ejemplo de cómo compilar un agente de almacén de datos de Dialogflow CX, consulta la app de chat de conocimiento del codelab Compila apps para Google Chat con Gemini.
  • Codelab: Para ver un ejemplo de cómo compilar un agente conversacional 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.