Electrón, Guía de Inicio Rápido

Electron le permite crear aplicaciones de escritorio con JavaScript puro, proporcionando en tiempo de ejecución aplicaciones enriquesidas en forma nativa gracias a su API (APIs). Se puede ver como una variante en tiempo de ejecución de Node.js, donde Electron se centra en aplicaciones de escritorio en lugar de servidores web.

Esto no significa que Electron es un enlace de JavaScript a las bibliotecas gráficas de interfaz de usuario (GUI). En su lugar, Electron utiliza las páginas web como su GUI, por lo que también se puede ver como un navegador mínimo de Chromium, controlado por JavaScript.

 

Proceso principal


En Electron, el proceso que ejecuta package.jsonel script main es el denominado proceso principal. La secuencia de comandos que se ejecuta en el proceso principal puede mostrar una interfaz gráfica de usuario mediante la creación de páginas web.

 

Proceso de procesamiento (Proceso de Renderizado)


Ya que Electron utiliza Chromium para mostrar páginas web, también se utiliza la arquitectura multiprocesos de Chromium. Cada página web en Electron se ejecuta en su propio proceso, que se denomina procesador o proceso de Procesamiento o Renderizado.

En los navegadores normales, las páginas web generalmente se ejecutan en un entorno de espacio aislado y no se les permite el acceso a recursos nativos. Los usuarios de electron, sin embargo, tienen el poder de usar las API de Node.js en las páginas web, lo que permite interacciones de bajo nivel del sistema operativo.

Esto suena algo confuso, pero visualizarlo de la siguiente manera:

En un navegador típico, podemos mostrar y desplegar información, pero no podemos acceder al Disco duro, unidades de CD/DVD o la cámara web o usar el GPS del dispositivo móvil o la PC. También cada pagina es mostrada en su propio entorno o Pestaña del navegador y no puede interactuar con otras pestañas.

Gracias a Electron, cada pestaña se convierte en un PROCESADOR o Proceso de Procesamiento, que puede estar aislado de otros o vinculado. También todas las limitantes de recursos como escribir en el Disco Duro, acceder a las unidades de CD/DVD, cámara web o GPS desaparecen, como en una aplicación de escritorio.

 

Diferencias entre proceso principal y proceso procesador


El proceso principal crea páginas web creando BrowserWindow una instancias. Cada instancia BrowserWindow ejecuta la página web en su propio proceso de procesamiento. Cuando BrowserWindow se destruye es decir una instancia, también se termina el proceso de representación correspondiente.

El proceso principal gestiona todas las páginas web y sus procesos de procesamiento correspondientes. Cada proceso de procesamiento está aislado y sólo se preocupa por la página web que se ejecuta en ella.

En páginas web, no se permite la llamada de API relacionadas con la GUI nativa porque la administración de recursos GUI nativos en las páginas web es muy peligrosa y es fácil abusar de los recursos. Si desea realizar operaciones GUI en una página web, el proceso de renderizado de la página web debe comunicarse con el proceso principal para solicitar que el proceso principal realice esas operaciones.

En Electron, tenemos varias maneras de comunicarnos entre los procesos principales y los procesos de renderizado. Similar a los módulos ipcRenderer y ipcMain para enviar mensajes, y el módulo remoto para la comunicación de estilo RPC.

 

Escribiendo tu primera aplicación en Electron


Generalmente, una aplicación Electron se estructura de la siguiente manera:

your-app/
├── package.json
├── main.js
└── index.html

El formato de package.jsones exactamente el mismo que el de los módulos del Node.js, y el script especificado por el campo main es el script de inicio de tu aplicación, que ejecutará el proceso principal. Un ejemplo de su aspecto package.json podría ser el siguiente:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Nota : Si el campo main no está presente en el archivo package.json, Electron intentará cargar un index.js.

Si empleaste nuestra guía para proceso de Instalación Electron, es muy probable que tu archivo package.json tenga un aspecto similar al siguiente:

{
   "name": "test",
   "version": "1.0.0",
   "description": "Electron test",
   "main": "main.js",
   "scripts": {
      "start": "electron main.js"
   },
   "author": "Vuxmi.Com Alexander Escobar",
   "license": "ISC",
   "dependencies": {
      "electron": "^1.7.8"
   }
}

 

El main.jsdebe crear ventanas y manejar eventos del sistema, un ejemplo típico es:

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

// Mantenga una referencia global del objeto de ventana, si no lo hace, 
// la ventana se cerrará automáticamente cuando el objeto JavaScript sea recolectado.
let win

function createWindow () {
// Crea una Ventana del Browser.
win = new BrowserWindow({width: 800, height: 600})

// Carga la pagina index.html de nuestra aplicacion.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

// Abre el DevTools (Herramientas de Desarrollo).
win.webContents.openDevTools()

// Emite cuando la ventana es cerrada.
win.on('closed', () => {
// Diferencia el objeto de la ventana, generalmente se almacenaría las ventanas
// en una matriz si su aplicación es compatible con varias ventanas o multi ventana,
// este es el momento cuando debe eliminar el elemento correspondiente.
win = null
})
}

// Este método será llamado cuando Electron haya terminado
// inicialización y está listo para crear ventanas de navegador.
// Algunas API sólo se pueden utilizar después de que se produzca este evento.
app.on('ready', createWindow)

// Salir cuando todas las ventanas estan cerradas.
app.on('window-all-closed', () => {
// En los Sistemas Operativos Mac es comun para sus aplicaciones y barras de menus
// que este permanecer activo hasta que el usuario cierra explicita mente 
// usando la combinación Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// En MacOS es común volver a crear una ventana en la aplicación cuando
// se hace clic en el icono y no hay otras ventanas abiertas.
if (win === null) {
createWindow()
}
})

// En este archivo puede incluir el resto del proceso principal específico de su aplicación
// el código. También puede ponerlos en archivos separados y requerirlos aquí.

Finalmente, index.htmles la página web que desea mostrar:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Hola ¡Mundo!</title>
</head>
<body>
   <h1>Hola ¡Mundo!</h1>
   Nuestra version de Node.js <script>document.write(process.versions.node)</script>,
   Version de Chrome <script>document.write(process.versions.chrome)</script>,
   y finalmente de Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

Ejecutar tu aplicación


Una vez que haya creado sus iniciales archivos main.jsindex.htmlpackage.json, es probable que desee probar el funcionamiento de su aplicación a nivel local para probarlo y asegurarse de que está funcionando como se esperaba.

electron

electrones un módulo npm que contiene versiones pre-compiladas de Electron.

Si lograste instalar globalmente npm, sólo tendrá que ejecutar lo siguiente en el directorio de origen de su aplicación:

npm start

Si lo ha instalado localmente, ejecute:

macOS / Linux

$ ./node_modules/.bin/npm start

Ventanas

$ .\node_modules\.bin\npm start

Binario Electron descargado manualmente

Si descargó Electron manualmente, también puede utilizar el binario incluido para ejecutar su aplicación directamente.

Mac OS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Linux

$ ./electron/electron your-app/

Ventanas

$ .\electron\electron.exe your-app\

 

A continuación te dejamos una captura de pantalla, de la salida, ya corriendo perfectamente Nuestro ejemplo, así también de la linea de comando en ambiente Windows.

Electron Framework Captura de Ejecución
Electron Framework Captura de Ejecución

 

Ejecutar como una distribución

Cuando haya terminado de escribir su aplicación, puede crear una distribución siguiendo la guía de distribución de aplicaciones y luego ejecutando la aplicación empaquetada.

Pruebe este ejemplo

Clonar y ejecutar el código en este tutorial utilizando el repositorio electron/electron-quick-start.

Nota : Para ejecutar esto se necesita Git y Node.js (que incluye npm ) en su sistema


# Clonar el Repositorio
$ git clone https://github.com/electron/electron-quick-start
 
# Cambiarnos a la carpeta del Repositorio
$ cd electron-quick-start

# Instalar dependencias
$ npm install

# Ejecutar la aplicacion
$ npm start

 

Espero te haya sido de utilidad, déjanos un comentario si necesitas ayuda, o pídenos un vídeo donde te podamos demostrar el ejemplo.


links & referencias: 

Si deseas mas información o consultar las fuentes bibliográficas, aquí te dejamos…

  • Electron.app es parte del paquete de lanzamiento del Electron, puedes descargarlo desde aquí .
  • Para más ejemplos de aplicaciones, vea la lista de boilerplates creada por la impresionante comunidad de electrones.
Estudiante de la vida, buscando aprender…
Tu solo pregunta, si no tengo la respuesta… ya NO preguntaras solo…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *