Promoción verano: 6 meses de acceso a todos los cursos online con el 50% de descuento

Buscar
Buscamos patrocinadores

Espacio publicitario para patrocinadores.

Contacta con nosotros para disponer de más información.

Electron js desde cero

 

imagen electronjs

 

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 de ejemplo

En este ejemplo práctico vamos a construir desde cero una aplicación para obtener las cotizaciones en euros de las 3 criptomonedas más importantes según la web de coinmarketcap.com.
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:

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

Un ejemplo del fichero package.json sería:

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

Luego habría que crear el fichero app.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>Mi app</title>
  </head>
  <body>
    <h1>Mi app</h1>
    Texto de ejemplo:
  </body>
</html>

Es recomendable realizar este curso online sobre NodeJS ya que es la base de ElectronJS.

Vamos a completar el ejemplo hecho en electronjs que muestra la cotización de Bitcoin, Ethereum y Ripple, el Top 3 de las criptomonedas actuales haciendo una petición GET a la API de coinmarketcap.com.
Puedes revisar el proyecto de Github si lo deseas.
Al ser aplicaciones basadas en tecnología web, podemos usar librerías comunes como Bootstrap, jQuery, etc...
Un modelo básico habitual puede ser el proyecto siguiente:

  • index.html
  • styles.css
  • app.js
  • window.js
  • package.json

El index.html y el styles.css definen el interfaz de la aplicación como si de una página web se tratara.
El window.js implementa el método $() de jQuery que se invoca una vez la página se carga, ahí podemos usar código jQuery de toda la vida.

En el fichero app.js definemos los métodos principales que hacen referencia a electron y las llamadas a window. Asimismo también podemos configurar un menú y ubicarlo en nuestra aplicación.

Así como hemos comentado, este sería el detalle de los ficheros del proyecto electron.

/* global $ */
const request = require('request');

// Run this function after the page has loaded
$(() => {  
    request('https://api.coinmarketcap.com/v1/ticker/?convert=EUR&limit=3', {json:true}, (error, res, body) => {
        if (error) {
        window.alert("No se ha podido conectar con la web de Coinmarketcap.com");
        return console.log(error);
        }
        if (!error && res.statusCode===200) {
        for (item in body) {

        $('#name'+item).text(body[item].name);
        $('#price'+item).text(body[item].price_eur);
        const d = new Date(1000*body[item].last_updated);

        $('#lastupd'+item).text(d.toLocaleString());
        }
        }    
        });
    });
  
const {app, BrowserWindow, Menu} = require('electron'); 
const path = require('path'); 
const url = require('url'); 

let window = null;

const template = [
{
role: 'window',    label: 'Ventana',    submenu: [
      {          role: 'minimize',          label: 'Minimizar'       },
      {          role: 'close',          label: 'Cerrar'       }
]
},
]

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

// Wait until the app is ready
app.once('ready', () => {
    // Create a new window
    window = new BrowserWindow({
        // Set the initial width to 400px
width: 800,
// Set the initial height to 500px
height: 600,
// Don't show the window until it ready, this prevents any white flickering
show: false,
// Don't allow the window to be resized.
resizable: false
});

    // Load a URL in the window to the local index.html path
    window.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));

    // abre las herramientas de desarrollador
    //window.webContents.openDevTools();

    // Show window when page is ready
window.once('ready-to-show', () => {
    window.show();
    });
});
  

 

 

javascript

 

 

Valoraciones

Media de 4.7 sobre 5   (32 valoraciones)

 

Comentarios

Deja un comentario

 Doy mi consentimiento para recibir ofertas y promociones