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.