Criar um app do Google Chat para Dialogflow CX que entende e responde com linguagem natural

Nesta página, explicamos como criar um app do Google Chat que pode entender e responder com linguagem natural usando o Dialogflow. Este guia usa o Dialogflow CX, que tem uma integração direta com o Google Chat disponível na prévia para desenvolvedores. Também é possível usar o Dialogflow ES para criar um aplicativo do Dialogflow ES para o Google Chat seguindo o guia do Google Chat do Dialogflow ES.

Por exemplo, considere um app de chat que ajuda as pessoas a alugar carros. Um usuário pode escrever "Eu gostaria de alugar um carro". O app do Chat pode responder com uma pergunta como "Onde você quer pegar o veículo?", que inicia uma conversa semelhante à pessoa com o usuário em que o app entende e responde com fala humana durante a reserva do aluguel do carro.

Esse é apenas um exemplo. Os aplicativos do Dialogflow Chat são úteis em todos os tipos de interação. Se ele exigir fala humana natural, ele chamará um aplicativo do Dialogflow Chat. Os agentes pré-criados ajudam você a começar rapidamente e mostram o que o Dialogflow pode fazer, por exemplo:

  • Reservar voos
  • Agendar consultas médicas
  • Peça comida para entrega
  • Responder perguntas sobre um catálogo de produtos de varejo, como se os itens estão disponíveis em outras cores
  • A página pré-criada de seleção de agentes do Dialogflow.
    Figura 1. Como selecionar um agente pré-criado para um app do Dialogflow Chat.
  • testar o agente no Dialogflow CX.
    Figura 2. Testar o agente no Dialogflow CX para garantir que a lógica e a configuração do agente funcionem conforme o esperado. O diagrama mostra um conjunto sequencial de páginas temáticas que dizem respeito a etapas específicas da conversa, como definir um local de embarque e devolução de um carro alugado, e configura a lógica que os conecta. A conversa é testada em um simulador.
  • configurar um app do Dialogflow Chat;
    Figura 3. Configurar um app do Chat para processar respostas usando o agente Dialogflow CX na página de configuração da API Chat no console do Google Cloud.
  • Como testar o app de chat do Dialogflow CX
    Figura 4. Como conversar sobre a reserva de aluguel de carros com o app Dialogflow Chat no Google Chat.

Objetivos

  • Configurar o ambiente.
  • Criar e implantar um agente do Dialogflow CX.
  • Crie e implante um app do Chat com a tecnologia do agente do Dialogflow CX.
  • Testar o app do Chat.

Pré-requisitos

Arquitetura

No diagrama a seguir, mostramos a arquitetura de um app do Chat criado com o Dialogflow:

Arquitetura de um app do Chat implementado com o Dialogflow.

No diagrama anterior, um usuário interagindo com um app do Dialogflow Chat tem o seguinte fluxo de informações:

  1. Um usuário envia uma mensagem no Chat para um app do Chat, seja em uma mensagem direta ou em um espaço do Chat.
  2. Um agente virtual do Dialogflow, que fica no Google Cloud, recebe e processa a mensagem para produzir uma resposta.
  3. Opcionalmente, usando um webhook do Dialogflow, o agente do Dialogflow pode interagir com serviços externos de terceiros, como um sistema de gerenciamento de projetos ou uma ferramenta de criação de tíquetes.
  4. O agente do Dialogflow envia uma resposta de volta ao serviço do app do Chat no Chat.
  5. A resposta é entregue ao espaço do Chat.

configurar o ambiente

Antes de usar as APIs do Google, é preciso ativá-las em um projeto do Google Cloud. É possível ativar uma ou mais APIs em um único projeto do Google Cloud.
  1. No console do Google Cloud, ative as APIs Google Chat e Dialogflow.

    Ativar as APIs

  2. Confirme se você está ativando as APIs no projeto correto do Cloud e clique em Próxima.

  3. Confirme se você ativou as APIs corretas e clique em Ativar.

Criar um agente do Dialogflow CX

O agente do Dialogflow CX é um agente virtual que lida com conversas simultâneas com seus usuários finais. Ele é um módulo de compreensão de linguagem natural que entende as nuances da linguagem humana. O Dialogflow converte textos do usuário final durante uma conversa em dados estruturados que seus aplicativos e serviços podem entender. Você projeta e cria um agente do Dialogflow para lidar com os tipos de conversas necessárias para seu sistema.

Um agente do Dialogflow é como um agente humano de call center. O agente pode ser treinado para lidar com os cenários de conversa esperados, e o treinamento não precisa ser muito explícito.

Confira como criar o agente do Dialogflow CX:

  1. No console do Dialogflow CX, abra o console do Dialogflow CX. Clique em Menu > Dialogflow CX.

    Acessar o console do Dialogflow CX

  2. Escolha um projeto do Google Cloud. Para encontrar o projeto, talvez seja necessário clicar em All e pesquisar por ele.

  3. Agora você tem a opção de escolher um agente pré-criado ou criar o seu. Se você preferir explorar a personalização do agente em detalhes mais tarde, escolha um dos agentes pré-criados, que também são úteis para saber mais sobre o que os agentes podem fazer.

    Para escolher um agente pré-criado, siga estas etapas:

    1. Clique em Usar agentes pré-criados.
    2. Selecione um agente pré-criado. Para este guia, selecione Viagens: aluguel de carros.

      Os agentes são classificados como iniciantes, intermediários ou avançados com base na quantidade de recursos que eles usam e na sofisticação da lógica de conversa. A escolha de um agente intermediário ou avançado pode exigir personalizações e configurações específicas dele, incluindo a ativação de recursos e APIs no console do Google Cloud.

    3. Clique em Import as agent.

    Para criar seu próprio agente, siga estas etapas:

    1. Clique em Criar agente.
    2. Selecione Gerar automaticamente para criar um agente de repositório de dados ou Criar seu próprio para criar outros tipos de agentes.

    Para um tutorial detalhado do processo de criação do agente, consulte Criar um agente do Dialogflow CX.

  4. Defina as configurações básicas do agente:

    1. Em Nome de exibição, digite um nome.
    2. Selecione um local. Se você quiser alterar as configurações de localização avançadas, clique em Editar.
    3. Selecione o fuso horário.
    4. Selecione o idioma padrão do agente. Após a criação, não é possível alterar o idioma padrão de um agente.
  5. Clique em Criar. O Dialogflow CX começa a criar o agente e, em seguida, exibe o fluxo inicial padrão do agente.

  6. Se quiser, personalize o agente. Para um tutorial detalhado sobre o processo de personalização do agente, consulte Criar um agente do Dialogflow CX.

  7. Recomendamos testar o agente:

    1. Clique em Testar agente.
    2. Selecione Testar agente no ambiente.
    3. Em "Ambiente", selecione Rascunho.
    4. Em "Fluxo", selecione Fluxo inicial padrão.
    5. Na página, selecione Página inicial.
    6. Na barra de escrita Falar com o agente, digite Hello e pressione Enter. O agente responde apresentando-se.
    7. Conclua o teste usando o exemplo de conversa de teste.
  8. O agente do Dialogflow CX é criado. Volte para o console do Dialogflow CX. Clique em Menu > Dialogflow CX.

    Acessar o console do Dialogflow CX

  9. Em Agents, clique em > Copy name. Salve esse nome porque ele é usado na configuração do app do Chat.

Criar um app do Chat e conectá-lo ao agente do Dialogflow

Depois de criar um agente do Dialogflow CX, siga estas etapas para transformá-lo em um app do Chat:

  1. No console do Google Cloud, acesse a API Google Chat. Pesquise "API Google Chat", clique em API Google Chat e selecione Gerenciar.

    Acessar a API Chat

  2. Clique em Configuração e configure o app do Chat:

    1. Em Nome do app, insira Dialogflow App.
    2. No URL do avatar, digite https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png.
    3. Em Descrição, digite Responds to real human conversation.
    4. Em Funcionalidade, selecione Receber mensagens individuais e Participar de espaços e conversas em grupo.
    5. Em Configurações de conexão, selecione Dialogflow.
    6. Em Dialogflow settings, selecione Dialogflow CX.
    7. Em Agent or Environment resource name, cole o nome do agente do Dialogflow CX que você copiou no final de Criar um agente do Dialogflow CX.
    8. Disponibilize este app de chat para pessoas e grupos específicos no seu domínio e digite seu endereço de e-mail.
    9. Em Registros, selecione Registrar erros no Logging.
  3. Clique em Salvar.

O app do Chat está pronto para receber e responder mensagens no Chat.

Teste o app do Chat

Envie uma mensagem para o Google Chat para testar o app de chat do Dialogflow CX.

  1. Abra o Google Chat usando a conta do Google Workspace que você forneceu quando se adicionou como trusted testers.

    Acessar o Google Chat

  2. Clique em Novo chat.
  3. No campo Adicionar uma ou mais pessoas, digite o nome do seu app do Chat.
  4. Selecione o app do Chat nos resultados. Uma mensagem direta será aberta.

  5. Na nova mensagem direta com o app, digite Hello e pressione enter.

    O app Dialogflow Chat responde apresentando a si mesmo.

  6. Conclua o teste usando a conversa de teste de exemplo.

Exemplo de conversa de teste

Para testar o app de chat do Dialogflow CX no Console do Dialogflow CX ou no Google Chat, faça a seguinte conversa. A explicação ajuda você a entender como o agente do Dialogflow CX interpreta a linguagem natural do usuário e produz a própria resposta de linguagem natural em cada etapa da conversa. Esta conversa de amostra é baseada no agente pré-criado chamado Viagens: aluguel de carros.

Caixa de diálogo Explicação
Usuário final: Olá!
Agente: Olá! Sou o agente virtual de aluguel de carros. Posso ajudar você a fazer uma nova reserva de aluguel de carro. Como posso ajudar você hoje?
  1. A rota de Intent de boas-vindas padrão é chamada no fluxo de início padrão.
  2. O fulfillment desse gerenciador de estado ("Hi! Eu sou...") foi adicionado à fila de respostas.
  3. O agente envia a fila de resposta para o usuário final.
Usuário final:eu gostaria de alugar um carro.
Agente: Onde você quer pegar o veículo?
  1. A rota da intent car_rental.reservation_create na página inicial é correspondida.
  2. A sessão é transferida para a página Local de retirada.
  3. O formulário da página Local de retirada não está completo, então o agente usa o parâmetro pickup_location para fazer uma solicitação ao usuário ("Onde você gostaria de retirar..."). que é adicionado à fila de resposta.
  4. O agente envia a fila de resposta para o usuário final.
Usuário final:Las Vegas
Agente: Ok, a retirada será em Las Vegas.
Agente:seu local de desembarque é diferente do local de partida?
  1. A entrada do usuário final preenche o parâmetro pickup_location solicitado pelo agente na rodada de conversa anterior.
  2. A rota da intent car_rental.return_different_location no fluxo inicial padrão é correspondida.
  3. O trajeto de preenchimento do formulário na página Local de retirada é avaliado e chamado. Ele tem um fulfillment ("Ok, sua retirada..."), que é adicionado à fila de resposta com as referências de parâmetro resolvidas para os valores reais fornecidos pelo usuário final.
  4. A sessão é transferida para a página Confirmar localização.
  5. a página Confirmar local tem um fulfillment de entrada ("Seu local de entrega é diferente..."); que é adicionado à fila de resposta.
  6. O agente envia a fila de resposta para o usuário final.
Usuário final: sim. Vou deixar o carro em Los Angeles.
Agente: Ok, seu desembarque será em Los Angeles.
Agente: Que data e hora você quer pegar o veículo?
  1. A rota da intent car_rental.return_different_location no fluxo inicial padrão é correspondida.
  2. A sessão é transferida para a página Local de desistência.
  3. A entrada do usuário final preenche o parâmetro drop_off_location solicitado pelo agente na rodada de conversa anterior.
  4. A rota de preenchimento do formulário na página Local de entrega é avaliada e chamada. Ele tem um fulfillment ("Ok, sua desistência..."), que é adicionado à fila de resposta.
  5. A sessão é transferida para a página Rental Duration.
  6. A página Rental Duration tem valores de formulário incompletos, então ela solicita ao usuário o parâmetro pickup_date_time ("Em que data e hora você quer retirar..."). que é adicionado à fila de resposta.
  7. O agente envia a fila de resposta para o usuário final.
Usuário final: quero pegar o carro no dia 5 de março ao meio-dia.
Agente:Em que data e hora você quer deixar o veículo?
  1. A entrada do usuário final preenche o parâmetro pickup_date_time solicitado pelo agente na rodada de conversa anterior.
  2. A página Rental Duration tem outro valor de formulário ausente, então ela solicita ao usuário o parâmetro drop_off_date_time ("Em que data e hora você quer desembarcar..."). que é adicionado à fila de resposta.
  3. O agente envia a fila de resposta para o usuário final.
Usuário final: 15 de março ao meio-dia.
Agente:para confirmar:

Você vai retirar o veículo em Las Vegas 2024-03-05 12:00:00 e devolvê-lo em Los Angeles 15-03-2024 12:00:00

O que você acha?
  1. A entrada do usuário final preenche o parâmetro drop_off_date_time solicitado pelo agente na rodada de conversa anterior.
  2. A sessão é transferida para a página Confirmar duração da locação.
  3. A página Confirmar duração da locação tem um fulfillment de entrada ("Então, para confirmar..."), que é adicionado à fila de resposta.
  4. O agente envia a fila de resposta para o usuário final.
Usuário final:sim, obrigado.
Agente:Ótimo! Agora vamos escolher um veículo.
Agente:você quer um veículo econômico ou de luxo?
  1. A rota de intent small_talk.confirmation.yes na página Confirmar duração da locação tem correspondência.
  2. O agente confirma a escolha do usuário com uma mensagem ("Ótimo! Agora vamos escolher..."), que é adicionado à fila de resposta.
  3. A sessão é transferida para a página Desambiguação do veículo.
  4. O formulário da página Desambiguação de veículos não está completo, então o agente usa o parâmetro vehicle_type para fazer uma solicitação ao usuário ("Você gostaria de uma economia ou luxo..."). que é adicionado à fila de resposta.
  5. O agente envia a fila de resposta para o usuário final.
Usuário final:questões econômicas, por favor.
Agente:você quer o carro da Cymbal ou o caminhão da Cymbal?
  1. A rota da intent $session.params.vehicle_type="economy_vehicle" é correspondida.
  2. A sessão é transferida para a página Opções econômicas.
  3. A página Opções econômicas tem um fulfillment de entrada ("Você quer..."), que é adicionado à fila de resposta.
  4. O agente envia a fila de resposta para o usuário final.
Usuário final:Cymbal Truck.
Agente:A Cymbal Truck custa US $50,33 por dia. Tem capacidade para quatro pessoas e vem com rádio AM/FM. Quer fazer o pagamento?
Usuário final:sim.
  1. A rota da intent $session.params.vehicle_type="Cymbal Truck" é correspondida e o parâmetro vehicle_model é preenchido.
  2. A sessão é transferida para a página Confirm Cymbal Truck.
  3. A página Confirmar Cymbal Truck tem um fulfillment de entrada ("O Cymbal Truck custa US $50,33 por dia..."), que é adicionado à fila de resposta.
  4. O agente envia a fila de resposta para o usuário final.
  5. A resposta do usuário corresponde à rota small_talk.confirmation.yes.
Agent: Qual tipo de cartão você usará?
Usuário final: Altostrat
Agente: Digite o número do cartão.
Usuário final: 1234 1234 1234 1234
Agente:Qual é o nome do cartão?
Usuário final: Charlie
Agente: Qual é o endereço de faturamento?
Usuário final: 1800 Amphibious Blvd. Mountain View, CA
Agente: Qual é o CEP de faturamento?
Usuário final:94045
Agente: você vai pegar o carro da Cymbal em Las Vegas, 05-03-2024, 12:00:00 e devolvê-lo, 15-03-2024 12:00:00. O total desta viagem será de US$ 175,38.
Agente:Agradecemos sua locação. Tenha um ótimo dia.
  1. A sessão é transferida para a página Pagamento.
  2. O formulário Payment não está completo, então o agente solicita ao usuário os parâmetros card_type, card_number, billing_name, billing_street_address e billing_zip_code ("Qual tipo de cartão será..."). que são adicionadas sequencialmente à fila de resposta e enviadas à medida que o usuário responde. As respostas do usuário definem cada valor de parâmetro.
  3. A sessão é transferida para a página Rental Confirmation.
  4. A página Confirmação de aluguel tem um fulfillment de entrada ("Ok, sua retirada será..."), que é adicionado à fila de resposta.
  5. O agente envia a fila de resposta para o usuário final.
  6. A sessão é transferida para a página Sessão final.

Enviar mensagens de cartão do Dialogflow

O Dialogflow pode responder com mensagens de texto ou cartão. Para responder com uma mensagem de cartão, especifique-a como um payload personalizado no fulfillment.

O JSON a seguir mostra como enviar uma mensagem de cartão como um payload personalizado no fulfillment:

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'
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }]
}

Limites e considerações

  • Os eventos de interação por chat têm suporte limitado, e há algumas considerações:
    • Há suporte para os seguintes tipos de evento de interação:
      • MESSAGE
      • ADDED_TO_SPACE
    • A entrada da consulta enviada ao agente do Dialogflow corresponde ao valor do campo argumentText na mensagem do Chat. Se a mensagem incluir um comando de barra, o valor do campo text será usado.
    • O payload JSON completo de cada evento de interação do Chat é enviado para o Dialogflow como um payload personalizado no parâmetro de consulta e pode ser acessado com um Webhook do Dialogflow consultando o valor do campo WebhookRequest.payload.
  • Os comandos de barra têm suporte limitado:
    • Os comandos de barra que abrem caixas de diálogo não são compatíveis com os apps do Dialogflow Chat.
    • Quando os apps do Dialogflow Chat recebem uma mensagem com um comando de barra, a entrada da consulta contém apenas o valor do campo text. O campo text começa com o nome do comando de barra (por exemplo, /command), que pode ser usado para configurar a intent de um agente do Dialogflow para detectar um comando de barra.
    • Se o agente do Dialogflow precisar processar o payload JSON do evento de interação do Chat do comando de barra, ele poderá fazer isso usando um webhook do Dialogflow para inspecionar o payload personalizado no parâmetro de consulta.
  • As visualizações de links não são compatíveis.
  • Se o agente do Dialogflow responder com apenas uma mensagem, ela será enviada ao Google Chat de forma síncrona. Se o agente do Dialogflow responder com várias mensagens, todas elas serão enviadas ao Chat de forma assíncrona. Basta chamar o método create no recurso spaces.messages da API Chat uma vez para cada mensagem.

Resolver problemas

Quando um app ou card do Google Chat retorna um erro, a interface do Chat mostra a mensagem "Ocorreu um erro" ou "Não foi possível processar sua solicitação". Às vezes, a interface do Chat não mostra nenhuma mensagem de erro, mas o app ou card do Chat produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.

Embora uma mensagem de erro não apareça na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar a corrigir erros quando o registro de erros dos apps do Chat está ativado. Se precisar de ajuda para visualizar, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.

Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados neste tutorial, recomendamos que você exclua o projeto do Cloud.

  1. No Console do Google Cloud, acesse a página Gerenciar recursos. Clique em Menu > IAM e administrador > Gerenciar recursos.

    Acessar o Resource Manager

  2. Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir .
  3. Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.
  • O Dialogflow CX adota uma abordagem de máquina de estado para o design do agente do Dialogflow, que proporciona controle claro e explícito sobre uma conversa, uma melhor experiência do usuário final e um fluxo de trabalho de desenvolvimento melhor. Recomendamos o uso do Dialogflow CX ao criar um app do Dialogflow Chat.
  • O Dialogflow ES é outra maneira de usar o Dialogflow com um app de chat.