Criando um WhatsApp Bot Node.js que descobre qual música você está procurando

Já escutou uma música e queria muito saber qual o nome dela? Neste artigo, iremos criar um WhatsApp Bot Node.js que descobre exatamente isso!

Já escutou uma música e queria muito saber qual o nome dela? Neste artigo, iremos criar um WhatsApp Bot Node.js que descobre exatamente isso para o usuário. Venha descobrir como! 

Para isso, iremos criar uma aplicação usando JavaScript e Node.js. Será implementado um chatbot usando a plataforma da ZENVIA para realizar a integração com o WhatsApp e a plataforma da AudD. Com isso, será possível realizar a integração com o reconhecimento de música. O propósito do nosso tutorial é, justamente, testar algumas funcionalidades do WhatsApp, como envio e recebimento de mensagens texto, imagem e áudio.

E como irá funcionar? Após enviar um arquivo de áudio, com cerca de 5 segundos, a aplicação realizará o reconhecimento. Caso a música seja identificada, será enviado um conteúdo em texto com as informações do título, artista e álbum. Além de arquivo com imagem e 30 segundos de áudio da música.

Antes de entrarmos em nosso WhatsApp Bot Node.js, confira alguns dados importantes do WhatsApp: 

  • A primeira versão da aplicação WhatsApp para celular foi lançada em novembro de 2009 exclusivamente para iOS e em agosto de 2010 para Android.
  • Em 2014, o Facebook adquiriu o WhatsApp por $16 bilhões.
  • Atualmente possui mais de 5 bilhões de instalações no Google Play e mais de 1,5 bilhões de usuários online mensalmente, sendo o último dado divulgado em 2018.
  • Visando uma comunicação eficiente para empresas de pequeno, médio e grande porte com os seus consumidores em todo o mundo, em agosto de 2018 o WhatsApp lançou o WhatsApp Business API fornecendo uma API para enviar e receber mensagens podendo integrar com sistemas corporativos através de seus parceiros, sendo a ZENVIA um parceiro oficial do Facebook.

Vamos construir o nosso WhatsApp Bot Node.js para reconhecimento de músicas? Neste tutorial, você irá encontrar:

  • Criando uma conta na plataforma da ngrok.
  • Instalando e configurando a ferramenta da plataforma da ngrok.
  • Criando uma conta na plataforma da ZENVIA.
  • Criando um Sandbox na plataforma da ZENVIA.
  • Criando uma conta na plataforma da AudD.
  • Criando uma aplicação Node.js.

Criando um WhatsApp Bot Node.js para reconhecimento de música

1. Criando uma conta na plataforma da ngrok

ngrok é um serviço que expõe na Internet uma aplicação que está sendo executada localmente. Siga os passos:

1. Acessar o site https://ngrok.com/ e clicar no botão Sign up.

2. Preencher os campos Name, E-mail, Password, clicar em Não sou um robô e clicar no botão Sign Up. Também é possível acessar com o login social do GitHub ou Google.

3. Pronto! Sua conta foi criada na plataforma da ngrok.

2. Instalando e configurando a ferramenta da plataforma da ngrok

Seguindo o próximo passo para a criação do nosso WhatsApp Bot Node.js, a ferramenta da ngrok criará um túnel para a aplicação que está executando localmente disponibilizando uma URL na Internet. Faça as seguintes ações:

1. Acessar o site https://ngrok.com/download e realizar o download do arquivo de instalação para o seu sistema operacional.

2. Descompactar e instalar o arquivo que foi feito o download. No tutorial, está sendo utilizado o sistema operacional openSUSE Tumbleweed e apenas foi descompactado no diretório /usr/local/bin/.

3. Configurar o token de autenticação. No caso do artigo, foi executado o comando abaixo no terminal.

ngrok authtoken 1Rmotb9M3sa7Nw2Ox2w27hSY0c8_5ee3v6duPVT6Gfjb15omJ

Observação:

  • Utilize o seu token de autenticação que foi gerado na plataforma da ngrok.

4. Criar o túnel na porta 3000 que será a porta da aplicação. Em nosso caso, executamos o comando abaixo no terminal.

ngrok http 3000

5. Pronto! A ferramenta ngrok está configurada e exibirá no terminal a URL pública https://da3e845a1ceb.ngrok.io disponível para acessar na Internet.

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)
                                                                                                                                                                                                                                                                              
Session Status                online                                                                                                                                                                                                                                          
Session Expires               1 hour, 59 minutes                                                                                                                                                                                                                              
Update                        update available (version 2.3.40, Ctrl-U to update)                                                                                                                                                                                             
Version                       2.3.35                                                                                                                                                                                                                                          
Region                        United States (us)                                                                                                                                                                                                                              
Web Interface                 http://127.0.0.1:4040                                                                                                                                                                                                                           
Forwarding                    http://da3e845a1ceb.ngrok.io -> http://localhost:3000                                                                                                                                                                                           
Forwarding                    https://da3e845a1ceb.ngrok.io -> http://localhost:3000                                                                                                                                                                                          
                                                                                                                                                                                                                                                                              
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                                                                                                     
                              0       0       0.00    0.00    0.00    0.00

Observação: 

  • O túnel tem o tempo de expiração de 2 horas conforme exibido em Session Expires. Caso seja expirado, execute novamente o comando para criar o túnel.

3. Criando uma conta na plataforma da ZENVIA

A ZENVIA é uma plataforma que empodera as empresas a criar experiências únicas de comunicação para seus clientes através de diversos canais. Veja aqui como criar uma conta na plataforma da ZENVIA:

1. Acessar o site https://app.zenvia.com e clicar no link Criar sua conta.

2. Preencher os campos Nome, E-mail, Senha, clicar em Não sou um robô e clicar no botão Criar conta.

3. Pronto! Sua conta foi criada na plataforma da ZENVIA.

4. Criando um Sandbox na plataforma da ZENVIA

Sandbox é um conceito muito conhecido entre os desenvolvedores, onde permite que o desenvolvedor teste alguma funcionalidade de uma plataforma sem contratar o serviço. Por isso, o ideal é que o Sandbox seja sempre intuitivo e sem burocracias. Dando continuidade na construção do nosso WhatsApp Bot Node.js, siga os passos abaixo:

1. Clicar na opção Produtos do menu e depois clicar na opção Sandbox.

2. Clicar no botão Criar Novo.

3. Selecionar a opção WhatsApp no campo Canal e clicar no botão Próximo.

4. Escanear o QR Code usando o seu celular ou enviar a palavra scarlet-megaraptor para o número 551148377404 usando o aplicativo do WhatsApp. Uma outra opção também é acessar a URL https://wa.me/551148377404?text=scarlet-megaraptor através do seu celular, pois o aplicativo do WhatsApp será aberto com a mensagem scarlet-megaraptor para enviar para o número 551148377404.

Observações:

  • Essa palavra é gerada automaticamente quando um Sandbox é criado, portanto, ao chegar nesse passo, uma outra palavra será gerada.
  • Esse cadastro é necessário para que a plataforma da ZENVIA cadastre o(s) número(s) que gostaria de testar, impossibilitando o envio da mensagem para qualquer número.
  • É possível cadastrar outros números realizando o mesmo procedimento.

5. Ao enviar uma mensagem contendo a palavra gerada automaticamente, você receberá uma mensagem no seu telefone confirmando que o seu número foi cadastrado.

6. Na tela exibirá o(s) número(s) cadastrado(s) assim como o limite de 200 mensagens no período de 24 horas. Clicar no botão Próximo.

Observação:

  • Ao atingir o período de 24 horas, envie novamente a palavra gerada automaticamente para iniciar um novo ciclo de 200 mensagens no período de 24 horas. Caso utilize as 200 mensagens, terá que aguardar o período de 24 horas.

7. Na próxima tela, será possível testar o envio de uma mensagem do tipo texto ou do tipo template. No caso de um teste de envio de uma mensagem do tipo texto, selecione o número que deseja enviar no campo Para, digite uma mensagem no campo Mensagem a ser enviada e clique no botão Enviar mensagem.

Copie o token no parâmetro X-API-TOKEN que no nosso caso é o valor wloWzvrUo6dmlWNAHXEdnOptixINY0D-sl1d que usaremos na aplicação que será criada. Clicar no botão Próximo.

Observações:

  • No campo De, por ser um Sandbox, é gerado uma palavra automaticamente, mas será o identificador da integração quando contratar o serviço.
  • No campo Request é exibido um exemplo de requisição usando a ferramenta curl. Você poderá simular essa mesma requisição usando outras ferramentas como Postman ou Insomnia.
  • No campo Response é exibido a resposta da requisição no formato JSON.

8. Mensagem de teste enviada para o número selecionado.

9. Vamos criar uma assinatura para o webhook usando a URL que foi criada na plataforma da ngrok. Preencher o campo Message Webhook URL com a URL https://da3e845a1ceb.ngrok.io/message e o campo Status Webhook URL com a URL https://da3e845a1ceb.ngrok.io/status, clicar no botão Salvar e depois no botão Finalizar

10. Pronto! Sandbox criado para o canal WhatsApp, número do telefone e URL de webhook que serão usados nos testes configurados. A documentação da API está disponível em https://zenvia.github.io/zenvia-openapi-spec/

4. Criando uma conta na plataforma da AudD

AudD é um serviço que permite reconhecer uma música usando API. Siga as próximas instruções:

1. Acessar o site https://audd.io/ e clicar no botão Get an API Token.

2. Clicar no botão Login with GitHub, Google or email.

3. Clicar no link Sign up.

4. Preencher os campos Email address, Password e clicar no botão Continue.

5. Você receberá um e-mail, clicar no link Confirm my email address.

6. Clicar no botão Copy para copiar o token, pois o usaremos na aplicação que será criada.

7. Pronto! O token de API já está disponível para uso. A documentação da API está disponível em https://docs.audd.io/

5. Criando uma aplicação Node.js

Node.js é um software de código aberto, multiplataforma, que executa códigos JavaScript no servidor (backend) e na interface (frontend), baseado no interpretador JavaScript V8 do Google.

1. Criar o diretório da aplicação.

mkdir chatbot-whatsapp
cd chatbot-whatsapp

2. Criar o arquivo package.json. A opção -y permite que o arquivo seja criado sem as perguntas como nome do aplicação, versão, entre outras.

npm init -y

3. Instalar as dependências config, express, got. e @zenvia/sdk.

npm install dotenv express got

4. Criar o arquivo .env.

touch .env

5. Adicionar os tokens criados nas plataformas da ZENVIA e da AudD no arquivo .env conforme:

ZENVIA_TOKEN=KyPL0h8reftzxK8WV4yjCQ7zmkW8QRbABaIw
AUDD_TOKEN=d6ddef95aa1123a52e6d53e2aa2a4f08

6. Criar o diretório src e criar o arquivo index.js dentro do diretório src.

mkdir src
touch src/index.js

7. Adicionar o conteúdo abaixo no arquivo src/index.js onde ao receber uma mensagem, a aplicação enviará uma mensagem com o conteúdo Testado.

const dotenv = require('dotenv');
const { Client, TextContent, WebhookController } = require('@zenvia/sdk');

dotenv.config();

const client = new Client(process.env.ZENVIA_TOKEN);

const whatsapp = client.getChannel('whatsapp');

const webhook = new WebhookController({
  messageEventHandler: (messageEvent) => {
    console.log('Message event:', messageEvent);

    const content = new TextContent('Testado');

    whatsapp.sendMessage(messageEvent.message.to, messageEvent.message.from, content)
    .then(response => {
      console.log('Response:', response);
    });
  },
  channel: 'whatsapp',
});

webhook.on('listening', () => {
  console.log('Webhook is listening');
});

webhook.init();

8. Executar a aplicação com o comando:

node src/index.js

9. Testando a integração com a plataforma da Zenvia. Enviar uma mensagem de teste através do telefone cadastrado. Você deverá receber a mensagem com o conteúdo Testado.

10. Após criar e testar o envio e o recebimento das mensagens do tipo texto, vamos alterar o conteúdo do arquivo src/index.js para melhorar a aplicação consultando o reconhecimento de música e envio do conteúdo do tipo arquivo.

const dotenv = require('dotenv');
const got = require('got');
const FormData = require('form-data');
const { Client, FileContent, TextContent, WebhookController } = require('@zenvia/sdk');

dotenv.config();

const client = new Client(process.env.ZENVIA_TOKEN);

const whatsapp = client.getChannel('whatsapp');

const webhook = new WebhookController({
  channel: 'whatsapp',
  messageEventHandler: async (messageEvent) => {
    let content = [new TextContent('Testado')];

    if (messageEvent.message.contents[0].type === 'file' && messageEvent.message.contents[0].fileMimeType.includes('audio')) {
      const music = await recognizeMusic(messageEvent.message.contents[0].fileUrl);

      if (music) {
        let text = '';
        if (music.artist) {
          text = `${text}Artista: *${music.artist}*\n`;
        }
        if (music.title) {
          text = `${text}Título: *${music.title}*\n`;
        }
        if (music.album) {
          text = `${text}Álbum: *${music.album}*\n`;
        }
        content = [new TextContent(text)];
        if (music.deezer && music.deezer.picture) {
          content.push(new FileContent(music.deezer.picture, 'image/jpeg'));
        }
        if (music.deezer && music.deezer.preview) {
          content.push(new FileContent(music.deezer.preview, 'audio/mpeg'));
        }
      } else {
        content = [new TextContent('Não foi possível identificar a música do áudio.')];
      }
    }

    whatsapp.sendMessage(messageEvent.message.to, messageEvent.message.from, ...content)
    .then((response) => {
      console.debug('Response:', response);
    });
  },
});

webhook.on('listening', () => {
  console.info('Webhook is listening');
});

webhook.init();

const recognizeMusic = async (url) => {
  const form = new FormData();
  form.append('api_token', process.env.AUDD_TOKEN);
  form.append('url', url);
  form.append('return', 'deezer');

  const response = await got.post('https://api.audd.io/', {
    body: form,
    responseType: 'json',
    resolveBodyOnly: true,
  });

  if (response && response.result) {
    return {
      artist: response.result.artist,
      title: response.result.title,
      album: response.result.album,
      deezer: {
        picture: response.result.deezer && response.result.deezer.artist ? response.result.deezer.artist.picture_medium : undefined,
        preview: response.result.deezer ? response.result.deezer.preview : undefined,
      },
    };
  }
};

11. Executar novamente a aplicação com o comando:

node src/index.js

12. Testando a integração com a plataforma da AudD e da Zenvia. Vamos enviar o áudio de uma música. Clicar e segurar no botão para gravar uns 5 segundos de uma música.

13. Após enviar o arquivo de áudio com os 5 segundos uma música, a aplicação receberá o arquivo de áudio, consultará o reconhecimento da música e caso a música seja reconhecida, enviará um conteúdo do tipo texto com as informações da música como artista, título e álbum e outros 2 conteúdos do tipo arquivo com uma imagem e com 30 segundos da música.

14. Pronto! Aplicação testada e funcionando através do aparelho de telefone.

Repositório disponível em https://github.com/rodrigokamada/chatbot-whatsapp

Quer acessar mais conteúdos sobre WhatsApp? Aproveite para conferir os artigos:

*Rodrigo Kamada é IT Specialist na Zenvia | BlogMediumDev Community Hacker Noon.

Categorias:
Escrito por

Rodrigo Kamada

Leia também

Fique por dentro e confira as nossas dicas sobre o mercado mobile e interação digital.