Como enviar um SMS com o Blazor

Blazor é o mais recente de uma série do que eu chamaria de “magníficas” estruturas web voltadas para desenvolvedores que o .NET criou. Neste tutorial, vamos ver como enviar um SMS usando o Blazor e a API de SMS da Vonage SMS API.

Ir direto para o código

Todo o código deste tutorial está disponível em GitHub.

Pré-requisitos

• Você precisará da versão mais recente do SDK do .NET Core 3.1

• Você precisará do Visual Studio 2019, do Visual Studio para Mac ou do Visual Studio Code⁠—vou usar o VS Code nesta demonstração

Criar o aplicativo

Vá até o diretório onde deseja compilar o aplicativo e execute o seguinte comando no terminal:

Isso criará um aplicativo de servidor Blazor para você chamado SendSmsBlazor. vá para este diretório e digite o comando code . para iniciar o VS Code. Para usuários do Visual Studio, basta abrir o arquivo sln.

Adicionar o pacote Vonage Nuget

Abra um terminal no VSCode e execute:

Isso instalará o pacote Vonage no projeto.

Crie seu SmsService

Teremos que integrar um serviço de SMS à nossa página do Razor, então vamos criar um SmsService.

Adicione um novo arquivo na Data pasta chamada SmsService.cs. Se você estiver usando o VS Code, isso apenas criará um arquivo em branco; portanto, adicione o seguinte a ele.

using Microsoft.Extensions.Configuration;
using Vonage.Messaging;
using Vonage.Request;

namespace SendSmsBlazor.Data
{
    public class SmsService
    {

    }
}

Adicionar um construtor

Dentro da SmsService classe, precisamos injetar um objeto de configuração. A configuração conterá nossa chave de API e nosso segredo de API, que configuraremos um pouco mais adiante. Por enquanto, basta adicionar uma nova propriedade dentro da SmsService classe chamada Configuration do tipo IConfiguraiton e adicionar um construtor que receba um IConfiguration objeto, que simplesmente atribuirá nossa Configuration propriedade a esse objeto.

public IConfiguration Configuration { get; set; }
public SmsService(IConfiguration config)
{
    Configuration = config;
}

Escreva seu método SendSms

Dentro do SmsService, vamos adicionar um SendSms método. Esse método receberá três strings: to, frome text que conterão o número para o qual a mensagem será enviada, o número da API da Vonage de onde a mensagem está vindo e o texto da mensagem.

Tudo o que resta fazer, do ponto de vista deste serviço, é:

1. Retire a chave e o segredo da API da configuração

2. Criar um SmsClient

3. Enviar o SMS

Tudo isso pode ser feito da seguinte maneira:

public SendSmsResponse SendSms(string to, string from, string text)
{
    var apiKey = Configuration["VONAGE_API_KEY"];
    var apiSecret = Configuration["VONAGE_API_SECRET"];
    var creds = Credentials.FromApiKeyAndSecret(apiKey,apiSecret);
    var client = new SmsClient(creds);
    var request = new SendSmsRequest
    {
        To= to,
        From = from,
        Text = text
    };
    return client.SendAnSms(request);
}

Configurar o SmsService como injetável

Agora que já criamos o serviço, precisamos garantir que possamos injetá-lo em nossa página Razor. Para isso, precisamos acessar Startup.cs e localizar a ConfigureServices função. Adicione a seguinte linha ao final dessa função, e o serviço estará pronto para ser injetado:

services.AddSingleton<SmsService>();

Adicionar front-end

Vamos usar o Pages/Index.razor para nosso front-end, então basta abri-lo e excluir tudo abaixo da linha 2.

Injeção de dependência do SmsService

A primeira coisa que precisamos fazer aqui é importar nosso SmsService. Para isso, adicione um using e uma inject , assim:

@using SendSmsBlazor.Data
@inject SmsService SmsService

Adicione o código em C# para enviar a mensagem

Uma das coisas realmente legais do Blazor é que ele permite executar código C# no navegador — basta um @code{} bloco, e já estamos prontos. Ao fazer isso, estamos criando uma classe anônima inline; por isso, vamos adicionar um To, From, Texte MessageId a essa classe anônima e vamos adicionar um método chamado SendSms que, na verdade, chamará nosso SmsService. Ficará assim:

@code{
    private string To;
    private string From;
    private string Text;
    private string MessageId;
    private void SendSms()
    {
        var response = SmsService.SendSms(To, From, Text);
        MessageId = response.Messages[0].MessageId;
    }
}

Adicionar campos de entrada e botão “Enviar”

Agora que já resolvemos tudo isso, vamos adicionar alguns campos de entrada. O To, From, e Text serão preenchidos vinculando-os a esses campos de entrada por meio do @bind . Na parte inferior, logo acima do botão, exibiremos o valor enviado MessageId fazendo referência a ele em uma tag de parágrafo. Por fim, vamos adicionar um botão na parte inferior que chamará o SendSms botão em nossa classe anônima quando clicado. Adicione o seguinte entre o @code bloco e o @inject bloco:

<h1>Send an SMS!</h1>

Welcome to your new app Fill out the below form to send an SMS.
<br />
to:
<input id="to" @bind="@To" class="input-group-text" />
from:
<input id="from" @bind="From" class="input-group-text" />
text:
<input id="text" @bind="Text" class="input-group-text" />
<p>@MessageId</p>
<button class="btn btn-primary" @onclick="SendSms">Send SMS</button>

Configurar o aplicativo

A última coisa que precisamos fazer antes de iniciar nosso servidor é configurá-lo. Se você se lembra, você definiu um IConfiguration objeto no SmsService. Tudo o que você precisa fazer é abrir appsettings.json e adicionar duas propriedades à configuração VONAGE_API_KEY e VONAGE_API_SECRET. Defina-as com os valores da chave de API e do segredo de API no Painel.

Executando nosso aplicativo

Depois de fazer tudo isso, basta voltar ao seu terminal e executar o comando a seguir.

Seu aplicativo informará em qual porta ele está escutando — no meu caso, é a porta 5001; portanto, eu acessaria localhost:5001, preencha o formulário e clique em “SendSms”. Você verá a mensagem SMS no número para o qual a enviou, com o Message-ID da mensagem aparecendo logo abaixo do campo de texto.

Recursos

O código desta demonstração pode ser encontrado em GitHub.