BITácora de Software

 Hace tiempo que no publico entradas en este blog, así que decidi escribir esta pequeña entrada dónde dejo un pequeño ejemplo de cómo usar el CLI de .NET para agilizar la creación de nuestra solución, las capas y añadir las referencias.

Para quién no sepa, a partir de .NET 5 se "unificó" las tecnologias .net core y .net framework, es decir solo existe el .NET estandar. 

La interfaz de línea de comandos (CLI) de .NET viene dentro del SDK de .NET, actualmente esta herramienta es multiplataforma lo que nos facilita ejecutar los comandos sin ningún problema en windows o linux.

Por cuestión de facilidad el proyecto a crear tendrá el clásico y aburrido N-capas, usando como ejemplo el artículo  Sistema Gestión de Citas Parte 3: Creando el Proyecto en Visual Studio, la única diferencia será que la capa de presentación será una ASP.NET Core Web API (plantilla webapi) y no un  ASP.NET Core Web App (plantilla mvc).

Imagen 1: Arquitectura N Capas. (Fuente propia)

Lo que realiza cada comando es:

• La línea 1 crea el proyecto "GestionCitas", se le especifica la salida usando el parametro "--ouput" para que la carpeta a crear sea "GestionCitas" y donde se crea el archivo .sln.
• La línea 2 crea un proyecto Web API con el nombre "GestionCitas.API", en lenguaje seleccionado es C# y el target de .net es la versión 6, como hemos creado la solución y el directorio "GestionCitas" tenemos que especificar que el proyecto debe estar dentro de dicha ruta por lo que tenemos que usar el comando "--ouput" y espeficicarlo.
• Las líneas 3,4 y 5 crea los proyectos del tipo librería de clases para las capas de datos, logica y entidades.
• Las líneas 6,7 y 8 añade los proyectos creados a la solución.
• Las líneas 10 a 14, añaden la referencia entre capas.

Imagen 2: Ejecución de comandos dotnet. (Fuente propia)

El resultado a nivel de directorio es:

Imagen 3: directorios creados con los comandos. (Fuente propia)

y así se ve en el visual studio:

Imagen 4: La solución vista desde el visual studio 2022. (Fuente propia)

Fuentes:

Si lo que deseamos es publicar nuestro site angular de manera rápida usando AWS una de las opciones a usar es el Servicio Amazon S3 (Simple Storage Service).

Pasos a Realizar

1. Crear un Bucket con configuración por defecto.

Imagen 1: Servicio S3. (Fuente Propia)



Imagen 2: Crear Bucket. (Fuente Propia)



Imagen 3: Configuración de nombre y region de Bucket. (Fuente Propia)



Imagen 4: Crear Bucket. (Fuente Propia)


2. Ingresar al Bucket creado e ir a la sección Permission y editar la opción "Block public access"

Imagen 5: Bucket. (Fuente Propia)



Imagen 6: Editar Block Public Access. (Fuente Propia)



Imagen 7: Desactivando Block Public Access. (Fuente Propia)



Imagen 8: Confirmando cambio. (Fuente Propia)


3. En la misma sección Permission, editamos "Bucket policy" y agregamos el siguiente código (tener en cuenta que debemos reemplazar valor <BucketName> por el nombre de nuestro Bucket).



Imagen 9: Editar Bucket Policy. (Fuente Propia)



Imagen 10: Guardando cambios de Bucket Policy. (Fuente Propia)


4. Ahora tenemos que ir a Properties y editar la opción Static website hosting, activamos la opción y especificamos los campos index document y error document. Después que terminemos esta configuración se nos proveerá una URL en la opción Static website hosting.

Imagen 11: Ir a Properties. (Fuente Propia)



Imagen 12: Editar Static Website Hosting. (Fuente Propia)



Imagen 13: Configuración de Static Website Hosting. (Fuente Propia)



Imagen 14: Guardar cambios realizados. (Fuente Propia)



Imagen 15: URL provista por S3. (Fuente Propia)



Imagen 16: Web Vacía. (Fuente Propia)


5. Ahora solo debemos generar nuestros archivos usando el comando ng build --prod y subirlo al bucket.

Si eres uno de los usuarios de HubSpot y lo utilizas hoy en día como tu CRM, o directamente para cualquiera de sus otras funciones (como landing pages, email newsletters, o algo mas), estoy seguro que esto te va a encantar.

Hace poco tiempo HubSpot lanzo su HubSpot Marketplace, donde se pueden comprar templates y themes para HubSpot, para que así puedas hacer mucho mas fácil y rápido tu sitio web o las landing pages para tu empresa. Desde su lanzamiento, ya hay mas de 4,500 templates, lo que lo hace muy útil para todos, ya que busques lo que busques, seguramente lo encontraras ahí.

Seguramente tu te estarás preguntando, cuales son los mejores templates o themes para HubSpot? Y la respuesta es muy fácil.

Los mejores themes para HubSpot

En Junio de 2020 nació InboundElements - HubSpot Themes, una empresa que vende themes para HubSpot de muy alta calidad. Desde su lanzamiento han publicado ya 2 diferentes templates, y la gran parte de sus clientes están muy felices.

Si estas buscando alguna vez llevar tu marketing en Hubspot al siguiente nivel, estos templates son sin duda alguna una oportunidad importante, ya que HubSpot solo esta aquí para quedarse, y con estos poderosos recursos puedes ganar mucho tiempo y enfocarte solamente en lo mas importante: Seguir creciendo tu negocio o empresa.

Si estas interesado, no lo dudes mas y descubre todos los nuevos themes y templates de HubSpot, hay muchas opciones muy interesantes para tu negocio.

Lo primero que necesitamos es un IDE adecuado para python, personalmente recomiendo Visual Studio Code. Ya que nos permite usar el terminal desde el mismo editor, algo muy útil cuando trabajamos con Django.

Django es el framework más popular de python, cuenta con multitud de funciones que sin duda te harán la vida más sencilla. Al usar este framework nos ahorramos de crear un sistema de login desde cero, además nos dota de un panel de administración.

Definir el proyecto

Un virtual venv es una instalación en específico para nuestro proyecto, es decir que cada proyecto tendrá un contenedor independiente de los demás. Esto es muy útil y resuelve muchos problemas de incompatibilidades.

Esta línea os creará el entorno virtual (Recuerda debes tener instalado la librería pip para hacerla funcionar)

●     pip install virtualenv

Esta línea os instalará django

●     pip install django

Esta línea iniciará el proyecto

●     django startproject miPrimerProyecto

En python acostumbramos a segmentar cada uno de los componentes en APPS, para qué hacemos esto. Pues muy sencillo haciendo esto conseguimos no tener que repetir código constantemente además de poder reutilizarse de forma más simple en otros proyectos.

Creando nuestra primera APP

●     python manage.py miPrimeraApp

Con esto hemos conseguido nuestra primera aplicación.

Tecnicismos

Django: Se define como un framework de python que permite dotar de un marco de programación. Es decir una base, sobre la cual generamos proyectos más complejos.

PIP: Es una librería que nos facilita muchas de las labores, como por ejemplo instalar paquetes.

VirtualVenv: Envoltorio de desarrollo aislado de un proyecto, para tener instalaciones únicas y limpias.

Si quieres seguir aprendiendo python le recomendamos hacer algún curso de programación python.

Programación en Python: https://pythonbros.com/

Imagen 1: Relación entre tabla médicos, citas y pacientes. (Fuente: propia)

Procedimientos Almacenados

Capa de Datos

En la capa de datos tenemos que modificar la clase MedicoDAL y agregar la clase CitaDAL, esta última clase contendrá los respectivos llamados a los procedimientos almacenados para el core registrar cita médica.

Imagen 3: Nueva método ListarMedicosPorHorario agregado en la clase MedicoDAL.(Fuente propia)

código fuente de la clase:

Imagen 4: Nueva clase agregada en la capa de datos.(Fuente propia)

Contenido de la clase CitaDAL:

Capa Base Comunes

Imagen 6: Propiedades agregadas a la clase RespuestaSistema.(Fuente propia)

Imagen 7: Modificación de clase MensajeSistema.(Fuente propia)

Imagen 8: Propiedades agregadas a la clase RespuestaSistema.(Fuente propia)

El código:

Capa Negocio

Agregamos el método ListarMedicosPorHorario en la capa lógica.

Imagen 9: clase MedicoBLL modificada en la capa de datos.(Fuente propia)

Imagen 10: Nueva método ListarMedicosPorHorario agregado en la clase MedicoBLL.(Fuente propia)

código fuente:

Capa Presentación: RouteConfig

Capa Presentación: Controlador

Capa Presentación: Vista

Agregamos la vista Index y Horario desde el controlador Cita.

Imagen 17: Agregar vista Index. (Fuente: propia)

Imagen 18: Ventana Agregar Vista Index. (Fuente: propia)

Imagen 19: Agregar vista Horario. (Fuente: propia)

Imagen 20: Ventana agregar vista Horario. (Fuente: propia)

El código de la vista Index.cshtml es:
El código html contiene dos controles radio button para elegir el tipo de búsqueda, fecha de atención y el filtro como tal que puede ser el nombre de la especialidad o el nombre del médico.

El código de la vista Horario.cshtml es:
En esta vista se visualizará el horario del médico (fondo melón) y sus citas registradas (color celeste) en una fecha de atención especifica.

Capa Presentación: Funcionalidad JS

Creamos el archivo Index.js en la ruta App_CodeJS/Cita.

Imagen 21: Archivo Index.js. (Fuente: propia)

Respecto al archivo Index.js, todo el código esta contenido dentro de una función anónima, la cuál contiene tres variables: opcionBusqueda, fechaAtencion, fechaConsulta, filtro y model:

• opcionBusqueda: Almacena el tipo de búsqueda que se debe realizar: por especialidad o por nombre de médico.
• fechaAtencion: Sirve para buscar buscar los médicos que tengan horario programado en una fecha en especifico.
• fechaConsulta: Almacena la fecha de atención en formato en formato DD/MM/AAAA.
• filtro: Almacena el texto que servirá como filtro para buscar la especialidad o el nombre del médico.
• model: contiene las funciones que permiten interactuar al usuario con la vista.

Las funciones que contiene model,  son las siguiente:

1. Buscar: Esta función toma los datos de la vista y los envía a la función ListarMedicosPorHorario ubicada en el controlador cita, los datos obtenidas se imprimen en la grilla de la vista.
2. ConfigurarGrilla: Esta función permite asignar la cantidad de columnas que tendrá el data grid.
3. MostrarHorario: sirve para re-direccionar a la vista donde se muestra el horario y citas registradas para un médico en una fecha de atención especifico.
4. MarcarMenu: Sirve para mantener seleccionado las opciones en el menú principal del sistema.
5. Inicio: Invoca a función MarcarMenu, asigna las funciones a los eventos de los botones, asigna el plugin datepicker a la caja de texto de fecha de atención.

A continuación, creamos el archivo Horario.js en la ruta App_CodeJS/Cita.

Imagen 22: Archivo Horario.js. (Fuente: propia)

Respecto al archivo Horario.js, todo el código esta contenido dentro de una función anónima, la cuál contiene tres variables: medicoId, fechaAtencion, cita y model:

• medicoId: Almacena el Identificador (PK) del médico, con este dato podemos obtener su horario y citas de una fecha especifica (fecha de atención).
• fechaAtencion: Sirve para indicar la fecha de atención del horario y citas que tiene asignado el médico.
• cita : Sirve para contener la información que se enviará y/o traerá de la cita a registrar/editar.
• model: Contiene las funciones que permiten interactuar al usuario con la vista.

Las funciones que contiene model,  son las siguiente:

1. ObtenerParametros: Leer el valor del input hidden medicoId y lo almacena en la variable global que tiene el mismo nombre. Además, hace lo mismo con el input hidden fechaAtencion como el dato esta en formato AAAAMMDD, al almacenarlo en la variable global lo guarda en formato DD/MM/AAAA.
2. ListarDatos: Sirve para invocar al web method que traer el horario y citas registradas para el médico en la fecha de atención indicada.
3. ObtenerCita: Recibe como parámetro el id de la cita a buscar, dicho parámetro es enviado a la función "ObtenerCita" del controlador y carga la información obtenida en el modal de la Cita.
4. ConfigurarCalendario: Esta función permite configurar el plugin fullcalendar. Asignamos la fecha actual al plugin para que cuando se dibuje el calendario muestre el mes/semana/día actual además se configura los botones que se van a mostrar y  por último se asigna la función que será invocada cuando se haga click en las celdas del calendario (línea 81). el objeto calEvent es el encargado de llevar la información del horario por ello accedemos a la propiedad calEvent.citaId con el fin de obtener el ID de la cita a modificar.
5. LimpiarDatosFormulario: Limpia los valores ingresados en los controles de la ventana modal.
6. NuevaCita: Invoca a la función LimpiarDatosFormulario y muestra el modal para ingresar la información de la cita.
7. Cancelar: Oculta el modal de Horario.
8. RecogerDatosFormulario: Esta función recoge los datos escritos en el formulario modal y lo inserta dentro de la variable cita.
9. Guardar: Invoca a la función RecogerDatosFormulario y luego envía la información de la cita a la función "GrabarCita" del controlador, al final la función retornará un objeto del tipo RespuestaSistema el cual contiene la propiedad Correcto, si esa propiedad es devuelta en true, entonces quiere decir que se ha grabado o modificado con éxito la cita.
10. AutocompletarPaciente: Esta función permite mostrar una lista con los pacientes que coinciden con el texto ingresado en la caja de texto (txtDni) que invoca a la función. Esta función tiene dos parámetros de entrada el primero es "control" que hace referencia al textbox que invoca la función y el segundo parámetro es la cantidad minima de caracteres que se necesitan para invocar a la función de búsqueda interna. La lista se arma dependiendo de los valores que devuelva la función "BuscarPaciente" del controlador cita.
11. MarcarMenu: Sirve para mantener seleccionado las opciones en el menú principal del sistema.
12. Inicio: Invoca a función MarcarMenu y ObtenerParametros, asigna las funciones a los eventos de los botones, asigna el plugin datepicker a la caja de texto de fecha del modal cita, crea el modal de la cita, configura el calendario, obtiene el el horario y las citas programadas del médico (para una fecha de atención) y finalmente muestra el contenido de la página. 

Imagen 23: Pantalla buscar médico disponible por nombres y fecha de atención (listado de médicos). (Fuente: propia)

Imagen 24: Pantalla Horario y citas de médico seleccionado - Vista Por Día. (Fuente: propia).

Imagen 25: Error al registrar una cita fuera del horario del médico. (Fuente: propia)

Imagen 26: Registrar nueva cita válida. (Fuente: propia)

Imagen 27: Mensaje de Registro correcto. (Fuente: propia)

Imagen 28: Error al registrar una cita en una horario ocupado por otro paciente. (Fuente: propia)

Imagen 29: Editar Cita. (Fuente: propia)

Imagen 30: Cambio de horario para la cita. (Fuente: propia)

[Repositorio]