Electron js desde cero

 
 

imagen tres

 

En este artículo hablamos de electron js, un framework javascript para desarrollar aplicaciones de escritorio.

Parece imparable el avance de Javascript hoy en día. Se impuso en el front-end hace más de una década y posteriormente se hizo un hueco en el back-end, e incluso no hace mucho, se ha colado también en las aplicaciones de escritorio (desktop app) de la mano de electron js. En este tutorial vamos a comentar primero algunos conceptos sobre electron.js y posteriormente vamos a crear un ejemplo (no es el Hola mundo), de una aplicación para validar json.

Qué es electron js?

Electron js es una librería open source desarrollada por GitHub para desarrollar aplicaciones de escritorio con Javascript. Para la parte visual utiliza HTML y CSS. Para ello utiliza librerías de renderizado de Chromium y librerías de Node.js. Históricamente se originó de un framework que se utilizó para crear Atom, un editor de texto de GitHub. Actualmente es posible crear aplicaciones multiplataforma, tanto para Windows, como para Mac OS y Linux.

Cómo funciona electron js?

A grandes rasgos, consta de dos procesos principales, el proceso principal (main process) y el proceso de renderizado (renderer process). El main process es el proceso que ejecuta el script principal especificado en el fichero package.json. Este proceso puede mostrar el interfaz gráfico a partir de páginas web. Esto se realiza creando instancias de BrowserWindow. Cada instancia ejecuta la página web en su propio proceso. Así pues el main process se encarga de gestionar todas estas páginas web a partir de sus respectivos renderer process. Para hacer llamadas a la GUI nativa del sistema, no se permite hacerlo desde el renderer process, sino que debe realizarse desde el main process, para ello hay disponible comunicación entre ambos procesos. Estos procesos para comunicarse son ipcRenderer y ipcMain para enviar mensajes y el módulo remoto para comunicación estilo RPC. El renderer process se apoya en librerias de Chromium para mostrar páginas web. Cada página web se ejecuta en su propio proceso.

En qué plataformas funciona?

Actualmente electron js es compatible con:

  • MacOS de 64bit, a partir de la versión 10.9.
  • Windows 7 y posteriores, tanto las versiónes de 32bit como de 64bit.
  • Linux Ubuntu 12.04, tanto la versión de 32bit como la de 64bit, incluso una versión ARM v7.

Qué funcionalidades nos brinda?

Tanto el main process como el renderer process ponen a nuestra diposición un conjunto de APIs para realizar diversas funcionalidades. Ambos procesos nos brindan acceso al portapapeles (clipboard), a variables de entorno, a imágenes (png o jpg), a las propiedades de la pantalla (screen), a (shell) que sirve para manejar ficheros y URLs externas, El main process por su lado tiene acceso a otras funcionalidades, como atajos de teclas, BrowserWindows, certificados, cookies, Debugger, diálogos nativos (ficheros, alertas), mensajes ipcMain, internalización (locales), menús, peticiones http/s, sesiones (cache, proxy, etc...), área de notificaciones del sistema. El rendererer process tiene acceso a funcionalidades, como captura de audio y video, HTML File, mensajes ipcRenderer y remote, carga de URLs externas, etc...

Aplicación para validar JSON

En este ejemplo práctico vamos a construir desde cero una aplicación para validar y pintar JSON. Para ello vamos a utilizar el editor Visual Studio Core, que un IDE muy ligero con autocompletado de código y resaltado de palabras clave, además de un interfaz del shell de comandos. Nota: tener Node.js instalado, e instalar electron con npm install -g electron Para empezar vamos a crear un directorio con la estructura siguiente:

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

Un ejemplo del fichero package.json sería:

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

Luego habría que crear el fichero main.js, y el index.html

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

// Hay que guardar una referencia global el objeto window, porque sino la ventana 
// se cerrará cuando el garbage collector quite esa referencia
let win

function createWindow () {
  // Crea la ventana del navegador
  win = new BrowserWindow({width: 800, height: 600})

  // y carga el index.html
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // abre las herramientas de desarrollador
  win.webContents.openDevTools()

  // evento que se emite cuando la ventana se cierra
  win.on('closed', () => {
    // Quitar la referencia del objeto window, habitualmente se guardan 
    // las ventanas en un array si nuestra app tiene más de una
    win = null
  })
}

// Este método se invoca cuando Electron finaliza la inicialización y está preparado
// para crear browser windows.
// Algunas APIs sólo se pueden usar después de que se dispare este evento.
app.on('ready', createWindow)

// Salir cuando todas las ventanas se cierran
app.on('window-all-closed', () => {
  // En macOS es habitual que la aplicación y su menú quede activo hasta que el 
  // usuario sale explícitamente con Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // En macOS es común recrear una ventana cuando se hace clic en el
  // icono del dock y no hay otras ventanas abiertas
  if (win === null) {
    createWindow()
  }
})

// Incluir el resto de nuestra app
// Se pueden crear ficheros separados y invocarlos con require

Y el index.html es simplemente una página web

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Validar JSON</title>
  </head>
  <body>
    <h1>Validar JSON</h1>
    Introduce una cadena de JSON:
  </body>
</html>

Para ejecutar la aplicación hay que escribir electron main.js Vamos a instalar bower para la gestion de los paquetes. npm install -g bower Si no tenemos instalados git, es recomendable tenerlo.

 

 

javascript

 

 

Comentarios

Deja un comentario