Como construir um chatbot de previsão do tempo no canal RCS usando Node.js

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!

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.

  1. Criando uma conta na plataforma da ngrok
  2. Instalando e configurando a ferramenta da plataforma da ngrok
  3. Criando uma conta na plataforma da ZENVIA
  4. Criando um Sandbox na plataforma da ZENVIA
  5. Criando uma conta na plataforma da OpenWeatherMap
  6. Consultando a chave de API na plataforma da OpenWeatherMap
  7. Criando uma aplicação Node.js
  8. Extras

Saiba como construir um chatbot no canal RCS

1. Criando uma conta na plataforma da ngrok

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.

2. Instalando e configurando a ferramenta da 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_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. No tutorial, 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

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.

4. Criando um Sandbox 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:

  • Essa etapa é necessária 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.

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:

  • Ao atingir o período de 24 horas, cadastre novamente os números de telefone 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.

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:

  • No campo De, por ser um Sandbox, é criada uma palavra aleatória que corresponde ao identificador da integração quando o serviço é contratado.
  • 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.

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. 

5. Criando uma conta na plataforma da OpenWeatherMap

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.

6. Consultando a chave de API 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.

7. 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-rcs
cd chatbot-rcs

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 e got.

npm install dotenv express got

4. Criar o arquivo .env.

touch .env

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

ZENVIA_TOKEN=KyPL0h8reftzxK8WV4yjCQ7zmkW8QRbABaIw
OPENWEATHERMAP_TOKEN=311207449541d9dbd7f7bc9a52680e57

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 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.js

9. 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.js

12. Testar a integração com a plataforma da OpenWeatherMap e da ZENVIA. Vamos compartilhar a localização. Clicar no botão para exibir as opções.

13. Clicar no botão para exibir o compartilhamento do local.

14. Clicar no botão para compartilhar a localizaçã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.

8. Extras

  • Operadoras disponíveis no Brasil: Claro, Oi, Tim e Vivo. 
  • Caso tenha problemas de funcionamento da aplicação Messages do Google, habilite a opção Ativar recursos de chat disponível dentro do menu Configurações e depois em Recursos de chat.

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.

Categorias:
Escrito por

Rodrigo Kamada

Leia também

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