Como exibir notificações de SMS no navegador usando Angular, Node.JS e Ably

A SMS API da Vonage permite que você envie e receba mensagens em todo o mundo usando um número virtual que pode ser alugado da Vonage. Neste tutorial, veremos como você pode usar o Node.js e o Express para receber um SMS, enviá-lo via Ably para um navegador da web e, em seguida, usar o Angular para exibi-lo como uma notificação em um aplicativo de página única.

Antes de começar

Antes de começarmos, você vai precisar de algumas coisas:

• Conhecimentos básicos de JavaScript e Angular

• Node.js instalado no seu computador

• ngrok instalado no seu computador

• Um Um relato

• O código inicial do GitHub

Baixando o código inicial do GitHub

Primeiro, vamos clonar o código-fonte do tutorial e mudar para o branch “getting-started”

A seguir, vamos instalar as dependências necessárias para o nosso código. Há um aplicativo Node.js que utiliza o Express, o body-parser e o Ably, além de um aplicativo Angular gerado com o Angular CLI.

Criação de endpoints de webhook com o Express

Para receber uma mensagem SMS da Vonage, você precisa definir um endpoint de Webhook (URL) e, em seguida, associá-lo ao seu número virtual da Vonage. Sempre que seu número receber uma mensagem SMS, a Vonage irá enviá-la para o endpoint de Webhook. Portanto, vamos prosseguir com a criação desse endpoint usando Express.

No código que você acabou de baixar, há um arquivo chamado server.js, que vem com um servidor Express padrão escutando na porta 3000. Deve ficar assim:

'use strict';
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

const server = app.listen(3000, () => {
	console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env);
});

Agora vamos criar uma rota HTTP POST para processar as solicitações enviadas ao servidor. No final do arquivo, basta adicionar:

app.post('/inbound', (req, res) => {
	handleParams(req.body, res);
});

O handleParams método ainda não está definido, então vamos implementá-lo agora. Vamos adicionar algumas validações para verificar se recebemos uma mensagem SMS válida e, se for o caso, mapearemos os dados recebidos antes de enviá-los. Precisamos retornar um 200 OK código de status no final, para que o painel da Vonage possa reconhecê-la como uma URL de Webhook válida.

function handleParams(params, res) {
	if (!params.to || !params.msisdn) {
    		console.log('This is not a valid inbound SMS message!');
	} else {
    		console.log('Success');
    		let incomingData = {
        		messageId: params.messageId,
        		from: params.msisdn,
        		text: params.text,
        		type: params.type,
        		timestamp: params['message-timestamp']
    	};
    	res.send(incomingData);
	}

	res.status(200).end();
}

Agora você pode executar o servidor, que ficará disponível em localhost:3000:

$ node server.js

Como registrar um endpoint de webhook na Vonage

Agora que você criou seu endpoint de Webhook, é hora de associá-lo ao seu número da Vonage. No entanto, durante o desenvolvimento, é um saco ter que reimplantar constantemente o trabalho em andamento. Então, vamos usar o o ngrok para expor o endpoint do Webhook que acabamos de criar em nossa máquina local como uma URL pública! Para instruções mais detalhadas, consulte postagem do Aaron post explicando como conectar seu servidor de desenvolvimento local à API da Vonage usando um túnel do ngrok.

Depois de instalar o ngrok, execute-o na porta 3000, a mesma porta do servidor Express:

start ngrok in terminal

Seu servidor Express (localhost:3000) agora possui uma URL do ngrok (https://3be084f6.ngrok.io), que pode ser usada como um endpoint público de Webhook durante este tutorial.

Configurando o endpoint do webhook com a Vonage

Para que o painel do Vonage reconheça a URL como um ponto de extremidade do Webhook, ela precisa retornar um código de status 200 OK; portanto, certifique-se de que seu servidor esteja em execução. Caso contrário, você pode acessar a raiz do código baixado do GitHub e usar o terminal para executá-lo:

Faça login no seu Account da Vonage e acesse seus Numbers. Na seção “Gerenciar” do seu número, clique em “Editar”. Na janela modal que aparecerá, vamos configurar o Webhook que acabamos de criar. Na seção “SMS”, insira a URL do ngrok com a rota de entrada (https://3be084f6.ngrok.io/inbound) no campo “URL do Webhook”.

set webhook

Agora, todas as suas mensagens recebidas serão encaminhadas para a URL do Webhook. Vamos seguir em frente e enviá-las pelo Ably para um navegador moderno bem perto de você!

Observação: este método configura o Webhook de SMS no nível do número. No entanto, você também pode configurá-lo no nível da Account, para poder ler as mensagens SMS de todos os números da sua Account.

Enviando o SMS para a web com o Ably

Ao criar um Account no Ably, você receberá uma chave de API. Se já tiver um Account, faça login no Ably e obtenha a chave de API primeiro. Precisaremos passá-la para o servidor Express e para o aplicativo Angular mais adiante.

Agora vamos atualizar nosso servidor Express para que, ao receber uma mensagem SMS da API da Vonage, ele a envie por meio do Ably para um canal.

Ainda em server.js, importe primeiro o pacote Ably e obtenha o sms-notification canal

var ably = new require('ably').Realtime('ABLY_KEY');

var channel = ably.channels.get('sms-notification');

E, em seguida, vamos modificar o handleParams método para publicar nesse canal do Ably quando houver um SMS recebido.

function handleParams(params, res) {
	if (!params.to || !params.msisdn) {
    	console.log('This is not a valid inbound SMS message!');
	} else {
    	console.log('Success');
    	let incomingData = {
        	messageId: params.messageId,
        	from: params.msisdn,
        	text: params.text,
        	type: params.type,
        	timestamp: params['message-timestamp']
    	};

    	channel.publish('new-sms', incomingData);

    	res.send(incomingData);
	}

	res.status(200).end();

}

Executando o aplicativo Angular usando o Angular CLI

Se você não tiver o Angular CLI instalado, precisará instalá-lo primeiro:

Agora execute o aplicativo Angular

ng serve

O aplicativo agora está em execução no http://localhost:4200, e você pode acessá-lo em um navegador. Ele foi gerado usando o Angular CLI, mas também adicionei o Materialize.css e a identidade visual a ele. Deve ficar assim:

booilerplate app

Criação de um componente Angular para exibir notificações de SMS recebidas

Agora é hora de criar nosso componente Angular, que usaremos para exibir notificações de SMS recebidas. Usaremos a CLI para gerá-lo

A CLI criou quatro arquivos para nós: o arquivo TypeScript do componente, o modelo HTML, a folha de estilo CSS e a especificação de teste.

generated files

Vamos atualizar o arquivo TypeScript do componente (src/app/sms-notifications/sms-notifications.component.ts) para importar o Ably.

import * as Ably from 'ably';

ngOnInit é uma função de gancho de ciclo de vida no Angular e é executada quando um componente está sendo inicializado. Vamos atualizar ngOnInit para receber a notificação do Ably. Vamos instanciar o Ably e, em seguida, acessar o sms-notification canal, assinando os new-sms eventos. Quando um novo SMS chegar, vamos inseri-lo no modelo do nosso componente, smsNotifications.

ngOnInit() {
	let options: Ably.Types.ClientOptions = { key: 'ABLY_KEY' };
  let client = new Ably.Realtime(options);
  let channel = client.channels.get('sms-notification');

	channel.subscribe('new-sms', data => {
  	this.smsNotifications.push(data.data);
	});
}

smsNotifications :Object[] = []

Agora que já temos o smsNotifications no modelo do componente, vamos substituir tudo no arquivo de modelo (src/app/sms-notifications/sms-notifications.component.html) para exibir a notificação de SMS recebida. Queremos criar uma lista de notificações de SMS, então teremos que usar a diretiva *ngFor para percorrer o smsNotifications. O design é minimalista; vamos usar um painel de cartão do Material Design para exibir o número de origem, a notificação por SMS e a data e hora.

<div class="row">
  <div *ngFor="let sms of smsNotifications" class="col s12">
		<div class="row">
	  	<div class="col s12 m6 offset-m3">
	    	<div class="white-text card-panel blue">
	      	<p class="left-align valign-wrapper"><i class="small material-icons">perm_phone_msg</i>	{{sms.from}}</p>
	      	<p class="center-align">{{sms.text}}</p>
	      	<p class="right-align"><i>{{sms.timestamp}}</i></p>
	    	</div>
	  	</div>
		</div>
  </div>
</div>

Para que o componente seja exibido na tela, precisaremos atualizar também o modelo do App, a fim de adicionar o sms-notifications componente a ele. Portanto, no final do arquivo (src/app/app.component.html), adicione

<app-sms-notifications></app-sms-notifications>

Agora que tudo está funcionando, vamos enviar uma mensagem para o número da Vonage e ver se ela é exibida no aplicativo de página única do Angular:

demo

Ao criar um túnel com o ngrok, você também pode visualizar as solicitações no navegador em http://127.0.0.1:4040/

ngrok requests

Assim, conseguimos enviar uma notificação por SMS para um número da Vonage, que nosso servidor Express recebeu por meio de um Webhook, o qual, por sua vez, enviou a mensagem via Ably para nosso aplicativo Angular, e recebemos a notificação no navegador.

Você pode dar uma olhada no exemplo de código no GitHub se quiser ver o produto final.

Espero que isso tenha sido útil para você. Você pode me avisar no Twitter, meu nome de usuário é @lakatos88.

Leituras complementares

• Se você quiser saber mais sobre a SMS API da Vonage, dê uma olhada em /api/sms

• Se você quiser configurar o Webhook de outra forma, dê uma olhada em /getting-started/Concepts/webhooks

• Se você quiser explorar um pouco mais as APIs da Vonage, aqui está uma postagem no blog da Phil que aborda SMS e Voice https://developer.vonage.com/en/blog/sms-voice-programmable-communications-dr/

• Se você quiser saber mais sobre o Ably, como publicar eventos e se inscrever para recebê-los, você encontra tudo isso no guia de Início Rápido deles https://www.ably.io/documentation/quick-start-guide

• Se você quiser explorar mais o Angular CLI, aqui está a documentação https://cli.angular.io/

• Se você ainda não conhece o Angular, há um ótimo guia disponível em https://angular.io/guide/quickstart