Crear aplicaciones de escritorio con electron

Acabo de notar que no adjunte el repositorio apra que puedan descargar y ver el codigo, modificarlo, usarlo y si desena hacer forks u opinar sobre el. Droni-co/sorterHat

¿Qué es Electron JS?

Electron es una tecnología que nos permite empaquetar aplicaciones desarrolladas con NodeJS y que usan tecnologías web (HTML, CSS y JS) como aplicaciones de escritorio multiplataforma para poder correrlas e instalarlas directamente en nuestros dispositivos.

##Electron Forge Electron Forge es el ToolKit todo en uno para desarrollar aplicaciones con Electron mucho más fácil este nos provee de herramientas para empaquetar, configuraciones básica con soporte para webpack, vite y typescript, además tiene un CLI muy potente que nos facilitara mucho el trabajo con Electron.

Crear App

Bueno para crear la app simplemente seguire la documentación encontrada en Electron forge y los pasos que ahí están indicados:

Para comenzar creamos el proyecto con con el siguiente comando:

npm init electron-app@latest nuestra-app  -- --template=vite-typescript

Como ven pasamos el flag que indica que usaremos Vite y typescript dentro de nuestro proyecto. una vez creado nuestro proyecto podemos correrlo con el comando:

cd nuestra-app && npm start

Configuracion basica (main.ts)

En este archivo podemos hacer la mayoría de configuraciones básicas de nuestro proyecto como por ejemplo agregar la propiedad autoHideMenuBar para ocultar el menú superior, o comentar la línea mainWindow.webContents.openDevTools(); antes de publicar nuestro proyecto para ocultar el panel de desarrolladores de chrome que viene por defecto Agregar Tailwind Aunque no es una parte importante para trabajar estos proyectos, para este caso particular decidí implementar tailwind y la instalación es muy sencilla, de hecho solo deben seguir los pasos de la documentación de tailwind para vite

Crear layout general

Como recomendación personal es bueno crear un layout general con el que se pueda ir guiando mientras crean su aplicación, para mi caso es algo muy simple que consiste en una sola pantalla con un logo, un botón para seleccionar una carpeta y una casilla de confirmación.

Funcionalidad para copiar archivos

Aquí es donde entra la chicha de la aplicación, recuerden que una de las ventajas de hacer aplicaciones con Electron es que podemos acceder a los recursos y funcionalidades que nos da node, aunque no directamente, es decir debemos tener en cuenta (como explico en el video) que estas aplicaciones cargan un webview y un servicio de node asociado, del lado del webview que es un en esencia un navegador no podremos acceder a todas las funcionalidades de node, pero si podemos usar un servicio de Electron para expor funciones que ejecuten dichas funcionalidades y ejecutarlas sobre el servicio de node.

El servicioque se encarga de comunicar ambos contextos esllamado ipcMain (https://www.electronjs.org/es/docs/latest/api/ipc-main) gracias a este puedes comunicar los procesos que instancies en el servicio de node con el webview mediante una configuracion en el archivo de preload.ts

De una vez te digo (para que no te sorprendas como yo) que los eventos ipcMain.on('evento') no envían una respuesta y como en la mayoría de los casos vamos a querer tener en nuestro fron una confirmación de lo que ha pasado es mejor usar el método ipcMain.handle('event')

Finalmente simplemente con el comando npm run make obtenemos los instaladores de nuestra aplicación.