Después de Xamarin - .NET MAUI para aplicaciones móviles (y multiplataforma)

 Hace algunos años cuando estaba en la docencia exploré y exploramos una tecnología  nueva en esa versión de Visual Studio (quizás 2019) el llamado Xamarin, que era para construir aplicaciones móviles tanto para Android como iOS ( y parece ser que lo que quedaba de Windows Phone) y la verdad me y nos costo mucho poder hacer la primer aplicación, de tal forma que cuando se pudo hacer el artículo lo intitule como "Xamarin, Xamarin como me has hecho sufrir".

Debido a que nos estamos capacitando mi equipo y un servidor, me enteré que ahora para Visual Studio 2022 la tecnología es .NET MAUI, ya que la idea es que las bibliotecas (ahora de .NET Core) pueden crear aplicaciones de consola, escritorio, web y móviles, por lo que el juego de la Pirinola quería llevarlo a una aplicación móvil.

Para ello me fui al  YouTube para buscar la aplicación más básica, y el primer video que sentía que cumplía este objetivo estaba en inglés era algo muy sencillo y básico además el video no era muy extenso.

.NET MAUI que significa Multi-platform App UI, además de hacer aplicaciones móviles, también se pueden desarrollar aplicaciones de escritorio para Windows y MAC OS.

Un primer requisito es ver que el equipo tenga habilitada la característica de virtualizar que se tiene que revisar desde el setup de cada equipo.

Para desarrollar aplicaciones de este tipo se tiene que verificar o agregar este tipo revisando en el Visual Studio Installer, donde se puede verificar esto.

Para crear el proyecto se elige "Nuevo Proyecto" con los filtros de C#-Android-Móvil y se crea una aplicación de prueba que es un contador que se va modificando (aumenta en 1 su valor) cada vez que se da clic en un botón, que al ejecutarla se presenta en una ventana como una aplicación de escritorio.

El funcionamiento es parecido a aquellas aplicaciones llamadas Windows Presentation Foundation (WPF) , que sustituyeron en teoría a las Windows Forms de las primeras versiones de .NET, es decir tenemos una página de xaml ( eXtensible Application Markup Language - Lenguaje de Marcado de Aplicaciones Extensible) con los controles requeridos para la aplicación - etiquetas, botones, contenedores, etc y un código "atrás" de este archivo (code-behind)  que es el código que hace funcionar la aplicación (la lógica).

Para la aplicación de ejemplo el archivo que tiene los controles de la vista es MainPage.xaml

Aquí el código en C# (MainPage.xaml.cs).

Esto tiene sentido, en primera instancia, es verlo correr en un dispositivo móvil  (o para empezar) en un máquina virtual que simula un smartphone. Para ello nos vamos a la opción Herramientas -Android - Android Device Manager.

El dispositivo default es un Pixel 7 - API 35 de la marca Google (que por cierto acaba de llegar al mercado mexicano con su versión 10) y fue con el que probamos la aplicación para verla en un tamaño acorde a un dispositivo móvil. Aquí es necesario "iniciarla" para poder dirigir la salida a este dispositivo.

En la barra que esta debajo del menú principal de VS podemos observar en un combo los destinos donde queremos que se ejecute la aplicación.

Y aquí vemos como el resultado se despliega en la máquina virtual que es Pixel 7 de la marca Google.

Como muchas veces, al tener un ejemplo funcional, lo que se hace es modificarlo para cambiar el objetivo y la funcionalidad, tenemos ahora una biblioteca de clases que es de tipo .NET Core.

Código C#

Vamos implementar el juego de la Pirinola en un dispositivo móvil, primero agregamos la dll de la clase en el Explorador de Soluciones dando clic derecho en la carpeta dependencias.

Localizamos la .dll (en este caso BC_Juegos_de_Azar_3.dll) nótese que en este caso no aparece la dll que acaba de agregar (pareciera que la encapsula-empaca en algún archivo).

Tenemos una serie de imágenes (las caras de la pirinola) y las vamos a pasar a la carpeta Resources-Images (muy importante dejar los nombres en minúsculas sino marca error a la hora de compilar).

En la vista (MainPage.xaml) hacemos las siguientes modificaciones:

• A la imagen de inicio la cambiamos por la imagen de la pirinola con la cara de "Toma todo" y le ponemos un nombre con x:Name
• A la etiqueta del Hola Mundo, le ponemos un nombre (EtiqVPirinola) y blanqueamos el texto de inicio (propiedades x:Name y Text)
• Le cambiamos el nombre al botón (BtLanzar) y la propiedad de texto le ponemos "Lanzar"

En el código (MainPage.xaml.cs) hacemos lo siguiente:

Ponemos el using para poder usar la clase Pirinola, creamos variables para detectar el resultado del lanzamiento y así modificar la etiqueta y el contenido de la imagen. Además modificamos lo que hay en recursos (la verdad no se del todo como fue pero funcionó así: en la carpeta recursos le di clic derecho y Propiedades, luego le di clic al aplicación (Proyecto CalcNet) y apareció este código de XAML, que revisando a detalle es el archivo CalcNet.csproj, aquí busco las imágenes y la cambio por la imagen inicial.

Vamos a ver primero el resultado en una aplicación para Windows (Windows Machine), para mayor seguridad se limpió la app y se recompiló (opciones Compilar-Limpiar Solución / Compilar-Recompilar Solución).

Ahora vamos a ver que funcioné en la máquina virtual del Pixel 7.

Tenemos una primera versión, muy rudimentaria, pero funcional por lo que ahora vamos a cambiar la solución de Debug a Release esto lo hacemos en el menú Compilar - Administrador de Configuración.

Además seleccionamos la columna Implementar.

Otra modificación que se tiene que hacer es que por omisión la aplicación se manda a un formato llamado Conjunto de Productos (extensión aab), entonces vamos a cambiar a extensión apk.

Esto nos abrirá el conjunto de propiedades de la aplicación, en el menú de la izquierda se elige  Android, y en la opción Formato de paquete Android en el combo se elige apk.

Y con esto la salida ya es en formato apk.

Vamos ahora a la publicación de la aplicación, esto lo hacemos a nivel proyecto CalcNet con clic derecho vamos a la opción Publicar.

E inicia el proceso de publicación:

Aquí es cuando inicia todo la magia en la participó uno de los referentes - mexicano por cierto - del desarrollo de software Miguel de Icaza, si todo va bien se lanza la siguiente pantalla.

Casi terminamos, en teléfonos anteriores se podían instalar aplicaciones con el simple archivo apk, ahora en teléfonos actuales se deben de "firmar".

Vamos a esto, damos clic en el botón Distribuir ...

Vamos a seleccionar la opción (botón) Ad hoc.

En este caso, ya existe este archivo, sino se tiene es un proceso muy sencillo que podemos crearlo dando los siguientes datos:

En este caso, ya existe el archivo de firmas por lo que simplemente lo firmamos dando la contraseña que definimos al crear el archivo, para ello se elige el archivo (mickey) y se nos va a presentar una caja de dialogo para guardar el apk firmado.

Seleccionamos la ubicación y damos clic en el botón Guardar.

Proporcionamos la contraseña de la firma e inicia el proceso de "Firmado de la aplicación".

Con esto tenemos el archivo listo para poder ser instalado en teléfono inteligente. Para este ejemplo, el archivo se pasará usando un cable que lo conectaremos a la computadora para pasar el archivo, el teléfono que tomamos como destino fue el de Paco Díaz que es un Motorola G50.

Otra cosa interesante sería que usando los sensores del teléfono (por ejemplo agitarlo) se pudiera también tirar la pirinola.

Esta es una tecnología relativamente nueva y ya se reportó una vulnerabilidad como lo vemos aquí:

https://thehackernews.com/2025/03/hackers-use-net-maui-to-target-indian.html

Las imágenes fueron diseñadas (modificadas) por mi compañero y amigo Paco Díaz que promete ahora implementar el Piedra - Papel y Tijera.

Hasta ahora es una de las formas más sencillas de crear una aplicación móvil aparte del CSPro y un kit de desarrollo creado por el MIT App Inventor (https://appinventor.mit.edu/).

Hasta el siguiente artículo.

Atte.

Miguel Araujo.