Cross-Platform desktop apps con Electron, C#, Blazor y Visual Studio

Crear aplicaciones para diferentes sistemas operativos en algunas ocasiones es complicado, sin embargo, utilizando las tecnologías web se pueden crear aplicaciones de escritorio que puedan ser utilizadas en diferentes sistemas operativos de manera simple.

Las herramientas que vamos a necesitar para poder crear estas aplicaciones web para escritorios serían las siguientes

• Npm
• Nodejs
• VisualStudio 2019
• Blazor
• C#
• Html
• Css
• Javascript
• .netcore 3.1

Lo primero que vamos hacer es un proyecto nuevo con Visual Studio 2019. Este proyecto debe ser un proyecto Blazor (claro que con electron se pueden crear otro tipo de tecnologías web para las apps).

Después de seleccionar el proyecto vamos a darle un nombre. En mi caso le voy a dejar el nombre de firstApp. Finalmente le damos clic a crear para que se construya nuestro proyecto. Para este primer proyecto no vamos a cambiar nada, lo vamos a correr para ver nuestra aplicación web corriendo. Como podemos observar es una aplicación web normal, aquí es donde vamos a crear toda nuestra lógica/interfaz de usuario.

En este momento ocupamos agregar una librería desde nuget. La cual es electronNet.API

Cuando esta librería esta instalada debemos hacer unos pequeños cambios a nuestra aplicación. Primero vamos a ir a Startup.cs y vamos a agregar esta instrucción Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());

El siguiente paso es ir a Program.cs donde ocupamos agregar una pequeña instrucción. Dentro del método CreateHostBuilder agregamos la línea webBuilder.UseElectron(args);

Ahora estamos listos para convertir nuestra app en un Electron app. Lo que se tiene que hacer en este momento es instalar el electronCLI. Esto lo podemos hacer usando el cmd o con la terminal de Visual Studio. En cualquiera de los dos casos tenemos que ubicarnos donde se encuentra ubicado nuestro proyecto.

Yo voy a usar cmd, en mi caso esta ubicado en la siguiente dirección 

Y ahora corremos esta instrucción dotnet tool install --global ElectronNet.CLI --version 8.31.2

Debemos esperar a que se termine de instalar (es importante notar que para el momento de este blog la versión era 8.31.2) nada más de ajustar la versión del CLI para el momento de instalación.

Ya casi estamos listos para poder correr nuestra app de Electron. Por el momento tenemos que correr la siguiente instrucción “electronize init”. Esto crea una serie de configuraciones que permiten que nuestra app se corra como una aplicación Electron. Cuando se termina igual dentro del cmd vamos a correr esta otra instrucción “electronize start” ya con esto vamos a poder ver nuestra app corriendo como si fuera una aplicación de escritorio.

 

 

 Ejemplo