){kind=small}
Criando um painel interativo: WhatsApp, SMS e MMS para um site (Parte 2)
Tempo de leitura: 8 minutos
Em Parte 1, criamos um quadro de mensagens interativo para receber mensagens SMS, MMS e do WhatsApp e exibi-las em uma página da web. Esse aplicativo utilizou a Messages API do Vonage e um servidor Express.
Na Parte 2, vamos reproduzir essa funcionalidade com uma variação. Vamos usaro Vonage AI Studiopara lidar com as mensagens recebidas. Nossas mensagens serão armazenadas em um banco de dados do Airtable e, em seguida, exibidas pelo nosso aplicativo Node.js.
Vonage AI Studio é uma plataforma de baixo código que facilita a criação de assistentes virtuais tanto para desenvolvedores quanto para não desenvolvedores. Com sua interface intuitiva do tipo arrastar e soltar, você pode projetar fluxos de conversação.
Você pode encontrar o código para a exibição do Painel de Administração em este repositório do GitHub. Clone-o e vamos seguir o tutorial abaixo que preparei para você, explicando tudo passo a passo.
Interação do usuário: O usuário inicia a interação enviando uma mensagem pelo WhatsApp para um número de telefone virtual específico da Vonage, vinculado à Application da Vonage que contém o fluxo.
Recepção de mensagens: O fluxo da conversa começa no nó “Iniciar”, permitindo que o usuário envie ou visualize mensagens.
Armazenamento de dados: Após o processamento, a mensagem é salva no Airtable, uma plataforma online para criação e compartilhamento de bancos de dados relacionais.
Exibição: Criar nosso Painel de Administração: uma página da web, atualizada continuamente, busca essas mensagens no Airtable e as exibe.
Primeiro, vamos criar nosso armazenamento de dados; para isso, crie um Account no Airtable. Depois de fazer login, siga as etapas abaixo no painel do Airtable. Em comparação com a parte 1, optei por simplificar a parte 2 e criar apenas uma tabela chamada “Mensagens”.
Crie uma base chamada “Quadro Interativo” clicando em “+ Criar uma base” e, se quiser, escolha uma cor-tema e um ícone; eu pulei o restante da configuração, mas fique à vontade para preencher esses campos se desejar e seguir até o final do processo de criação da base, quando sou direcionado para a base “Mensagens”.
Agora você pode ver algumas linhas numeradas vazias. Vamos criar uma tabela chamada Mensagens. Ela possui as seguintes colunas: “Mensagem”, “Número” (número de telefone), “Status” do tipo “Seleção única” com as opções “Aceito”, “Pendente” e “Rejeitado”. E, por fim, “ImageUrl”.
Crie visualizações como a “Visualização em grade” para filtrar mensagens
Assim que os registros forem inseridos no Airtable, eles terão o status “Pendente”. Seus moderadores podem acessar o banco de dados do Airtable e alterar manualmente o status de cada registro para “Rejeitado” ou “Aceito”. Se forem aceitos, eles serão exibidos no site do quadro interativo.
Vou explicar cada etapa para você criar o fluxo do nosso aplicativo de conversação.
Acesso ao AI Studio:
Faça login/Cadastre-se no o Vonage AI Studio. Você o encontrará no Painel da Vonage, no menu à esquerda. Selecione “AI Studio” e clique em “Ir para o AI Studio”.
AI Studio
Configurando o WhatsApp Agent:
Escolha “WhatsApp” como tipo de agente e clique em “Avançar”.
Whatsapp Agent CreationPreencha os dados necessários, como Região, Nome do agente (por exemplo, “Interactive Board”), Idioma e Fuso horário (por exemplo, Europa/Londres), e clique em “Avançar”.
Agent Creation Details
Seleção de modelo:
Clique em “Criar agente”. Para criar um novo aplicativo, acesse Vonage AI Studio Agents.
Escolha o modelo “Começar do zero”.
Selecione “Evento de sessão de entrada” e clique em “Criar”. Essa etapa é essencial para que os usuários iniciem a sessão com o agente.
Esta seção abordará os detalhes da criação de um aplicativo conversacional com integração ao WhatsApp:
Vonage AI Agent Dashboard
Criar uma “saudação” (Enviar mensagem) logo após o START rota que dá as boas-vindas aos usuários, explique os recursos do bot no campo “O agente diz” e clique em “Salvar e sair”.
Greeting Node
Criar um Nó de Conversa “Coletar Entradas” , selecione o parâmetro MENSAGEM, escolha “Listar mensagens” e adicione uma seção para “Ver mensagens” e outra para “Enviar mensagens”. Adicione quaisquer outras informações que julgar necessárias para tornar a descrição clara e compreensível para o usuário e clique em “Salvar e sair”.
Input collection
Crie uma nó de “Condições” (eu o chamei de “Condição do menu: ver ou enviar”) com duas condições: “Ver mensagem” e “Enviar mensagem”. A primeira condição deve ser: Parâmetro: MESSAGE, Operação: Contém, Valor: Ver. A segunda deve ser: Parâmetro: MESSAGE, Operação: Contém, Valor: Enviar.
Menu Condition
Após o bloco de condições, vamos criar dois blocos:
Um nó “Enviar mensagens” vinculado à nossa condição “Ver” (eu o chamei de “Mensagem para ver mensagens”). A mensagem deve ser: Se você quiser ver todas as mensagens de saída, acesse este link.
Atualizaremos este link mais tarde com o link do ngrok que você terá em execução junto com seu servidor Express. Por enquanto, você pode deixá-lo com uma mensagem provisória.
Message to See MessagesUm segundo nó vinculado ao “Enviar”, do tipo “Coletar Entrada” (eu o chamei de “Enviar Mensagens”) e, no prompt, adicione uma mensagem mais ou menos assim: “Vá em frente e me envie a mensagem ou imagem que você gostaria de compartilhar!” e selecione “Texto” e “Imagem” como entradas esperadas, pois é isso que esperamos que nossos usuários enviem!
Send Message
Vamos agora usar a Classificação para lidar com as entradas dos nossos usuários. Na parte 1, adicionamos um arquivo contendo as palavras bloqueadas para nossa aplicação web. Agora, na parte 2, com o Vonage AI Studio, podemos adicionar um Nó de Classificação. Ele pode ser encontrado no menu à esquerda: Nodo > Conversação > Classificação. Adicione esse bloco ao fluxo logo após “Enviar mensagens” e preencha-o com as seguintes informações:
Classification Intent
Parâmetro de classificação: MENSAGEM Criaremos duas intenções: Enviar mensagem e Bloquear Palavras No menu à esquerda, você pode clicar em “Propriedades” e criar uma nova intenção; ou, mesmo na visualização de classificação em que você está agora, pode clicar em “Intenção” e criar uma nova a partir daí, além de adicionar o conjunto de treinamento para cada intenção.
Palavras bloqueadas: Você pode adicionar as palavras que estão bloqueadas no seu fluxo (por exemplo, palavrões).
Enviar mensagem: você pode adicionar alguns exemplos de mensagens que os usuários podem enviar, por exemplo: “Ótimo evento”, “Estou me divertindo muito”, “Adorei isso, mas gostaria que tivesse sushi”.
Saiba mais sobre classificação e pense em futuras melhorias, adicionando a integração com a análise de sentimentos para detectar mensagens negativas automaticamente.
Crie um nó de envio de mensagem chamado “Alerta da lista de palavras permitidas”. O agente deve dizer: “A mensagem anterior violou nossas diretrizes relativas às palavras da lista de palavras permitidas. Por favor, envie outra mensagem.”
Allowlist alert
A opção “lista de bloqueio” da classificação deve estar vinculada a ela e, por sua vez, deve estar vinculada ao campo de entrada de mensagens “Enviar mensagens”.
Links
A seguir, vamos usar um Nó de Webhook (que eu chamei de “Webhook: Criar registro”) para adicionar nossas mensagens ao nosso backend do Airtable. Para adicionar registros ao Airtable, clique em Integrações > Webhook e preencha as seguintes informações:
Método: POST URL da solicitação: https://api.airtable.com/v0/BASE_URL/Messages Cabeçalhos: Chave: Authorization, Valor: Bearer ‘YOUR_AIRTABLE_ACCESS_TOKEN’ Chave: Content-Type, Valor: application/json
Webhook node
Nota: A URL da solicitação deve corresponder à sua tabela no Airtable
Se você tiver dificuldades ou dúvidas, para obter uma explicação mais detalhada, confira Low Code Leverage: AI Studio com Airtable , de Benjamin Aronov, onde ele explica detalhadamente como usar o AI Studio com o Airtable.
Na segunda aba do webhook, chamada “Body”, adicione as seguintes informações no formato JSON. Isso significa que estamos adicionando a mensagem enviada pelo usuário, que pode conter texto ou imagem, atribuindo o número de telefone da pessoa que está interagindo com esse agente e definindo o status como “Pendente”, onde os moderadores podem alterá-lo para “Aceito” ou “Rejeitado” no Airtable.
{
"records": [
{
"fields": {
"Message":"$MESSAGE",
"Number": "$SENDER_PHONE_NUMBER",
"ImageUrl": "$MESSAGE",
"Status":"Pending"
}
}
]
}Vincule a opção de sucesso do webhook a um novo nó “Enviar mensagem”. Crie um novo nó “Enviar mensagem”, nomeie-o como “Confirmação de recebimento de mídia”, adicione em “O agente diz”: “Obrigado por enviar isso!” e clique em “Salvar e sair”.
Media receipt
Vincule a opção de falha do webhook à entrada “Coletar mensagem” do envio anterior para solicitar que eles a enviem novamente. Vincule o nó “Confirmação de recebimento de mídia” ao nó já existente “Mensagem para ver mensagens” e, em seguida, vincule-o a “Encerrar conversa”.
Flow
O código é semelhante ao que vimos na parte 1. No entanto, podemos eliminar o blocklist.txt , já que isso agora é tratado dentro do fluxo de conversa no Vonage AI Studio, bem como a criação do usuário e a inserção dos registros no Airtable. No entanto, mantemos o endpoint que altera o estado da mensagem "/messages/:messageId/:status" , além do endpoint que busca as mensagens /messages. Este é o aspecto do arquivo index.js deste projeto.
Assim como mencionado na parte 1, você deve ter o ngrok em execução; volte ao fluxo do AI Studio Agent e atualize o nó “See Messages” com a URL do ngrok fornecida; você sempre pode hospedar seu site, mas, para este tutorial de demonstração, basta usar o ngrok a partir do nosso localhost para adicionar a página da web vinculada ali.
Você verá um botão “Tester” no canto superior direito do Vonage AI Studio; com ele, é possível testar sua conversa sem publicá-la. Vá em frente, selecione “Sessão de entrada” e clique no botão “Iniciar bate-papo”. Você pode preencher previamente os parâmetros com os quais deseja que o agente trabalhe (clicando no ícone de configurações/engrenagem) e escolher o modo de teste. Confira a página do Tester para saber mais.
Começamos usando o serviço de recebimento de mensagens para mensagens do WhatsApp, mas, se decidíssemos usar MMS, você poderia utilizar o mesmo número atribuído ao chatbot do WhatsApp. Existem alguns requisitos para um número de MMS dos EUA 10DLC, TFN e números de código curto que você tem no seu painel para outros números dentro dos Estados Unidos. Você pode saber mais sobre Como enviar mensagens MMS com Node.js.
No Vonage AI, existe uma ação chamada “Enviar SMS”. Você pode adicionar esse bloco ao seu fluxo de conversa para enviar uma mensagem SMS, preencha os campos com os números do remetente e do destinatário e o corpo da mensagem, clique em “salvar e sair” e conecte-o ao nó para o qual deseja que a mensagem seja enviada. Você pode saber mais sobre envio de SMS usando o Vonage AI.
Quando terminei de desenvolver esse aplicativo conversacional de demonstração, quis ver como ele ficava no WhatsApp e poder controlar as versões e publicar minhas alterações. Para isso, comprei um número de telefone, atribuí-o ao agente, vinculei-o usando a Messages API e criei um Account do WhatsApp Business com o número que acabara de adquirir. Você pode saber mais sobre como publicar seu agente para publicar o seu e compartilhá-lo com outras pessoas!
Consulte a documentação da Vonage AI, compartilhe suas experiências, comentários e quaisquer usos inovadores que você tenha descoberto ao utilizar nossas APIs com nossa comunidade por meio do X, anteriormente conhecido como Twitter ou na Comunidade do Slack.