Llevo varios días jugando con Electron, un framework creado por GitHub, que te permite crear aplicaciones de escritorio para Windows, Mac y Linux usando lo que ya conoces: HTML, JavaScript y CSS. Es posible que ya estés usando algunas aplicaciones que utilizan esta tecnología, como el editor Atom (que fue el motivo por el cual fue creado este framework), Visual Studio Code, Postman, entre otros. Es por ello que hoy quiero contarte que tú también puedes crearte tus propias aplicaciones con Electron, independientemente del sistema operativo que utilices.
Lo que si que te recomiendo es que aprendas Node.js, si todavía no lo has hecho, ya que es en lo que se apoya. Para ver un ejemplo sencillo, y que veas que no es nada difícil, te voy a ayudar a crear el típico Hello World con este framework. Lo primero que debes hacer es crear una carpeta llamada hello-electron en un directorio que sea cómodo para ti y ejecuta dentro de ella el siguiente comando:
npm init -y
Si ya conoces Node.js, sabrás que este comando se utiliza para inicializar un directorio como proyecto. Esto generará un archivo llamado package.json que contendrá toda la información relativa a tu proyecto, desde el nombre y la versión hasta las dependencias que necesita para poder ejecutarse. Para poder trabajar con Electron, el primer módulo que necesitas es electron-prebuilt.
npm install electron-prebuilt -DUna vez que tienes el proyecto y el modulo inicializado, abre la carpeta con tu editor favorito (yo suelo usar Visual Studio Code, hecho con Electron también ;-)) y vamos a hacer algunas modificaciones:
En el archivo package.json modifica el valor de main por src/app.js. Por otro lado, para que sea más cómodo para ti, añade en el apartado scripts uno nuevo llamado start y como valor «electron .». El resultado debería de ser como el siguiente:
{
"name": "hello-electron",
"version": "1.0.0",
"description": "",
"main": "src/app.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron-prebuilt": "^1.4.13"
}
}Ahora debes crear el punto de entrada, que es el archivo app.js dentro de una carpeta llamada src. El siguiente código será lo mínimo que necesitas para comenzar:
const electron = require('electron'),
{ app, BrowserWindow } = electron;
let mainWindow;
app.on('ready', _ => {
mainWindow = new BrowserWindow({
width: 400,
height: 400
});
mainWindow.loadURL(`file://${__dirname}/hello.html`);
mainWindow.on('closed', _ => {
mainWindow = null;
});
});Con este código tan sencillo ya tienes montado un primer esqueleto de tu aplicación de escritorio. Si no has visto ES6 te recomiendo que le eches un vistazo. Lo primero de todo es referenciar el módulo que acabas de instalar a través de require(‘electron’). Una vez hecho esto, nos interesa acceder de forma sencilla a aquellos elementos de electron que vamos a utilizar como es app y BrowseWindow. app nos va a permitir controlar gran cantidad de cosas, entre ellas cuándo la aplicación está lista a través del evento ready. Cuando esto ocurre, podemos crear ventanas, menús, un icono en la barra de tareas, etcétera.
Para este ejemplo nos conformaremos con crear nuestra primera ventana cuando la aplicación esté lista, utilizando BrowserWindow, al que le pasamos el ancho y el alto que queremos que tenga inicialmente.
Cuando creas una ventana sueles esperar ver algo en ella. Como ya te comenté, solo necesitas saber HTML, JavaScript y CSS, por lo que el archivo a cargar a través de loadURL será una página HTML, en este caso hello.html, que estará ubicada también dentro de la carpeta src. El contenido puede ser similar a este:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
color: cornflowerblue;
}
</style>
</head>
<body>
<h1>Hello World from Electron!</h1>
</body>
</html>No es un marcado demasiado espectacular, pero sí te dará una idea de que puedes utilizar tanto HTML como estilos para crear tu aplicación, como lo harías en un entorno web. Para comprobar que todo ha funcionado correctamente, basta con acceder al directorio desde el terminal/consola y ejecutar npm start, haciendo que el comando electron . se ejecute.
Como puedes ver, con unas pocas líneas has sido capaz de crear una aplicación de escritorio multiplataforma y con tecnologías que ya conoces gracias a Electron.
¡Saludos!