Como configurar webhooks para SMS e Voice recebidas no Glitch

Neste tutorial, você aprenderá a configurar webhooks para lidar com chamadas de voz recebidas e mensagens SMS usando o Glitch e um servidor Node.js, com a Vonage como sua plataforma de comunicação. Um webhook é uma forma de uma aplicação enviar dados em tempo real para outra quando ocorre um evento específico. Ele atua como um ouvinte, aguardando um evento — como uma chamada recebida ou um SMS — e aciona uma ação predefinida quando esse evento ocorre. Isso permite que seu servidor reaja instantaneamente a gatilhos externos, garantindo respostas oportunas às interações dos usuários.

A implementação de webhooks traz benefícios significativos para o seu aplicativo. Ao permitir o gerenciamento em tempo real de chamadas de Voice e mensagens SMS, você pode criar experiências de comunicação mais interativas e ágeis para seus usuários. Por exemplo, você pode automatizar respostas do suporte ao cliente, integrar-se a sistemas de CRM para registrar interações ou acionar fluxos de trabalho com base em mensagens recebidas. Isso pode aumentar o engajamento dos usuários e a eficiência, reduzindo as tarefas manuais.

Ao final deste guia, você terá um servidor web totalmente funcional, capaz de receber e processar chamadas e mensagens SMS recebidas por meio da Vonage. Vamos começar!

Pré-requisitos

• A Account de desenvolvedor da Vonage

• A Falha Account

Crie e configure seu projeto

Vamos percorrer as seguintes etapas:

1. Crie um novo projeto.

2. Configure seu servidor.

3. Instale as dependências.

4. Compartilhe e configure seu projeto.

5. Integre webhooks ao seu aplicativo Vonage.

6. Teste os novos recursos.

Passo 1: Criar um novo projeto

Faça login na sua conta do Glitch.

Clique em “Novo projeto” no canto superior direito e, em seguida, clique em “glitch-hello-node”.

Quando terminar, você verá o novo projeto criado.

Glitch Hello Node

Etapa 2: Configure seu servidor

Para configurar seu servidor para o tratamento de chamadas e SMS recebidas e enviadas, siga estas etapas:

1. No painel esquerdo, localize e clique em server.js.

   serverjs file

2. No painel direito, selecione todo o conteúdo de server.js e apague-o.

3. Copie e cole o trecho de código fornecido nesta server.js. Esse código configurará um servidor web capaz de processar solicitações da web para lidar com chamadas e SMS recebidos e enviados.

const path = require("path");
const app = require('express')();
const bodyParser = require('body-parser');
const fastify = require("fastify")({ logger: true });

fastify.register(require("@fastify/static"), {
  root: path.join(__dirname, "public"),
  prefix: "/",
});

fastify.register(require("@fastify/formbody"));

fastify.register(require('@fastify/express')).after(() => {
  fastify.use(bodyParser.urlencoded({ extended: false })); // for Postman x-www-form-urlencoded
  fastify.use(bodyParser.json());
  fastify.use(app);
});

app.get("/webhooks/answer", function (request, reply) {
  const from = request.query.from;
  const fromSplitIntoCharacters = from.split('').join(' ');
  const ncco = [{
    action: 'talk',
    text: `Thank you for calling from ${fromSplitIntoCharacters}`,
    loop: 10
  }];
  console.log(`logging call from ${fromSplitIntoCharacters}`);
  reply.json(ncco);
});

app.get("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  const params = Object.assign(request.query, request.body);
  console.log(params);
  reply.status(200).end();
});

app.post("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  console.log(request.body);
  reply.status(200).end();
});

fastify.listen(
  { port: process.env.PORT, host: "0.0.0.0" },
  function (err, address) {
    if (err) {
      console.error(err);
      process.exit(1);
    }
    console.log(`Your app is listening on ${address}`);
  }
);

Se você quiser aumentar a duração da chamada, procure o loop parâmetro no trecho de código e ajuste seu valor.

const ncco = [{
  action: 'talk',
  text: `Thank you for calling from ${fromSplitIntoCharacters}`,
  loop: 10
}];
console.log(`logging call from ${fromSplitIntoCharacters}`);
reply.json(ncco);

Verifique se você está usando a versão correta do Node.js no seu package.json arquivo:

1. Clique em package.json no painel esquerdo.

2. No painel direito, localize as linhas que especificam a versão do Node.js.

3. Verifique se a versão do Node.js está definida como 16.x. Caso contrário, atualize-a para 16.x.

"engines": {

  "node": "16.x"

}

Etapa 3: Instalar as dependências

Clique no botão “Terminal” na parte inferior da tela.

buttonExecute o seguinte comando para atualizar os pacotes existentes:

npm update

Instale as dependências necessárias com o seguinte comando:

npm i express @fastify/express body-parser dotenv @vonage/server-sdk @vonage/voice

Execute o refresh para aplicar as alterações:

refresh

Etapa 4: Compartilhe e configure seu projeto

Clique no botão azul botão “Compartilhar” no canto superior direito e copie o link para o site.

Abra seu editor de texto favorito e cole o link que você acabou de copiar. Em seguida, cole os seguintes URLs:

• URL da resposta: {seu link}/webhooks/answer

• URL de entrada: {seu link}/webhooks/inbound-SMS

Share Project

Etapa 5: Integrar os webhooks ao seu aplicativo Vonage

Faça login na sua account de desenvolvedor da Vonage.

Para adquirir um número de telefone da Vonage, acesse o menu do painel esquerdo e selecione “Numbers”e, em seguida, “Comprar Numbers”. Selecione o país de onde você deseja adquirir o número. Em “Recursos”, selecione “SMS” e “Voice”.

Clique em em “Pesquisar” e “Comprar” para o número que você deseja comprar.

No menu do painel esquerdo, clique em “Applications”e, em seguida, “Criar um novo aplicativo” no painel direito.

Atualize sua inscrição com as seguintes informações:

• Dê ao seu aplicativo um nome fácil de lembrar.

• Clique no botão “Gerar chave pública e privada”. Isso fará com que um arquivo de chave privada com o nome private.key para sua área de trabalho. Salve esse arquivo em uma pasta segura, pois ele será necessário mais tarde.

• Na seção “Recursos”, ative:

  • Voice

  • Mensagens

• Configurar os recursos de Voice:

  • URL da resposta: Cole a URL da resposta que você copiou anteriormente.

  • URL do evento: Cole o mesmo URL da resposta.

  • URL alternativa: Cole a mesma URL da resposta.

• Configurar os recursos do Messages:

  • URL de entrada: Cole a URL de entrada que você copiou anteriormente.

  • URL de status: Cole a mesma URL de entrada.

• Clique em “Gerar novo pedido” no canto inferior direito.

capabilitiesDepois que o aplicativo for criado, vincule o número que você comprou ao aplicativo clicando no botão “Vincular” . Copie o número da Vonage vinculado e salve-o, pois você precisará ligar para ele mais tarde.

link numberNo painel esquerdo, clique em “Configurações da API”, selecione “Messages API” no botão de alternância e salve suas alterações.

Passo 6: Teste seus novos recursos.

Agora que você integrou um webhook para chamadas de voz recebidas, vamos testá-lo!

1. Faça uma chamada de voz do seu celular para o número da Vonage.

2. Ao conectar-se, você deverá ouvir uma mensagem do tipo “Obrigado por ligar de…”

3. Acesse o Painel da Vonage e, no painel à esquerda, clique em Registros. Aqui, você pode confirmar se a chamada foi recebida com sucesso.

Inbound Call LogSe você quiser aumentar a duração da chamada, altere o valor do parâmetro “loop”.

Agora que você integrou um webhook para SMS recebidos, vamos testá-lo!

1. Envie um SMS de qualquer número para o número da Vonage.

2. Acesse o Painel da Vonage e, no painel à esquerda, clique em “Logs”. Aqui, você pode confirmar se o teste foi recebido com sucesso.

SMS log

Conclusão

E é isso! Você acabou de configurar os webhooks para gerenciar essas comunicações em tempo real. Agora, seu aplicativo pode responder aos eventos recebidos assim que eles ocorrerem. Você pode expandir ainda mais esse aplicativo seguindo nosso tutorial sobre como adicionar código de cliente para chamadas de voz e SMS de saída e como fazer uma chamada de voz e enviar um SMS de saída. Se você seguiu este tutorial para seus próprios projetos, adoraríamos saber mais sobre isso! Participe da conversa em nossa Slack da Comunidade Vonage ou envie-nos uma mensagem no X, anteriormente conhecido como Twitter.