Criar notificações SMS com AngularJS, Firebase e Twilio

Tempo de leitura: 4 minutos

October 05, 2015

Escrito por

Twilion

Criar notificações SMS com AngularJS, Firebase e Twilio

Christoffer Klemming começou programando marca-passos e acabou se tornando PMM do Google. Ao voltar para casa em Estocolmo, Christoffer se concentrou em escrever códigos. Quando ele cruzou o oceano para ir trabalhar no Google, essa função deixou de ter tanta prioridade. Contudo, ele ainda usou sua mentalidade de programação em um trabalho com uso menos intensivo de código. "A programação é, na verdade, saber como decompor grandes problemas em pedaços menores que podem ser resolvidos logicamente, revertendo para o todo", diz Christoffer.

Com o AngularJS e a Twilio, ele conseguiu decompor e recompor um problema que os residentes da Bay Area conhecem bem: aguardar em filas. Um texto simples pode acabar com o transtorno de ter de ficar em uma fila, esperando que seu nome seja chamado. A empresa de Christoffer, Waitwhile, possibilita que negócios como salões de beleza ou restaurantes enviem uma mensagem de texto para os clientes quando eles estão prontos para atendê-los.

É uma solução simples e poderosa para um problema inconveniente. O MVC também é um problema inconveniente para Christoffer, mas ele o resolveu usando o AngularJS. "Admito que não sou um especialista em estruturas MVC, mas passava muito tempo pesquisando antes qual technology stack (pilha de tecnologia) utilizar, tentando essencialmente responder: 'Qual é a forma mais preparada para o futuro de criar um aplicativo em 2015?'."

Ele chegou a uma combinação entre o Twilio SMS, o AngularJS, o Firebase e o Ionic. Christoffer ficou surpreso com a rapidez com que tudo começou a funcionar depois de assistir a um tutorial do Watch and Code. Agora ele conta para todo mundo as excelentes vantagens do AngularJS, mostrando como criar notificações via SMS com o AngularJS e o Firebase.

Confira o tutorial dele abaixo.

Waitwhile – Criando alertas via SMS para pessoas que esperam na fila
O Waitwhile foi desenvolvido com o AngularJS e o Firebase para fins de armazenamento e autenticação. Além disso, ele conta com a Twilio para envio de mensagens de texto bidirecionais. Esta publicação vai explorar como incrementar seu aplicativo no lado do cliente com notificações de texto em tempo real usando o Twilio junto com o Zapier e o Firebase.

Observação: esta publicação presume que você já tem uma instância ativa do Firebase. Caso não tenha, consulte este ótimo tutorial de cinco minutos.

Assim que você tiver um aplicativo Firebase configurado, veja como configurar o SMS com o Zapier e a Twilio em oito etapas:

Etapa 1: implemente seu aplicativo para que, quando você quiser acionar um SMS, você crie um novo objeto filho do Firebase em um novo node (nó) filho (por exemplo /sms/). Não se esqueça de preencher o objeto filho SMS com o número de telefone do destinatário como um atributo:

var sendSMSText = function (recipient) {
var smsQueue = new Firebase('https://.firebaseio.com/sms/' + recipient.phone);
smsQueue.set({
name: recipient.name,
phone: recipient.phone
}, onSuccess)
};

Você também pode personalizar o SMS com atributos como nome do destinatário, remetente ou até mesmo links de mídia. Adicione pelo menos um objeto do Firebase a /sms/ para que o Zapier possa reconhecê-lo posteriormente.

Etapa 2: crie sua conta Twilio. Você receberá um "número gratuito" de onde o Twilio SMS será enviado. Se quiser enviar o SMS para números diferentes do seu, terá de carregar alguns créditos da Twilio. Felizmente, cada SMS custa apenas US$ 0,0075, portanto, vale a pena.

Etapa 3: crie sua conta do Zapier gratuita. É possível enviar até 100 zaps por mês gratuitamente. Selecione "Create a new Zap" (Criar um novo Zap) para começar.

Etapa 4: no modo de edição do Zap, selecione Firebase como acionador. Escolha "New item in Queue" (Novo item na fila) como a configuração do acionador. Isso é mais confiável do que o acionamento com base no registro filho adicionado, pois reduz o risco de entradas duplicadas e proporciona um controle mais refinado.

Observação: isso removerá o objeto filho SMS do Firebase que foi enviado, portanto, trate esse caminho como uma fila de mensagens temporária no Firebase. Se você quiser armazenar o objeto SMS no Firebase, também precisará gravá-lo em um caminho permanente, por exemplo, /smsHistory/).

Tela inicial de criação de um Zap integrando Twilio e Firebase.

Etapa 5: selecione "Send SMS" (Enviar SMS) na Twilio como a ação.

Etapa 6: adicione o caminho do SMS do Firebase (por exemplo, /sms/) como o Path to Data (Caminho para os dados). O Zapier escutará esse caminho para todos os novos eventos e, em seguida, acionará instantaneamente a ação do Zap.

Etapa 7: em seguida, personalize seu SMS. Para o campo "Phone" (Telefone) e "Message" (Mensagem), clique em Insert FB fields (Inserir campos do FB). Isso carregará seus dados do Firebase da etapa 1 e permitirá que você insira os atributos apropriados. Você também pode adicionar seu próprio texto aqui.

Tela de configuração da mensagem a ser enviada

Passo 8: durante a tentativa, defina o seu próprio número de telefone no campo To Number (Para o número). Teste o Zap para garantir que você o receba.

Clique em Turn Zap On (Ativar Zap) e pronto. Ele já está funcionando!

Tela de teste do Zapier integrado ao Firebase

Destaque-o personalizando o SMS

Agora que você tem os princípios básicos configurados, você pode começar a torná-lo mais interessante personalizando o objeto SMS. Na verdade, no Waitwhile, eu gero um atributo "SMS text" inteiro, que é totalmente personalizado com base nas interações do app.

var sendSMSText = function (guest) {
var smsQueue = new Firebase(FIREBASE_URL + 'sms');
    var personalizedText =
"Hello" + guest.name ". Thanks for visiting " + guest.sender + "./n/n"
"Your expected wait is is " + guest.eta + " min."

smsQueue.push({
name: recipient.name,
phone: recipient.phone,
        text: personalizedText
})
};

Em seguida, no Zapier, basta inserir o atributo "text" como a mensagem inteira. Um outro benefício é tornar as alterações de texto SMS mais sustentável, pois você pode fazer isso diretamente no código do app.

Tela do Zapier para configuração do número de destino e mensagem.

Torne-o seguro

No Firebase, convém aplicar regras de segurança para evitar que alguém abuse do seu serviço enviando mensagens de spam, bem como verificar se os números de telefone estão em conformidade com o formato internacional (E.164) que a Twilio exige. Por exemplo, um conjunto de regras simples pode ficar desta forma:

"sms" : {
     "alertSms" : {
         "$smsId" : {
            ".write": "auth != null && newData.child('userId').val() == auth.uid",
            ".validate": "newData.hasChildren(['phone', 'name', 'text'])
             && newData.child('phone').val().matches(/* regex to check format */)"
       }
   }
}

Correio de voz compatível para chamadas recebidas

Como todos os seus SMS serão enviados do seu número gratuito do Twilio (a menos que você o atualize), os destinatários podem tentar ligar para ele. Para resolver isso, você pode codificar seu próprio correio de voz da Twilio, usando o XML da Twilio, que uma voz sintética lerá!

<?xml version="1.0" encoding="UTF-8"?>
<Response>
   <Say>
You have reached the Waitwhile voiceline. Please leave a message at the beep.
   </Say>
   <Record
       action="http://foo.edu/handleRecording.php"
       method="GET"
       maxLength="20"
       finishOnKey="*"
       />
   <Say>I did not receive a recording</Say>
</Response>

SMS bidirecional

Por fim, você pode configurar a funcionalidade bidirecional de SMS revertendo essencialmente o fluxo do Zapier, ou seja, ter um registro filho do Firebase criado por um novo SMS de entrada da Twilio:

Twilio + Zapier + Firebase = excelente combinação

A Twilio é uma plataforma incrivelmente flexível e eficiente. Juntamente com o Zapier, para unir diferentes APIs, você pode iniciar integrações avançadas e confiáveis em questão de minutos. O Waitwhile disparou com sucesso milhares de mensagens SMS usando a Twilio juntamente com o Firebase e o Zapier, e estamos apenas começando!

Este artigo foi traduzido do original "Build SMS Notifications With AngularJS, Firebase, and Twilio". 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.

Publicações relacionadas

Recursos relacionados

Twilio Docs

De APIs a SDKs e aplicativos de amostra

Documentação de referência de API, SDKs, bibliotecas auxiliares, guias de início rápido e tutoriais para sua linguagem e plataforma.

Centro de Recursos

Os mais recentes e-books, relatórios do setor e webinars

Aprenda com especialistas em engajamento do cliente para melhorar sua própria comunicação.

Ahoy

Centro da comunidade de desenvolvedores da Twilio

Melhores práticas, exemplos de código e inspiração para criar comunicações e experiências de engajamento digital.