electronEmpezando con electron


Observaciones

¿Qué es el electrón?

Electron es un marco de código abierto , que se utiliza para crear aplicaciones de escritorio utilizando HTML , CSS y JavaScript . En el interior, funciona gracias a Chromium y Node.js.

Su creador original, GitHub , trabaja con una amplia comunidad de desarrolladores para mantener el proyecto, que se puede encontrar aquí .

Una de las ventajas principales del uso de Electron es que, dado que se basa en tecnologías web, es multiplataforma , lo que permite implementar aplicaciones para Linux, MacOS y Windows, con el mismo código.

También cuenta con elementos nativos, como menús y notificaciones, así como herramientas de desarrollo útiles para la depuración y el informe de errores.

Aplicaciones construidas en Electron

Algunos ejemplos de aplicaciones que utilizan este framework, son:

... y muchos otros .

Versiones

Versión Observaciones Fecha de lanzamiento
1.0.0 2016-05-09
1.0.1 2016-05-11
1.0.2 2016-05-13
1.1.0 2016-05-13
1.1.1 2016-05-20
1.1.2 2016-05-24
1.1.3 2016-05-25
1.2.0 2016-05-26
1.2.1 2016-06-01
1.2.2 2016-06-08
1.2.3 Hay más entre esto y
1.4.7, pero había demasiados
para enumerar
2016-06-16
1.4.7 Última versión a partir del 19 de noviembre de 2016 2016-11-19
1.6.11 2017-05-25
1.7.3 Última versión a partir del 19 de junio de 2017 2017-06-19

Hola Mundo!

Preparar

Una estructura de proyecto de Electron usualmente 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 usará index.js como el punto de entrada predeterminado.

El proceso principal

En Electron, el proceso que ejecuta el script principal de package.json se denomina 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 renderizado

A continuación creamos la GUI para la aplicación. Electron utiliza páginas web como su GUI, cada una de las cuales se ejecuta en su propio proceso denominado proceso de representación .

Agregue el siguiente código a index.html :

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

Ejecutando la aplicación

Hay varias formas de ejecutar una aplicación electrónica.

Con electron-prebuilt instalado electron-prebuilt instalado globalmente

Primero, asegúrate de que tienes instalado electron-prebuilt .

Ahora podemos probar la aplicación usando este comando:

$ electron .
 

Método 2 - Sin electron-prebuilt instalado globalmente

Primero, tendremos que ingresar 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.

Después, npm start a 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ías ver algo como esto:

introduzca la descripción de la imagen aquí

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

Instalación de electron

Dependencias

Para instalar electron primero debes 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