Categoría: Programación

Apuntes de programación, algoritmos, pruebas, ejemplos o ejercicios resueltos para practicar o resolución de problemas relacionados con la programación

Componentes para Blazor

12/12/2024 / Isaac Robles García / Sin comentarios

Recientemente, en mi trabajo tomamos la decisión de rehacer un sistema desarrollado con ASP.NET MVC 5 debido a su alta acumulación de deuda técnica. Aunque gran parte de esa deuda se debía a que el desarrollo inicial estuvo orientado a resolver necesidades operativas inmediatas (lo cual fue una buena decisión en su momento), con el tiempo quedó claro que MVC no era la mejor opción para un sistema de ese tamaño.

Como parte del proyecto, se me encomendó buscar alternativas para la nueva versión del sistema. Inicialmente, pensé en usar WebForms para organizar mejor las vistas, pero descubrí que ya no es soportado por las versiones más recientes de .NET. Sin embargo, en mi investigación me topé con Blazor, una tecnología que no solo es moderna, sino que también permite construir componentes reutilizables y organizados, algo similar a lo que buscaba.

El reto con los grids y componentes

El sistema original utilizaba componentes de DevExpress y SyncFusion. Aunque DevExpress nos facilitaba un desarrollo ágil, no cumplía con un requerimiento clave: los grids no eran responsivos, algo crítico dado que el sistema debía ser accesible desde dispositivos móviles. Por ello, complementamos con los grids de SyncFusion, que sí ofrecían este soporte.

Con Blazor seleccionado como base para el desarrollo, la siguiente tarea fue buscar una librería de componentes que permitiera construir una aplicación web moderna y responsiva, sin sacrificar funcionalidad ni estética. Este artículo detalla las opciones que evalué y la elección final.

Librerías de componentes para Blazor

Durante mi análisis, encontré varias opciones interesantes. Aquí presento una lista de las principales librerías disponibles, junto con algunas notas relevantes:

• DevExpress (De pago): Conocido por su robustez y herramientas avanzadas, aunque con un costo elevado.

• Telerik (De pago): Amplia colección de componentes con soporte profesional.

• SyncFusion (De pago / Community): Excelente soporte para grids responsivos, además de una licencia gratuita para pequeñas empresas y desarrolladores individuales.

• SemanticUI (Gratuita): Diseño limpio y moderno, aunque requiere integración adicional para ciertos casos.

• FomaticUI (Gratuita): Un fork de SemanticUI con mejoras, como un componente DatePicker.

• jQWidgets (De pago): Basado en jQuery, ideal para quienes ya estén familiarizados con esa tecnología.

• Radzen (De pago / Community): Compatible con Blazor Server y WASM, con licencia gratuita limitada.

• MudBlazor (Gratuita): Ofrece componentes modernos y responsivos, con una curva de aprendizaje accesible.

• Blazorise (De pago / Community): Soporte para múltiples frameworks CSS, ideal para proyectos personalizados.

• FluentUI (Gratuita): Basado en los principios de diseño de Microsoft, ideal para aplicaciones con estilo Office.

La elección final: MudBlazor

Después de evaluar varias opciones, nos decidimos por MudBlazor. Esta librería destacó por su facilidad para replicar el layout del sistema anterior y por las características responsivas de su grid. Por defecto, el grid de MudBlazor ajusta su comportamiento en pantallas pequeñas, permitiendo un desplazamiento vertical en lugar de horizontal, justo lo que necesitábamos para mejorar la experiencia en dispositivos móviles.

Canales de Programación en YouTube

26/06/2023 / Isaac Robles García / Sin comentarios

A continuación me gustaría compartirles una lista de canales de YouTube de programación que me he encontrado y que de algún modo u otro me han sido útiles esperando que también les sirvan a ustedes.

En Inglés

En Español

Videojuegos

Programación

Bonus

SwiftUI, better apps less code

Apuntes de SwiftUI

20/02/2023 / Isaac Robles García / Sin comentarios

Componentes básicos

Listas

Portafolios de Desarrolladores

05/11/2022 / Isaac Robles García / Sin comentarios

Hace poco me propuse hacer un cambio en mi sitio web para agregar mi portafolio y una versión resumida de mi CV. Y me encontré con que si buscas en google “portafolios de desarrolladores” irónicamente aparecen más artículos sobre que debe llevar tu portafolio que portafolios de colegas desarrolladores 😅; así que les quiero compartir algunos de los portafolios que me encontré.

Ejemplos de Portafolios

Portafolio José Carlos Almansa Pérez — José Carlos Almansa Pérez

Portafolio Brayan López — José Carlos Almansa Pérez

Creando un plugin jQuery

02/12/2021 / Isaac Robles García / Sin comentarios

Hace poco me surgió la necesidad de crear un plugin jQuery en el trabajo, pero la verdad es que es algo que jamás había hecho, aunque si he utilizado muchos a lo largo de mi carrera como desarrollador.

La verdad es que no fue algo muy difícil de hacer, aunque el método que utilice tal ves no sea el más óptimo, pero pude cubrir el requerimiento que tenia.

Código Base

Para crear nuestro plugin debemos utilizar el siguiente “esqueleto” como base, donde “MyPlugin” es el nombre del plugin que estamos desarrollando.

(function ( $ ) {
 
    $.fn.MiPlugin = function() {
        return this.each(function () {
            // Código del plugin
        });
    };
 
}( jQuery ));

// Ejemplo
$('#nodo').MiPlugin();

(function ( $ ) {

$.fn.MiPlugin = function() {

return this.each(function () {

// Código del plugin

});

};

}( jQuery ));

// Ejemplo

$('#nodo').MiPlugin();

Pasando Parámetros

Bien, ahora veremos como pasar parámetros a nuestro plugin. Para ello declararemos una constante con las opciones por defecto del plugin y con la función extend uniremos las opciones recibidas por defecto con las recibidas por parámetro.

(function ( $ ) {

	$.fn.MiPlugin = function(opcionesUsuario) {
		// Opciones por defecto
		const opcionesPorDefault = {
			opcion1: 'opcionPorDefecto1',
			opcion2: 'opcionPorDefecto2',
			debug: false
		};
		
		// Se mezclan las opciones por defecto con las del usuario
		const opciones = $.extend(opcionesPorDefault, opcionesUsuario);
	
		return this.each(function () {	 
			// Código del plugin

			// Se imprimen en consola los valores de las opciones
			if (opciones.debug) {
				console.log(opciones);
			}
		});
	};
 
}( jQuery ));

(function ( $ ) {

$.fn.MiPlugin = function(opcionesUsuario) {

// Opciones por defecto

const opcionesPorDefault = {

opcion1: 'opcionPorDefecto1',

opcion2: 'opcionPorDefecto2',

debug: false

};

// Se mezclan las opciones por defecto con las del usuario

const opciones = $.extend(opcionesPorDefault, opcionesUsuario);

return this.each(function () {

// Código del plugin

// Se imprimen en consola los valores de las opciones

if (opciones.debug) {

console.log(opciones);

}

});

};

}( jQuery ));

Si ejecutamos ahora nuestro plugin con la opción debug en true se imprimirán en consola las opciones que se utilizaran. Como se observa en la siguiente imagen dado que solo especificamos opcion1 y debug en los parámetros son los únicos valores que cambian de valor, opcion2 sigue teniendo el valor por defecto que se definió en el plugin.

Probando Nuestro Plugin

Bien, ahora haremos unos cambios en nuestro código para que nuestro plugin agregue un borde a los elementos seleccionados, quedando de la siguiente manera:

NOTA: Para simplificar el código se ha escrito todo en un solo archivo

<!DOCTYPE html>
<html lang="es">
	<head>
	<meta charset="utf-8">
		<title>Plugin</title>
	</head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
	(function ( $ ) {

		$.fn.MiPlugin = function(opcionesUsuario) {
			// Opciones por defecto
			const opcionesPorDefault = {
				tipo: 'solid',
				color: 'black',
				ancho: '1px',
				debug: false
			};
			
			// Se mezclan las opciones por defecto con las del usuario
			const opciones = $.extend(opcionesPorDefault, opcionesUsuario);
		
			return this.each(function () {
				$(this).attr('style', 'border: ' + opciones.tipo + ' ' + opciones.color + ' ' + opciones.ancho);
			
				// Se imprimen en consola los valores de las opciones
				if (opciones.debug) {
					console.log(opciones);
				}
			});
		};
	 
	}( jQuery ));
	</script>
	<body>
		<p id="p1">Parrafo 1</p>
		<p id="p2">Parrafo 2</p>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>Plugin</title>

</head>

(function ( $ ) {

$.fn.MiPlugin = function(opcionesUsuario) {

// Opciones por defecto

const opcionesPorDefault = {

tipo: 'solid',

color: 'black',

ancho: '1px',

debug: false

};

// Se mezclan las opciones por defecto con las del usuario

const opciones = $.extend(opcionesPorDefault, opcionesUsuario);

return this.each(function () {

$(this).attr('style', 'border: ' + opciones.tipo + ' ' + opciones.color + ' ' + opciones.ancho);

// Se imprimen en consola los valores de las opciones

if (opciones.debug) {

console.log(opciones);

}

});

};

}( jQuery ));

</script>

<body>

<p id="p1">Parrafo 1</p>

<p id="p2">Parrafo 2</p>

</body>

</html>

Opciones por Defecto

Si ejecutamos nuestro plugin sin parámetros tendremos el siguiente resultado, ya que se aplican los valores por defecto.

Pasando Opciones por Parámetro

Ahora probemos pasando valores diferentes como parámetro y obtendremos lo siguiente.

Cambiando el Selector CSS

Cabe mencionar que estamos usando el selector CSS ‘p’, y al haber 2 parrafos se aplica el borde a ambos parrafos, si solo quisiéramos aplicar el estilo al parrafo p1 lo hariamos cambiando el selector por ‘#p1’ y obtendriamos lo siguiente

C# sin Visual Studio [dotnetfiddle.net]

28/07/2021 / Isaac Robles García / Sin comentarios

En algunas ocasiones se necesita probar algún concepto o ver si es posible hacer algo de forma rápida.

Actualmente trabajo bastante con C# y dado que es molesto tener que crear un proyecto solo para probar algo sencillo y ejecutar el mastodonte que es Visual Studio solo para algo tan pequeño, encontré una solucion que se adapta este caso en especifico.

Se trata de dotnetfiddle.net, es un compilador online de C#, permite crear proyectos sencillos de Consola, MVC, Script y Nancy; entre sus opciones también permite seleccionar la versión de C# que queremos usar.

Esta herramienta me gusta bastante porque es bastante sencilla, permite crear snippets de código y probarlos desde el navegador, también puedes generar un enlace para compartirlo o incluso puedes trabajar al mismo tiempo sobre el mismo código con alguien más(esto último no lo he probado aún).

Para muestra un botón, sabia que existian los Extension Methods pero jamás los habia usado y me puse a revisar, ya que necesito formatear objetos DateTime a string pero quiero evitar el tener que escribir ToString(@”yyyy-MM-dd\THH:mm:ss”) cada vez que lo necesito, así que se me ocurrió intentar crear un Extension Method , así aprendia a usarlas y ademas me servia, ya que si en algun momento el formato de fecha que debo usar cambia, solo cambio el formato es la Extension Method.

Así que este fue el resultado:

StrongTypingException: The value for column ‘IsPrimaryKey’ in table ‘TableDetails’ is DBNull

24/03/2021 / Isaac Robles García / Sin comentarios

En ocasiones me ha pasado que al querer actualizar o generar algún ADO.NET Entity Data Model en Visual Studio me ha aparecido este error:

Asi que hoy voy a compartirles la forma en que solucciono este problema.

Cerrar Visual Studio
Ejecutar la siguiente consulta en nuestra base de datos:

set global optimizer_switch='derived_merge=OFF';

1

set global optimizer_switch='derived_merge=OFF';
Abrir nuestro proyecto en Visual Studio
Generar o actualizar nuestro modelo

Buscando en internet he visto que se pide que se reinicie el servicio de MySQL, en mi caso no ha sido necesario, antes al contrario, si lo hacia tenia que volver a ejecutar la consulta.

Cabe resaltar que lo he probado con MySQL 5.7.X en conjunto con EF6.

Evitando la Fatiga Visual en Visual Studio

02/03/2021 / Isaac Robles García / Sin comentarios

Por internet ronda el meme de que existen 2 tipos de desarrolladores, los que usan el tema claro y los que usan el tema oscuro.

En lo personal creo que me encuentro en la zona gris, donde el tema claro me gusta más pero llega a ser molesto y el tema oscuro me es algo incómodo al haber un contraste más alto entre el texto y el fondo del editor de código.

Recientemente utilizando Android Studio encontré el tema Cyan Light Theme que la verdad me gusto muchísimo y no me molesta en lo absoluto. Puedo trabajar durante el tiempo que sea necesario tranquilamente.

Pero la verdad es que en general paso más tiempo usando Visual Studio y al no haber encontrado un tema con el que me sintiera tan cómodo, decidí hacer mi “propia” versión para Visual Studio.

Cabe resaltar que en lo personal me gusta usar este estilo con el tema “Azul” de Visual Studio (que más bien se ve morado), dando como resultado algo como lo siguiente

Vista previa de Visual Studio con el Tema Cyan Light Theme

Pueden descargar el tema desde aquí.

Migrando de SQLite a Firebird 3

26/01/2021 / Isaac Robles García / Sin comentarios

Un poco de contexto

En mi trabajo se ofrece un punto de venta a tiendas pequeñas como incentivo para que adquieran los productos que ofrece mi empresa empleadora. Seguramente se estarán preguntando “Pero… ¿porqué usan SQLite para un punto de venta?”, la razón es que esta aplicación no se contempló como un sistema demasiado robusto, más bien buscaba cubrir una necesidad común de forma que fuera llamativo el consumir los productos que ofrece la empresa en la que trabajo.

Pero ya que este punto de venta se convirtió en un medio para hacer llegar anuncios o comunicados directamente a los clientes llegó al punto en que muy de ves en cuando la base de datos se bloqueaba, debido a que SQLite tiene la limitante de que solo soporta una conexión escribiendo en la base de datos. Además de que una de las nuevas funcionalidades que se requería agregar al punto de venta era que soportara múltiples usuarios, por lo que necesitábamos un nuevo motor de base de datos que soportara concurrencia.

Pero además ya existía una base de usuarios algo considerable, por lo que tener el soporte que implicaría cambiarlos a firebird podría requerir de mucho tiempo, así que tampoco era viable migrar a todos los usuarios a firebird, ya que la funcionalidad de múltiples usuarios de momento solo la usaría uno de nuestros clientes. Así que se necesitaba que el punto de venta trabajara con ambas bases de datos (pero solo una a la ves).

¿Porque Firebird 3?

Como dije antes, este punto de venta en realidad no era tan robusto, por lo que tener que agregar el instalador de MySQL que ocupa ~300MB no lo hacia el favorito.

Así que recordé que hay un punto de venta bastante grande y popular que utiliza Firebird… Microsip, así que revisé y Firebird tiene un tamaño bastante reducido de 12MB y así que se convirtió en la primera opción.

Descripción del Problema

Al revisar la clase que se encargaba de la persistencia de datos me topé con una clase de más de 6,500 lineas de código y al rededor de 140 funciones. Entonces analizando, la primera opción y la más “simple” seria copiar esta clase, cambiarle el nombre y comenzar a cambiar las consultas SQLite por consultas de Firebird.

Pero considerando que migrar de motor de base de datos no es algo que se deba tomar a la ligera (menos si tienes mas de 6,500 lineas de código y 140 funciones consultando datos). Decidí que además de crear una clase nueva con las consultas a Firebase, tenia que buscar la forma de que me fuera fácil cambiar de SQLite a Firebird.

Así que resumiendo, el problema al que nos enfrentamos a groso modo seria:

Implementar un mecanismo que nos permita que la aplicación pueda trabajar indistintamente tanto con SQLite como con Firebird.

¡Manos a la Obra!

Lo primero que vamos a hacer cambiar el nombre a la clase POSDatabaseManager a SQLiteDatabaseManager.

Luego crearemos una interfaz llamada IDatabaseManager que implementará SQLiteDatabaseManager y copiamos las firmas de las funciones de SQLiteManager a la interfaz. Quedando de la siguiente manera:

Implementando IDatabaseManager para SQLite

Bien ahora, lo que hay que hacer es cambiar todas las referencias de SQLiteManager en la aplicacion por referencias a IDatabaseManager, compilamos y no debería existir ningún error.

// Código anterior
SQLiteDatabaseManager manager = new SQLiteDatabaseManager("db.sqlite");
User usuer = manager.GetUser("admin", "admin");
// Usando la interfaz
IDatabaseManager manager = new SQLiteDatabaseManager("db.sqlite");
User usuer = manager.GetUser("admin", "admin");

// Código anterior

SQLiteDatabaseManager manager = new SQLiteDatabaseManager("db.sqlite");

User usuer = manager.GetUser("admin", "admin");

// Usando la interfaz

IDatabaseManager manager = new SQLiteDatabaseManager("db.sqlite");

User usuer = manager.GetUser("admin", "admin");

Todo esto no altera el funcionamiento de la aplicación y además ya tenemos todo preparado para comenzar la migración a Firebird. ¿Como lo haremos? pues fácil, crearemos la clase FirebirdDatabaseManager que también implementará la interfaz IDatabaseManager.

Ahora, solo resta implementar todas las funciones en la clase FirebirdDatabaseManager con sus respectivas consultas SQL para Firebird.

Bien, ahora, ¿como cambiamos de SQLite a Firebird o viceversa?, ¡Facil!, sería de la siguiente manera:

// SQLite
IDatabaseManager manager = new SQLiteDatabaseManager("db.sqlite");
User usuer = manager.GetUser("admin", "admin");
// Firebird
IDatabaseManager manager =
    new FirebirdDatabaseManager("127.0.0.1", 3050, "POSDB", "SYSDBA", "masterkey");
User usuer = manager.GetUser("admin", "admin");

// SQLite

IDatabaseManager manager = new SQLiteDatabaseManager("db.sqlite");

User usuer = manager.GetUser("admin", "admin");

// Firebird

IDatabaseManager manager =

new FirebirdDatabaseManager("127.0.0.1", 3050, "POSDB", "SYSDBA", "masterkey");

User usuer = manager.GetUser("admin", "admin");

Con esto ya hemos terminado, ahora solo debemos recordar que cuando vayamos a usar el acceso a la base de datos SIEMPRE debemos utilizar referencias de la interfaz IDatabaseManager, de este modo a la aplicación le será indiferente si esta usando SQLite o Firebird.

Si se necesitara agregar alguna función nueva que acceda a la base de datos se debe declarar en IDatabaseManager de esta panera nos aseguramos de que se implemente tanto en SQLiteDatabaseManager como en FirebirdDatabaseManager.

Guardar Preferencias en Android con Kotlin

19/08/2020 / Isaac Robles García / Sin comentarios

Recientemente se me presentó la necesidad de desarrollar una aplicación Android, cosa que no había hecho nunca, aunque algo había visto en videos y tutoriales.

La aplicación requería la funcionalidad de “Recordar contraseña” y viendo en internet me topé con que para esto podía utilizar instancias de las clases SharedPreferences.Editor y SharedPreferences para guardar y recuperar datos respectivamente.

Y aunque es fácil de usar, la verdad es que se repetía bastante código y en algunas ocasiones se me olvidó llamar a la función apply() para guardar los cambios, como era de esperarse con alguien que no había hecho nada para Android.

// Ejemplo para guardar preferencias
var editor =
     getSharedPreferences("MisPreferencias",Context.MODE_PRIVATE);
editor.putString("MiDato1", "Valor1")
editor.putString("MiDato2", "Valor2")
editor.apply()

// Ejemplo para guardar preferencias

var editor =

getSharedPreferences("MisPreferencias",Context.MODE_PRIVATE);

editor.putString("MiDato1", "Valor1")

editor.putString("MiDato2", "Valor2")

editor.apply()

// Ejemplopara leer preferencias
val prefs =
     getSharedPreferences("MisPreferencias",Context.MODE_PRIVATE)
 
var correo = prefs.getString("MiDato1", "ValorPorDefect")

// Ejemplopara leer preferencias

val prefs =

getSharedPreferences("MisPreferencias",Context.MODE_PRIVATE)

var correo = prefs.getString("MiDato1", "ValorPorDefect")

Entonces, después de varias ocasiones en las que no entendía porque no se guardaban las preferencias, decidí hacer una Clase Helper para guardar y leer las preferencias. Lo que conseguí no es ni lo más eficiente ni lo más elegante, pero me funciona y creo que para alguien que antes no había hecho aplicaciones Android y mucho menos algo en Kotlin esta “decente”.

Para esto creé la clase AppPreferences que contiene un enumerado donde se pueden ir agregando las claves(keys) de los campos que vamos a guardar en las preferencias, para tener mejor control y sobre todo a evitar errores al guardar o leer las preferencias.

// Ejemplo del enumerado
class AppPreferences {
    enum class Preferences(var value: String) {
        MI_DATO_1("MI_DATO_1"),
        MI_DATO_2("MI_DATO_2")
    }
}

// Ejemplo del enumerado

class AppPreferences {

enum class Preferences(var value: String) {

MI_DATO_1("MI_DATO_1"),

MI_DATO_2("MI_DATO_2")

}

También dentro de AppPreferences declaré las clases Reader y Writer que fungen como wrapers para instancias de SharedPreferences y SharedPreferences.Editor respectivamente. Para la clase Reader solo hice funciones que simplemente retornan los valores de las preferencias, pero para la clase Writer hice funciones que guardan el dato que deseo almacenar y a su vez llaman a la función apply().

Guardé esta clase en Github Gist por si a alguien más le pudiera servir y/o es gustoso de contribuir a mejorarla, sin más les dejo el código de la clase.

Buscar

Entradas recientes

Sitios Recomendados

Categoría: Programación

Componentes para Blazor

Librerías de componentes para Blazor

La elección final: MudBlazor

Canales de Programación en YouTube

En Inglés

En Español

Videojuegos

Programación

Apuntes de SwiftUI

Componentes básicos

Portafolios de Desarrolladores

Ejemplos de Portafolios

Creando un plugin jQuery

Código Base

Pasando Parámetros

Probando Nuestro Plugin

Opciones por Defecto

Pasando Opciones por Parámetro

Cambiando el Selector CSS

C# sin Visual Studio [dotnetfiddle.net]

StrongTypingException: The value for column ‘IsPrimaryKey’ in table ‘TableDetails’ is DBNull

Evitando la Fatiga Visual en Visual Studio

Migrando de SQLite a Firebird 3

Un poco de contexto

¿Porque Firebird 3?

Descripción del Problema

¡Manos a la Obra!

Guardar Preferencias en Android con Kotlin