Crie um aplicativo “Family Stand Up” com a Vonage

Introdução

O Daily Stand Up: uma breve reunião adotada por muitas equipes de engenharia de software ágil como forma de atualizar os colegas sobre o andamento do trabalho de cada um e/ou identificar eventuais obstáculos. Todos os dias, todos se reúnem em pé, formando um círculo, e respondem às mesmas três perguntas:

1. O que eu fiz ontem?

2. O que vou fazer hoje?

3. Será que vejo algum obstáculo ou impedimento que me impeça de atingir minha meta e/ou a meta da equipe?

Isso é praticamente um padrão do setor. Mas minha equipe de DevRel aqui na Vonage é distribuída. Ou seja, como moramos espalhados pelo mundo, é impossível estarmos todos na mesma sala todos os dias para nos reunirmos em círculo e relatarmos nosso progresso diário, os obstáculos e nossas metas. Então, em vez disso, usamos um chatbot no Slack para compartilhar individualmente nossos relatórios, que são canalizados para um canal comum chamado #standup, para que toda a equipe possa ver.

Slack stand up

Esse método de enviar remotamente nossas atualizações individuais funciona muito bem para nossa equipe. Cada um de nós pode enviar sua atualização no início do dia de trabalho e podemos ver as atualizações do restante da equipe em um único local consolidado.

Do Trabalho à Família

Não só minha equipe de trabalho está espalhada pelo mundo, como também os membros da minha família. Eu moro em Seattle, meus pais estão em Chicago e meu irmão mora na Flórida. Então, pensei que seria divertido aplicar essa ideia do “Stand Up” à minha família também!

Eu poderia usar a Messages API da Vonage e fazer com que todos registrassem seus pontos altos e baixos da semana em um único local consolidado, para que cada um de nós pudesse acessá-lo quando for mais conveniente.

Pré-requisitos

Para seguir este tutorial, você precisará de um Account na Vonage. Você pode se cadastrar agora para grátis e receber crédito gratuito para começar, caso ainda não tenha um Account. Além disso, se quiser pular direto para um projeto pronto, você pode remixar o aplicativo Family Stand Up imediatamente no Glitch. Caso contrário, em apenas algumas etapas, você pode criar o seu próprio aplicativo do zero!

Como criar o aplicativo

Criar um Account na Vonage

Se você ainda não fez isso, crie um Account na Vonage gratuitamente e, como bônus extra, seu Account receberá um crédito de 2 euros para você começar a usar seu novo aplicativo. Acesse Vonage e siga as etapas de cadastro. Assim que terminar, você estará no painel do Vonage.

Adquira um número de telefone da Vonage

• No Painel de Controle da Vonage, clique no Numbers item de menu no lado esquerdo.

• Clique na Buy Numbers opção e você será direcionado a uma página onde poderá escolher um país, recursos, tipo e os quatro dígitos que deseja que o número tenha.

  buy numbers

• Selecione o país em que você está no momento para que a ligação seja local. Para os recursos, selecione Voice e, quanto ao tipo, tanto celular quanto telefone fixo funcionam perfeitamente.

• Clique Search para ver uma lista dos números de telefone disponíveis.

• Selecione um número clicando no botão laranja Buy e clicando no botão laranja Buy novamente assim que aparecer a janela de confirmação. Agora você tem um número de telefone da Vonage! O próximo passo é criar um aplicativo.

Criar uma aplicação do Vonage Messages

Na CLI do Nexmo:

Digite o seguinte comando no shell:

• Não se esqueça de substituir your_Glitch_URL pela sua URL real!

Do Painel do Vonage:

• No menu à esquerda, clique no Messages item do menu.

• Selecione a Create an application opção. Você será direcionado para uma página onde poderá configurar um novo aplicativo da Vonage.

• Preencha o formulário com as seguintes informações:

  • Application name campo de texto: Enter Family Stand Up App

  • Status URL No campo de texto, digite a URL do Glitch: https://[your Glitch URL].glitch.me/status

  • Inbound URL No campo de texto, digite novamente a URL do Glitch: https://[your Glitch URL].glitch.me/inbound

• Depois de inserir tudo isso, clique no botão azul Create Application .

• Certifique-se de gerar um par de chaves pública/privada e salvá-lo.

Conectar tudo entre si

Agora você tem um número da Vonage e o aplicativo Mensagens; só falta conectar os dois.

• No seu Family Stand Up App aplicativo Mensagens, selecione a Numbers aba ao lado de Settings.

• Clique no Link botão à direita do número de telefone que você deseja vincular ao seu aplicativo.

Seu novo Vonage Messages já está vinculado ao seu novo aplicativo Vonage e, com essa última etapa, você está pronto para desenvolver seu aplicativo!

Modificar a configuração padrão de SMS

No Painel da Vonage, abaixo do seu nome, selecione a Settings aba para atualizar o Default SMS Setting de modo que qualquer mensagem de texto recebida de qualquer membro da sua família seja vinculada ao seu aplicativo Stand Up.

default sms setting

Crie seu aplicativo Express no Glitch

Editar o package.json Arquivo

Para começar, acesse o site glitch.com para criar um novo projeto e escolha o hello-express modelo.

No package.json arquivo, selecione o Add a package menu suspenso para procurar e adicionar as seguintes dependências: dotenv e node-schedule.

dependencies

Vamos usar uma versão Beta do Vonage , portanto, digite manualmente esta versão específica: ^2.5.1-beta-1.

Editar o .env Arquivo

No .env arquivo, preencha as credenciais específicas da Vonage que acabamos de criar no Painel de Controle da Vonage:

API_KEY=******
API_SECRET=******
APP_ID=******
PRIVATE_KEY_PATH=.data/private.key
NEXMO_NUMBER=******

Substitua a chave da API, o segredo da API, o ID do aplicativo e o seu número da Vonage. Para incluir a chave privada, selecione o New File botão de alternância no canto superior esquerdo e nomeie-o .data/private.key. Nesse arquivo, cole a chave privada que você gerou ao criar seu aplicativo de voz. Esse arquivo ficará invisível no Glitch se você refazer seu código por motivos de segurança.

Editar o server.js Arquivo

Configurar dependências, credenciais e variáveis constantes

No início do seu server.js arquivo, vamos configurar nosso servidor Express, incluir nossas dependências e incorporar nossas credenciais da Vonage:

// server.js 
require('dotenv').config();
const express = require('express');
const app = express();
const Nexmo = require('nexmo')
const schedule = require('node-schedule');

// Vonage credentials 
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY_PATH
});

// array of family members' numbers (be sure to change and include the numbers of your *own* family 
const familyNumbers = [18479623979, 18478402296]
// content of SMS (feel free to personalize!)
const standupText = "It's time for family stand up! What have you been up to this week? What were your highs? What were your lows?"
// Array of messages received 
let messages_received = [];

Use o Node-Schedule para enviar a mensagem de texto uma vez por semana

Node Schedule é um agendador de tarefas flexível para Node.js. Ele permite que você agende tarefas (funções arbitrárias) para execução em datas específicas, com regras de recorrência opcionais. Usaremos esse RecurrenceRule() conceito e faremos com que seja enviado todos os domingos às 17h. Em seguida, ele percorrerá a matriz de números de telefone da família e passará a standupText variável.

// server.js 
// node-schedule will call the nexmoSend() function and send the text every Sunday at 5pm 
const rule = new schedule.RecurrenceRule();
rule.dayOfWeek = 0;
rule.hour = 17;
rule.minute = 0;
const scheduler = schedule.scheduleJob(rule, function(){
   // mapping through those numbers and sending them each a text with nexmo 
  familyNumbers.map(number => {
    nexmoSend(number, standupText); 
  });
});

Envie o SMS semanal solicitando um relatório de situação

Vamos utilizar o Vonage e a nexmo.channel.send() função. Vamos passar o TO e FROM Numbers, o corpo da mensagem e a lógica para lidar com erros.

// server.js 
// function to send text with Vonage Messages API 
const nexmoSend = (number, text) => { nexmo.channel.send(
  { "type": "sms", "number": number },
  { "type": "sms", "number": process.env.NEXMO_NUMBER },
  {
    "content": {
      "type": "text",
      "text": text
    }
  },
  (err, data) => { console.log("message_uuid: ", data.message_uuid); }
)};   

Receber mensagens SMS de familiares

Agora você já tem o código para enviar o SMS do Stand-Up pelo seu número da Vonage. Mas o que fazer com as respostas da sua família? Optei por receber as mensagens e exibi-las na interface do aplicativo, dentro do Glitch. Mas, na verdade, as possibilidades são infinitas. Você pode optar por esperar que todos respondam e enviar uma mensagem agrupada com todas as respostas em uma única atualização consolidada. Ou pode usar um banco de dados como o MongoDB e salvar os dados para fazer algo com eles mais tarde.

logging

Por enquanto, a solução que encontrei foi inserir tanto o número de origem quanto o texto da mensagem recebida em um array para, em seguida, enviá-los ao front-end do aplicativo. Dessa forma, as mensagens ficarão visíveis assim que uma mensagem for recebida!

front end

// server.js 
// function to receive message responses 
const handleInboundSms = (req, res) => {
  const params = Object.assign(req.query, req.body);

  messages_received.push({
    from: params.msisdn,
    standup_report: params.text
  });
  
  // send messages for family members to see on website 
  app.get('/', (req, res) => {
    res.send(messages_received);
  });
  
  // send OK status
  res.status(204).send();
}

Peças do Final Express

Por fim, vamos definir os componentes necessários do Express para que nosso aplicativo comece a funcionar. E, para fins de depuração, vamos nos certificar de registrar em log em qual porta o aplicativo está escutando.

// server.js 
app
.route('/webhooks/inbound-sms')
.get(handleInboundSms)
.post(handleInboundSms)

const listener = app.listen(process.env.PORT, () => {
  console.log('Your express app is listening on port ' + listener.address().port);
});

Como obter ajuda

Adoramos receber seu feedback, então, se você tiver dúvidas, comentários ou encontrar algum erro no projeto, entre em contato conosco! Você pode:

• Envie um tweet para a gente! Estamos no @VonageDev no Twitter

• Ou participe do Slack da Comunidade Vonage

Leitura complementar

• Confira a documentação para desenvolvedores em https://developer.nexmo.com