Como crear una aplicación de escritorio multiplataforma usando tecnología web con Electron – Hola mundo.

Hola a todos:

Hoy vamos a ver como podemos crear una aplicación de escritorio utilizando tecnología web (HTML, CSS, JAVASCRIPT) con Electron.

Electron es una herramienta creada por Github que nos permite crear aplicaciones de escritorio multiplataforma (Windows/MAC/Linux) utilizando tecnologías web.

Entre otras aplicaciones famosas construidas utilizando electron están las versiones de escritorio de Skype, Visual Studio Code, Slack…etc.

Electron utiliza Node.js como backend y Chromiun como fornt-end para renderizar la aplicación.

Vamos a ver un  ejemplo muy sencillo, el clásico hola mundo, para ver como podemos convertir un desarrollo web en una aplicación de escritorio.

Si no tenemos instalado Node.js en nuestro sistema el primer paso es instalarlo

Para ello descargamos el paquete con la versión LTS de http://nodejs.org/ y lo instalamos.

Si estás usando linux y quieres utilizar un gestor de paquete puedes consultar aquí los pasos a seguir para instalar Node.js usando un gestor de paquetes según la distribución que tengas instalada.

Una vez que tengamos node.js instalado empezamos a crear nuestra aplicación:

Lo primero que vamos ha hacer es crear la carpeta que contendrá nuestro proyecto, por lo tanto vamos a crear donde prefiramos una carpeta llamada holamundo.

Luego desde la consola de comandos tenemos que situarnos dentro de la carpeta que acabamos de crear y escribimos el siguiente comando para iniciar la aplicación:

npm init

Nos va preguntando el nombre del paquete, la versión y otros datos de la aplicación y al final nos genera un archivo llamado package.json

como nombre de paquete por defecto da el nombre de la carpeta que hemos creado, podemos cambiarlo si queremos.


El siguiente paso es instalar la última versión de electrón:

npm i electron@latest

Ahora vamos a crear en nuestra carpeta un archivo llamado index.js que como comentamos anteriormente será el punto de entrada de nuestra aplicación, y otro archivo index.html.

En este momento nuestra carpeta holamundo tienes estos tres archivos:

Editamos index.js y escribimos el siguiente código:

const {app, BrowserWindow} = require('electron');

let win;

function createWindow(){
   win = new BrowserWindow({width : 500, height : 500 });
   win.loadFile("index.html");
}

app.on("ready", createWindow);

Primero hemos importado app y BrowserWindow de electron:

const {app, BrowserWindow} = require('electron');

Después definimos la variable win que contendrá el manejador de la ventana de nuestra aplicación:

let win;

Luego hemos definido una función llamada createWindow donde creamos una ventana de tamaño 500×500 y dentro de ventana cargamos el archivo index.html con loadFile:

function createWindow(){

win = new BrowserWindow({width : 500, height : 500 });
win.loadFile("index.html");

}

Por último le decimos que cuando la aplicación esté lista llame a la función createWindow() que acabamos de crear:

app.on("ready", createWindow);

Perfecto, ahora solo nos queda editar nuestro archivo index.html que va a mostrar nuestra aplicación, que en un alarde de originalidad imprimirá en pantalla un flamante Hola Mundo:

<!DOCTYPE html>
<html>
   <head>
       <title>Hola Mundo</title>
   </head>
   <body>
       <h1>Hola mundo</h1>
   </body>
</html>

Ahora para ver el resultado ejecutamos nuestra aplicación ejecutamos el siguiente comando:

electron .

 Por si no se aprecia bien el comando es electron seguido de un espacio y un punto.

Ya tenemos nuestra aplicación funcionando, ahora solo nos falta empaquetarla para crear el ejecutable.

 

Para empaquetar la aplicación vamos a instalar electron-packager con el siguiente comando:

npm install -g electron-packager

Ahora vamos a ejecutar npm install para instalar los módulos de nodejs y todas las dependencias:

npm install 

Por último para empaquetar ejecutamos:

electron-packager .

Es importante indicar que se tiene que ejecutar en el sistema operativo del cual queremos obtener el ejecutable, si lo estás ejecutando en windows se habrá creado un carpeta llamada holamundo-win32-x64 dentro de nuestro proyecto, dentro de esta carpeta podrás encontrar entre otros archivos necesarios el archivo holamundo.exe que es el archivo ejecutable.

Eso es todo por hoy,  hemos una introducción rápida y sencilla a electrón.

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),

También puedes seguirme en Twitter en ‎@revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.