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.
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
win.loadFile('app/index.html') win.loadURL('http://127.0.0.1/test/')
var menu = Menu.buildFromTemplate(templateMenu); Menu.setApplicationMenu(menu);
packaje.json: Ejemplo de compilación
{ "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" ] } ] } } } |