Hola mundo en Electron

En este tutorial vamos a aprender a realizar la instalación de electron, ademas vamos a unir las piezas necesarias para aprender a crear un hola mundo en electron.

Este curso asume que ya tienes experiencia utilizando nodejs, si no es así te recomiendo primero completes el curso de nodejs gratis en español.

El instalador de nodejs tambien instala el manejador de paquetes npm, que nos permitirá instalar electron. Ademas del instalador npm también es posible utilizar el manejador de paquetes yarn que tiene algunas características que le permiten organizar mejor los paquetes que npm. Para instalar yarn de forma global podemos utilizar npm.

$ npm i --global yarn

Para verificar que yarn se ha instalado correctamente ejecutamos.

$ yarn -v

En mi caso continuaré utilizando yarn, siéntete libre de utilizar npm o yarn según consideres mejor.

¿Cómo instalar electron de forma global?

Para realizar la instalación de electron de forma global vamos ejecutamos.

$ yarn global add electron

Al finalizar la instalación de electron podemos comprobar la versión que tenemos instalada ejecutando.

$ electron -v

Si el sistema no es capaz de identificar electron como programa, probablemente sea necesario agregar el path bin de los paquetes instalados con yarn a la variable PATH. En mi sistema operativo Linux este path es /home/usuario/.yarn/bin por lo que he agregado esta linea al archivo .profile de directorio home.

$ export PATH="$PATH:/home/usuario/.yarn/bin"

Después de actualizar el valor de PATH es necesario volver a reiniciar la terminal (o el sistema en algunos sistemas operativos).

Anatomía de una aplicación electron

Una aplicación electron consta de al menos 3 archivos.

package.json: Contiene información acerca de la aplicación como nombre de la aplicación, autor, dependencias, etc.
index.js: Es el punto de entrada a nuestra aplicación, es el primer archivo que electron ejecutara cuando arranque, este es un nombre genérico pero puede ser nombrado de cualquier forma siempre y cuando coincida con el valor especificado como punto de entrada en el archivo package.json.
index.html: Representa el contenido que es desplegado por la aplicación. Este contenido (la parte visual) que se carga mediante el archivo index.js y al igual que este el nombre index.html es solo una convención.

¿Cómo crear una nueva aplicación en electron?

Para crear nuestro nuevo proyecto creamos un nuevo directorio llamado hola mundo.

$ mkdir hola-mundo

Dentro del directorio ejecutamos yarn para crear un proyecto en blanco.

$ cd hola-mundo
$ yarn init -y

Esto nos va a generar un archivo package.json como el siguiente.

{
    "name": "hola_mundo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

El archivo package.json consta de las siguientes propiedades.

name: Es el nombre de nuestra aplicación.
version: Es la versión de nuestra aplicación, esta se va incrementando conforme vamos liberando nuevas versiones.
main: Es la referencia al archivo de entrada a través del cual electron arranca nuestra aplicación.

Anatomía del archivo index.js

La forma mas básica de un archivo de entrada a una aplicación de electron es la siguiente.

// cargar libreria electron
const electron = require("electron");

// cargar libreria path para el manejo de rutas
const path = require("path");

// crear una variable contenedora de mi ventana principal
let ventana = null;

// cuando mi aplicacion electron este lista
electron.app.on("ready", function () {
    // crear una nueva ventana de 1024x800 pixeles y asociarla a la variable del contenedor
    ventana = new electron.BrowserWindow({ width: 1024, height: 800 });

    // sobre la ventana que cree cargar el archivo index.html
    ventana.loadURL(`file://${path.join(__dirname, "index.html")}`);

    // cuando se cierre la ventana
    ventana.on("closed", function () {
        // destriur mi contenedor
        ventana = null;
    });
});

// cuando se cierren todas las ventanas de mi aplicacion, cerrar mi aplicacion
electron.app.on("window-all-closed", electron.app.quit);

En el ejemplo hemos indicado que cuando inicie la aplicación, esta debe cargar el contenido del archivo index.html. Como el path al archivo debe ser absoluto, debemos tener en cuenta que accedemos a este a través de la variable __dirname que dependiendo del sistema operativo nos retorna un path diferente que apunta hasta el directorio donde se encuentra el archivo index.js, que es el mismo en donde se encuentra index.html.

Anatomía del archivo index.html

El archivo index.html de electron contiene la interfaz de usuario que se va a desplegar en la ventana. En su forma mínima un archivo html para este propósito contiene el siguiente código.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Hola Mundo!</title>
    </head>
    <body>
        <h1>Hola Mundo!</h1>
    </body>
</html>

Ejecutar un programa creado en electron

Finalmente para realizar la ejecución del programa, vamos a la línea de comandos del proyecto e ingresamos lo siguiente.

$ electron .

Esto nos desplegará una nueva ventana con el mensaje “Hola Mundo”.

Detalles a considerar

La aplicación inicia utilizando el proceso principal (index.js).
El proceso principal es el encargado de crear la ventana para el proceso de despliegue de la aplicación.
El proceso de despliegue tiene acceso al DOM (Document Object Model), es decir que puede trabajar con el navegador y es con el cual hemos cargado el contenido de index.html sobre la ventana.
Una aplicación de electron puede tener múltiples procesos de despliegue.
Una aplicación de electron tiene siempre un solo proceso principal (o de entrada) como es el index.js.