Como fazer um robô de Whatsapp (chatbot) em 1 dia!

Alline Oliveira
Como programar em 1 dia!
21 min readMay 21, 2021

O Whatsapp finalmente liberou o uso de robôs (chatbots) no Brasil! Vamos aprender então como fazer essa troca de mensagens inteligente entre números de Whatsapp.

A biblioteca que vamos utilizar aqui para autenticar um robô no Whatsapp e gerenciar as trocas de mensagens será a WppConnect.

É grátis, simples, brasileira e funciona muito bem.

NodeJS

A WppConnect utiliza a linguagem NodeJS para seu consumo e customização. Comece baixando e instalando o Node em seu computador:

https://nodejs.org/pt-br

https://nodejs.org/pt-br/

Verifique se a instalação está ok testando as linhas abaixo na janela de comandos de seu computador:

Testando as versões do Node e do npm

Editor de código

Aqui nesse tutorial vamos utilizar o Visual Studio Code para criar nossos arquivos de código. Mas fique a vontade para usar qualquer outro editor de sua preferência.

Baixe e instale o VSCode no link abaixo:

https://code.visualstudio.com

VSCode

Número de Whatsapp

Bom, para ter um robô de Whatsapp, você precisa de um celular com um número de telefone e o Whatsapp instalado (pode ser o Whatsapp Business ou não).

robo.js

No VSCode, crie uma pasta (workspace) para os arquivos de seu robô e adicione o arquivo inicial robo.js à ela, através do menu File> New File:

robo.js

Salve esse novo arquivo com o nome robo.js (Control + S).

npm init

Para criar um novo projeto NodeJS, utilizamos o comando npm init. Este comando cria o arquivo package.json que conterá os metadados de seu projeto NodeJS.

Digite npm init no console de comandos, dentro da pasta do arquivo do seu robô:

npm init

Digite “Enter” em todas as linhas requisitadas, para responder com as opções padrão:

npm init

Pronto. Volte ao Visual Studio e observe o arquivo de configuração gerado, package.json:

package.json

Dúvidas e Feedback

E aí! Tá curtindo o tutorial até agora?

Entre em nosso grupo do Telegram, tire suas dúvidas e deixe seu feedback!

@APPem1dia

https://t.me/joinchat/JxXfahbkVFXrY3SOsnlNvw

WppConnect

Utilizando o npm (o instalador de pacotes do Node), instale a biblioteca gratuita WppConnect.

Digite o comando abaixo na sua janela de comandos:

npm i --save @wppconnect-team/wppconnect

npm i --save @wppconnect-team/wppconnect

Observe que o arquivo package.json já foi atualizado com a dependência da biblioteca que acabamos de instalar:

package.json dependencies

wppconnect.create()

Agora adicione as primeiras linhas de código abaixo ao seu arquivo robo.js:

A primeira linha desse código importa a biblioteca wppconnect para ser utilizada em seu programa:

const wppconnect = require(‘@wppconnect-team/wppconnect’);

O primeiro comando abaixo, create(), irá inicializar a conexão do número de telefone do seu robô com o servidor de mensagens lá do Whatsapp.

wppconnect.create()

Alguns parâmetros são necessários passar dentro do comando create() para que o bot funcione posteriormente na Nuvem. Explicaremos essa parte ao final do tutorial.

wppconnect.create({
session: whatsbot,
autoClose: false,
puppeteerOptions: { args: [‘ — no-sandbox’] }
})

Se tudo correr bem (cláusula then), a chamada do comando create() irá retornar uma conexão aberta, armazenará essa conexão dentro da variável client e fará a chamada da função onMessage().

.then((client) =>
client.onMessage((message) => {

}))

O evento onMessage() da variável client fica sempre online aguardando as mensagens enviadas pelos usuários. Quando uma mensagem é enviada para o número do robô, a sua função de callback é inicializada.

No caso desse primeiro exemplo, essa função de callback irá mandar uma mensagem “PING!” para os usuários e aguardará receber um “PONG” de retorno.

client.sendText(message.from, ‘PING! Mande um PONG para mim:’)

Se ocorrer algum erro (exceção catch), o wppconnect.create() irá exibir essa mensagem de erro no console do seu programa:

.catch((error) =>
console.log(error));

wppconnect.create()

Vamos detalhar esse pedaço de código novamente mais abaixo.

Executando o código

De volta à sua janela de comando, vá para o diretório do seu código e digite o comando a seguir:

> node robo.js

node robo.js

O comando node seguido do nome do seu arquivo robo.js irá compilar e executar o código NodeJS que se encontrar dentro desse arquivo.

Para parar a execução digite o comando Control+C.

npm start

Vamos configurar o script start no arquivo package.json para que nosso projeto NodeJS saiba se inicializar sozinho através do comando npm start.

Insira a linha abaixo dentro das configurações de script do seu arquivo package.json, como na figura abaixo:

'start ' : 'node robo.js',

script de start

E então execute o comando npm start na sua janela de comando para testá-lo:

npm start

O npm start executará automaticamente o comando definido como start no script do package.json.

QR code de inicialização

A primeira vez que executar o comando create(), o wppconnect irá estabelecer todos os passos necessários para autenticar e inicializar o seu robô perante o servidor do próprio Whatsapp.

O Whatsapp utiliza um QR code para fazer essa autenticação remota.

No Whatsapp de seu celular, vá para o menu Whatsapp Web, clique em “Conectar um aparelho” e escaneie o código QR exibido pela inicialização do WppConnect:

Whatsapp Web

ATENÇÃO: A janela de exibição do QR Code deve possuir fundo preto e o QR code deve ser exibido na cor branca. O contrário não funcionará.

Quando o QR code for escaneado o WppConnect fará o pareamento entre o celular e o servidor do Whatsapp e exibirá a mensagem de sucesso:

Pareamento do QR code executado com sucesso

Observe que uma pasta /tokens foi criada automaticamente no diretório de seu projeto:

Pasta /tokens gerada

Evento client.onMessage()

O evento client.onMessage() é acionado toda vez que algum usuário manda alguma mensagem para o número de Whatsapp do seu robô.

client.onMessage((message) => {
});

Esse evento recebe a variável message como parâmetro, ou seja, o conteúdo da mensagem enviada pelo usuário (body) mais os metadados associados à essa mensagem.

Por curiosidade, vamos exibir o conteúdo da mensagem enviada pelo usuário no console da aplicação:

console.log(‘Mensagem digitada pelo usuário: ‘ + message.body);

E depois, já vamos fazer o robô retornar alguma coisa para o usuário para saber que ele existe. O comando de envio de mensagens para os usuário é o client.sendText().

O client.sendText() necessita passar dois parâmetros: o chatId do usuário a qual a mensagem será retornada, ou seja, o conteúdo da variável message.from, e o texto da mensagem a ser enviada.

client.sendText(message.from, ‘PING! Mande um PONG para mim:’)

Se houver algum erro no envio dessa mensagem, exibiremos a mensagem do erro no console.

Evento onMessage()

Teste na prática!

Com o código do robo.js ainda rodando em seu computador, pegue um outro número de Whatsapp qualquer e envie uma mensagem para o número de Whatsapp de seu robô.

Confira o resultado!

Lógica

Vamos começar a adicionar alguma inteligência ao nosso robô.

Vamos mandar uma mensagem de boas-vindas e vamos requisitar o nome do usuário que está conversando com o robô.

Observe que o código abaixo vai ganhando complexidade. Copie e cole em seu arquivo robo.js:

robo.js

Criamos uma função sendWppMessage() que vai encapsular o código de envio das mensagens via WppConnect.

E então usamos a função sendWppMessage() para enviar a mensagem de boas-vindas logo seguida da mensagem de requisição do nome do usuário.

sendWppMessage()

Salve o arquivo acima, e agora vamos testar essa nova interação.

Interrompa a execução atual do código do robo.js, digitando Control+C na janela de comando, e reinicialize sua execução digitando o comando
“npm start” novamente.

node robo.js

E agora mande um Oi qualquer para o número de Whatsapp de seu robô:

Observe que ele já começa a interagir.

Estágios

Agora vamos adicionar vários estágios de interação entre os usuários e seu robô.

Copie a função stages() abaixo e cole em seu código robo.js:

Observe a variável global criada na linha 3:

var userStages = [];

E a função stages() criada na linha 18.

Estamos armazenando na variável global userStages o estágio atual de cada um dos usuários que está se comunicando com o robô através do valor do chatId, que é fornecido pela variável message.from.

Agora a cada mensagem enviada para o robô por algum usuário, o evento client.onMessage() chama a função stages() que captura o estágio atual do usuário:

let stage = userStages[message.from];

E depois atualiza a conversação através do comando condicional switch/case:

switch (stage) {
case ‘Nome’:

default:
}

stages()

Para cada um dos estágios da conversação (no caso: Olá, Nome, CPF e Fim), o comando switch/case trata a interação da forma adequada.

Observe que se o estágio do usuário atual for ‘Nome’, o código captura o valor da última mensagem digitada pelo usuário através da variável message.body e o robô envia uma mensagem de volta de agradecimento confirmando o valor de nome digitado pelo usuário:

const nome = message.body;
sendWppMessage(client, message.from, ‘Obrigada, ‘ + nome);

E na mesma sequência o robô já envia uma outra mensagem requisitando o CPF do usuário e o atualiza para o seu próximo estágio que será ‘CPF’:

sendWppMessage(client, message.from, ‘Digite seu *CPF*:’);
userStages[message.from] = ‘CPF’;

E assim o código se repete para os demais estágios da conversação.

O caso default do comando switch é chamado quando o usuário atual ainda não possui um valor armazenado na variável global userStages().

Nesse caso, o código envia uma mensagem de boas-vindas, requisita o nome do usuário corrente e já inicializa seu estágio como ‘Nome’.

Uma outra coisa que o bloco default do comando switch também faz, a título de verificação, é imprimir no console da aplicação o valor do chatId:

console.log(‘*Usuário atual* from:’ + message.from);

Teste na prática!

Vamos ver na prática tudo isso funcionando.

Na janela de comandos, interrompa (Control+C) e inicialize o robo.js novamente (npm start).

Envia uma primeira mensagem qualquer para o número de Whatsapp do robô.

Aguarde o robô requisitar pelo nome do usuário e digite o seu nome.

Observe que o robô receberá e repetirá a mensagem que você digitou e já requisitará o seu CPF.

E assim por diante até o estágio ‘Fim’.

Agora volte ao console da sua janela de comando:

Console da janela de comando

Observe que todas as mensagens digitadas pelo usuário foram impressas no console e após a primeira mensagem, também foi impresso os valores de chatId (message.from) e do nome do Whatsapp do usuário (pushname).

E observe também que o chatId contém o número de telefone do usuário corrente!

Banco de Dados

Um problema importante até aqui é que se você desligar o seu computador, ou interromper a execução do programa robo.js, todos esses valores digitados pelos usuários irão se perder da memória.

Vamos então criar um banco de dados para armazenar de forma permanente todos esses valores trocados nas conversas com seus usuários.

O banco de dados que iremos utilizar aqui nesse tutorial será o Firestore do Firebase.

Firebase

O Firebase é uma plataforma da Google que oferece gratuitamente um banco de dados para o nosso código de forma muito simples e eficiente.

Vamos começar nos autenticando, criando um novo projeto e abrindo o console do Firebase no nosso novo projeto criado:

https://firebase.google.com

https://console.firebase.google.com

Firestore

Vamos habilitar o banco de dados Firestore no console do Firebase.

Clique no menu Firestore a esquerda e depois no botão Create database.

Habilitando o Cloud Firestore

Selecione a opção “Start in production mode, e pode escolher a região da Nuvem onde os seus dados ficarão armazenados. Para finalizar clique no botão Enable.

Cloud Firestore

firebase-admin

O Firestore possui uma API REST que pode ser acessada diretamente através de request HTTP, sem precisar instalar nenhuma biblioteca adicional em seu código. Observe a documentação no link abaixo:
https://firebase.google.com/docs/firestore/use-rest-api?hl=pt-br

Porém o acesso a essa API pode ser facilitado em muito através da biblioteca do Firestore para Nodejs que se encontra no pacote firebase-admin.

Digite a linha abaixo na sua janela de comando dentro do diretório do seu arquivo robo.js para instalar a biblioteca de administração do Firebase:

npm install firebase-admin --save

npm install firebase-admin --save

Observe inclusive que seu arquivo package.json foi atualizado também com a nova dependência do Firebase.

Depois de instalada a biblioteca do Firestore você poderá adicioná-la ao seu código Node. Importe-a inserindo a linha abaixo no início do seu arquivo robo.js:

const firebaseadmin = require(firebase-admin);

const firebaseadmin = require(‘firebase-admin’);

Firebase Credentials

O próximo passo para utilizar o Firestore no seu programa é autenticá-lo dentro do seu código.

Para pegar as credenciais do banco de dados, clique no menu Project Settings e depois na aba Service accounts:

Firebase Service Accounts

Clique no botão Generate new private key e depois no botão Generate key:

Generate Service Account private key

Esse botão irá gerar o arquivo .json que conterá as chaves pública e privada de conexão com o seu banco de dados do Firestore.

Mova o arquivo gerado para a pasta do seu programa:

arquivo de credenciais .json

E então copie as linhas de código abaixo para dentro do seu arquivo robo.js:

O código acima faz a importação do arquivo .json para dentro do seu programa, depois inicializa o Firebase com as credenciais importadas e então inicializa o banco de dados do Firestore.

firebaseServiceAccount

Salvar usuários

Pronto, agora já estamos prontos para salvar e resgatar registros no banco de dados do Firestore.

Vamos criar uma função saveUser() que irá armazenar de forma permanente os dados do usuário que está interagindo com o robô. E então poderemos acessar esses dados em qualquer outro momento que desejarmos.

Copie e cole o código abaixo dentro do seu arquivo robo.js:

As funções que interagem com o banco de dados são assíncronas (async), ou seja, ela envia a requisição desejada ao banco e não pára a execução de seu código enquanto aguarda o retorno dos dados. Os dados são retornados através de chamadas de callback.

No caso acima, adicionamos o comando await, que obriga o programa a aguardar o retorno da requisição antes de continuar a execução das próximas linhas de código. E assim conseguimos manipular o retorno da requisição de forma contínua.

A função saveUser() armazena no banco de dados alguns dados iniciais do usuário atual:

  • o valor do pushname (o nome do usuário no Whatsapp) mas somente caso ele o tenha cadastrado (ou seja, seu conteúdo não seja igual a undefined). O valor de message[‘sender’][‘pushname’] é verificado pelo comando inline if abaixo:

‘pushname’:
(message[‘sender’][‘pushname’] != undefined) ?
message[‘sender’][‘pushname’]
: ‘ ’

  • e o número de telefone do Whatsapp do usuário (message.from) que está interagindo com o robô naquele momento.
    O comando replace() seguido da expressão regular abaixo vai retirar todas as letras da variável chatId (message.from) e vai deixar somente os números inteiros contidos nela, ou seja a variável chatId retornada, exemplo ‘5521987654321@c.us’, ficará somente ‘5521987654321’:

‘whatsapp’: (message.from).replace(/[^\d]+/g, ‘’)

Os dados são armazenados no Firestore no formato de documento JSON.

O comando que salva um novo registro no Firestore é o comando add():

db.collection(‘usuarios’).add(user);

A linha de código acima, criará um novo registro no banco dados com o valor de user. Esse registro será armazenado na coleção “usuarios”.

Registro no Firestore

O Firestore é um banco de dados Não Relacional (NoSQL), ou seja, não exige um esquema fixo e pré-definido para seus dados armazenados.

Os bancos de dados NoSQL são orientados a documentos (o equivalente a um registro de dado dos bancos tradicionais), e armazenam esses registros em coleções (ou seja, o equivalente às tabelas de dados dos bancos tradicionais).

db.collection(‘usuarios’).add(user);

No código acima, o documento (registro) user será armazenado na coleção usuarios, no banco de dados db, configurado pelas credenciais de acesso ao Firebase no início do código robo.js.

saveUser()

Por último, vamos chamar a função saveUser() assim que um novo usuário digitar uma mensagem no robô. Adicione a linha de código abaixo dentro do caso default da sua função stages(), como na linha 47 do exemplo acima:

saveUser(message);

Testando na prática

Agora vamos executar o código acima e entender na prática tudo o que está acontecendo com o nosso novo banco de dados.

Na sua janela de comandos, execute “npm start” e mande uma mensagem para o seu robô de um outro Whatsapp qualquer.

Observe os resultados do console na janela de comandos:

resultados da execução no console

Observe o valor de identificação (id) do novo registro que acabou de ser criado no banco de dados:

Novo usuário cadastrado: Hagp8alXs7hVca2jH433

Agora vamos até o console do Firestore, conferir os dados do nosso usuário atual armazenados de forma permanente num banco de dados:

https://console.firebase.google.com/

Ta-dá! 🤗

Desacoplamento

Com a adição de mais e mais lógica ao nosso robô, o código vai ficando complexo e é necessário nos preocuparmos com o desacoplamento.

Por exemplo, comece criando uma pasta com o nome de /src (ou source, que significa, código fonte em inglês), e mova o arquivo robo.js para esta pasta. Desta forma todos os arquivos de código que serão executados pelo bot ficarão separados dos demais arquivos de configuração.

/src/robo.js

Ao mesmo tempo, atualize no arquivo package.json, o script start, com o novo caminho de acesso ao arquivo robo.js.

“start”: “node ./src/robo.js”

script start atualizado

Digite npm start na janela de comando para testar o novo caminho de acesso ao arquivo principal de seu bot.

firebase.js

Agora vamos isolar todo o código de acesso ao Firebase em um arquivo .js separado.

Dentro da pasta /src, crie um novo arquivo de código chamado firebase.js.

Remova do arquivo robo.js as linhas de código inicial de conexão com o banco de dados e mova essas linhas para o novo arquivo firebase.js, como na figura abaixo:

/src/firebase.js

Atualize na linha 3 o novo caminho para o arquivo de configuração das senhas de conexão do Firebase adicionando o endereço relativo à pasta raíz “../”.

E agora vamos importar o arquivo firebase.js para dentro do robo.js, adicionando a linha de código abaixo no início do código do robo.js:

const firebasedb = require(‘./firebase.js’);

require firebase.js

firebasedb.save()

Vamos remover a linha de código que faz o acesso ao banco de dados de dentro da função saveUser() e vamos criar uma outra função save() separada dentro do arquivo firebase.js que conterá somente esse código de salvamento de dados no Firestore:

let newRegister = await db.collection(‘usuarios’).add(user);

Ao declarar a nova função save(), devemos receber o usuário a ser salvo como parâmetro e também adicionar o comando exports para que essa função possa ser acessada por outros arquivos de fora do arquivo firebase.js.

Copie e cole o código abaixo no arquivo firebase.js:

exports.save()

Se quisermos, podemos também adicionar a data e hora corrente de cadastro do novo usuário no formato de timestamp (segundos) do Firestore:

user[‘date’] = firebaseadmin.firestore.Timestamp.fromDate(new Date());

timestamp do novo usuário

Insira também o campo ‘id’ aos dados do usuário para facilitar a transferência desse registro:

user[‘id’] = newRegister.id;

newRegister.id

Por último, atualize a função saveUser() para acessar a nova função save() do arquivo firebase.js:

let newUser = firebasedb.save(user);

firebasedb.save(user)

Query

Enquanto o usuário continuar respondendo as mensagens do robô, vamos pegar o conteúdo dessas informações (message.body) e vamos atualizar o cadastro no banco de dados para esse usuário.

Para isso, a cada nova mensagem digitada por cada usuário, precisamos fazer uma pesquisa (query) no banco de dados para identificar o usuário corrente.

Adicione a função abaixo ao seu arquivo firebase.js:

queryByPhone()

A função recebe o número do whatsapp do usuário atual como parâmetro e busca no banco do Firestore se já existe um registro cadastrado desse mesmo telefone anteriormente, ou seja se já não é mais a primeira mensagem desse usuário para o bot.

Observe que essa função queryByPhone() já está no formato assíncrono (async) e de exportação para outros arquivos (exports).

Dentro da query, vamos colocar a cláusula where() com a chamada get(), que é uma chamada assíncrona (await).

Essa cláusula where() consultará os registros da coleção ‘usuarios’ e retornará o registro cujo campo ‘whatsapp’ tem o valor igual ao valor da variável phone.

O resultado da pesquisa é apontado para a variável queryRef.

const queryRef = await db.collection(‘usuarios’)
.where(‘whatsapp’, ‘==’, phone)
.get();

Se a consulta encontrar algum registro pré-cadastrado no banco de dados, ou seja, se o usuário já tiver falado com o robô anteriormente, então fazemos uma iteração (forEach) no array queryRef de retorno para pegar o registro encontrado.

O array queryRef possui internamente o id e o conteúdo do registro do usuário (user) no formato JSON dentro do campo data().

Armazenamos entao os dados do usuário encontrado (user.data()) junto com seu id (user.id) na variável userdata.

if (!queryRef.empty) {
queryRef.forEach((user) => {
userdata = user.data();
userdata[‘id’] = user.id;
});
}

Caso seja a primeira vez que o usuário corrente estiver falando com o bot, entao a query retornará empty e a função queryByPhone() retornará
userdata = null, como previamente declarada e inicializada.

queryByPhone()

queryUserByPhone()

Agora vamos para o arquivo robo.js para criar a função queryUserByPhone() que fará a chamada da função queryByUser() do arquivo firebase.js.

queryUserByPhone()

O telefone do usuário corrente é retirado da variável message.from removendo todos os seus dígitos não numéricos e retornando na variável phone somente os dígitos numéricos, como na linha abaixo:

let phone = (message.from).replace(/[^\d]+/g, ‘’);

A função assíncrona queryByPhone() do arquivo firebase.js é então chamada passando essa variável phone como parâmetro:

let userdata = await firebasedb.queryByPhone(phone);

Se o usuário não for encontrado previamente no banco de dados do Firebase, então a função saveUser() é chamada e o código fica aguardando (await) até que o novo usuário passe a existir no banco:

if (userdata == null) {
userdata = await saveUser(client, message);
}

Com a variável userdata devidamente preenchida, a função stages() agora está pronta para ser chamada, após a busca ou o armazenamento do novo usuário no banco de dados.

console.log(‘Usuário corrente: ‘ + userdata[‘id’]);
stages(client, message, userdata);

Por último, a função queryUserByPhone() deve ser então chamada dentro do evento client.onMessage(), ao invés da função stages().

queryUserByPhone()

Update

Vamos modificar a função stages() para que possamos atualizar o cadastro do usuário de acordo com o estágio da conversa em que ele se encontra e de acordo com seus dados informados que já foram armazenadas no banco.

Adicione a função update() abaixo ao seu arquivo firebase.js:

A linha abaixo recebe o registro do usuário no formato JSON (userdata) e atualiza o registro da coleção usuarios do banco de dados, cujo id seja igual ao valor do campo id dentro de userdata:

db.collection(‘usuarios’).doc(userdata[‘id’]).set(userdata);

update()

E por último substitua a função stages() pelo código abaixo:

stages()

Código completo

Todo o código que construímos até aqui pode ser acessado integralmente no link abaixo. Confira com o seu:

https://github.com/allineo/robowhats/blob/main/src/robo.js

https://github.com/allineo/robowhats/blob/main/src/robo.js

Teste final

Agora vamos fazer o teste final de todo o código até aqui:

Execute o seu código na janela de comando: “npm start”.

Envie uma mensagem para o Whatsapp de seu robô e responda as perguntas solicitadas:

Vá acompanhando na sua janela de comando as mensagens enviadas pelo código para o console:

console de execução

E finalmente aprecie o resultado dos dados armazenados no banco de dados!

https://console.firebase.google.com

Hospedagem na Nuvem

Da forma que estamos fazendo aqui até agora, o robô irá parar de funcionar assim que desligarmos o computador. O robô não poderá retornar mensagens a qualquer momento se o nosso computador pessoal não estiver executando o código robo.js.

Precisamos de um Servidor na Nuvem que fique executando o código remota e constantemente para que nossos usuários possam utilizar o robô a qualquer momento e de qualquer lugar.

GitHub

Para transferir nossos arquivos para um Servidor, vamos primeiro subir nosso código para um controlador de versões.

O GitHub é a plataforma de hospedagem de código-fonte mais utilizada no momento no mundo. Acesse GitHub.com e faça seu cadastro se ainda não o tiver.

GitHub.com

No Dashboard do GitHub clique no botão New e preencha o nome do seu projeto, clique na opção “Add a README file” e clique no botão Create Repository.

New Repository

Dentro da página do seu novo repositório, clique no botão Add File e depois na opção Upload Files:

Upload Files

De dentro do seu gerenciador de arquivos, selecione os seguintes arquivos:
- /src/robo.js
-/src/firebase.js
- package.json
- seu arquivo de configuração do Firebase

e arraste todos para dentro da janela de upload do GitHub.

https://github.com/allineo/robowhats

Heroku

Nesse tutorial vamos utilizar a nuvem do Heroku para hospedar o servidor do nosso bot. É uma plataforma gratuita e simples, muito boa para o que precisamos no momento.

Acesse e faça seu cadastro:
http://heroku.com

http://heroku.com

Quando acessar o dashboard da plataforma, clique no botão Create new app:

https://dashboard.heroku.com/new-app

Digite um nome único para seu bot e clique no botão Create app:

https://dashboard.heroku.com/new-app

Deployment Method

Quando o dashboard do projeto se abrir, observe que a aba Deploy já está selecionada.

Na seção de Deployment Method, clique na opção GitHub e conecte-se com a sua conta do GitHub.com que acabou de criar anteriormente:

Deployment Method

Digite o nome do repositório do GitHub criado para o seu bot e clique no botão Search. Selecione então o seu repositório criado:

Connect to GitHub

Ao clicar no botão Connect, o Heroku estará pronto para fazer o Deploy automaticamente usando os arquivos contidos no repo do seu Github:

GitHub Deploy

Buildpacks

Antes de fazer o deploy no Heroku precisamos adicionar dois buildpacks ao nosso projeto.

Clique na aba Settings do menu e observe a seção Buildpacks:

Buildpacks

Clique no botão Add Buildpacks, selecione a opção NodeJS e clique no botão Save changes:

heroku/nodejs

Depois, clique novamente no botão Add Buildpacks, digite a URL abaixo e clique no botão Save changes:

jontewks/puppeteer

jontewks/puppeteer

Pronto:

Buildpacks

Procfile

Antes de fazer realmente o deploy do bot no Heroku, precisamos adicionar um arquivo Procfile de configuração. Esse arquivo irá dizer ao Heroku de que forma a plataforma deverá inicializar a nossa aplicação.

Lá no VSCode, crie um novo arquivo e dê o nome de Procfile. Somente Procfile, sem nenhuma extensão, tipo .js, ou .txt, nada!

Depois adicione uma única linha de código a esse arquivo:

worker: npm start

Procfile

Agora vá até o GitHub.com e adicione esse arquivo Procfile ao seu repo. Pode usar a opção de Upload files, ou fazer o commit da forma que preferir.

Profile no GitHub repo

Deploy

Vamos finalmente fazer o deploy de nossos arquivos na Nuvem do Heroku.

Volte a aba Deploy, no menu do Heroku, e clique no último botão Deploy Branch.

Deploy no Heroku

Logs

Durante a execução do deploy clique na aba Activity do menu e abra o log de execução do build:

Log de execução do build

Quando o build terminar com sucesso, clique no botão More, no canto superior direito da tela do Heroku e depois na opção View logs.

Substitua a opção All Processes por Worker:

View Logs

Worker

Observe que o comando npm start já foi dado automaticamente pelo worker definido no Procfile.

Infelizmente não é possível escanear o QRcode gerado pelo WppConnect dentro da interface de logs do Heroku, por causa da inversão das cores e da formatação da tela.

Copie o valor de code dado pelo log do worker logo abaixo do QRcode, e acesse a URL abaixo para escaneá-lo:

https://br.qr-code-generator.com

https://br.qr-code-generator.com

Escaneie agora normalmente o QRcode com a opção Web no Whatsapp do seu bot.

E então finalmente teste o funcionamento do robô:

Log de execução do seu bot

--

--