15 49.0138 8.38624 1 0 4000 1 https://www.alexmedina.net 300 true 0
electron

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

2 Comments

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.

Contenido

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"
          ]
        }
      ]
    }
  }
}

 

 

Previous Post
pm2 save en Windows
Next Post
Importar credenciales en node-red (flows_cred.json)

2 Comments

  • 6 enero, 2021 at 5:22 pm
    Douglas A. García Peña

    Hola Alex, feliz año 2021. Necesito tu ayuda por favor.
    El caso es que hice una aplicación de escritorio con node.js Electron y en mi PC funciona excelente, cuando guardo en memoria y quiero abrir desde mi lapto abre en blanco, es decir, no carga la aplicación.
    Por favor necesito tu ayuda, de antemano mil gracias

    Reply
    • 7 enero, 2021 at 10:19 am
      alexmedina

      Hola Douglas, ¿Has comprobado que las rutas desde cargas los ficheros sean correctas? Ese problema de que «se quede en blanco» puede ser por eso. Sino otra opción es habilitar la consola de depuración en Electron y ver lo que esta dando error al igual que harías en el navegador.

      Reply

Leave a Reply

SOBRE MÍ

Afortunado de trabajar en lo que me gusta, aprendiendo cada día cosas nuevas y ayudando a crear proyectos.
Conocimientos en diversas tecnologías y experiencia demostrable.
¿Nos ponemos manos a la obra?

Mis Apuntes