Introducción a ElectronJS

Si está interesado en utilizar las habilidades de desarrollo web para desarrollar aplicaciones para diferentes plataformas de escritorio como Windows, Linux o macOS, Electron es el marco perfecto que se adapta a sus necesidades. Comencemos con una breve introducción a Electron. 

ElectronJS: Electron fue desarrollado recientemente en 2013 por el gigante de código abierto y control de versiones, GitHub. Electron usa NodeJs en su núcleo para servir páginas creadas en HTML y CSS como una aplicación de escritorio. Esto implica que los desarrolladores que se sienten cómodos con HTML5 o Android Development pueden cambiar fácilmente su plataforma a Electron. 

La aplicación Electron se puede clasificar en dos procesos principales, a saber, el proceso principal y el renderizador. 

Cultura escénica: hay dos procesos en la cultura escénica de Electron:

• Proceso principal El proceso principal es responsable de crear ventanas utilizando instancias de BrowserWindow. La instancia individual de BrowserWIndow representa una página web en su proceso de representación. Destruir una instancia de BrowserWindow implica que el proceso de representación correspondiente también finaliza.
• Proceso de renderizado Hay un solo proceso principal que es responsable de mantener múltiples procesos de renderizado. Cada proceso de representación administra la página web y sus scripts que se ejecutan dentro de ella.

Electron admite varias API para los procesos principal y de representación, lo que ayuda a interactuar con el sistema operativo de escritorio y sus recursos. 

Requisitos previos: Los principales requisitos previos que pueden considerarse importantes para comenzar con Electron se enumeran a continuación.

• HTML y CSS para la interfaz de usuario.
• JavaScript como lenguaje principal.
• Node.js y npm

Instalación de Electron: Comencemos con los componentes básicos del desarrollo con Electron.

• Paso 1: Asegúrese de que node y npm estén instalados.

node -v

npm -v

• Paso 2: dentro de su carpeta de trabajo, ejecute el siguiente comando desde el terminal integrado de su editor de código, luego eche un vistazo a un archivo package.json básico , que npm utiliza para definir propiedades e importar bibliotecas.

npm install electron --save-dev 

{
  "name": "electronapp",
  "version": "1.0.0",
  "description": "Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "Electron"
  ],
  "author": "xyz",
  "devDependencies": {
    "electron": "^7.1.7"
  }
}

• Paso 3: Ahora, veamos un archivo  main.js básico que actúa como el proceso principal.

const { app, BrowserWindow } = require('electron')
 
let win
 
function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: ( './icon.png'),
    webPreferences: {
      nodeIntegration: true
    }
  })
 
  // and load the index.html of the app.
  win.loadFile('./index.html')
  //win.loadURL('https://google.com/')
 
  // Open the DevTools.
   win.webContents.openDevTools()
 
  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

• Paso 4: El proceso principal está hecho, veamos un código HTML básico que actúa como un proceso de representación . 

<!DOCTYPE HTML>
<html>
    <head>
    <title>my first electron app</title>
    </head>
 
    <body>
        <h1>my first electron app</h1>
    </body>   
</html>

• Paso 5: Esto termina nuestra parte de codificación. Ahora, corriendo 

npm install --unsafe-perm=true

descargará los node_modules necesarios, requeridos por electron para representar una página. 

• Paso 6: Después de esto, lanzaremos la aplicación usando npm run start , comenzando con el script que hemos definido en package.json. 

Producción:

Referencias: https://electronjs.org/docs/tutorial/first-app#installing-electron