Bot para agendamento de videoconferências com tecnologia da IA e da Video API da Vonage

O trabalho remoto e a colaboração virtual permitem que as empresas repensem a experiência do cliente: a videoconferência. A videoconferência aprimora as interações com os clientes ao proporcionar uma comunicação cara a cara, promovendo relacionamentos mais sólidos e possibilitando a colaboração em tempo real. Como desenvolvedor web, estou sempre em busca de maneiras de melhorar a experiência do usuário sem gerar muito trabalho extra para mim.

É por isso que estou muito animado em apresentar meu projeto mais recente: um bot de agendamento inteligente que desenvolvi usando a Video API da Vonage e Vonage AI Studio. A Video API da Vonage facilita para que os desenvolvedores adicionem vídeo às suas aplicações. Ela permite incorporar vídeo interativo em tempo real e de alta qualidade, mensagens, compartilhamento de tela e muito mais em aplicativos web e móveis.

Esse bot agrega muito valor aos clientes, melhora significativamente a experiência do usuário e demonstra os poderosos recursos da Video API da Vonage e do AI Studio!

Nesta postagem do blog, vou explicar como criei esse bot, os desafios que enfrentei e as soluções que encontrei.

Se você quiser pular essa parte e ir direto para a implantação, pode encontrar todo o código do aplicativo no GitHub.

Configuração do projeto

1. Account da API da Vonage

2. Node e npm

3. ngrok para testes de Webhook

Node e npm

A estrutura do servidor NodeJS é a seguinte:

1. index.js Arquivo onde o código do servidor é definido. Neste arquivo, definiremos as rotas e chamaremos o endpoint da Meetings API.

2. Um arquivo .env onde configuramos as credenciais para autenticação no Vonage.

Como usar o ngrok para testar webhooks

Se você ainda não tiver, instale o ngrok no seu computador. Em seguida, execute o comando para iniciar o túnel, especificando o número da porta do servidor local que você deseja expor (ngrok http 3000). O ngrok gerará uma URL exclusiva que permite o acesso externo ao seu servidor local. Precisaremos dela na próxima etapa, ao chamar os webhooks do Vonage AI.

Como usar a Video API da Vonage

A Video API da Vonage permite integrar reuniões por vídeo interativas, em tempo real e de alta qualidade, aos seus aplicativos web. A Video API é ideal para quem busca mais personalização e flexibilidade. Vamos configurar um aplicativo web de videochamadas baseado em navegador usando a Video API da Vonage.

Como criar o aplicativo de vídeo da Vonage

Acesse o painel de controle da Vonage e faça login ou cadastre-se.

1. Clique em “Applications” no menu à esquerda.

2. Clique em “Criar um novo aplicativo” na parte superior e dê um nome a ele.

3. Copie o ID do aplicativo para referência futura.

4. Clique em “Editar” e em “Gerar chaves pública e privada”. A chave privada será baixada.

5. Role a página para baixo e ative a opção “Video (novo)” para o aplicativo.

6. Clique em “Salvar alterações” na parte inferior da página.

Anote a chave de API e o segredo de API do seu projeto. Certifique-se de guardar essas credenciais em um local seguro, pois você as utilizará mais tarde, ao configurar seu aplicativo.

Video Capability Toggle in Vonage API Dashboard

Como gerar credenciais da Video API

Para se autenticar, você precisa fornecer sua apiKey, sessionId e token. Abaixo, você encontrará um exemplo de como criar uma sessão com biblioteca @vonage/Video : 

const { Auth } = require("@vonage/auth");
const { Video } = require("@vonage/video");

const applicationId = process.env.APP_ID;
const privateKey = process.env.PRIVATE_KEY_PATH;

if (!applicationId || !privateKey) {
  console.error("You must define APP_ID and PRIVATE_KEY_PATH in the .env file");
  process.exit(1);
}

const credentials = new Auth({
  applicationId: applicationId,
  privateKey: privateKey,
});
const options = {};
const videoClient = new Video(credentials, options);

const createSessionandToken = async () => {
  const session = await videoClient.createSession({ mediaMode: "enabled" });
  const sessionId = session.sessionId;
  const token = videoClient.generateClientToken(sessionId);
  return { sessionId: sessionId, token: token, apiKey: applicationId };
};

const generateToken = (sessionId, role) => {
  const token = role
    ? videoClient.generateClientToken(sessionId, { data: role })
    : videoClient.generateClientToken(sessionId);
  return { token: token, apiKey: applicationId };
};

No front-end, o código recebe as credenciais do servidor Node.js para se conectar à sessão, criar o emissor, publicar o fluxo e aguardar a chegada de novos assinantes.

const apikey = "<%= apiKey %>";
      const sessionId = "<%= sessionId %>";
      const token = "<%= token %>";
      const publisher = OT.initPublisher("stream-container", {
        insertMode: "append",
        width: "100%",
        height: "100%",
      });
      const session = OT.initSession(apikey, sessionId);
      session.connect(token, (error) => {
        if (error) {
          console.error("Error connecting: ", error);
        } else {
          session.publish(publisher, (error) => {
            if (error) {
              console.error("Error publishing: ", error);
            }
          });
        }
      });
      // Handle the streamCreated event
      session.on("streamCreated", function (event) {
        subscriber = session.subscribe(event.stream, "containerId", {
          insertMode: "append",
          width: "100%",
          height: "100%",
        });
      });

Como criar o bot no Vonage AI Studio

O Vonage AI Studio é uma plataforma de IA conversacional desenvolvida para lidar com interações complexas entre empresas e clientes, reduzindo os custos operacionais e melhorando significativamente os níveis de atendimento. Atualmente, ela oferece os seguintes canais: agentes de telefonia (para bots de voz), agentes do WhatsApp e SMS (para bots baseados em texto) e agentes HTTP. Optei por usar o WhatsApp porque é uma das plataformas de mensagens mais populares e oferece diferentes tipos de mensagens para interagir com o usuário, como botões, mensagens em forma de lista e muitos outros.

Veja todos os detalhes sobre recursos do Vonage AI Studio.

Para começar, acesse o Vonage (painel de controle)[dashboard.nexmo.com] e localize a seção AI Studio. Em seguida, clique no botão “Criar um agente”, localizado no canto superior direito da página. Entre as opções disponíveis, escolha “Bot do WhatsApp” e você verá uma lista de modelos para escolher. Para os fins desta postagem no blog, selecione a opção “do zero”, seguida do Agente de Entrada. Os agentes de entrada são ativados quando recebem uma mensagem do cliente, enquanto o agente de saída inicia uma nova conversa usando modelos do WhatsApp.

Visão geral do bot do WhatsApp

A imagem abaixo mostra o que vamos construir. Usaremos diferentes tipos de nós do Vonage AI Studio, tais como coletar entradas, condicionais, webhooks e enviar mensagens. Tendo o diagrama em mente, o bot começa com uma mensagem recebida do usuário e responde com um nó de coleta de entrada. Vamos nos aprofundar no processo nas próximas seções.

Overview of the Flow in AI Studio

Como coletar entradas do usuário no AI Studio

Para iniciar o processo de criação da reunião, nosso bot do WhatsApp solicitará que o usuário forneça informações específicas. O primeiro bloco que utilizaremos é o bloco “Collect Input”, que nos permite coletar dados do usuário. Nesse bloco, podemos pedir ao usuário que especifique o tipo de reunião (única ou de longo prazo) e as opções de gravação (auto_recording ou não). Ao coletar essas informações, podemos personalizar a experiência da reunião com base nas preferências do usuário.

Para o tipo de reunião, usamos botões de resposta do WhatsApp para que o usuário não precise digitar a mensagem, mas apenas clicar no tipo de reunião desejado:

Example of WhatsApp Reply ButtonsO próximo passo é direcionar o bot com base na resposta anterior. Para isso, usamos um nó condicional.

Example of Classification NodeCom base na resposta anterior (que fica salva no parâmetro de tipo de reunião), o bot possui duas ramificações: reunião instantânea e reunião de longo prazo. Para uma reunião de longo prazo, precisamos de uma etapa adicional, na qual solicitamos que o usuário digite a data de validade da reunião.

Em seguida, aplicamos a mesma lógica às opções de gravação: usaremos um nó “Collect Input” com botões de resposta.

Recolher a data de validade

Uma informação que precisamos coletar durante nossa conversa é a data de validade das reuniões de longo prazo. Usando outro bloco “Coletar Informação”, solicitamos que o usuário insira uma data de validade para sua reunião. Para prosseguir, vamos nos aprofundar no conceito de entidades no AI Studio. Uma entidade funciona como um banco de dados predefinido que compreende um conjunto de valores e seus sinônimos. Esses valores são essenciais para que o AI Studio extraia e valide dados específicos a partir das entradas do usuário expressas em linguagem natural. Ao explorar a lista de entidades, disponível na documentação, encontraremos categorias conhecidas, como contatos, datas, endereços de e-mail, números de telefone e muito mais.

Agora, o aspecto fundamental nesta etapa é selecionar o tipo de entidade adequado para o nosso objetivo, que, neste caso, é “@sys.date”. Ao designar a entidade como um tipo de data, o agente analisará de forma inteligente a entrada do usuário como uma data, facilitando sua utilização nas etapas subsequentes, especialmente no nó Webhook.

Como se conectar a uma API do Node.js usando webhooks

Depois de coletarmos todas as informações necessárias do usuário, precisamos conectar nosso bot do WhatsApp ao servidor Node.js que criamos anteriormente. Para isso, utilizamos o bloco de webhook fornecido pela Vonage AI. Esse bloco nos permite fazer solicitações HTTP para endpoints externos, possibilitando uma integração perfeita entre diferentes sistemas. Ao configurar o bloco webhook para chamar os endpoints relevantes da nossa API Node.js, podemos passar os detalhes da reunião coletados e acionar a criação da reunião. Neste caso, estamos configurando uma solicitação POST para https://{baseUrl}/api/video/room com o objeto body enviando os parâmetros coletados durante o fluxo do bot.

A POST Request Using Webhook Node

Um último passo é configurar o mapeamento de resposta no webhook. Nesse caso, a API está retornando um objeto JSON com uma propriedade URL:

Response Mapping Example

Conclusão

Em conclusão, o uso da Video API e da IA da Vonage no agendador de reuniões ilustra a facilidade e a simplicidade de criar experiências de videoconferência personalizáveis e no modelo de autoatendimento para empresas e seus clientes. Ao utilizar a Video API, os desenvolvedores podem criar facilmente videoconferências com opções configuráveis, como opções de gravação, entre outras. A combinação dessa funcionalidade com a Vonage AI abre possibilidades empolgantes, permitindo que os usuários interajam com o bot por meio de plataformas populares de mensagens, como o WhatsApp.

Você pode encontrar o código completo em GitHub. 

Gostou deste tutorial? Teve alguma dificuldade? Entre em contato pelo X, antes conhecido como Twitter, ou na Slack da Comunidade Vonage (temos até um canal dedicado ao AI Studio). Estamos ansiosos para ver o que você está criando com o Low Code!