Monitorar o status da mensagem do WhatsApp no Node.js e na API da Twilio para WhatsApp

Tempo de leitura: 3 minutos

January 31, 2020

Escrito por

Contribuidor

Monitorar o status da mensagem do WhatsApp no Node.js e na API da Twilio para WhatsApp

Ao longo do tempo, os meios de comunicação de mídia digital se expandiram de e-mail e SMS para mídias sociais. Estima-se que o usuário médio gasta pelo menos 2 horas e 22 minutos em plataformas de mídia social e mensagens por dia. Em um mundo onde quase todos estão conectados, as empresas aproveitaram essa oportunidade para promover e fazer campanhas para seus produtos e serviços. Mas qual é o ponto de enviar conteúdo promocional se não há como rastreá-lo? A API da Twilio para WhatsApp adicionou recentemente o recurso de confirmação de leitura com o qual se pode medir efetivamente se o destinatário consome o conteúdo enviado a ele. Neste tutorial, vou mostrar como você pode obter o status de uma mensagem de WhatsApp enviada pela API da Twilio para WhatsApp.

Pré-requisitos

Para concluir este tutorial, você precisará do seguinte:

Node.js, versão 8 ou superior
Conta da Twilio
Mongo DB
ngrok

Primeiros passos

Criei um app expresso que segue o padrão MVC apenas com uma rota para o envio de mensagens de WhatsApp. Adicionaremos os controladores dele à medida que avançarmos no tutorial. Siga as instruções abaixo em seu terminal de preferência para configurar seu ambiente de desenvolvimento:

mkdir demo && cd demo
git clone https://github.com/Felistas/whatsapp-status
cd whatsapp-status 
npm install
touch .env

Ativar o Sandbox da Twilio para WhatsApp

Depois de criar uma conta e um projeto gratuitos na Twilio, vá para a aba "All Products & Services" (Todos os produtos e serviços) no console e selecione a opção "Programmable SMS" (SMS programável). No dashboard exibido, selecione "WhatsApp Beta" e siga as instruções para ativar o sandbox. No meu caso, deveria enviar o código join smooth-took para +1 415 523 8886.

Sandbox para WhatsApp no console da Twilio

Após uma ativação bem-sucedida do sandbox, você deverá receber uma imagem semelhante como a mostrada abaixo:

Em seu editor de código favorito, adicione as seguintes linhas de código no arquivo app/message.controller.js.

const axios = require("axios");
const dotenv = require("dotenv");

const Message = require("./message.model");
dotenv.config();

const authToken = process.env.ACCOUNT_TOKEN;
const authSID = process.env.ACCOUNT_SID;
const url = process.env.TWILIO_URL;

const messageBody = {
 Body: "50% off on burgers 🍔 for you today",
 From: "whatsapp:+14155238886",
 PersistentAction: "geo:-1.232453, 36.878987", 
 To: "whatsapp:+254712345678"

};

const messageController = (req, res) => {
 axios
   .post(url, new URLSearchParams(messageBody), {
     auth: {
       username: authSID,
       password: authToken
     }
   })
   .then(response => {
     const messageResponse = {
       msid: response.data.sid,
       mobileNo: response.data.to,
       whatsAppBody: response.data.body,
       whatsAppStatus: response.data.status
     };
     new Message(messageResponse).save();
     res.status(200).send("Message sent successfully");
   })
   .catch(error => {
     res
       .status(400)
       .send("Oops!, an error occurred while sending the request");
   });
};

const messageStatus = async (req, res) => {
 const message = await Message.find({ msid: req.body.MessageSid });
 if (!message) {
   res.send("Invalid message ID!");
 } else {
   await Message.findOneAndUpdate(
     {
       msid: req.body.MessageSid
     },
     { whatsAppStatus: req.body.MessageStatus }
   );
 }
};

module.exports = {
 messageController: messageController,
 messageStatus: messageStatus
};

OBSERVAÇÃO: Certifique-se de substituir a chave To no objeto messageBody pelo seu próprio número.

O código acima cria o corpo de uma mensagem de WhatsApp e usa o Axios, um cliente baseado em promessa HTTP, para o navegador e o cliente enviarem a mensagem para o número de telefone especificado. Para fins de registro, estamos armazenando o status do WhatsApp, o SID da mensagem, o número do celular e o corpo do WhatsApp em nosso banco de dados.

No arquivo .env, adicione o seguinte:

ACCOUNT_SID= your_twilio_SID
ACCOUNT_TOKEN= your_twilio_token
TWILIO_URL=https://api.twilio.com/2010-04-01/Accounts/your_account_SID/Messages.json

OBSERVAÇÃO: Verifique o SID e o auth token (token de autenticação) da Twilio no seu dashboard.

Em seguida, cole as seguintes linhas de código em app/message.router.js.

const express = require("express");
const messageControllers = require("./message.controller");

const messageRouter = express.Router();

messageRouter.post("/whatsapp", (req, res) => {
 messageControllers.messageController(req, res);
});

messageRouter.post("/results", (req, res) => {
 messageControllers.messageStatus(req, res);
});

module.exports = messageRouter;

Teste

Em uma nova sessão do terminal, execute mongod e, na raiz de nosso projeto, execute node index.js para iniciar nosso aplicativo. Espere ver uma tela semelhante como resultado do seu último comando.

Em seguida, precisamos configurar nosso webhook no dashboard da Twilio para WhatsApp para receber os diferentes status do WhatsApp. Depois de baixar e configurar o ngrok, execute ./ngrok http 3000 para expor nosso localhost à Internet.

Copie o URL seguro e acrescente /results. Em seguida, cole-o na configuração do sandbox do WhatsApp, conforme mostrado abaixo. De acordo com minha tela, o URL resultante é: https://1993fac3.ngrok.io/results.

Abra o cliente REST de sua preferência e cole o seguinte URL http://localhost:3000/whatsapp. Você receberá uma nova mensagem do WhatsApp.

Para garantir que você esteja recebendo os diferentes status do WhatsApp, execute os seguintes comandos no seu terminal.

$ mongo
$ use WhatsAppDb
$ db.messages.find({}).pretty()

Antes de abrir a mensagem, recupere todas as mensagens usando db.messages.find({}).pretty(). O whatsAppStatus será delivered. Após abrir a mensagem, o BD será atualizado com o status correto que é read.

Conclusão

Neste tutorial, você aprendeu a rastrear mensagens do WhatsApp enviadas aos usuários. Você pode visualizar todo o código do projeto aqui. Adoraria saber sua opinião. Siga-me no Twitter ou me envie um e-mail. Aproveite as dicas!

Leitura adicional

Se quiser saber mais sobre como criar um aplicativo personalizado do WhatsApp, os seguintes documentos podem ajudar:

Este artigo foi traduzido do original "Track WhatsApp Message Status In Node.js and Twilio API for WhatsApp". Enquanto melhoramos nossos processos de tradução, adoraríamos receber seus comentários em help@twilio.com - contribuições valiosas podem render brindes da Twilio.