Archivo de la etiqueta: ejecutable con electron

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.

[themoneytizer id=”21187-2″]

 

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.