Blog Zenvia
O melhor portal de Marketing e Vendas para a sua empresa
O melhor portal de Marketing e Vendas para a sua empresa
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!
min de leitura
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:
Vamos construir o nosso WhatsApp Bot Node.js para reconhecimento de músicas? Neste tutorial, você irá encontrar:
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.
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_5ee3v6duPVT6Gfjb15omJObservação:
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 30005. 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:
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.
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:
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:
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:
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/
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/
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-whatsapp2. 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 -y3. Instalar as dependências config, express, got. e @zenvia/sdk.
npm install dotenv express got4. Criar o arquivo .env.
touch .env5. Adicionar os tokens criados nas plataformas da ZENVIA e da AudD no arquivo .env conforme:
ZENVIA_TOKEN=KyPL0h8reftzxK8WV4yjCQ7zmkW8QRbABaIw
AUDD_TOKEN=d6ddef95aa1123a52e6d53e2aa2a4f086. Criar o diretório src e criar o arquivo index.js dentro do diretório src.
mkdir src
touch src/index.js7. 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.js9. 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.js12. 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 
13. Após enviar o arquivo de áudio com os 5 segundos de 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 | Blog, Medium, Dev Community e Hacker Noon.
