Crear una aplicación ASP.NET MVC para enviar mensajes SMS

Este artículo se actualizó en abril de 2025

Introducción

Hola a todos. Michael Crump aquí, y lo que me excita sobre el aprendizaje de una nueva tecnología es la comprensión de un escenario potencial que un usuario final lo utilizaría para y cómo ir sobre la construcción de la solución como desarrollador.

Creo que los escenarios del mundo real son importantes para entender cómo trabajar con un producto (o API en nuestro caso) es que pueden demostrar la complejidad e imprevisibilidad de los problemas reales a los que nos enfrentamos para estimular el pensamiento crítico sobre cómo podríamos resolverlos.

Con esto en mente, decidí crear una aplicación web que simulara que un usuario final encuentra una casa que le interesa y envía un formulario para que un agente inmobiliario reciba un SMS con los detalles. A continuación se muestra una sencilla interfaz de usuario de la aplicación:

Bien, ¡empecemos a crear la aplicación!

Nota: El código fuente completo de esta aplicación se puede encontrar en nuestro repositorio de la comunidad de Vonage.

Configuración

Creación del proyecto

Para empezar, inicie Visual Studio (Community Edition o superior) y seleccionando Crear un nuevo proyectoy seleccione ASP.NET Core Web App (Modelo-Vista-Controlador) como se muestra a continuación. Voy a proporcionar más información acerca de lo que es MVC muy pronto.

Dé un nombre a su proyecto (ejemplo: SalesLeads) y pulse Siguiente. Para Framework, asegúrese de que está establecido en .NET 8.0 y deje las demás opciones como están por defecto y pulse el botón Crear .

En Explorador de solucioneshaga clic con el botón derecho en Dependencias y seleccione Gestionar paquetes NuGet. Ahora seleccione la opción Examinar y busque Vonage. Verás Vonage y pulsa Instala en la última versión estable (7.17.0 en este momento).

¿Qué es MVC y por qué debemos utilizarlo?

Antes de saltar al código, quería proporcionar una visión general básica de MVC donde se puede entender mejor por qué usamos este patrón para aplicaciones web hoy en día. En pocas palabras, MVC significa modelo-vista-controlador, un patrón de diseño que asegura que las aplicaciones estén bien arquitecturadas y sean fáciles de probar y mantener para los futuros desarrolladores que trabajen en la base de código.

Modelos: Representan los datos de la aplicación.

Views: Representan el HTML mostrado (o lo que ve el usuario final) de la aplicación en ejecución.

Controladores: Representan la lógica de negocio de la aplicación.

Con una comprensión básica del patrón, vamos a construir nuestra aplicación.

Empezar por el modelo (datos)

Haga clic con el botón derecho del ratón en Modelos en el Explorador de soluciones y Añadir una nueva Clase. Le daremos el nombre Plomo.cs y pulsaremos Añadir.

Añadiremos 4 datos: El nombre del cliente, su número de teléfono, el mensaje que quiere enviar así como el resultado del envío del formulario. De esta forma, el usuario final sabrá si se ha enviado correctamente o no.

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; }
    }
}

Definición de la vista (UI)

Ahora definiremos la página que se presenta al usuario final.

Seleccione Vistas -> Inicio -> y luego Index.cshtml.

¿Qué es cshtml? Es un archivo C# HTML que es utilizado en el lado del servidor por el Razor Markup engine para renderizar los archivos de la página web al navegador del usuario.

Comenzaremos definiendo el modelo de datos que utilizará la página de plantilla, como se muestra en la línea 1 a continuación. A continuación, crearemos un par de divs para que nuestra página se vea bien una vez renderizada (junto con algo de texto sobre la casa). A continuación, utilizaremos el método BeginForm de ASP.NET para construir fácilmente un formulario. Varias características están incorporadas, incluyendo una forma fácil de añadir Marcador de posición y marcar el campo como obligatorio.

@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>

Terminaremos con un botón para enviar los datos (a través de una solicitud POST), así como un lugar para indicar si el mensaje SMS se ha enviado correctamente o no.

Para obtener puntos extra: Añade una imagen de muestra de tu casa en la siguiente dirección ~/Content/Images/house.jpg. :)

Añadir el controlador (lógica empresarial)

Necesitamos almacenar nuestra Clave API y Secreto API para que nuestra aplicación las utilice al enviar un mensaje SMS. Colocaremos esto dentro de un Controlador de Dominio.

Pero primero, puedes obtener tu clave y secreto de API actuales visitando el Portal para desarrolladores de Vonage y copiando y pegando las claves como se muestra a continuación.

Nota: He añadido los secretos a esta clase para facilitar la comprensión del patrón. Por favor asegura tus secretos si estás publicando una aplicación de producción usando variables de entorno o algo como Azure Key Vault.

Haga clic con el botón derecho en la Solución y añada una nueva carpeta llamada Dominio; dentro de esa carpeta, cree una nueva Biblioteca de Clases llamada Credenciales.cs con el siguiente contenido.

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

A continuación, escribiremos la lógica que envía el mensaje SMS.

Seleccione Controladores y luego HomeController.cs y utilice el siguiente fragmento de código. Tendrá que actualizar el using SalesLeads.Models; con el nombre de su proyecto para poder utilizar el modelo Modelo datos.

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

El último If...then comprueba si el SMS se ha enviado correctamente e informa al cliente de su estado.

Cuando ejecute el código anterior e introduzca un Nombre, Numbers de Teléfono y Mensajeel mensaje de texto se enviará al número de móvil especificado (que, en este caso, estaría codificado en el teléfono móvil del agente inmobiliario).

A continuación se muestra el resultado del SMS enviado correctamente.

Conclusión

Espero que este tutorial te haya ayudado a comenzar a usar las SMS API de Vonage. Si tienes preguntas o comentarios sobre nuestra SMS API, únete a nosotros en el Slack para desarrolladores de Vonage o envíame un Tweet en Twittery te responderé. Nuevamente, puedes encontrar el código fuente completo de esta aplicación en nuestro repositorio de la comunidad de Vonage. Gracias de nuevo por leer, ¡y te alcanzo en la próxima!