){kind=small}
Criando um painel interativo: WhatsApp, SMS e MMS para um site (Parte 1)
Tempo de leitura: 11 minutos
Você tem interesse em criar um painel interativo para exibir mensagens em eventos? Este tutorial sobre como criar um aplicativo web com Node.js Express vai orientá-lo sobre como receber mensagens SMS, MMS e do WhatsApp, salvá-las em um banco de dados e exibi-las em um site. Além disso, vou compartilhar dicas para uma comunicação segura para toda a família. Em Parte 2 , vou mostrar como criar a aplicação web usando o AI Studio, então fique ligado!
O código do projeto está no GitHub. Clone-o e vamos ao tutorial abaixo. Preparei tudo para explicar cada detalhe passo a passo.
Há algumas coisas que esperamos que você faça antes de começarmos este projeto. Vou listá-las a seguir:
Um Account da Vonage - para usar as APIs de comunicação para receber mensagens SMS, MMS e do WhatsApp.
Um account no Airtable - para armazenar o número de telefone, mensagens de texto e imagens
ngrok - é um túnel que permite expor o código local à internet
A interação começa quando um usuário envia uma mensagem SMS, MMS ou pelo WhatsApp para um número. A estrutura do projeto que criaremos passo a passo deverá ficar assim ao final do tutorial.
Utilizamos o Express.js e as seguintes rotas (pontos de extremidade que expõem diferentes funcionalidades de um aplicativo web) que o aplicativo disponibiliza para mensagens recebidas, exibindo-as em um site por meio da obtenção de dados no Airtable.
/inbound: Rota POST para mensagens recebidas, interagindo com o Airtable para armazenamento./messages/:messageId/:status: Rota POST para atualizar o status de uma mensagem no Airtable./messages: Rota GET para buscar mensagens filtradas por status no Airtable.
Iremos adicionar todos os componentes à medida que avançarmos neste tutorial; por enquanto, vamos expor à internet o projeto que teremos em execução localmente; usaremos ngrok.
Execute ngrok http 3001 no seu terminal, neste caso, porque está rodando na porta 3001. Em seguida, adicionaremos o endpoint do webhook gerado ao nosso Painel da Vonage usando a Messages API na subseção a seguir.
Conforme mencionado no início deste artigo, ter um Account na Vonage é um pré-requisito para este tutorial. Você pode seguir as etapas abaixo para se cadastrar e criar um novo Account.
Faça login no seu Painel de Controle da Vonage
Vá até “Numbers” e clique em “Comprar números” no menu à esquerda
Pesquise e compre um número de telefone no seu país
Vá até “Applications” no menu à esquerda e clique em “Criar um novo aplicativo”
Dê ao aplicativo um nome como “Quadro Interativo”
Na seção “Recursos”, ative a opção “Mensagens”
Em “Webhook de SMS recebidas”, defina a URL como a URL do seu servidor + a rota '/inbound'
Em “Webhook de status”, defina a URL como a URL do seu servidor + a rota '/status'
Messages Inbound and Status URLs.Clique para salvar o formulário na parte inferior da página, à direita
Vincule o número adquirido na parte inferior da página do aplicativo clicando em “Vincular” ao lado dele.
Qualquer SMS ou MMS enviado para esse número seguirá a /inbound essa rota e será processada. Existem alguns requisitos para que o número possa enviar mensagens MMS; listei-os nesta postagem do blog, “Como enviar mensagens MMS com Node.js”.
As etapas a seguir explicam como configurar sua sandbox de mensagens do WhatsApp para testá-la. Você também pode configurá-la com números de telefone virtuais e de WhatsApp Business.
Faça login no seu Painel de Controle da Vonage
Clique em “Messages Sandbox” na seção “Ferramentas do desenvolvedor” do menu à esquerda “Messages API” e clique em “Criar um novo WhatsApp Sandbox”
Escolha o WhatsApp Sandbox. Você pode se conectar a esse sandbox enviando uma mensagem pelo WhatsApp para o número de telefone autorizado, escaneando o código QR fornecido.
Na seção “Webhooks”, defina a URL da mensagem de entrada como a URL do seu servidor + a rota '/inbound'
Seu número de telefone pode enviar e receber mensagens do WhatsApp usando o ambiente de testes da Messages API do Vonage.
Quer você tenha clonado o link do repositório do GitHub fornecido ou esteja criando a pasta do projeto agora, certifique-se de ter uma pasta principal para este projeto; podemos chamá-la de “interactive-board”. Depois disso, certifique-se de que haja um .env arquivo contendo nossas variáveis de ambiente para este projeto; vamos adicionar as seguintes variáveis:
Criar um token de acesso do Airtablee adicione os escopos que usaremos neste projeto: data.records:read to Visualizar os dados nos registros e data.records:write to criar, editar e excluir registros. Por fim, conceda acesso ao espaço de trabalho que estamos usando atualmente para este projeto. Clique para criar e adicione o token à variável de ambiente ‘AIRTABLE_ACCESS_TOKEN’. Também precisaremos do ID da nossa base do Airtable. Você pode consultar a documentação deles para obter ajuda Como encontrar IDs na API do Airtable. Sua URL da base deve ter um formato semelhante a https://airtable.com/AIRTABLE_BASE/string-of-characters. O AIRTABLE_BASE é o primeiro conjunto de caracteres após airtable.com/ e antes do segundo /.
Usaremos HTML e CSS para exibir as mensagens que o arquivo main.js busca da nossa API e lidar com a lógica em JavaScript. Crie uma public pasta seguida de um index.html arquivo para renderizar a interface do quadro de mensagens e importar o main.js arquivo para acessar os dados das mensagens.
Adicione o estilo CSS que inclui três classes fundamentais: .message-record para mensagens individuais com fundo gradiente e preenchimento; .event-title para o título principal, também com um gradiente para dar destaque, e .message-grid para organizar as mensagens em um layout de grade responsivo. Estou usando uma <style> neste código, mas, se preferir, você pode criar um arquivo CSS e importá-lo para o seu arquivo HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive Board</title>
<style>
.message-record {
background: linear-gradient(135deg,#871fff,#7ec9f4);
padding: 10px;
box-sizing: border-box;
}
.event-title {
background: linear-gradient(135deg,#d41f9c,#ffa78c);
}
.message-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
}
</style>
</head>
<body>
<h1 class="event-title">Vonage ♥s <Event Name></h1>
<div id="messages"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
É hora de criar o main.js arquivo na public pasta que importamos em nosso HTML e adicionar o código para buscar mensagens do servidor Express e exibi-las em um layout de grade.
Crie o main.js arquivo na public pasta e adicione os seguintes trechos de código:
const messagesDiv = document.getElementById("messages");
messagesDiv.className = "message-grid";Buscar mensagens do servidor:
function fetchMessages() {
fetch("http://localhost:3001/messages?status=Accepted")
.then(response => response.json())
.then(data => {
// Process data...
})
.catch(error => console.error(error));
}
Atualizar as mensagens a cada 60 segundos:
setInterval(fetchMessages, 60000);
Vamos ver como o servidor Express lida com as mensagens recebidas e as salva no Airtable. Adicione o código a seguir ao arquivo “index.js”.
Importamos a dependência dotenv para carregar variáveis de ambiente do .env, o Express para lidar com solicitações da web e o SDK do Airtable para integração com a API do Airtable.
const dotenv = require('dotenv').config(); // loads environment variables
const express = require('express') // web framework
const Airtable = require('airtable') // Airtable SDK
const base = new Airtable({apiKey: process.env.AIRTABLE_ACCESS_TOKEN})
.base(process.env.AIRTABLE_BASE)Use o token de acesso do Airtable e o ID da base armazenados em .env para inicializar a base do Airtable. (Consulte a etapa “Variáveis de ambiente” deste tutorial). Essa base contém as tabelas “Numbers” e “Messages”.
/inbound Solicitações
app.post('/inbound', (req, res) => {
// ... handle incoming messages
const { from, text, channel, message_type } = req.body;
console.log(JSON.stringify(req.body));
res.send('Message received!');
})
Definimos uma rota POST em /inbound para receber mensagens. Isso exibirá “Mensagem recebida!” na tela quando uma solicitação chegar à /inbound rota. Substituiremos isso mais tarde pelo armazenamento no banco de dados, mas é uma maneira rápida de verificar se as mensagens estão chegando.
base('Numbers').select({
filterByFormula: `Number=${from}`
}).eachPage(records => {
if(records.length == 0) {
// create a new user
} else {
// existing user, get ID
}
})
Procure o número do remetente na tabela “Numbers”. Se não houver correspondência, crie um novo usuário. Caso contrário, obtenha o ID do registro do usuário existente.
let status = 'Pending'
base('Messages').create({
Message: text,
Number: [numberId],
Status: status,
ImageUrl: imageUrl
})Crie um novo registro de mensagem no Airtable com o conteúdo da mensagem, o ID do remetente, o status e a URL da imagem.
Nosso aplicativo utiliza um arquivo blocklist.txt para moderação de mensagens, permitindo que você adicione quaisquer palavras ou frases consideradas inadequadas ou irrelevantes.
Carregar a lista de bloqueados: O
blocklist.txtarquivo é inicialmente lido usando o módulo de sistema de arquivos fs do Node.js. Cada linha desse arquivo representa uma palavra ou frase a ser bloqueada. Isso é feito com o seguinte código:let blocklist = fs.readFileSync('blocklist.txt', 'utf8').split(/\s+/);Copiar
Essa linha lê o conteúdo do arquivo, dividindo-o em uma matriz de palavras/frases com base nos espaços e nas quebras de linha.
Verificação de mensagens: Quando o aplicativo recebe uma nova mensagem na rota ‘/inbound’, ele verifica se o texto contém palavras bloqueadas. A verificação compara o texto da mensagem com cada palavra bloqueada, sem levar em conta maiúsculas ou minúsculas. Isso garante que o filtro funcione mesmo que alguém digite uma palavra imprópria com capitalização incomum.
if (blocklist.some(word => message.toLowerCase().includes(word.toLowerCase()))) { // actions to reject the message }CopiarCorrespondências de identificadores: Se uma mensagem contiver qualquer palavra da lista de bloqueio, seu status é imediatamente definido como “Rejeitado”. Por padrão, o status de cada mensagem é “Pendente”, indicando que ela aguarda moderação.
let status = "Pending"; if (blocklist match) { status = "Rejected"; } // Code to save the message with its updated statusCopiarAtualizar a lista de bloqueios: Para adicionar novas palavras ou frases, abra
blocklist.txt, insira as novas entradas (uma por linha) e salve o arquivo. Pode ser necessário reiniciar o servidor para que as alterações entrem em vigor.
Esse mecanismo de lista de bloqueio é uma camada fundamental da moderação de conteúdo, permitindo filtrar mensagens indesejadas com base em critérios específicos. Embora seja um processo manual, ele oferece uma maneira simples e eficaz de manter a qualidade e a relevância das mensagens exibidas no seu fórum.
A integração da IA ao sistema de lista de bloqueio poderia melhorar significativamente a filtragem de mensagens. A IA é capaz de compreender o contexto e o tom das mensagens, aprimorando a detecção de spam ou conteúdo impróprio. Essa abordagem avançada permite uma moderação mais precisa e adaptável.
Conforme indicado nos pré-requisitos, você deve criar um Account no Airtable. Após fazer login, localize as etapas abaixo no painel do Airtable.
Crie uma base chamada “Mensagens” clicando em “+ Criar uma base” e, se quiser, escolha uma cor e um ícone para o tema; eu pulei o restante da configuração, mas fique à vontade para preenchê-la se desejar, e segui até o final do processo de criação da base, quando fui direcionado para a base “Mensagens”.
Agora você pode ver algumas linhas numeradas vazias. Vamos criar duas tabelas: “Numbers”, para armazenar os números de telefone dos usuários, e “Mensagens”, para armazenar as mensagens recebidas.
Adicione uma coluna “Número” à tabela “Numbers”.
A tabela “Mensagens” deve conter as seguintes colunas: “Mensagem”, “Número” (vinculada à tabela “Numbers”) e “Status”, do tipo “Seleção única”, com as opções “Aceita”, “Pendente” e “Rejeitada”. E, por fim, “ImageUrl”.
Crie visualizações como a “Visualização em grade” para filtrar mensagens
Nas etapas a seguir, vou mostrar como sincronizar a base do Airtable com o código, usar as tabelas “Numbers” e “Messages” e realizar operações CRUD, como criar, selecionar e atualizar, além de usar filtros para consultar o status das mensagens. Vá em frente e adicione as etapas abaixo ao seu arquivo “index.js”.
É hora de inicializar a “Base”; vamos adicionar a chave da API do Airtable e a Base ao nosso código JavaScript.
const base = new Airtable({apiKey: process.ENV.AIRTABLE_KEY}).base(process.ENV.ACCESS_TOKEN);A tabela “Numbers” é usada para procurar ou criar novos usuários:
base('Numbers').create({Number: phoneNum})
base('Numbers').select({filterByFormula: `Number=${phoneNum}`})A tabela “Mensagens” é usada para criar novas mensagens recebidas:
base('Messages').create({
Message: text,
Number: [numberId],
Status: status,
ImageUrl: imageUrl
})As mensagens são selecionadas por meio de filtros:
base('Messages').select({
filterByFormula: `Status="${statusFilterValue}"`
})Os status das mensagens são atualizados:
base('Messages').update(messageId, {
Status: status
})
Agora que já temos o código e o banco de dados prontos, é hora de testar tudo. Certifique-se de que todas as dependências estejam instaladas executando npm install. Execute o projeto digitando o comando node index.js no seu terminal e certifique-se de que há uma instância do ngrok em execução.
Acesse localhost:3001 no seu navegador. Envie uma mensagem SMS, MMS ou pelo WhatsApp para o número de telefone virtual da Vonage associado ao seu aplicativo web. Acesse sua base do Airtable e altere o status da mensagem que você recebeu. Se for aceita, você verá a mensagem exibida no site em execução no localhost:3001.
Hoje, você aprendeu a construir um painel interativo que recebe mensagens SMS, MMS ou do WhatsApp e as exibe. Usei o Airtable neste exemplo, mas você pode usar qualquer outro banco de dados de sua escolha (por exemplo, MongoDB ou Firebase) para armazenar e recuperar informações. Na próxima série deste tutorial, você aprenderá a implementar a mesma funcionalidade usando nosso AI Studio.
Fique à vontade para conversar conosco e compartilhar o que achou deste tutorial no nosso X, antigo Twitter ou Comunidade do Slack!