Oláaa meus amigos devs, tudo bem com vocês? Eu espero que sim, hoje venho trazer um tuto novamente de forma simples e fácil para que qualquer programador ou até mesmo qualquer pessoa que gosta de se aventurar na programação consiga reproduzir e extrair o máximo possível através disso!
Imagine o tanto de possibilidades disponíveis a partir do momento que você consegue capturar qualquer mensagem recebida no WhatsApp de um número previamente vinculado, tratar esse dado e executar alguma tarefa e responder para o contato que enviou a mensagem!
É exatamente isso que iremos fazer hoje, iremos fazer da forma mais simples possível para que seja funcional e a partir disso se for necessário escalar você já tem a base funcionando!
O que iremos precisar?
Vamos utilizar nesse tuto a lib Venom (https://github.com/orkestral/venom) que nos meus testes teve uma estabilidade ótima e tem um grande suporte da comunidade, nessa imagem abaixo conseguimos ver algumas funcionalidades da lib:
Você precisa ter o Node.js instalado na maquina (https://nodejs.org/en/download/) e algum editor de códigos para ajudar, eu sempre recomendo o VSCode (https://code.visualstudio.com/download)
Iniciando o projeto
Agora é só você abrir o seu Terminal e no Windows você pode abrir o Windows PowerShell:
Feito isso precisamos acessar a pasta onde queremos criar o projeto, eu vou mostrar como acessar a Área de Trabalho e criar uma pasta lá pelo Terminal:
cd C:\\Users\\mathe\\Desktop\\Sendo \mathe\ a pasta do seu usuário, caso não saiba o nome é só você digitar até o Users\ e apertar TAB no teclado que ele vai autocompletar com o nome ou listar as pastas disponíveis!
Feito isso iremos criar uma pasta com o nome webhook-whatsapp com o comando:
mkdir webhook-whatsappE agora iremos entrar na pasta e abrir no VSCode:
cd webhook-whatsapp
code .Com o VSCode aberto você precisa abrir o terminal pelo VSCode para facilitar a nossa vida:
No terminal você vai digitar e executar o comando:
yarn init -yPara ele iniciar o nosso projeto dentro da pasta
Instalando a lib Venom
Agora vamos instalar a lib que irá realizar a comunicação entre o seu WhatsApp e a aplicação:
yarn add venom-botEle pode levar alguns minutos dependendo da sua conexão ou maquina, só aguardar ele finalizar:
Criando nosso código
Agora vamos criar um arquivo com o nome index.js:
const venom = require('venom-bot');
venom.create({
session: 'webhook-whatsapp',
multidevice: true
}).then((client) => start(client)).catch((erro) => {
console.log(erro);
});
function start(client) {
client.onMessage((message) => {
});
}
Na primeira linha nós importamos a lib necessária, na linha 3 iniciamos a lib com o método create, passando 2 parâmetros nas configurações, o session que você pode colocar um nome para essa sessão da lib, pois ela suporta múltiplos números ativos ao mesmo tempo em sessões separadas, e o segundo parâmetro é caso o seu número tenha o Multidispositivos ativado, se sim você passa um booleano true ou se não tiver passe false.
Ja na linha 6 ele tem um bloco de then onde caso de tudo certo com a conexão da lib com o seu número ele vai executar a função chamada start passando como propriedade o cliente que foi conectado com sucesso, mas se acontecer alguma falha nesse processo ele vai executar o block de catch e no nosso caso iremos mostrar esse erro no console como esta na linha 7.
E na linha 10 declaramos a nossa função com o nome start e recebendo o cliente recentemente conectado como parâmetro, e na linha seguinte pegamos o método onMessage do client que seria o evento disparado quando o seu número recebe uma mensagem!
Primeira execução
Antes de qualquer coisa vamos executar esse código e vincular o nosso número, salve o seu index.js e no seu terminal rode:
node index.jsNa primeira execução ele pode levar um tempo a mais para finalizar e iniciar pois ele faz todo o processo de configuração do navegador headless, abre o WhatsApp Web e inicia a transmissão dos dados para a gente:
Ao finalizar ele vai aparecer o QRCode para você ler através do seu WhatsApp no celular, porém um ponto, aqui no meu VSCode o terminal estava com uma altura menor e cortou o QRCode sem possibilidade de scrollar para cima, se isso ocorrer da um CTRL+C para matar o processo do node, aumenta a altura do terminal e roda o comando novamente para iniciar o index.js!
Ai agora é só você abrir o WhatsApp no seu celular e ler o QRCode apresentado no terminal:
E quando ele finalizar a sincronização ele vai apresentar a mensagem:
Respondendo a primeira mensagem
Beleza, agora já temos o nosso número vinculado, para testar podemos fazer o seguinte, da um CTRL+C, e um node index.js novamente, não é para a aplicação pedir o QRCode novamente:
Feito isso da um CTRL+C para agora começarmos a tratar a mensagem que iremos receber no nosso número, no seu index.js na linha 12 coloque um console.log(message) para entendermos quais dados e qual estrutura recebemos quando uma mensagem chega:
const venom = require('venom-bot');
venom.create({
session: 'webhook-whatsapp',
multidevice: true
}).then((client) => start(client)).catch((erro) => {
console.log(erro);
});
function start(client) {
client.onMessage((message) => {
console.log(message);
});
}Rode novamente no terminal node index.js para iniciar o projeto, e envie ou peça para alguém enviar uma mensagem para o número vinculado e veja no terminal o resultado, deixei aqui o JSON que ele retorna e em negrito os dados do remetente ou destinatário, o restante dos campos interessantes são autoexplicativos através da chave:
{
id: 'false_**NUMERO_REMETENTE**@c.us_**ID**',
body: 'Teste',
type: 'chat',
t: 1673634465,
notifyName: '**NOME_REMETENTE**',
from: '**NUMERO_REMETENTE**@c.us',
to: '**NUMERO_DESTINATARIO**@c.us',
self: 'in',
ack: 1,
isNewMsg: true,
star: false,
kicNotified: false,
recvFresh: true,
isFromTemplate: false,
pollInvalidated: false,
isSentCagPollCreation: false,
latestEditMsgKey: null,
latestEditSenderTimestampMs: null,
broadcast: false,
mentionedJidList: [],
isVcardOverMmsDocument: false,
isForwarded: false,
labels: [],
hasReaction: false,
ephemeralOutOfSync: false,
productHeaderImageRejected: false,
lastPlaybackProgress: 0,
isDynamicReplyButtonsMsg: false,
isMdHistoryMsg: false,
stickerSentTs: 0,
isAvatar: false,
requiresDirectConnection: false,
pttForwardedFeaturesEnabled: true,
chatId: '**NUMERO_REMETENTE**@c.us',
fromMe: false,
sender: {
id: '**NUMERO_REMETENTE**@c.us',
name: '**NOME_REMETENTE**',
shortName: '**APELIDO_REMETENTE**',
pushname: '**NOME_REMETENTE**',
type: 'in',
isBusiness: false,
isEnterprise: false,
isSmb: false,
labels: [],
isContactSyncCompleted: 1,
disappearingModeDuration: 0,
disappearingModeSettingTimestamp: 1648928571,
formattedName: '**APELIDO_REMETENTE**',
displayName: '**APELIDO_REMETENTE**',
formattedShortName: '**APELIDO_REMETENTE**',
formattedShortNameWithNonBreakingSpaces: '**APELIDO_REMETENTE**',
isMe: false,
mentionName: '**APELIDO_REMETENTE**',
notifyName: '**NOME_REMETENTE**',
isMyContact: true,
isPSA: false,
isUser: true,
isWAContact: true,
profilePicThumbObj: {
eurl: '**URL_FOTO_REMETENTE**',
id: '**NUMERO_REMETENTE**@c.us',
img: '**URL_FOTO_REMETENTE**',
imgFull: '**URL_FOTO_REMETENTE**',
tag: '1668472512'
},
msgs: null
},
timestamp: 1673634465,
content: 'Teste',
isGroupMsg: false,
isMedia: false,
isNotification: false,
isPSA: false,
chat: {
id: '**NUMERO_REMETENTE**@c.us',
labels: [],
lastReceivedKey: {
fromMe: true,
remote: '**NUMERO_REMETENTE**@c.us',
id: '**ID**',
},
t: 1673634353,
unreadCount: 0,
isReadOnly: false,
muteExpiration: 0,
isAutoMuted: false,
notSpam: true,
ephemeralDuration: 0,
disappearingModeInitiator: 'chat',
unreadMentionCount: 0,
hasUnreadMention: false,
archiveAtMentionViewedInDrawer: false,
hasChatBeenOpened: false,
tcToken: {},
tcTokenTimestamp: 1673526746,
tcTokenSenderTimestamp: 1673537174,
endOfHistoryTransferType: 1,
pendingInitialLoading: false,
chatlistPreview: {
type: 'reaction',
msgKey: 'false_**NUMERO_REMETENTE**@c.us_3A2CB5F95414C6EFB8CF',
parentMsgKey: 'true_**NUMERO_REMETENTE**@c.us_7D6FE301C1620C3854',
reactionText: '????',
sender: '**NUMERO_REMETENTE**@c.us',
timestamp: 1673401263674
},
msgs: null,
kind: 'chat',
isGroup: false,
contact: {
id: '**NUMERO_REMETENTE**@c.us',
name: '**APELIDO_REMETENTE**',
shortName: '**APELIDO_REMETENTE**',
pushname: '**NOME_REMETENTE**',
type: 'in',
isBusiness: false,
isEnterprise: false,
isSmb: false,
labels: [],
isContactSyncCompleted: 1,
disappearingModeDuration: 0,
disappearingModeSettingTimestamp: 1648928571,
formattedName: '**APELIDO_REMETENTE**',
displayName: '**APELIDO_REMETENTE**',
formattedShortName: '**APELIDO_REMETENTE**',
formattedShortNameWithNonBreakingSpaces: '**APELIDO_REMETENTE**',
isMe: false,
mentionName: '**APELIDO_REMETENTE**',
notifyName: '**NOME_REMETENTE**',
isMyContact: true,
isPSA: false,
isUser: true,
isWAContact: true,
profilePicThumbObj: [Object],
msgs: null
},
groupMetadata: null,
presence: { id: '**NUMERO_REMETENTE**@c.us', chatstates: [] },
isOnline: true,
lastSeen: null
},
isOnline: true,
lastSeen: null,
mediaData: {},
linkPreview: false,
text: 'Teste',
initialPageSize: 768
}
Com isso iremos criar uma simples resposta, para o nosso sistema responder automáticamente:
Olá {nome_do_remetente}, recebemos a sua mensagem: {mensagem_do_remetente}
Dentro da sua função start pode apagar o console.log que adicionarmos e adicionar o seguinte conteúdo:
function start(client) {
client.onMessage((message) => {
const remetente_id = message.sender.id;
const remetente_nome = message.sender.name;
if (message.isGroupMsg === false) {
const mensagem = `Olá *${remetente_nome}*\\n\\nRecebemos a sua mensagem: ${message.body}`;
client.sendText(remetente_id, mensagem).then((result) => {
console.log('Resultado do envio: ', result);
}).catch((error) => {
console.error('Erro no envio: ', error);
});
}
});
}
Nesse código adicionado criamos 2 constantes chamadas remetente_id que é necessário para podermos disparar a resposta e o remetente_nome para capturar o nome do remetente, capturamos isso pelo message.sender.id e message.sender.name respectivamente através da análise do JSON anteriormente!
Feito isso na linha 5 verificamos através do método isGroupMsg se a mensagem recebida veio de dentro de um grupo ou não, no meu caso eu quero pegar somente mensagens enviadas no meu privado fora dos grupos.
Na linha seguinte configuro a mensagem da resposta adicionando dinamicamente o nome e a mensagem recebida, aqui podemos usar qualquer formatação que o WhatsApp suporte como negrito, itálico, bem como emojis e para quebra de linha você pode usar o \n
Na linha 7 eu realizo o disparo da resposta, passando o ID do remetente capturado anteriormente e a mensagem, e no bloco de then eu dou um console.log no resultado do disparo caso sucesso, e na sequencia no bloco de catch eu disparo um console.error caso o disparo falhe.
Testando resposta automática
Vamos testar? Salve e rode novamente com o node index.js e receba novamente 1 mensagem e veja o resultado:
E pronto, temos um webhook em NodeJS pronto para escutar as mensagens recebidas e responde-las de forma automática, a partir dessa base você consegue construir diversas interações no seu WhatsApp de uma forma 100% gratuita sem precisar pagar por APIs de terceiros.
O que da para construir com isso?
Eu mesmo já utilizei essa lib para construir um chatbot de vendas para um dos clientes da minha agência, fiz de uma forma simples naquele momento, criei uma tabela no banco de dados para armazenar os passos do chatbot usando o campo “from” que é o número da pessoa + @c.us e armazenava um JSON contendo as opções selecionadas e a etapa do chatbot que a pessoa estava! Com isso aumentamos a taxa de conversão da empresa e reduzimos eventuais erros de preenchimento no checkout! Hoje esse cliente já esta na solução oficial da Meta o CloudAPI que trarei em breve como vocês podem conseguir um número oficial do WhatsApp também sem custo!
Espero que vocês tenham gostado do post novo, se vocês tiverem alguma dúvida em como implementar ou em como fazer alguma coisa usando a lib comentem aqui embaixo que em breve irei te auxiliar! Compartilhe com seus colegas e vamos espalhar o conhecimento!