Crie um bot de SMS no Glitch usando o Hapi.js e a Messages API de Nexmo

A Messages API Nexmo permite que você utilize uma única API para enviar mensagens por meio de vários canais, como SMS, MMS e diversos aplicativos populares de bate-papo nas redes sociais. Você pode processar mensagens recebidas, decidir o que fazer com o conteúdo da mensagem e enviar uma resposta de acordo com isso. Esta postagem do blog abordará como criar um bot simples capaz de contar curiosidades aleatórias sobre números.

Glitch é um ambiente de desenvolvimento online que permite que os desenvolvedores comecem a criar e implantar seus aplicativos sem o trabalho de configurar um servidor. Todos os aplicativos da plataforma podem ser adaptados e personalizados, tornando-a o lugar perfeito para compartilhar código e entender como as coisas funcionam.

Pré-requisitos

Antes de começar este tutorial, seria útil já ter um conhecimento básico de JavaScript e Node.js.

Iniciando um aplicativo Hapi.js no Glitch

O Glitch está sempre aprimorando sua interface e seus recursos; portanto, no momento da redação deste artigo, você pode criar uma nova Account no Glitch clicando no botão “Entrar” no canto superior direito da página e escolher entre o GitHub ou o Facebook para fazer o login.

Create a new account on Glitch

Depois disso, você pode clicar no Novo Projeto para começar. Há três opções: hello-webpage, hello-express e hello-sqlite. Para os fins deste tutorial, escolha hello-express , pois isso lhe proporcionará um ambiente com o Node.js e o npm já instalados.

Click New Project button to get started

Para instalar pacotes adicionais do Node, você pode acessar a linha de comando clicando no botão Console na janela de status.

Click Console button on Glitch status window

Você pode ativar ou desativar a janela de status clicando no botão “Status” , localizado na parte superior da barra lateral. A partir daí, você pode usar todos os comandos padrão da CLI em um ambiente bash. A única diferença é que, no Glitch, você usaria pnpm em vez de npm.

Usos do Glitch o Express como seu framework padrão do Node.js, mas a conversão do aplicativo para Hapi.js não é muito complicado.

Click Status button near the top of the sidebar

Remover express e body-parser do projeto com o seguinte comando:

Instale o Hapi.js com o seguinte comando:

O console e o editor não se sincronizam automaticamente; portanto, execute o refresh comando para atualizar o package.json arquivo no editor.

Status of application shows an error

Você também notará que o status da sua solicitação apresenta um erro. Isso é esperado, pois o arquivo padrão server.js ainda faz referência a express.

Para corrigir isso, substitua o conteúdo de server.js pelo seguinte código:

const Hapi = require('hapi');

// Create a server with a host and port
const server = Hapi.server({
  port: 8000
});

const init = async () => {
  // Add a basic route
  server.route({
    method: 'GET',
    path: '/',
    handler: function(request, h) {
      return 'hello world';
    }
  });
  
  // Start the server
  await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

Agora, quando você tentar acessar seu aplicativo, ele deve exibir uma página em branco com as palavras hello world.

Servindo arquivos estáticos

Embora as mensagens sejam, em grande parte, processadas no lado do servidor, ainda assim seria bom ter uma espécie de página inicial básica para o seu bot. Para isso, podemos exibir uma página HTML simples quando as pessoas tentarem acessar seu aplicativo pelo navegador.

inert é um plugin de manipuladores estáticos de arquivos e diretórios para o hapi.js. Instale-o em seu projeto pelo console com o seguinte comando:

pnpm install inert --save

Para simplificar, coloque todos os arquivos necessários para a página de destino na public pasta. Você pode mover o index.html arquivo da views pasta para a public pasta, renomeando o caminho do arquivo na barra lateral.

Move files into public folder

Você também pode fazer isso pela linha de comando, usando o console.

Depois de fazer isso, modifique o server.js arquivo para usar o Inert e servir os arquivos a partir da public pasta da seguinte maneira:

const Hapi = require('hapi');
const Path = require('path');
const Inert = require('inert');

// Create a server with a host and port
const server = Hapi.server({
  port: 8000,
  routes: {
    files: {
      relativeTo: Path.join(__dirname, 'public')
    }
  }
});

const init = async () => {
  await server.register(Inert);

  // Add the route
  server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: {
        path: '.',
        redirectToSlash: true,
        index: true
      }
    }
  });
  
  // Start the server
  await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

Agora, em vez de “hello world”, seu aplicativo deve estar exibindo o arquivo padrão do Glitch index.html . Você pode personalizar esse arquivo como quiser.

Introdução às APIs da Nexmo

API credentials on the dashboard

Volte ao aplicativo Glitch e instale o cliente da API REST da Nexmo para Node.js com o seguinte comando:

pnpm install nexmo@beta --save

E se você atualizar seu projeto, seu package.json deverá ficar assim:

Glitch status window

Agora você está pronto para começar a criar seu próprio bot. Este tutorial descreve como criar um bot que retorne curiosidades aleatórias sobre Numbers, usando NumbersAPI, uma API que fornece curiosidades interessantes sobre Numbers. Mas você pode usar outras APIs para gerar as respostas do seu bot.

Envio e recebimento de mensagens por SMS

Como obter um número de telefone virtual

Para enviar e receber SMS por meio da Messages API, você também precisará de um número de telefone virtual, que é como qualquer número de telefone padrão, exceto que não está vinculado a nenhuma linha telefônica física ou aparelho.

Você pode escolher um número local de um país de sua preferência, os recursos disponíveis e o tipo de número, seja celular, fixo ou ligação gratuita.

Buy numbers

Assim que você tiver seu número, ele aparecerá no seção “Numbers” . Clique no ícone de lápis abaixo da coluna mais à direita Gerenciar , para configurar a URL do seu webhook de entrada. Isso é necessário para receber SMS. Quando um SMS é enviado para o seu número, uma POST solicitação é enviada para essa URL com o conteúdo da mensagem.

inbound webhook URL

Criação de um aplicativo de mensagens

Em seguida, acesse o página “Criar um aplicativo” , na seção seção “Mensagens e Dispatch” na barra lateral. Preencha o nome do seu aplicativo e as URLs do webhook, usando a URL do seu aplicativo Glitch como host. Você também precisará gerar um par de chaves pública/privada; para isso, será solicitado que você baixe o private.key arquivo.

Generate key

Em seguida, clique no botão laranja Criar inscrição . A próxima tela permitirá que você vincule seu número virtual ao seu aplicativo clicando no Botão “Vincular” , localizado na seção Gerenciar .

Create application

Por fim, será perguntado se você deseja vincular algum account externo, mas você pode deixar isso para depois.

Link any external accounts

Para enviar o private.key arquivo no Glitch e mantê-lo em segredo, você pode criar o arquivo em uma .data pasta. O conteúdo dessa pasta só ficará visível para você e para quaisquer colaboradores de confiança que você adicionar ao projeto. Copie o conteúdo do private.key que você baixou anteriormente para esse novo arquivo.

Private Key

Configuração de credenciais

O Glitch oferece suporte a variáveis de ambiente por meio do .env arquivo, que é uma maneira segura de armazenar suas credenciais de API e outros dados privados do seu projeto. Configure sua chave de API, seu segredo, seu número virtual da Nexmo, o ID do aplicativo do Messages e o caminho da chave privada no .env arquivo.

Certifique-se de colocá-los entre aspas, pois cada valor precisa ser uma string. Vamos utilizá-los para inicializar uma nova instância do Nexmo, que usaremos para enviar mensagens SMS.

Set up .env file

Adicione suas credenciais de API ao server.js arquivo e inicialize uma nova instância do Nexmo.

const NEXMO_API_KEY = process.env.NEXMO_API_KEY;
const NEXMO_API_SECRET = process.env.NEXMO_API_SECRET;
const NEXMO_APPLICATION_ID = process.env.NEXMO_APPLICATION_ID;
const NEXMO_APPLICATION_PRIVATE_KEY_PATH = process.env.NEXMO_APPLICATION_PRIVATE_KEY_PATH;
const NEXMO_NUMBER = process.env.NEXMO_NUMBER;

const Nexmo = require('nexmo');

const nexmo = new Nexmo({
  apiKey: NEXMO_API_KEY,
  apiSecret: NEXMO_API_SECRET,
  applicationId: NEXMO_APPLICATION_ID,
  privateKey: NEXMO_APPLICATION_PRIVATE_KEY_PATH
});

Recebimento de uma mensagem SMS

Para receber um SMS, você precisará adicionar uma rota para processar a POST solicitação que é acionada quando alguém envia um SMS para o seu número virtual. Adicione a seguinte rota ao seu server.js arquivo:

server.route({
  method: 'POST',
  path: '/inbound-sms',
  handler: (request, h) => {
    const payload = request.payload;
    console.log(payload);
    return h.response().code(200); 
  }
});

Observe que o path parâmetro aqui deve corresponder à URL de webhook de entrada do seu número virtual, que você configurou anteriormente. Para garantir que tudo esteja conectado corretamente, envie um SMS para o seu número virtual. Você deverá ver o conteúdo da mensagem exibido na janela de status.

Message payload printed in the status window

Envio de uma resposta por SMS

Agora você precisará processar a carga útil da mensagem, extraindo o conteúdo da mensagem e usando-o para recuperar um fato aleatório da NumbersAPI. Você pode escrever uma função que verifique se o conteúdo do SMS é um número; caso contrário, pode retornar uma resposta solicitando um número.

function parseSms(payload) {
  const message = payload.text;
  const phone = payload.msisdn;
  
  const isNum = /^\d+$/.test(message);
  console.log(isNum);
  
  if (isNum) {
    getFactSms(message, phone);
  } else {
    smsResponse("Sorry, but Numbot can only give you facts about whole numbers. Try something like 42.", phone);
  }
}

Substitua a linha que diz console.log(payload) por uma chamada à sua nova parseSms() função. Você vai perceber que, se o conteúdo da mensagem for um número, estou chamando outra função chamada getFactSms(). Essa será a função que chamará a API do Numbers para gerar o fato aleatório que você enviará de volta ao seu usuário.

Para isso, você precisará fazer uma solicitação básica GET . Existem várias bibliotecas que podem fazer isso, mas, como se trata de uma solicitação relativamente simples, você pode usar o módulo nativo do Node.js http .

const http = require('http');

function getFactSms(number, phone) {
  return http.get(
    {
      host: 'numbersapi.com',
      path: '/' + number
    },
    function(response) {
      let fact = '';
      response.on('data', function(d) {
        fact += d;
      });
      response.on('end', function() {
        smsResponse(fact, phone);
      });
    }
  );
}

A última função smsResponse() acionará o envio do fato aleatório de volta ao usuário.

function smsResponse(fact, phone) {
  nexmo.channel.send(
    { "type": "sms", "number": phone },
    { "type": "sms", "number": NEXMO_NUMBER },
    {
      "content": {
        "type": "text",
        "text": fact
      }
    },
    (err, data) => { console.log(data.message_uuid); }
  )
}

E é isso. Agora você tem um bot de SMS básico que responde com curiosidades aleatórias sobre o número para o qual você enviar a mensagem.