Comenzando con el electrón

Instalación de Electron

Dependencias

Para instalar electron, primero debe instalar Node.js, que viene con npm.

¿Cómo instalarlo?

Utilice npm:

# Install the `electron` command globally in your $PATH
npm install electron -g

# OR

# Install as a development dependency
npm install electron --save-dev

¡Hola Mundo!

Configuración

La estructura de un proyecto de Electron generalmente se ve así:

hello-world-app/
├── package.json
├── index.js
└── index.html

Ahora vamos a crear los archivos e inicializar nuestro package.json.

$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init

Nota: Si el parámetro main no se especifica en package.json, Electron utilizará index.js como punto de entrada predeterminado.

El proceso principal

En Electron, el proceso que ejecuta el script principal de package.json se llama proceso principal. Aquí podemos mostrar una GUI creando instancias de BrowserWindow.

Agregue lo siguiente a index.js:

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

// Global reference to the window object
let win

// This method will be called when Electron has finished
// initialization and is ready to create browser windows
app.on('ready', function(){
    // Create the window
    win = new BrowserWindow({width: 800, height: 600})

    // Open and load index.html to the window
    win.loadURL('file://' + __dirname + '/index.html')

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object
        win = null
    });
})

// Quit the app if all windows are closed
app.on('window-all-closed', () => {
    app.quit()
})

Plantilla HTML y proceso de representación

A continuación, creamos la GUI para la aplicación. Electron usa páginas web como su GUI, cada una ejecutándose en su propio proceso llamado renderer process.

Agrega el siguiente código a index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Ejecutar la aplicación

Hay varias formas de ejecutar una aplicación Electron.

Con electron-preconstruido instalado globalmente

Primero, asegúrese de tener [electron-preconstruido instalado](https://www.wikiod.com/es/electron/comenzando-con-el-electron#Instalación de Electrón -y-ejecutarlo).

Ahora podemos probar la aplicación usando este comando:

$ electron .

Método 2 - Sin electron-preconstruido instalado globalmente

Primero, tendremos que ingresar a la carpeta de su aplicación (la carpeta donde está package.json).

Allí, abra una ventana de Terminal/Símbolo del sistema y escriba npm install para instalar lo necesario en la carpeta de esa aplicación.

Luego, ingrese npm start para ejecutar la aplicación. Tenga en cuenta que su package.json todavía tiene que especificar un script de ‘inicio’.

Si todo funcionó correctamente, debería ver algo como esto:

ingrese la descripción de la imagen aquí

¡Felicidades! Has creado con éxito tu primera aplicación Electron.