Enviar SMS quando um formulário do Typeform for enviado usando Node.js e a Messages API

Neste tutorial, vamos aprender como enviar um SMS quando seu Typeform for enviado usando a Messages API do Nexmo e a estrutura Node.js Hapi.

Este exemplo vai criar um webhook que você poderá conectar ao seu Typeform e que irá notificá-lo sempre que alguém preencher o formulário. Usaremos a Messages API da Nexmo para enviar uma mensagem SMS com a data e o link para visualizar a resposta.

Você pode baixar e executar esse código por conta própria no nexmo-community/nexmo-typeform-SMS no GitHub.

Pré-requisitos

Você precisará criar contas para executar isso por conta própria; portanto, certifique-se de ter os seguintes itens configurados:

• A Typeform Account

• Ngrok (para que o mundo exterior possa acessar o aplicativo na sua máquina local)

• A Interface de Linha de Comando da Nexmo

O código deste exemplo foi desenvolvido usando Node.js e a framework hapi. Ele funcionará no Node.js versão 8.9.0 ou superior.

Você pode verificar a versão do Node executando node -v na linha de comando. Se o número for 8.9.0 ou superior, está tudo certo. Caso contrário, use uma versão mais antiga do hapi.

Criar o aplicativo básico

Para receber um webhook do Typeform, é necessário ter um aplicativo configurado com pelo menos uma POST rota. Começaremos criando um aplicativo básico com uma POST rota.

Em uma nova pasta, inicialize um novo aplicativo Node.js executando

Em seguida, instale as dependências do projeto:

Criar o servidor Hapi

Hapi é um framework simples de usar e centrado na configuração. Ele permite que os desenvolvedores se concentrem em escrever lógica de aplicativo reutilizável, em vez de perder tempo construindo infraestrutura. Gosto dele porque oferece suporte integrado para validação de entrada, cache, autenticação e outros recursos essenciais para a criação de aplicativos web e de serviços.

Vamos criar o arquivo principal do aplicativo adicionando um novo arquivo no diretório raiz chamado index.js. Esse será o nosso servidor de webhooks.

Neste novo arquivo, adicione o seguinte código:

const Hapi = require('hapi');

// create the hapi server and listen on port 3000
const server = Hapi.server({
  port: 3000,
  host: 'localhost'
});

// create a POST route for http://localhost:3000/
server.route({
  method: 'POST',
  path: '/',
  handler: (request, h) => {

    // return a 200 OK HTTP status code
    return h.response().code(200)
  }
});

// initialize the server using async/await
const init = async () => {
  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

// log any error and exit
process.on('unhandledRejection', (err) => {
  console.log(err);
  process.exit(1);
});

// run the server
init();

Criar um aplicativo de mensagens e despacho

Configure um novo aplicativo de Mensagens e Despacho por meio do Painel do Nexmo.

Para os fins desta postagem no blog, você não precisa de um webhook de entrada ou de status; portanto, pode usar http://example.com nesses campos.

Create Application

Lembre-se de clicar também no link “Gerar par de chaves pública/privada” . Isso fará o download de um arquivo chamado private.key.

Localize o private.key arquivo no seu sistema e mova-o para a pasta raiz do seu aplicativo.

Conclua a configuração do aplicativo clicando no botão Criar aplicativo e pronto, a configuração está concluída.

Anote o seu ID de inscrição; você precisará dele na próxima etapa.

Enviar o SMS usando a Messages API

A parte final desta postagem no blog consiste em pegar a solicitação enviada pelo Typeform e enviar uma mensagem SMS com os dados nela contidos.

A Messages API Nexmo cuidará de tudo isso para nós. Usaremos a Biblioteca Cliente Nexmo para Node.js para enviar o SMS.

Se você está acompanhando, instalou a biblioteca quando criamos o esqueleto do aplicativo; agora precisa incluí-la no index.js arquivo e inicializar a Nexmo instância com sua chave e seu segredo da API, o ID do aplicativo das etapas anteriores e o caminho para o private.key que você baixou ao criar seu aplicativo Messages & Dispatch.

No início de index.js , adicione o código a seguir, certificando-se de substituir NEXMO_API_KEY, NEXMO_API_SECRET, NEXMO_APPLICATION_ID e NEXMO_APPLICATION_PRIVATE_KEY_PATH pelas suas próprias credenciais:

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"
})

Também precisaremos atualizar o manipulador de rota que criamos para que ele envie uma mensagem de SMS para você quando o Typeform for enviado. Não se esqueça de substituir YOUR_NUMBER pelo seu número de telefone. Não use um + ou 00 ao digitar o número de telefone, comece com o código do país, por exemplo, 447700900000.:

server.route({
  method: 'POST',
  path: '/',
  handler: (request, h) => {
    nexmo.channel.send(
      { "type": "sms", "number": "YOUR_NUMBER" },
      { "type": "sms", "number": "NEXMO" },
      {
        "content": {
          "type": "text",
          "text": `New submission in Typeform ${request.payload.form_response.definition.title} on ${new Date(request.payload.form_response.submitted_at).toDateString()}. You can view it at https://admin.typeform.com/form/${request.payload.form_response.form_id}/results#responses`
        }
      },
      (err, data) => { console.log(data.message_uuid); }
    );

    return h.response().code(200)
  }
});

Com tudo isso configurado, execute o seguinte comando para iniciar o servidor:

O aplicativo será lançado na porta 3000.

Use o Ngrok para abrir essa porta para o mundo e anote as URLs que ele gerar para você.

ngrok output

Aqui está um guia prático para trabalhar com o Ngrok , caso você ainda não tenha usado antes.

Resumo? Você pode iniciar o Ngrok (se estiver instalado) executando este comando:

Conecte o webhook ao Typeform

Já concluímos nosso webhook, então agora é hora de conectá-lo a um Typeform. Se precisar de ajuda para fazer isso, há um artigo muito bom na seção de ajuda deles que mostra como conectar um webhook ao seu Typeform. Use a URL do ngrok que você acabou de obter com o comando acima, em vez do pastebin, como URL de destino no guia do Typeform.

Assim que você clicar Test Webhook para verificar se está funcionando, você receberá uma mensagem de SMS com os detalhes.

Webhook

Conclusão

Utilizamos um servidor Hapi para configurar um webhook conectado a um Typeform, que envia uma mensagem SMS usando a Messages API do Nexmo sempre que um usuário preenche o formulário. Você poderia fazer ainda mais, por exemplo, enviar cada resposta do formulário por SMS ou até mesmo usar o Facebook Messenger para preencher o Typeform.

Se você quiser explorar mais as APIs da Nexmo, aqui estão algumas leituras essenciais para você começar:

• A documentação da Messages API e da Dispatch API no portal do desenvolvedor

• Tutorial detalhado sobre uso da Messages API para enviar e receber mensagens no Facebook

• Se precisar de nós, acesse o canal da Comunidade Nexmo no Slack