El primer paso que debemos dar al instalar ElectronJs y sus dependencias, principalmente NodeJs, es asegurarnos que el sistema está operativo desarrollando y ejecutando una simple aplicación. Es típico el ejemplo del "hola mundo". ESta aplicación nos servirá para implementar todas las funcionalidades que analicemos en el transcurso de este tutorial.
Procedamos con los siguientes pasos:
1- En primer lugar, iniciamos el repositorio npm en la carpeta (en nuestro caso electronApp) donde vamos a crear nuestra aplicación de escritorio con:
$ npm init
Y escribimos los descriptores de nuestro proyecto.
Algunos parámetros a destacar son:
y confirmamos, para crear el archivo de configuración package.json, de nuestra aplicación
2- Seguidamente instalamos electron en la carpeta del proyecto. El modo recomendado es hacerlo como una dependencia de desarrollo de la propia app, lo que te permite trabajar con múltiples versiones diferentes de Electron.
$ npm install electron --save-dev
Podemos observar como se ha creado la carpeta node-modules dentro de la carpeta de nuestro proyecto.
3- Abrimos nuestro proyecto en nuestro editor de código favorito para comenzar a trabajar.
4- Creamos el archivo main.js que es el Proceso Principal, que controla nuestra aplicación y crea los distintos Procesos de Randerización o páginas
web de nuestra aplicación de escritorio.
Para empezar, hemos tomado una plantilla de main.js de la documentación de ElectronJs.org (Primera aplicación en ElectronJS)
//cargamos la Api de electron.js
const electron=require ('electron')
//invoca la api de electron y carga el módulo app y BrowserWindow
const { app, BrowserWindow } = require('electron')
// Crea la ventana del navegador.
function createWindow () {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// y carga el index.html de la aplicación.
win.loadFile('index.html')
}
//abre la venta correspondiente al proceso de Randerizado una vez está lista la app
app.on('ready', createWindow)
Lo que hace nuestro main.js es invocar a electronjs, crear una instancia de página web o Proceso de Randerizado index.html y abrirla en una nueva ventana.
En el siguiente apartado del tutorial se analizará más en detalle este main.js conforme se vayan añadiendo más funcionalidades de la Api de ElectronJs, como la creación
de un menú, la apertura de nuevas ventanas desde nuestro Proceso de Randerizado o procesos de intercomunicación entre el Proceso Principal y los Procesos de Randerizado.
5- A continuación tenemos que editar nuestra primer vista de la Aplicación de escritorio, es decir el archivo index.html que es el Proceso de Randerizado, que controla nuestra aplicación y crea los distintos Procesos de Randerizado,
y al que podríamos añadir una hoja de estilos CSS y scripts con JavaScript.
<!DOCTYPE htm>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ElectronApp</title>
</head>
<body>
<h2>Hola Mundo de la Programación Web.</h2>
<p>Esta es mi primera aplicación en ElectronJs</p>
</body>
</html>
6- A continuación preparamos el entorno para la primera ejecución de la instalación. Lo primero que hay que hacer es mofiicar el parámetro
scripts de nuestro archivo package.json y cambiar su contenido por
"scripts": {
"start": "electron ."
},
Si nuestro programa tuviera dependencias específicas habría que instalarlas con el siguiente comando:
$ npm install
De esta manera podremos ejecutar nuestra aplicación en la terminal con el siguiente comando:
$ npm start
Así, y con 6 sencillos pasos, tenemos lista nuestra primera Aplicación de Escritorio ElectronJs, electronApp para añadirle nuevas funcionalidades de la Api. Esta aplicación nos servirá como base para ir incluyendo los distintos ejemplos que veremos en el desarrollo de este tutorial.
En este punto, es importante conocer la estructura de ficheros de nuestra aplicación ElectronJs. En la siguiente imagen, podemos encontrar cómo se ha estructurado la aplicación electronApp,
Nota: La configuración en carpetas del proyecto es decisión del propio desarrollador