Mensagens em qualquer lugar com o Node.js

A Vonage Messages API da Vonage é ótima para testar canais de comunicação que sua organização talvez ainda não tenha. Depois de ver como o WhatsApp, o Viber e o chat do Facebook Messenger podem ser úteis, você pode se sentir inspirado a começar a implementá-los em produção.

Existem pequenas diferenças entre a sandbox e a versão normal da Messages API for Vonage. Também há pequenas diferenças entre os canais individuais. Neste exemplo, você criará um servidor para enviar mensagens a partir de qualquer canal, seja do ambiente de teste ou de produção. Você também pode modificar o código no Glitch para começar a testar as coisas no ambiente de teste e, em seguida, passar para a produção mais rapidamente.

Pré-requisitos

Você não precisa de muito mais do que o Node.js e o Nexmo Node SDK para este código. No entanto, você precisará de um aplicativo configurado corretamente para que ele funcione. Abordaremos isso em detalhes, então, por enquanto, crie um novo diretório de projeto e certifique-se de que ele tenha:

• Node e npm

• O SDK do Nexmo para Node.js em versão beta

• Express.js

• analisador de corpo

• dotenv

Na linha de comando, você pode executar npm init para preparar seu projeto. Em seguida, você pode instalar os pacotes com:

> npm install nexmo@beta express body-parser dotenv -s

Comece agora

Antes de começar a programar, acesse o seu Painel do Desenvolvedor da Vonage. Primeiro, crie uma nova aplicação e certifique-se de atribuir um dos seus números de telefone a ela. Esse é um bom momento para criar uma .env arquivo no diretório do seu projeto. Você pode criar algumas variáveis e colar seu novo ID de aplicativo e sua chave privada diretamente no arquivo:

Você pode encontrar o seu API_KEY e API_SECRET na página “Introdução” no seu painel. O SMS_NUM é o número que você atribuiu ao seu aplicativo. WHATSAPP_NUM, VIBER_ID, E FB_ID pode ser encontrado na página da Messages API (Sandbox) , nos comandos cURL de exemplo para os respectivos canais. Este exemplo pressupõe que você esteja usando a sandbox para todos os três e ainda não tenha suas próprias contas.

Agora crie um server.js arquivo para começar a programar. O código deste exemplo usa a configuração padrão do servidor Express do Glitch, que é bem simples. Você precisará do Express e do middleware body-parser, além de configurar seu servidor para servir páginas estáticas a partir do /public diretório. Você pode adicionar alguns endpoints para servir uma página inicial estática e fornecer endpoints de webhook para seu aplicativo. No final do arquivo, você pode iniciar o servidor:

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

app.use(express.static('public'));
app.use(bodyParser.json());

// https://expressjs.com/en/starter/basic-routing.html
app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

app.post('/answer', function(req, res) {
  // this is where contacts could send you new communication info
  res.status(204).end();
});

// this endpoint receives information about events in the app
app.post('/event', function(req, res) {
  res.status(204).end();
});

// TODO: Add some messaging logic here!

// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

Criar dois clientes

Como não é possível enviar mensagens SMS pela API do Vonage Messages Sandbox, você precisará de dois clientes caso seu aplicativo permita a comunicação por SMS, além de outros canais de mensagens. Você pode adicionar ambos abaixo da sua /event função de escuta:

// create Nexmo clients
const Nexmo = require('nexmo');

// this client uses your real SMS, WhatsApp, Viber, and Messenger accounts
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY 
});
// this client uses the Message API Sandbox, for testing only
const sandbox = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY 
}, {
  apiHost: 'messages-sandbox.nexmo.com'
});

// add channels to this array to use a production account
// in this example, only SMS is a "real" channel, the rest use the sandbox
const prodChannels = ['SMS'];

Primeiro, você precisará do nexmo pacote para usar o SDK. Em seguida, você pode criar dois clientes quase idênticos. A única diferença entre eles é que o sandbox cliente usa uma chave específica do Messages Sandbox apiHost : messages-sandbox.nexmo.com.

Para alternar entre os canais de sandbox e de produção em um único lugar, você pode armazenar os canais de produção em um array. Verificaremos esse array na próxima etapa para determinar qual cliente devemos usar.

Tratar solicitações do lado do cliente

Em seguida, você pode configurar seu servidor para processar solicitações provenientes de um formulário no front-end. Esse formulário permitirá que você selecione um contato ou usuário, o canal pelo qual enviar a mensagem e o texto a ser enviado. O código de exemplo armazena uma matriz de usuários e seus detalhes de contato em .data/contacts. Você deve fornecer seus números e Accounts na lista de permissões no formato:

module.exports = [
  {
    id: 1, 
    name: 'Template McTemplateypants',
    sms: '441234567890',
    viber: '441234567890',
    whatsapp: '441234567890',
    messenger: '1234567890123456'
  }
];

Depois de solicitar seu arquivo de dados, você pode processar solicitações POST para /send. Você receberá o contact, method, e message do corpo da solicitação e usar o ID de contato para localizar o objeto de usuário correspondente. Você definirá o cliente padrão como sandboxe, em seguida, verificar se method está na sua matriz de canais de produção e, se estiver, alterará o cliente para nexmo , caso esteja.

Você vai criar até e a partir de objetos em funções separadas e os passará, juntamente com o message, para o método channel.send . Esse método retornará um erro caso haja algum problema, além de alguns dados sobre a mensagem enviada. Não se esqueça de enviar uma resposta de volta ao cliente para encerrar a solicitação.

A última coisa a ser adicionada ao servidor são os getFrom e getTo funções. Elas garantem que o para e de estejam estruturados corretamente para o canal selecionado:

const users = require('./.data/contacts');

// handle the form submission from the client
app.post("/send", function(req, res) {
  var contact = req.body.contact;
  var user = users.find(u => u.id == contact);
  var method = req.body.method;
  var message = req.body.message;
  var client = sandbox;
  
  if (prodChannels.includes(method)) {
    client = nexmo;
  }
  
  client.channel.send(getTo(user, method), getFrom(method), {
    content: {
      type: 'text',
      text: message
    }
  }, (e, data) => {
    if (e) {
      console.error(e);
    }
    console.log(data);
  });
  
  res.send({data: 'sent'});
});

function getFrom(method) {
  if (method == 'SMS') {
    return { "type": 'sms', "number": process.env.SMS_NUM };
  }
  if (method == 'WhatsApp') {
    return { "type": 'whatsapp', "number": process.env.WHATSAPP_NUM };
  }
  if (method == 'Viber') {
    return { "type": 'viber_service_msg', "id": process.env.VIBER_ID };
  }
  if (method == 'FB') {
    return { "type": 'messenger', "id": process.env.FB_ID };
  }
}

function getTo(user, method) {
  if (method == 'SMS') {
    return { "type": 'sms', "number": user.sms };
  }
  if (method == 'WhatsApp') {
    return { "type": 'whatsapp', "number": user.whatsapp };
  }
  if (method == 'Viber') {
    return { "type": 'viber_service_msg', "number": user.viber };
  }
  if (method == 'FB') {
    return { "type": 'messenger', "id": user.messenger };
  }
}

Criar uma interface de usuário

Você precisará de algum tipo de interface para enviar suas mensagens. Este exemplo utiliza um formulário simples no lado do cliente. Os valores de exemplo estão codificados diretamente e correspondem aos objetos que o exemplo possui em .data/contacts.js. Você poderia ir um pouco além e preencher as opções dinamicamente, dependendo da quantidade de dados que tiver:

<form>
      <label>Contact:
        <select id="contact">
          <option value="1">Angie</option>
          <option value="2">Benji</option>
          <option value="3">CJ</option>
          <option value="4">Digby</option>
        </select>
      </label>
      <label>Method:
        <select id="method">
          <option>SMS</option>
          <option>WhatsApp</option>
          <option>Viber</option>
          <option value="FB">Facebook Messenger</option>
        </select>
      </label>
      <section>
        <label for="message">Message:</label>
        <textarea id="message"></textarea>
        <button>Send</button>
      </section>
    </form>

O script para enviar o formulário é acionado ao clicar em um botão genérico. Ele obtém os valores do formulário e cria um corpo de solicitação com eles, enviando-o ao seu /send ponto de extremidade. Assim que recebe os dados de volta, ele apaga o conteúdo do formulário:

<script>
      const contact = document.querySelector('#contact');
      const method = document.querySelector('#method');
      const message = document.querySelector('#message');

      document.querySelector('button').onclick = function(e) {
        let body = JSON.stringify({
            contact: contact.value,
            method: method.value,
            message: message.value
          });

        fetch('/send', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: body
        })
        .then(response => response.json())
        .then(data => {
          contact.value = '';
          method.value = '';
          message.value = '';
        });
        return false;
      };
    </script>

Envie algumas mensagens

Com o(s) dispositivo(s) das suas contas e números de SMS incluídos na lista de permissões à mão, você pode tentar enviar algumas mensagens por meio do seu formulário. Depois de verificar se funcionou, você pode adaptar esse código para configurar testes com o Sandbox da Messages API do Vonage para a lógica do seu aplicativo.