Blog Zenvia
O melhor portal de Marketing e Vendas para a sua empresa
O melhor portal de Marketing e Vendas para a sua empresa
Saiba como construir um chatbot de previsão do tempo no canal RCS usando Node.js: confira nosso passo a passo e teste agora mesmo!
min de leitura
O RCS tem mostrado inúmeras possibilidades de uso, ampliando a quantidade de mídias que agora estão disponíveis para os usuários e empresas. Para exemplificar um dos casos de uso, mostraremos o passo a passo de como construir um chatbot no canal RCS. Para isso, será criada uma aplicação usando JavaScript e Node.js, em que será implementado um chatbot simples de previsão do tempo.
Além disso, usaremos a plataforma da ZENVIA para realizar a integração com RCS e a plataforma da OpenWeatherMap para realizar a integração com dados meteorológicos. Com isso, conseguiremos testar algumas funcionalidades do RCS, como envio e recebimento de mensagens de texto e imagem e o compartilhamento de localização.
Construir um chatbot é somente uma das opções que o canal RCS oferece. É importante contextualizar que o RCS (Rich Communication Service) é um novo protocolo de comunicação que utiliza a infraestrutura das operadoras, assim como o SMS, com o objetivo de ter conteúdos ricos como imagem, vídeo, botão, card, entre outros.
Esse protocolo pode ser implementado por qualquer sistema operacional ou aplicação mobile. Porém, atualmente, é suportado no Android com a aplicação Messages. Veja na sequência como construir um chatbot de previsão do tempo no canal RCS com Node.js.
Primeiramente, ngrok é um serviço que expõe na Internet uma aplicação que está sendo executada localmente. Para começar a construir o nosso chatbot de previsão do tempo, siga os passos abaixo.
1. Acessar o site 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.
A ferramenta da ngrok criará um túnel para a aplicação que está executando localmente e disponibilizará uma URL na Internet.
1. Acessar esse site 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. Para a criação desse tutorial sobre como construir um chatbot no canal RCS, está sendo utilizado o sistema operacional openSUSE Tumbleweed e, por isso, foi somente descompactado no diretório /usr/local/bin/.
3. Configurar o token de autenticação. No caso, 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. No tutorial, 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.00Observação:
Para construir nosso chatbot de previsão de tempo, vamos utilizar a plataforma da ZENVIA. Lembrando que a ZENVIA é uma empresa que tem como objetivo criar experiências de comunicação e, por isso, atua com diversos canais, como SMS, WhatsApp, Voz, Facebook Messenger, WEB Chat e RCS. Veja o passo a passo.
1. Acessar o site 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, em que se permite testar alguma funcionalidade de uma plataforma sem contratar o serviço. Portanto, precisa ser intuitivo e sem burocracias.
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 RCS no campo Canal e clicar no botão Próximo.
4. Digitar o número do seu telefone e clicar no botão Enviar mensagem.
Observações:
6. Você receberá uma mensagem no seu telefone confirmando o cadastro do número. Clique no botão Accept para confirmar o seu cadastro.
7. Na sequência, você receberá uma mensagem no seu telefone confirmando que o seu número foi cadastrado.
8. Serão exibidos na tela os números cadastrados, assim como o limite de 200 mensagens no período de 24 horas. Clicar no botão Próximo.
Observação:
9. Na próxima tela, será possível testar o envio de uma mensagem do tipo texto. 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. No caso do tutorial, será o valor KyPL0h8reftzxK8WV4yjCQ7zmkW8QRbABaIw, pois usaremos na aplicação que será criada. Clicar no botão Próximo.
Observações:
10. Mensagem de teste enviada para o número selecionado.
11. 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.
12. Pronto! Sandbox criando para o canal RCS, número do telefone e URL de webhook que serão usados nos testes configurados. A documentação da API está disponível aqui.
A plataforma OpenWeatherMap é um serviço que permite obter dados meteorológicos usando APIs. Saiba como criar uma conta que será utilizada para construir o chatbot:
1. Acessar o site e clicar no link Sign In.
2. Clicar no link Create an Account.
3. Preencher os campos Username, Enter email, Password, Repeat Password, clicar em I am 16 years…, clicar em I agree with…, clicar em Não sou um robô e clicar no botão Create Account.
4. Selecionar uma opção no campo Purpose e clicar no botão Save.
5. Pronto! Sua conta foi criada na plataforma da OpenWeatherMap.
1. Clicar no link API keys.
2. Na próxima tela será exibido a chave de API que será usada no teste. Copie a chave no parâmetro Key. Em nosso caso, o é valor 311207449541d9dbd7f7bc9a52680e57, pois usaremos na aplicação que será criada.
3. Pronto! A chave de API já está disponível para uso. Você pode acessar a documentação da API aqui.
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-rcs
cd chatbot-rcs2. 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 e got.
npm install dotenv express got4. Criar o arquivo .env.
touch .env5. Adicionar os tokens criados nas plataformas da ZENVIA e da OpenWeatherMap no arquivo .env conforme:
ZENVIA_TOKEN=KyPL0h8reftzxK8WV4yjCQ7zmkW8QRbABaIw
OPENWEATHERMAP_TOKEN=311207449541d9dbd7f7bc9a52680e576. 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 express = require('express');
const got = require('got');
dotenv.config();
const app = express();
app.use(express.json());
app.post('*', async (req, res) => {
const contentReceived = req.body;
console.log(`Content Received [${JSON.stringify(contentReceived)}]`);
res.sendStatus(200);
if (!contentReceived || !contentReceived.message || !contentReceived.message.contents) {
return;
}
if (contentReceived.type === 'MESSAGE') {
await got.post('https://api.zenvia.com/v2/channels/rcs/messages', {
responseType: 'json',
resolveBodyOnly: true,
json: {
from: contentReceived.message.to,
to: contentReceived.message.from,
contents: [{
type: 'text',
text: 'Testado',
}],
},
headers: {
'X-API-TOKEN': process.env.ZENVIA_TOKEN,
},
});
}
});
app.listen(3000);
console.log('Listening...');
8. Executar a aplicação com o comando:
node src/index.js9. Testar 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 e consultar os dados meteorológicos e envio do conteúdo do tipo card.
const dotenv = require('dotenv');
const express = require('express');
const got = require('got');
dotenv.config();
const app = express();
app.use(express.json());
app.post('*', async (req, res) => {
const contentReceived = req.body;
console.log(`Content Received [${JSON.stringify(contentReceived)}]`);
res.sendStatus(200);
if (!contentReceived || !contentReceived.message || !contentReceived.message.contents) {
return;
}
if (contentReceived.type === 'MESSAGE') {
let content = {
type: 'text',
text: 'Testado',
};
if (contentReceived.message.contents[0].type === 'location') {
const weather = await getWeather(contentReceived.message.contents[0].latitude, contentReceived.message.contents[0].longitude);
content = {
type: 'card',
text: `? Tempo em ${weather.name}\n\nTemperatura: ${weather.temperature}º\nTemperatura Mínima: ${weather.temperatureMinimum}º\nTemperatura Máxima: ${weather.temperatureMaximum}º\nUmidade: ${weather.humidity}%`,
media: {
url: weather.url,
disposition: 'ON_THE_LEFT',
},
};
}
await got.post('https://api.zenvia.com/v2/channels/rcs/messages', {
responseType: 'json',
resolveBodyOnly: true,
json: {
from: contentReceived.message.to,
to: contentReceived.message.from,
contents: [{...content}],
},
headers: {
'X-API-TOKEN': process.env.ZENVIA_TOKEN,
},
});
console.log(`Content Sent [${JSON.stringify(content)}]`);
}
});
app.listen(3000);
console.log('Listening...');
const getWeather = async (latitude, longitude) => {
const response = await got.post(`https://api.openweathermap.org/data/2.5/weather?appid=${process.env.OPENWEATHERMAP_TOKEN}&units=metric&lat=${latitude}&lon=${longitude}`, {
responseType: 'json',
resolveBodyOnly: true,
});
return {
name: response.name,
temperature: response.main.temp,
temperatureMinimum: response.main.temp_min,
temperatureMaximum: response.main.temp_max,
humidity: response.main.humidity,
url: `https://rodrigokamada.github.io/openweathermap/images/${response.weather[0].icon}[email protected]`,
};
};
11. Executar novamente a aplicação com o comando:
node src/index.js12. Testar a integração com a plataforma da OpenWeatherMap e da ZENVIA. Vamos compartilhar a localização. Clicar no botão 
13. Clicar no botão 
14. Clicar no botão 
15. Após compartilhar a localização, a aplicação receberá a mensagem contendo as informações de latitude e longitude, consultará os dados meteorológicos e enviará um conteúdo do tipo card com os dados meteorológicos.
16. Pronto! Aplicação testada e funcionando através do aparelho de telefone.
Repositório disponível aqui.
O que achou do nosso tutorial sobre como construir um chatbot no canal RCS? Se ficou com alguma dúvida, utilize nosso espaço de comentários!
*Rodrigo Kamada é IT Specialist na Zenvia | Blog, Medium, Dev Community e Hacker Noon.
