https://a.storyblok.com/f/270183/36762/be37082c9a/blog_sms_swift-vapor_1200x600.png

Como enviar mensagens SMS com o Swift, o Vapor e a Vonage

Publicado em January 12, 2021

Tempo de leitura: 4 minutos

Introdução

A SMS API da Vonage permite que você envie mensagens de texto programaticamente. Este tutorial explica como usar a SMS API da Vonage com o Vapor para enviar um SMS.

Pré-requisitos

  • Xcode 12 e Swift 5 ou versão posterior.

  • A Vapor Toolbox instalada no seu computador.

Criar um projeto de vapor

Você pode criar um projeto Vapor usando o comando “novo projeto” vapor new SwiftTextMessage no seu terminal. Primeiro, ele perguntará se você deseja usar o Fluent (pressione n para pular) e, em seguida, se você deseja usar o Leaf. O Leaf é uma linguagem de modelos que você usará para gerar páginas HTML dinâmicas; portanto, pressione y para incluí-la. Assim que o comando for concluído, mude para a pasta que foi criada para você usando cd SwiftTextMessage.

Você também precisará criar um .env arquivo para armazenar as credenciais da sua conta da API da Vonage. No seu terminal, use o comando a seguir para criar o arquivo, substituindo X e Y pela sua chave de API e seu segredo, respectivamente:

echo "APIKEY=X \nAPISECRET=Y" > .env

Agora você pode abrir o projeto no Xcode usando vapor xcode. Assim que o Xcode abrir, ele começará a baixar as dependências das quais o Vapor depende, usando o Swift Package Manager (SPM). Para visualizar as dependências, você pode abrir o Package.swift arquivo.

Por padrão, o Xcode executa seu aplicativo a partir de um diretório local aleatório. Como você carregará recursos locais, é necessário definir um diretório de trabalho personalizado. Vá para Produto > Esquema > Editar Esquema... e defina o diretório de trabalho como a pasta raiz do seu projeto.

Setting custom working directorySetting custom working directory

Pressione CMD+R para compilar e executar. Quando terminar, acesse sua página da web em localhost:8080.

Criar uma página da Web

Agora que seu projeto está configurado, você vai criar uma interface para inserir um número de telefone e uma mensagem para o SMS. Abra o index.leaf arquivo em Recursos/Visualizações e atualize-o:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Send a text message</title>
  </head>

  <body>
    <h1>Send a text message using the Vonage SMS API</h1>

    #if(status):
      <p> Status of the last SMS: #(status)</p>
    #endif

    <form action="/send" method="post">
        <p>
        <label>Phone number E.g. 447000000000</label><br>
        <input type="text" name="to">
        </p>

        <p>
        <label>Text message</label><br>
        <textarea name="text"> </textarea>
        </p>
        <button type="submit">Send text</button>
    </form>
  </body>
</html>

O código acima adiciona um formulário com campos para um número de telefone e uma mensagem; assim que o formulário for enviado, ele enviará uma POST solicitação para /send. Observe o bloco Leaf que começa com #if(status):. Ele verifica se há um valor para a variável status e, se houver, adiciona as informações adicionais de status. Se você compilar e executar (CMD + R), verá agora sua página atualizada.

Criar as estruturas do modelo

Uma vantagem de usar o Vapor é que você pode contar com a segurança de tipos da linguagem Swift. Você pode modelar entradas e saídas para o seu servidor de forma que estejam em conformidade com o Codable protocolo; o Vapor possui um protocolo chamado Content para isso.

Crie uma estrutura chamada Input que esteja em conformidade com Content na parte inferior do routes.swift arquivo:

struct Input: Content {
    let to: String
    let text: String
    let from = "SwiftText"
    var apiKey: String?
    var apiSecret: String?

    private enum CodingKeys: String, CodingKey {
        case to
        case text
        case from
        case apiKey = "api_key"
        case apiSecret = "api_secret"
    }
}

A SMS API da Vonage espera que os campos estejam no formato “snake case”; por isso, as estruturas possuem a CodingKeys enum para mapear os nomes de suas propriedades para seus equivalentes em snake case. Abaixo da Input estrutura, crie outra estrutura para a resposta esperada pela SMS API:

struct Response: Content {
    let messages: [Messages]

    struct Messages: Content {
        let status: String
    }
}

Enviar o SMS

Para enviar o SMS, é necessário fazer uma chamada para o /sms ponto de extremidade da SMS API da Vonage. Para isso, é preciso definir a /send rota usada pelo formulário da web, analisar os dados do formulário e, em seguida, fazer a chamada. Comece definindo a nova rota na routes função:

app.post("send") { req -> EventLoopFuture<View> in
    var input = try req.content.decode(Input.self)
    input.apiKey = Environment.get("APIKEY")
    input.apiSecret = Environment.get("APISECRET")
}

Isso utiliza o corpo do formulário para criar uma Input estrutura; em seguida, a chave e o segredo da API são adicionados a partir do .env arquivo, já que são campos obrigatórios da SMS API. Em seguida, você usará a API de Cliente, que permite fazer chamadas HTTP externas, para chamar a SMS API. Adicione a chamada à rota de envio:

app.post("send") { req -> EventLoopFuture<View> in
    var input = try req.content.decode(Input.self)
    input.apiKey = Environment.get("APIKEY")
    input.apiSecret = Environment.get("APISECRET")
    
    return req.client.post(URI(scheme: "https", host: "rest.nexmo.com", path: "/sms/json")) { req in
        try req.content.encode(input, as: .json)
    }.flatMap { response -> EventLoopFuture<View> in
        let responseBody = try! response.content.decode(Response.self)
        return req.view.render("index", ["status": responseBody.messages.first?.status == "0" ? "ok" : "error"])
    }
}

A client.post chamada de função tem um tipo de retorno de EventLoopFuture<ClientResponse>. Em seguida, ela é mapeada para um EventLoopFuture<View> tipo, que é o tipo de retorno esperado pela rota. A função map recebe a resposta da SMS API e cria uma variável de status para o renderizador da visualização usar no index.leaf arquivo.

Experimente

Compile e execute (CMD + R) o projeto, abra localhost:8080 no seu navegador e, em seguida, preencha um número de telefone e uma mensagem.

Index page of the projectIndex page of the project

Ao clicar no botão enviar enviará os dados para a rota que você definiu anteriormente, fará a chamada para a SMS API da Vonage e, em seguida, retornará à página inicial com o status da operação.

Index page with ok statusIndex page with ok status

E agora?

Você pode encontrar o projeto concluído no GitHub.

Você pode fazer muito mais com a SMS API, como verificar se o seu servidor enviou uma mensagem SMS com sucesso. Saiba mais sobre isso em nossa plataforma para desenvolvedores.

Compartilhar:

https://a.storyblok.com/f/270183/400x400/19c02db2d3/abdul-ajetunmobi.png
Abdul AjetunmobiEx-funcionário da Vonage

Abdul é um Developer Advocate da Vonage. Ele tem experiência profissional na área de produtos de consumo como engenheiro de iOS. Em seu tempo livre, ele gosta de andar de bicicleta, ouvir música e orientar quem está dando os primeiros passos na área de tecnologia