https://a.storyblok.com/f/270183/116988/38ad664db8/send-request-data_webhooks_ai-studio.png

Envie e solicite dados com webhooks usando o AI Studio

Publicado em November 29, 2022

Tempo de leitura: 6 minutos

Introdução

Vonage AI Studio é uma plataforma de IA conversacional do tipo “low-code”/“no-code” que ajuda as empresas a lidar com interações complexas com clientes por meio de voz e texto. Ao criar agentes virtuais com o AI Studio, não demorará muito para que você precise recuperar dados de uma fonte de terceiros, como um Webhook. Nesta postagem do blog, você aprenderá:

  • Como recuperar dados de um Webhook no AI Studio a partir de um endpoint REST

  • Como armazenar os dados como um parâmetro (para uso posterior)

  • Exemplos de instruções condicionais para realizar operações com os dados

Para entender como interagir com um Webhook no AI Studio, vamos usar um cenário em que um banco deseja validar a identidade de um cliente comparando um número PIN com o número obtido por meio de um Webhook.

Compreendendo os dados da carga útil

A seguir, apresentamos um trecho dos dados retornados em nossa carga de exemplo:

[
  ...
  {
    "id": 4,
    "email": "michael.crump@vonage.com",
    "phone": "14259999999",
    "name": "Michael Crump",
    "cc_balance": "76.31",
    "pin": "1234"
  }
]

Assim que o cliente ligar para o número de telefone do Banco, utilizaremos o número de telefone para consultar o valor correto do PIN por meio deste Webhook.

Integração do Webhook

Neste momento, você já criou um projeto no AI Studio que utiliza um chamada de entrada . Caso ainda precise fazer isso, siga este guia. Role a página para baixo a partir dos menu até chegar a Integrações, selecione Webhooke arraste e solte-o na sua tela.

Integrations Dialogintegrations.png

Clique no evento Webhook recém-criado, pois você precisará informar a URL do seu endpoint.

Como faremos a consulta com base no número de telefone, usaremos a seguinte URL codificada (que aponta para um número de telefone específico): https://my-json-server.typicode.com/mbcrump/ai-studio-api/customers?phone=14259999999. Depois de adicioná-la, clique em Testar solicitação , conforme mostrado abaixo.

Se você quiser saber mais sobre o Chatbot Tester, clique aqui.

Testing our Webhook calltest-webhook-1.png

Se você vir um status 200, isso significa que a solicitação foi respondida com sucesso (você pode verificar na Resposta as informações que recebemos com base no número de telefone desse usuário (que foi definido estaticamente).

Embora esses dados tenham sido inseridos diretamente na URL da consulta, como o AI Studio transmite essas informações com base no número fornecido? É aqui que vamos usar um dos parâmetros do sistema chamado CALLER_PHONE_NUMBER, conforme mostrado abaixo.

Testing our Webhook callsystem_parameters.png

Você pode abrir essa caixa de diálogo pressionando a tecla $ e selecionar o parâmetro do sistema que você deseja usar. Agora, nossa URL é https://my-json-server.typicode.com/mbcrump/ai-studio-api/customers?phone=$CALLER_PHONE_NUMBER.

Quando terminar, lembre-se de clicar em Salvar e Sair.

Testing our Webhook callwebhook-with-phone-number.png

Se tentarmos testar o WebHook agora, você receberá um código de status 200, mas não haverá nenhum dado na resposta.

No Data Returnedno-data-returned.png

Podemos resolver isso clicando no ícone “Configurações” e especificar um CALLER_PHONE_NUMBER, conforme mostrado abaixo.

Specifying a Phone Numbersetting-system-parameters.png

Agora, se você clicar em “Reenviar solicitação”, você receberá uma resposta correta, conforme mostrado abaixo.

Resent Webhook Requestsuccessful-response.png

Configurando parâmetros para realizar alguma ação com os dados retornados

Agora que já conseguimos chamar um WebHook a partir do AI Studio e retornar dados, vamos usar parâmetros para extrair e utilizar informações específicas da entrada do usuário. Por exemplo, para coletar informações do usuário (como PIN ou saldo da Account), é preciso definir um parâmetro que armazene essas informações para que possam ser acessadas posteriormente.

Para Criar um parâmetro, na barra de navegação à esquerda, clique em Propriedades e, em seguida, Parâmetros.

Parameters Selectionparameters-selection.png

Adicione um parâmetro clicando na primeira linha da tabela “Parâmetros personalizados” .

Precisamos adicionar quatro parâmetros aqui para armazenar o PIN do cliente, o PIN digitado pelo cliente, o nome do cliente e o saldo da Account, caso ele tenha digitado o PIN corretamente.

Name Entity Type
pin_number @ sys.number
input_number @ sys.number
name @ sys.any
balance @ sys.number

Quando terminar, sua tela deverá ficar assim:

Custom Parametersparameters.png

Imprensa Fechar assim que todas as informações tiverem sido inseridas.

Clique em Webhook 1 novamente e verifique em Mapeamento de resposta. Aqui, vamos inserir o primeiro caminho do objeto como [0][name] e atribuir a ele o parâmetro que criamos, chamado nome.

Response Mappingresponse-mapping.png

Vamos coletar o saldo e PIN enquanto estivermos aqui.

Depois de adicioná-los, sua tela deverá ficar assim:

Response Mappingresponse-mapping-1.png

Quando terminar, não se esqueça de clicar em Salvar e Sair.

Vamos usar um nó “Coletar Entrada” para solicitar o PIN do usuário. Vá em frente e arraste e solte o nó a partir do menu “Conversação” .

Collect Input Nodecollect-input.png

Para o parâmetro, use o input_number que definimos anteriormente. Para Mensagens, digite “Digite seu PIN de quatro dígitos para acessar sua Account.” ou algo semelhante, conforme mostrado abaixo.

Collect Input Nodeparameter-input-number.png

Agora vamos conectar o Webhook 1 ao Collect Input 1 , conforme mostrado abaixo.

Connect Webhook Collect Inputconnect-webhook-collect-input.png

Arraste e solte um nó de condição do menu “Conversa” . Clique em “Padrão” dentro da nota e pressione Criar Condição.

Conforme mostrado a seguir, vamos criar uma condição que verifique se o número inserido que foi inserido corresponde ao PIN do nosso Webhook.

Condition Requirementscondition-req.png

Quando terminar, não se esqueça de clicar em Salvar e Sair.

Arraste e solte mais dois Nós de Conversação de “Conversação” na tela. Para o nó “Falar 2” , digite a mensagem, Verification Successful Welcome $name. Your balance is $balance. Onde $name é o parâmetro que definimos anteriormente.

Speak 2 Nodespeak-2-node.png

Para o nó “Speak 3” , digite a mensagem “Desculpe, isso não estava correto.”, onde $name é o parâmetro que definimos anteriormente. Ao concluir, pressione Enter e não se esqueça de clicar em Salvar e Sair.

Por fim, adicione um Nó “Encerrar chamada” na tela.

Agora você precisa conectar o Condição 1 (Nova condição) à Falar 2 e Condição 1 (Padrão) para Falar 3. Em seguida, conecte Falar 2 e Speak 3 ao Nó de Encerramento de Chamada 1 , conforme mostrado abaixo.

Final Resultfinal-result.png

Pressione o botão “Tester” no canto superior direito da tela e, em seguida, selecione Chamada recebida como evento e, em seguida, Iniciar bate-papo. Você precisará definir os parâmetros iniciais, assim como fizemos anteriormente para o CALLER_PHONE_NUMBER e definir como 14259999999.

Set Inital Parametersset-initial-parameters.png

Agora, se você executar a ferramenta de teste novamente, poderá inserir um número de quatro dígitos (como 1234), e o Agente Virtual retornará seu Nomee Saldo da conta obtidos a partir do db.json arquivo, conforme mostrado abaixo.

Tester Chat Completedtester-chat-completed.png

Que legal! Conseguimos implementar um Webhook e criar uma lógica com base nos dados retornados.

Conclusão

Agora é a sua vez. Existem várias maneiras de ampliarmos o aplicativo, como, por exemplo:

  • A lógica a ser seguida no caso de não ser encontrado nenhum PIN

  • Autenticação por webhook para fins de segurança, como tokens de autenticação, etc.

  • Número máximo de tentativas em caso de falha

O que você está esperando? Acesse o AI Studio para começar sua jornada.

Se você tiver dúvidas ou sugestões, junte-se a nós no Slack dos desenvolvedores da Vonage ou me envie um tweet no Twitter, e eu entrarei em contato com você. Mais uma vez, obrigado pela leitura, e nos vemos no próximo artigo!

Compartilhar:

https://a.storyblok.com/f/270183/400x400/7cdff37c0e/michael-crump.png
Michael CrumpGerente de Experiências dos Desenvolvedores

Michael Crump trabalha na Vonage, na equipe de Experiências do Desenvolvedor, e é programador, YouTuber e palestrante frequente sobre diversos temas relacionados ao .NET e ao desenvolvimento em nuvem e de comunicações. Ele se dedica a ajudar os desenvolvedores a compreender os benefícios de cada um desses temas de maneira prática e direta.