You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

Expand
Calificar esta página:

Recordatorios de citas con C# y ASP.NET MVC

¡Ahoy! Ahora te recomendamos que crees tus recordatorios de citas SMS con la funcionalidad de programación de mensajes integrada de Twilio. Dirígete a la Documentación de recursos de mensajes para obtener más información sobre la programación de mensajes de SMS.

¿Estás listo para implementar recordatorios de citas en tu aplicación móvil? Así es como funciona:

  1. Un administrador crea una cita para una fecha y hora futuras y almacena el número de teléfono de un cliente en la base de datos de esa cita
  2. Un proceso en segundo plano comprueba la base de datos a intervalos regulares y busca citas que requieran el envío de un recordatorio
  3. A una hora configurada antes de la cita, se envía un recordatorio por SMS al cliente para recordarle su cita

Comprueba cómo Yelp utiliza SMS para confirmar las reservas de restaurantes para los comensales.

Componentes básicos

Estas son las tecnologías que utilizaremos para conseguir esto:

  • ASP.NET MVC para crear una aplicación web controlada por base de datos
  • El recurso mensajes de la API REST de Twilio para enviar mensajes de texto
  • Hangfire para ayudarnos a programar y ejecutar tareas en segundo plano de forma recurrente


En este tutorial, destacaremos los fragmentos clave de código que hacen que funcione esta aplicación móvil. Consulta el archivo README del proyecto en GitHub para conocer cómo ejecutar el código por tu cuenta.

Cómo leer este tutorial

Para implementar los recordatorios de citas, trabajaremos en una serie de historias de usuarios que describen cómo implementar por completo los recordatorios de citas en una aplicación web. Analizaremos el código necesario para satisfacer cada historia y exploraremos lo que necesitamos añadir en cada paso.

Todo esto se puede hacer con la ayuda de Twilio en menos de media hora.

¡Empecemos!

Creación de una cita

Como usuario, quiero crear una cita con un nombre, números de teléfono de invitado y una hora en el futuro.

Para crear una aplicación móvil de recordatorios de citas automatizada, probablemente deberíamos empezar con una cita. Esta historia requiere que creemos un poco de interfaz de usuario y un objeto de modelo para crear y guardar una Appointment nueva en nuestro sistema. A un nivel alto, esto es lo que necesitaremos añadir:

  • Un formulario para introducir detalles sobre la cita
  • Una función de ruta y controlador en el servidor para representar el formulario
  • Una función de ruta y controlador en el servidor para manejar la solicitud POST del formulario
  • Un objeto de modelo persistente de Appointment para almacenar información sobre el usuario

Bien, sabemos lo que necesitamos para crear una cita nueva. Ahora, empecemos por observar el modelo, en el que decidimos qué información queremos almacenar con la cita.

Consulta nuestro modelo de cita

Modelo de cita

El modelo de cita es bastante sencillo, pero dado que los humanos interactuarán con él, asegurémonos de añadir validación de datos.

Nuestra aplicación móvil se basa en anotaciones de datos ASP.NET. En nuestro caso, solo queremos validar que algunos campos son obligatorios. Para ello, utilizaremos la anotación de datos [Required].

De forma predeterminada, ASP.NET MVC muestra el nombre de la propiedad cuando representa un control. En nuestro ejemplo, los nombres de propiedades pueden ser Name o PhoneNumber. No debería haber ningún problema para la representación de Name. Pero es posible que en PhoneNumber queramos mostrar algo mejor, como "Phone Number". Para este tipo de situaciones podemos utilizar otra anotación de datos: [Display(Name = "Phone Number")].

Para validar el contenido del campo PhoneNumber, utilizamos la anotación de datos [Phone], que confirma que los números de teléfono que introdujo el usuario se ajustan de forma libre a los estándares de formato E.164.

Loading Code Sample...
        
        
        AppointmentReminders.Web/Models/Appointment.cs

        El modelo de cita

        AppointmentReminders.Web/Models/Appointment.cs

        Nuestro modelo de cita ya está definido. Es hora de echar un vistazo al formulario que permite a un administrador crear citas nuevas.

        Consulta el formulario de cita nuevo

        Formulario de cita nuevo

        Cuando creamos una cita nueva, necesitamos un nombre de invitado, un número de teléfono y una hora. Mediante las clases de helpers de HTML podemos vincular el formulario al objeto de modelo. Esos helpers generarán la marca de HTML necesaria que creará una cita nueva en el envío.

        Loading Code Sample...
              
              
              AppointmentReminders.Web/Views/Appointments/_Form.cshtml

              Formulario de cita nuevo

              AppointmentReminders.Web/Views/Appointments/_Form.cshtml

              Ahora que tenemos un modelo y una interfaz de usuario, conoceremos la forma en que podemos interactuar con Appointments (Citas).

              Conoce cómo interactuar con citas

              Interactuar con citas

              Como usuario, deseo ver una lista de todas las citas futuras y poder eliminarlas.

              Si eres una organización que gestiona muchas citas, es probable desees poder verlas y gestionarlas en una única interfaz. Eso es lo que abordaremos en esta historia de usuario. Crearemos una interfaz de usuario para:

              • Mostrar todas las citas
              • Eliminar las citas individuales

              Sabemos qué interacciones queremos implementar, así que veamos primero cómo enumerar todas las próximas citas.

              Comprueba el controlador para enumerar las citas

              Obtener una lista de citas

              En el nivel de controlador, obtendremos una lista de todas las citas de la base de datos y las representaremos con una vista. También añadiremos un aviso si no hay citas, para que el usuario admin pueda crear una.

              Loading Code Sample...
                    
                    
                    AppointmentReminders.Web/Controllers/AppointmentsController.cs

                    Enumerar todas las citas

                    AppointmentReminders.Web/Controllers/AppointmentsController.cs

                    Así es como devolvemos la lista de citas, ahora tenemos que representarlas. Echemos un vistazo a la plantilla de citas.

                    Consulta la plantilla de citas para conocer cómo representar la lista

                    Mostrar todas las citas

                    La vista de índice enumera todas las citas, que están ordenadas por ID. Lo único que necesitamos añadir para completar nuestra historia de usuario es un botón de eliminación. Añadiremos el botón de edición solo por diversión.

                    Helpers de HTML

                    Puedes notar que en lugar de codificar las URL para editar y eliminar estamos usando un Helper de HTML de ASP.NET MVC. Si ves la marca representada, verás estas rutas.

                    • /Appointments/Edit/id para editar
                    • /Appointments/Delete/id para eliminar

                    AppointmentsController.cs contiene métodos que manejan las operaciones de edición y eliminación.

                    Loading Code Sample...
                          
                          
                          AppointmentReminders.Web/Views/Appointments/Index.cshtml

                          Visualizar todas las citas

                          AppointmentReminders.Web/Views/Appointments/Index.cshtml

                          Ahora que tenemos la capacidad de crear, ver, editar y eliminar citas, podemos profundizar en la parte divertida: programar un trabajo recurrente que enviará recordatorios mediante SMS cuando se acerca una cita.

                          ¿Qué se necesita para enviar recordatorios por SMS?

                          Enviar recordatorios

                          Como un sistema de citas, deseo notificar a un usuario mediante SMS en un intervalo arbitrario antes de una cita futura.

                          Existen muchas formas de crear esta parte de nuestra aplicación, pero no importa cómo la implementes, debe haber dos partes móviles:

                          • Una secuencia de comandos que comprueba la base de datos para cualquier cita próxima y a continuación, envía un SMS.
                          • Un trabajador que ejecuta esa secuencia de forma continua.

                          Echemos un vistazo a cómo decidimos implementar este último con Hangfire.

                          Familiarizarse con Hangfire

                          Trabajar con Hangfire

                          Si nunca has utilizado un planificador de trabajos antes, puedes consultar esta publicación de Scott Hanselman que muestra algunas maneras de ejecutar tareas en segundo plano en ASP.NET MVC. Decidimos usar Hangfire por su simplicidad. Si conoces una mejor manera de programar trabajos en ASP.NET MVC, haznos saber.

                          Hangfire necesita una actividad en segundo plano de algún tipo para poner en cola los próximos trabajos. En esta implementación, utilizamos la base de datos de SQL Server, pero es posible utilizar un almacén de datos diferente. Puedes consultar su documentación para obtener más información.

                          Loading Code Sample...
                                
                                
                                AppointmentReminders.Web/packages.config

                                Dependencias de Hangfire

                                AppointmentReminders.Web/packages.config

                                Ahora que hemos incluido las dependencias de Hangfire en el proyecto, echemos un vistazo a cómo configurarlo para utilizarlo en nuestra aplicación móvil de recordatorios de citas.

                                Consulta la configuración de Hangfire

                                Clase de configuración de Hangfire

                                Hemos creado una clase denominada Hangfire para configurar nuestro planificador de trabajos. Esta clase define dos métodos estáticos:

                                1. ConfigureHangfire para definir los parámetros de inicialización del planificador de trabajos.
                                2. InitialzeJobs para especificar qué trabajos recurrentes deben ejecutarse y con qué frecuencia.
                                Loading Code Sample...
                                      
                                      
                                      AppointmentReminders.Web/App_Start/Hangfire.cs

                                      Configuración de Hangfire

                                      AppointmentReminders.Web/App_Start/Hangfire.cs

                                      Eso es todo para la configuración. Echemos un vistazo rápido a cómo iniciamos el planificador de trabajos.

                                      Iniciar el planificador de trabajos

                                      Iniciar el Planificador de trabajos

                                      Este proyecto de ASP.NET MVC es una aplicación basada en OWIN, que nos permite crear una clase startup para ejecutar cualquier lógica de inicialización personalizada requerida en nuestra aplicación móvil. Esta es la ubicación preferida para iniciar Hangfire: consulta sus documentos de configuración para obtener más información.

                                      Loading Code Sample...
                                            
                                            
                                            AppointmentReminders.Web/Startup.c

                                            Iniciar Hangfire

                                            AppointmentReminders.Web/Startup.c

                                            Ahora que hemos iniciado el planificador de trabajos, echemos un vistazo a la lógica que se aplica cuando se ejecuta nuestro trabajo.

                                            Comprobar el trabajo de notificación en segundo plano

                                            Trabajo de notificación en segundo plano

                                            En esta clase, definimos un método denominado Execute que Hangfire llama cada un minuto. Cada vez que se ejecuta el trabajo, tenemos que hacer lo siguiente:

                                            1. Obtener una lista de las próximas citas que requieren el envío de notificaciones
                                            2. Utilizar Twilio para enviar recordatorios de citas mediante SMS

                                            La clase AppointmentsFinder consulta nuestra base de datos de SQL Server para encontrar todas las citas cuya fecha y hora se aproximan. Para cada una de esas citas, usaremos la API REST de Twilio a fin de enviar un mensaje con formato.

                                            Loading Code Sample...
                                                  
                                                  
                                                  AppointmentReminders.Web/Workers/SendNotificationsJob.cs

                                                  Trabajo de notificaciones en segundo plano

                                                  AppointmentReminders.Web/Workers/SendNotificationsJob.cs

                                                  Ahora que estamos recuperando una lista de próximas citas, echemos un vistazo a cómo usamos Twilio para enviar notificaciones de SMS.

                                                  Usemos Twilio para enviar algunas notificaciones por SMS

                                                  Solicitud de la API REST de Twilio

                                                  Esta clase se encarga de leer las credenciales de nuestra cuenta de Twilio desde Web.config y de usar la API REST de Twilio para enviar una notificación a nuestros usuarios. También necesitamos un número de Twilio para usar como remitente del mensaje de texto. En realidad, el envío del mensaje es una sola línea de código.

                                                  Loading Code Sample...
                                                        
                                                        
                                                        AppointmentReminders.Web/Domain/Twilio/RestClient.cs

                                                        Enviar un SMS con Twilio

                                                        AppointmentReminders.Web/Domain/Twilio/RestClient.cs

                                                        Un tutorial divertido, ¿verdad? ¿Dónde podemos ir desde aquí?

                                                        ¿Dónde ir a continuación?

                                                        ¿Dónde ir a continuación?

                                                        Con un poco de código y una pizca de configuración, estamos listos para recibir recordatorios de citas automatizados en nuestra aplicación móvil. ¡Bien hecho!

                                                        Si eres un desarrollador de C# que trabaja con Twilio, puedes consultar otros tutoriales:

                                                        Clic para llamar

                                                        Coloca un botón en tu página web que conecte a los visitantes con el servicio de asistencia en directo o con el personal de ventas por teléfono.

                                                        Autenticación de dos factores

                                                        Mejora la seguridad de la funcionalidad de inicio de sesión de la app Flask al añadir autenticación de dos factores por mensajes de texto.

                                                        ¿Te ayudó esto?

                                                        Gracias por consultar este tutorial. Si tienes algún comentario que compartir con nosotros, comunícate con nosotros en Twitter... nos encantaría saber lo que piensas y conocer lo que estás creando.

                                                        Kevin Segovia Daniel Erazo
                                                        Calificar esta página:

                                                        ¿Necesitas ayuda?

                                                        Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

                                                        Loading Code Sample...
                                                              
                                                              
                                                              

                                                              Gracias por tus comentarios.

                                                              Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

                                                              Enviando tus comentarios…
                                                              🎉 Gracias por tus comentarios.
                                                              Se produjo un error. Inténtalo de nuevo.

                                                              Gracias por tus comentarios.

                                                              thanks-feedback-gif