electron

Desarrollar una aplicación de escritorio en javascript: muy fácil con Electron

Si quieres desarrollar una aplicación Javascriptde escritorio, empaquetarla en un .exe o hacerla un portable… es muy fácil. De hecho si ya la tienes desarrollada la puedes encapsular. Te presento Electron una biblioteca de código abierto, multiplataforma para crear aplicaciones de escritorio con HTML, CSS y Javascript. Electron combina Node.js y Chromiun, una versión mucho más ligera que Google Chorme. Con ello se consige una combinación ligera y muy potente.

Requisitorios para empezar a desarrollar

Solo necesitarás tener instalado Nodejs. Para ello puedes descargarlo desde su página oficial. Verifica que esta instalado con:

node -v

Configura Electron

Tu app debe tener la siguiente estructura:

  • App
    • package.json (puedes crearlo con npm init)
    • main.js
    • index.html (es opciona, ahora veremos el porqué)

Un ejemplo de tu package.json podría ser:

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

Una vez lo tengas instala el paquete npm de Electron:

npm install --save-dev electron

Una aplicación de ejemplo rápido

Este podía ser un ejemplo rápido para empaquetar tu aplicación de Electron, un ejemplo del main.js:

 
const { app, BrowserWindow , Menu} = require('electron')
 
// Mantén una referencia global del objeto window, si no lo haces, la ventana 
// se cerrará automáticamente cuando el objeto JavaScript sea eliminado por el recolector de basura.
let win
 
 
let templateMenu = [
  {
    label: 'Ventana',
    submenu: [
      { role: 'reload', label: 'Recargar' },
      //{ role: 'forcereload' },
      { type: 'separator' },
      //{ role: 'resetzoom', label: 'Zoom reset' },
      { role: 'zoomin', label: 'Zoom +'},
      { role: 'zoomout' , label: 'Zoom -'},
      { type: 'separator' },
      { role: 'togglefullscreen', label: 'Pantalla completa' }
    ]
  },
  {
    label: 'Opciones',
    submenu: [
      { role: 'toggledevtools', label: 'Desarrollo' },
      { role: 'close', label: 'Salir' }
    ]
  }
];
 
function createWindow () {
  // Crea la ventana del navegador.
  win = new BrowserWindow({
    width: 1024,
    height: 768, 
    webPreferences: {
      nodeIntegration: true
    }
  })
 
  // y carga el index.html de la aplicación.
  //win.loadFile('C:/app/index.html')
  win.loadURL('http://127.0.0.1/')
 
  // Abre las herramientas de desarrollo (DevTools).
  //win.webContents.openDevTools()
 
  // Emitido cuando la ventana es cerrada.
  win.on('closed', () => {
    // Elimina la referencia al objeto window, normalmente  guardarías las ventanas
    // en un vector si tu aplicación soporta múltiples ventanas, este es el momento
    // en el que deberías borrar el elemento correspondiente.
    win = null
  })
 
  // Eliminando Cache/Session anteriores
  win.webContents.session.clearCache(() => {
    //some callback.
    });
  win.webContents.session.clearStorageData(() => {
    //some callback.
    });
 
  var menu = Menu.buildFromTemplate(templateMenu);
  Menu.setApplicationMenu(menu); 
}
 
// Este método será llamado cuando Electron haya terminado
// la inicialización y esté listo para crear ventanas del navegador.
// Algunas APIs pueden usarse sólo después de que este evento ocurra.
app.on('ready', createWindow)
 
// Sal cuando todas las ventanas hayan sido cerradas.
app.on('window-all-closed', () => {
  // En macOS es común para las aplicaciones y sus barras de menú
  // que estén activas hasta que el usuario salga explicitamente con 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 el
  // icono del dock es clicado y no hay otras ventanas abiertas.
  if (win === null) {
    createWindow()
  }
})
 
// En este archivo puedes incluir el resto del código del proceso principal de
// tu aplicación. También puedes ponerlos en archivos separados y requerirlos aquí.

Cargar un fichero físico o una URL

Aquí esta uno de los puntos más interesantes y a tener en cuenta. Puedes cargar una URL por ejemplo si tienes la web publicada en otro servidor o puedes crearla apartir de un fichero que por ejemplo va en la compilación del proyecto. Para ello utilizas loadFile o loadURL
  win.loadFile('app/index.html')

  win.loadURL('http://127.0.0.1/test/')

Crear un template para el menú toolbar

En la parte superior de la pantalla de tu aplicación Electron puedes colocar un útil toolbar para hacer determinadas acciones que recuerden a un navegador. En el ejemplo de arriba tienes un templateMenu y aquí te muestro como ponerlo.
var menu = Menu.buildFromTemplate(templateMenu);
Menu.setApplicationMenu(menu);

packaje.json: Ejemplo de compilación

Un ejemplo que obtiene un fichero portable para para windows 32/64 bits (npm run dist) o uno para linux (npm run linux)
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder",
    "pack": "electron-builder --dir",
    "linux": "electron-builder -l"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^7.1.10",
    "electron-builder": "^22.3.2"
  },
  "build": {
    "appId": "my.app",
    "productName": "MyAPP",
    "buildVersion": "1.0.3",
    "copyright": "Your Company",
    "linux": {
      "target": "AppImage"
    },
    "win": {
      "icon": "build/ship.ico",
      "artifactName": "MyAPP.${ext}",
      "target": [
        {
          "target": "portable",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    }
  }
}

 

 

Deja una respuesta

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