Crie um aplicativo ASP.NET MVC para enviar mensagens SMS

Este artigo foi atualizado em abril de 2025

Introdução

Olá a todos! Aqui é o Michael Crump, e o que mais me entusiasma ao aprender uma nova tecnologia é entender um cenário em que um usuário final poderia utilizá-la e como proceder para criar a solução na qualidade de desenvolvedor.

Acredito que os cenários do mundo real são importantes para compreender como trabalhar com um produto (ou API, no nosso caso), pois eles podem demonstrar a complexidade e a imprevisibilidade dos problemas reais que enfrentamos, estimulando o pensamento crítico sobre como poderíamos resolvê-los.

Pensando nisso, decidi criar um aplicativo web que simula a situação em que um usuário final encontra uma casa de seu interesse e envia um formulário, de modo que um corretor imobiliário receba um SMS com os detalhes. Uma interface de usuário simples do aplicativo é mostrada abaixo:

OK, vamos começar a desenvolver o aplicativo!

Observação: O código-fonte completo deste aplicativo pode ser encontrado em nosso repositório da Comunidade Vonage.

Primeiros passos

Criação do projeto

Comece abrindo o o Visual Studio (Community Edition ou superior) e selecione “Criar um novo projeto”e, em seguida, selecione Aplicativo Web ASP.NET Core (Model-View-Controller) , conforme mostrado abaixo. Em breve, darei mais informações sobre o que é MVC.

Dê um nome ao seu projeto (exemplo: SalesLeads) e pressione Avançar. Em “Framework”, certifique-se de que esteja definido como .NET 8.0 e deixe as outras opções com as configurações padrão; em seguida, clique no botão Criar .

No Explorador de Soluções, clique com o botão direito do mouse em Dependências e selecione Gerenciar Pacotes NuGet. Agora selecione a aba “Procurar” e procure por Vonage. Você verá Vonage aparecer e pressione Instalar na versão estável mais recente (7.17.0 no momento).

O que é MVC e por que devemos usá-lo?

Antes de entrarmos no código, gostaria de apresentar uma visão geral básica do MVC para que vocês possam entender melhor por que usamos esse padrão nas aplicações web atualmente. Resumidamente, MVC significa modelo-visão-controlador, um padrão de projeto que garante que as aplicações tenham uma arquitetura bem estruturada e sejam fáceis de testar e manter para futuros desenvolvedores que venham a trabalhar na base de código.

MModelos: Representam os dados do aplicativo.

VVisualizações: representam o HTML exibido (ou o que o usuário final vê) do aplicativo em execução.

CControladores: representam a lógica de negócios do aplicativo.

Com uma compreensão básica do padrão, vamos construir nosso aplicativo.

Começando pelo modelo (dados)

Clique com o botão direito do mouse Modelos no Explorador de Soluções e Adicionar um novo Classe. Vamos dar a ela o nome Lead.cs e clicar em Adicionar.

Vamos incluir quatro informações: o nome do cliente, o número de telefone, a mensagem que ele deseja enviar e o resultado do envio do formulário. Dessa forma, o usuário final saberá se o envio foi bem-sucedido ou não.

using System.ComponentModel.DataAnnotations;

namespace SalesLeads.Models
{
    public class Lead
    {
        [Display(Name = "Your Name")]
        public string Name { get; set; }
        [Display(Name = "Your Phone Number")]
        public string Phone { get; set; }
        [Display(Name = "How can we help?")]
        public string Message { get; set; }
        public string Result { get; set; }
    }
}

Definindo a visualização (interface do usuário)

Vamos definir agora a página que será exibida ao usuário final.

Selecionar Visualizações -> Página inicial -> e, em seguida, Index.cshtml.

O que é cshtml? É um arquivo HTML em C# utilizado no lado do servidor pelo mecanismo de marcação Razor para renderizar os arquivos da página da web no navegador do usuário.

Começaremos definindo o modelo de dados que a página-modelo utilizará, conforme mostrado na linha nº 1 abaixo. Em seguida, criaremos algumas divs para que nossa página fique com uma boa aparência após ser renderizada (junto com um texto padrão sobre a casa). Depois, usaremos o BeginForm do ASP.NET para criar um formulário com facilidade. Vários recursos já estão integrados, incluindo uma maneira fácil de adicionar text e marcar o campo como obrigatório.

@model SalesLeads.Models.Lead

<div class="row">
    <div class="col-sm-8">
        <img src="~/Content/Images/house.jpg" class="img-responsive" alt="House">
    </div>
    <div class="col-sm-2">
        <h4>Talk To A Real Estate Agent</h4>
        <p>
            A trained real estate professional is standing by to answer any
            questions you might have about this property. Fill out the form below
            with your contact information, and an agent will reach out soon.
        </p>
        @using (Html.BeginForm("Index", "Home"))
        {
            <div class="form-group">
                @Html.LabelFor(m => m.Name)
                @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Michael Crump", required = "required" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Phone)
                @Html.TextBoxFor(m => m.Phone, new { @class = "form-control", placeholder = "+14253331111", required = "required" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Message)
                @Html.TextBoxFor(m => m.Message, new { @class = "form-control", required = "required" })
            </div>
            <button type="submit" class="btn btn-primary">Request Info</button>
        }

        <strong>@Html.DisplayFor(m => m.Result)</strong><br>
    </div>
</div>

Vamos finalizar com um botão para enviar os dados (por meio de uma solicitação POST), bem como um espaço para informar se a mensagem SMS foi enviada com sucesso ou não.

Para ganhar pontos extras: adicione uma imagem de exemplo da sua casa no seguinte endereço: ~/Content/Images/house.jpg. :)

Adicionando o controlador (lógica de negócios)

Precisamos armazenar nossa chave de API e o segredo de API para que nosso aplicativo possa usá-las ao enviar uma mensagem SMS. Vamos armazená-las em um controlador de domínio.

Mas, antes disso, você pode obter sua chave de API e seu segredo de API atuais acessando o Portal do Desenvolvedor da Vonage e copiando e colando as chaves conforme mostrado abaixo.

Observação: adicionei os segredos a esta classe para facilitar a compreensão do padrão. Proteja seus segredos caso esteja publicando um aplicativo de produção, seja usando variáveis de ambiente ou algo como o Azure Key Vault.

Clique com o botão direito do mouse na Solução e adicione uma nova pasta chamada Domínio; dentro dessa pasta, crie uma nova Biblioteca de Classes chamada Credentials.cs com o seguinte conteúdo.

namespace SalesLeads.Domain
{
    public class Credentials
    {
        public static string APIKey => "API-KEY";
        public static string APISecret => "API-SECRET";
    }
}

A seguir, vamos escrever a lógica que envia a mensagem SMS.

Selecionar Controladores e, em seguida, HomeController.cs e use o trecho de código a seguir. Você precisará atualizar o using SalesLeads.Models; para o nome do seu projeto, a fim de incluir seu dados .

using Microsoft.AspNetCore.Mvc;
using SalesLeads.Models;
using Vonage;
using Vonage.Request;

namespace SalesLeads.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return this.View();
        }

        [HttpPost]
        public async Task<ActionResult> Index(Lead lead)
        {
            string name = lead.Name;
            string phone = lead.Phone;
            string message = lead.Message;

            var credentials = Credentials.FromApiKeyAndSecret(
            Domain.Credentials.APIKey,
            Domain.Credentials.APISecret
            );

            var VonageClient = new VonageClient(credentials);

            var response = await VonageClient.SmsClient.SendAnSmsAsync(new Vonage.Messaging.SendSmsRequest()
            {
                To = "ENTER_A_PHONE_NUMBER",
                From = "ENTER_A_PHONE_NUMBER",
                Text = $"New lead acquired!\n\nName: {name}\nPhone: {phone}\nMessage: {message}"
            });

            if (response != null && Convert.ToInt32(response.MessageCount) > 0 && response.Messages[0].StatusCode.ToString() == "Success")
            {
                lead.Result = "Message sent successfully! An agent will contact you shortly.";
            }
            else
            {
                lead.Result = "Message Failure. Please try your request again. ";
            }

            return this.View(lead);
        }
    }
}

O último A instrução If...then verifica se a mensagem SMS foi enviada com sucesso e informa o status ao cliente.

Ao executar o código acima e inserir um nome, número de telefone e mensagem, a mensagem de texto será enviada para o número de celular que você especificou (que, neste caso, estaria codificado diretamente para o celular do corretor de imóveis).

Abaixo está a confirmação de que a mensagem SMS foi enviada com sucesso!

Conclusão

Espero que este tutorial tenha ajudado você a dar os primeiros passos com as APIs de SMS da Vonage. Se tiver dúvidas ou comentários sobre nossa SMS API, junte-se a nós no Slack para desenvolvedores da Vonage ou me envie um tweet no Twitter, e entrarei em contato com você. Mais uma vez, o código-fonte completo deste aplicativo pode ser encontrado no nosso repositório da Comunidade Vonage. Mais uma vez, obrigado pela leitura, e até a próxima!