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.

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

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 

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.

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 

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; 

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.

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!

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