Como enviar um SMS com TypeScript usando a plataforma Twilio

Tempo de leitura: 4 minutos

February 23, 2021

Escrito por

Phil Nash

Twilion

Revisado por

Daizen Ikehara

Twilion

Rachel Black

Twilion

Como enviar um SMS com TypeScript usando a plataforma Twilio

Escrever aplicativos Node.js com TypeScript significa que você pode aproveitar o sistema e as ferramentas do tipo TypeScript. Já vimos neste blog como enviar mensagens SMS com o Node.js; agora vamos ver como fazer isso com o TypeScript.

O que você precisa

Para acompanhar este tutorial, você precisará do seguinte:

Uma conta da Twilio (caso você não tenha uma conta da Twilio, cadastre uma gratuitamente aqui e receba US$ 10 de crédito ao atualizar)
Um número de telefone da Twilio que pode enviar mensagens SMS
Node.js instalado

Assim que estiver tudo preparado, vamos nos aprofundar no código.

Introdução ao TypeScript

Vamos iniciar um novo projeto de TypeScript neste exemplo. Em um terminal, execute os comandos a seguir para criar um diretório de projetos e um arquivo package.json.

mkdir send-sms-with-typescript
cd send-sms-with-typescript
npm init --yes

Agora precisamos instalar algumas dependências. Precisaremos do TypeScript em nossas dependências de desenvolvimento para compilar nosso código em JavaScript antes de executá-lo; precisaremos também do módulo de node da Twilio, que facilita o uso da API para o envio de mensagens SMS.

npm install typescript --save-dev
npm install twilio

Execute o seguinte comando para inicializar o projeto com um arquivo tsconfig.json:

npx tsc --init

Deixaremos o arquivo tsconfig.json com as configurações padrão. Se quiser alterá-las, as configurações são bem comentadas. Você também pode ler mais sobre as diferentes opções na referência do TSConfig.

Precisamos de um arquivo para escrever nosso programa. Crie um arquivo chamado index.ts:

touch index.ts

Em seguida, vamos configurar um script para compilar nosso TypeScript em JavaScript e um script para executar o JavaScript. Abra o arquivo package.json e, à propriedade "scripts", adicione o seguinte:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "send": "node index.js"
  },

tsc é o comando do compilador TypeScript que compilará nosso arquivo index.ts em index.js. O script "send" chamará então o arquivo index.js. Agora, estamos prontos para escrever um pouco de TypeScript!

Vamos escrever um pouco de TypeScript

Abra o arquivo index.ts e comece importando a biblioteca da Twilio:

import { Twilio } from "twilio";

Para este script, enviaremos os parâmetros por meio de variáveis de ambiente. As variáveis de ambiente são um ótimo lugar para armazenar informações que você precisa em um app, mas elas não devem fazer check-in no controle do código-fonte. Você pode ler mais sobre como configurar variáveis de ambiente neste post.

Precisaremos do Account SID (SID da conta) e do Auth Token (token de autenticação), disponíveis no console da Twilio, um número de telefone da Twilio que possa enviar mensagens SMS e um número de telefone para o qual enviar a mensagem. Vamos remover essas variáveis do ambiente da seguinte forma:

import { Twilio } from "twilio";

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const twilioNumber = process.env.TWILIO_PHONE_NUMBER;
const myNumber = process.env.MY_NUMBER;

Usando o accountSid e o authToken, inicialize um cliente de API da Twilio:

const client = new Twilio(accountSid, authToken);

Usando o cliente, podemos fazer uma solicitação de API para criar uma mensagem. Para o método create, precisamos transmitir:

o número do qual estamos enviando a mensagem, que será o número da Twilio
o número para o qual estamos enviando a mensagem, que é o seu número de telefone
o corpo da mensagem

O método create retorna uma Promise (Promessa) quando a solicitação é bem-sucedida. Registraremos o SID do recurso de mensagem que criamos para mostrar que funcionou.

  client.messages
    .create({
      from: twilioNumber,
      to: myNumber,
      body: "You just sent an SMS from TypeScript using Twilio!",
    })
    .then((message) => console.log(message.sid));

Se esse fosse um JavaScript normal, este script de exemplo acabaria aqui. Se você estiver usando um editor com ferramentas para TypeScript, como o VS Code, já deve ter visto que há alguns problemas com esse script. Se você não tiver suporte ao TypeScript no seu editor, poderá executar o script de compilação que definimos anteriormente npm run build para ver os erros.

Uma captura de tela do código que escrevemos anteriormente atribuindo variáveis do process.env. o processo está sublinhado em vermelho.

Sublinhados ondulados vermelhos significam que não conseguimos atender ao TypeScript com esse código. Nesse caso, o TypeScript não tem certeza de qual é o objeto process. Sabemos que é um Node.js global que fornece informações sobre o processo Node.js em execução e o controla, mas não é o caso do TypeScript. Para informar ao TypeScript sobre o process, precisamos instalar os tipos do Node.js. Podemos fazer isso com:

npm install @types/node --save-dev

Depois disso, os erros se movem mais para baixo no script.

Uma captura de tela do código que escrevemos anteriormente para criar um cliente de API e enviar a mensagem. 'accountsid' e 'to' são sublinhados em vermelho.

O problema agora é que a busca de valores no ambiente pode resultar em string ou undefined. Portanto, cada accountSid, authToken, twilioNumber e myNumber são do tipo string | undefined. O constructor (construtor) do cliente de API requer que os dois primeiros argumentos sejam do tipo string; string | undefined não atende a esse requisito. Da mesma forma, ao enviar uma mensagem, deve haver sempre um número to.

Portanto, antes de construir um cliente de API, precisamos garantir que o accountSid e o authtoken sejam strings. Antes de enviar uma mensagem, também precisamos garantir que myNumber seja um número. Na verdade, from é definido como um tipo de string | undefined, mas isso porque também podemos transmitir um messagingServiceSid se quisermos usar um pool de números de remetentes de um serviço de mensagens. Portanto, ao mesmo tempo que verificamos a presença dessas outras variáveis, precisamos garantir que haja um twilioNumber também.

Neste exemplo, vamos finalizar a inicialização do cliente e a criação de mensagens em uma condicional com base na presença das variáveis necessárias. Podemos então mostrar uma mensagem de erro caso não haja uma.

if (accountSid && authToken && myNumber && twilioNumber) {
  const client = new Twilio(accountSid, authToken);

  client.messages
    .create({
      from: twilioNumber,
      to: myNumber,
      body: "You just sent an SMS from TypeScript using Twilio!",
    })
    .then((message) => console.log(message.sid));
} else {
  console.error(
    "You are missing one of the variables you need to send a message"
  );
}

Você deve verificar se não há mais sublinhados vermelhos, o que significa que podemos compilar o TypeScript em JavaScript. No diretório de projetos, execute o script que definimos anteriormente:

npm run build

Quando o script for concluído, você encontrará um arquivo index.js no seu projeto. Agora, você pode executar o outro script que definimos anteriormente para enviar uma mensagem SMS.

$ npm run send

> send-sms-with-typescript@1.0.0 send /path/to/send-sms-with-typescript
> node index.js

You are missing one of the variables you need to send a message

É evidente que você precisa definir todas as variáveis de ambiente relevantes. Ao executar um único script como este, podemos fazer tudo em uma única linha:

$ TWILIO_ACCOUNT_SID=YOUR_ACCOUNT_SID TWILIO_AUTH_TOKEN=YOUR_AUTH_TOKEN \
  TWILIO_PHONE_NUMBER=YOUR_TWILIO_PHONE_NUMBER MY_NUMBER=YOUR_PHONE_NUMBER \
  npm run send

> send-sms-with-typescript@1.0.0 send /path/to/send-sms-with-typescript
> node index.js

SM24a31a27c03242ca8f03541282xxxyyy

Uma exibição do aplicativo de mensagens do iPhone mostrando que recebemos a mensagem do script.

É isso aí! Você enviou uma mensagem SMS usando as plataformas TypeScript e Twilio.

O que vem a seguir?

Agora que você sabe os primeiros passos para enviar mensagens SMS com as plataformas Twilio e TypeScript, pode fazer muito mais. Encontre o código completo deste post do blog, além de outros exemplos de projetos de TypeScript, no GitHub. O pacote Node.js da Twilio é fornecido com tipos de TypeScript para que você possa se beneficiar do TypeScript sem ter que escrever seus próprios tipos. Você também pode usar o TypeScript para escrever funções e implantá-las no Twilio Runtime.

Se você está procurando outras coisas para criar com TypeScript e Twilio, confira como receber e responder mensagens SMS no TypeScript, como criar um bot meteorológico SMS com Twilio e TypeScript ou primeiros passos com Twilio Video e TypeScript. Se você gosta da aparência do TypeScript, mas está trabalhando atualmente com JavaScript, dê uma olhada neste guia para migrar seu projeto para TypeScript no seu próprio ritmo. Ou acesse a tag do TypeScript neste blog para ver todos os posts mais recentes sobre a Twilio e o TypeScript.

Este artigo foi traduzido do original "How to Send an SMS With TypeScript Using 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.