){kind=small}
Crie um sistema interativo de notificações de entrega por SMS usando o ExpressJS
Uma das coisas incríveis sobre o SMS é o quanto ele é onipresente. Não importa se você tem um smartphone ou um celular “básico” dos anos 90, você poderá enviar e receber mensagens SMS. Embora muitas empresas os utilizem apenas como serviço de notificação, eles se tornam realmente poderosas quando facilitam um canal de comunicação bidirecional entre empresas e clientes.
Neste tutorial, vamos criar um sistema de notificações interativo para uma empresa de entrega de encomendas. Para isso, criamos um simples aplicativo “Nexmo Mail” que permite que um funcionário da empresa de entregas digite um número de telefone e notifique o destinatário sobre uma encomenda que será entregue.
Este aplicativo servirá como ponto de partida para este tutorial. Trata-se de um aplicativo , escrita em JavaScript com alguns módulos extras para facilitar as coisas. Adicionamos o body-parser para analisar os envios do nosso formulário e incluímos o Bootstrap para deixar nossa interface um pouco mais atraente. Por fim, adicionamos alguns babel módulos para que possamos escrever código moderno em Javascript.
Você pode baixar o código inicial deste tutorial no GitHub:
Em seguida, acesse localhost:3000 no seu navegador e insira um número de telefone no formato internacional, por exemplo, 447755555555.
Todo o código para este ponto de partida pode ser encontrado na ramo number-form no GitHub. Todo o código que adicionaremos a seguir pode ser encontrado no ramo delivery-notifications . Para sua conveniência, você pode ver todas as alterações entre nosso ponto inicial e final no GitHub também.
A SMS API de Vonage oferece baixa latência e alta taxa de entrega. É a maneira mais confiável de alcançar usuários em todo o mundo. Embora possua diversos recursos, vamos nos concentrar apenas em dois elementos principais: o envio e o recebimento de mensagens de texto básicas. Usaremos essa API para enviar às pessoas uma notificação sobre a entrega, oferecendo a opção de alterar o horário de entrega e receber as alterações que elas nos enviarem. Para isso, faremos as seguintes alterações em nosso aplicativo:
Adicione o Vonage ao nosso aplicativo
Envie uma mensagem SMS para o número fornecido, informando o horário de entrega e as instruções sobre como alterá-lo
Receber e confirmar as mensagens de texto enviadas pelo usuário para alterar seu horário
Vamos definir as opções de forma estática em nosso aplicativo, apenas para simplificar as coisas. No seu aplicativo, você obviamente determinará as opções do usuário com base em algum algoritmo incrível de aprendizado de máquina que você mesmo inventou.
Para enviar uma mensagem SMS pelo Vonage, precisaremos adicionar o módulo Vonage ao projeto.
npm install @vonage/server-sdk dotenv --saveComo você pode ver, também adicionamos o módulo dotenv . Isso serve apenas para que o aplicativo possa carregar as credenciais da API a partir de um .env arquivo. Você pode encontrar suas credenciais na página de configurações da sua conta Nexmo.
# .env
KEY='<your_api_key>'
SECRET='<your_api_secret>'
FROM='<phone_number>'Também adicionamos o número de telefone da Vonage, do qual enviaremos uma mensagem SMS, ao .env arquivo. Você pode comprar um número no Painel da Vonageou usar a vonage-cli biblioteca e comprar um diretamente pela linha de comando.
Configure o CLI do Vonage usando este guia. Você só precisa do Instalacão e Configurar sua configuração .
Escolha um dos números de telefone da lista exibida ao executar o comando. Substitua VONAGE_VIRTUAL_NUMBER no comando abaixo pelo número de telefone escolhido e execute o comando.
Agora que já temos nossa chave de API, nosso segredo e nosso número de telefone do Nexmo, vamos inicializar o cliente Nexmo.
// app.js - after the other imports
import Vonage from '@nexmo/server-sdk';
import dotenv from 'dotenv';
dotenv.config();
const vonage = new Vonage({
key: process.env.KEY,
secret: process.env.SECRET
});A partir de agora, podemos usar vonage em qualquer lugar do nosso aplicativo para fazer as chamadas de API necessárias.
Atualmente, quando o funcionário insere um número de telefone, o sistema acessa o POST /notify endpoint, que simplesmente exibe uma mensagem de confirmação no navegador. Precisaremos adicionar um código para enviar uma mensagem SMS com o horário de entrega previsto e uma lista de opções para o funcionário escolher.
Vamos definir algumas opções fixas para que o usuário possa alterar seu horário de entrega.
// app.js - after the previous code
const options = [
'this Friday',
'next Monday',
'next Tuesday'
];Podemos usar essas opções para gerar uma mensagem de texto bem apresentada para enviar ao usuário.
// app.js - after the previous code
let notification = "Your Vonage Mail delivery is scheduled for tomorrow between " +
"8am and 2pm. If you wish to change the delivery date please " +
"reply by typing 1, 2 or 3:\n\n";
options.forEach((option, index) => {
notification += `${index+1}. for ${option}\n`;
});
Observação: Não codificamos a mensagem inteira aqui, pois precisaremos dessas opções novamente mais tarde.
Em seguida, tudo o que precisamos fazer é enviar a mensagem para o número de telefone que foi fornecido.
// app.js
app.post('/notify', (request, response) => {
send(request.body.number, notification); // adding this line
response.send('Notification sent');
});
Envolvemos a chamada real da API do Nexmo em uma send função para tornar o código mais legível e reutilizável. A send função envolve a nexmo.sms.sendTextMessage API e preenche automaticamente o número de telefone da Nexmo que adquirimos anteriormente.
// app.js - anywhere outside of an endpoint call
let send = function(number, message) {
vonage.message.sendSms(process.env.FROM, number, message, (err, responseData) => {
if (err) {
console.log(err);
} else {
if(responseData.messages[0]['status'] === "0") {
console.log("Message sent successfully.");
} else {
console.log(`Message failed with error: ${responseData.messages[0]['error-text']}`);
}
}
});
}
Se você tentar enviar novamente o seu próprio número de celular agora, deverá receber uma mensagem de texto em questão de segundos.
Nosso último passo é receber uma mensagem do usuário em resposta à nossa mensagem de texto enviada anteriormente. Para isso, precisaremos disponibilizar nosso aplicativo publicamente para um webhook da Nexmo.
Vamos começar adicionando um endpoint fictício para o webhook chamar.
// app.js
app.get('/response', (request, response) => {
// TODO: Confirm selection
response.send('Response processed');
});
Você tem algumas opções para tornar seu aplicativo acessível publicamente pelos webhooks do Nexmo. Se você tiver a sorte de ter um IP público na sua máquina, já está tudo pronto. Para o resto de nós, podemos implantar o aplicativo, usar um túnel SSH ou minha solução favorita: usar o incrível ngrok .
Seu novo número virtual da Vonage e a URL do seu Webhook precisam ser vinculados para que a Vonage saiba para onde enviar as mensagens SMS recebidas.
Assim como na etapa anterior, você poderia adicionar a URL do seu webhook ao seu número virtual da Vonage, mas este tutorial mostrará um exemplo de como fazer essa alteração pelo portal da web.
Antes de iniciar a configuração, observe o seguinte:
VONAGE_VIRTUAL_NUMBER: O número que você está tentando usar.WEBHOOK_URL: Sua URL do Ngrok, seguida de/response, de modo que deve ficar mais ou menos assim:http://<your_url>.ngrok.io/response
Acesse página “Numbers” no seu painel.
Clique no ícone “Editar” (que se parece com uma caneta) na coluna “Gerenciar”. Na janela pop-up, em SMS > URL do webhook de entrada, cole WEBHOOK_URL e clique em “Salvar”.
Se você receber algum erro nesta etapa, verifique se está usando o número de telefone da Nexmo cadastrado na sua Account e se a URL está acessível ao público.
Nosso último passo é ampliar nosso endpoint para receber a mensagem recebida, analisar a resposta, verificar se ela contém uma de nossas opções e enviar outra mensagem de texto para confirmar a escolha do usuário.
// app.js
app.get('/response', (request, response) => {
// TODO: store this selection somewhere in your database
// parse the message the user sent us
const selection = parseInt(request.query.text) - 1;
const day = options[selection];
// by default we will warn them to send us a valid response
let message = "Please select from one of the valid options only.";
// if the response was valid though we confirm the selection
if (day) {
message = `Thank you! Your delivery has been rescheduled for ${day}`;
}
send(request.query.msisdn, message);
response.send('Response processed');
});
Agora tente responder à mensagem que você recebeu anteriormente. Isso pode demorar alguns segundos, dependendo da sua conexão com a internet, mas você deve receber uma confirmação em poucos segundos. Tente também responder com algumas mensagens de texto aleatórias e veja o que acontece.
A SMS API da Vonage oferece muitas mais opções do que as que mostrei aqui, incluindo mensagens instantâneas, vCard, vCal e muito mais. Pessoalmente, gosto muito da facilidade com que Vonage CLI facilitam a compra de números de telefone e a vinculação deles a um endpoint.
Adoraria saber o que você acrescentaria a seguir. Por favor, me mande um tweet (meu nome de usuário é @cbetta) com suas opiniões e ideias.