¿Cómo crear una aplicación de escritorio con javascript y electrón?

Crear aplicaciones de escritorio con Javascript es una realidad con Electron.js.

Electron empaquetador de código que nos permite desarrollar aplicaciones de escritorio con HTML, CSS y Javascript, pudiendo así, implementar librerías y frameworks como vue, react, angular entre otros.

Lo genial de electron, es que podemos trabajar en un ambiente con node.js, un editor de códigos y nada más.

Preparando el entorno

Lo primero que vamos a hacer, es preparar el proyecto en node. Creamos el directorio en nuestro espacio de trabajo y ejecutamos el siguiente comando:

npm init

Sigue las instrucciones y te generará el archivo package.json.

También, crearemos archivos necesarios para completar nuestro proyecto. Nuestro directorio debería estar de la siguiente manera:

src/
- index.html
- style.css
package.json
main.js

Instalando las dependencias

Para instalar las dependencias necesarias, ejecutamos el siguiente comando:

npm i electron electron-packager -D

Cuando se instalen las dependencias, abrimos el archivo package.json y editamos el parámetro script de la siguiente manera:

{
  "name": "app-name",
  "version": "1.0.0",
  "description": "Electron app",
  "main": "main.js",
  "scripts": {
    "package": "electron-packager ."
  },
  "license": "MIT",
  "dependencies": {

  },
  "devDependencies": {
    "electron": "^4.0.1",
    "electron-packager": "^13.0.1"
  }
}

Creando la aplicación

Primero, vamos a importar los recursos…

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

Creamos un objeto para establecer la configuración de la ventana (Luego lo utilizaremos).

const browserWindowConfig = {
  width: 800,
  height: 600
}

Creamos un objeto, que nos servirá para crear el formato de url, para acceder al archivo index.html.

const urlFormat = {
  pathname: path.join(__dirname, 'src/index.html'),
  protocol: 'file',
  slashes: true
}

Crearemos una variable global mainWindow sin inicializar, este tendrá la instancia de la clase de la ventana, para tener control de ella.

let mainWindow;

Vamos a crear la función que maneje el control de la aplicación cuando este lista.

const onReadyCallback = () => {
  // code
}

Dentro de la función, hacemos la instancia de nuestra ventana y le pasamos por parámetro el objeto de configuración de la ventana.

mainWindow = new BrowserWindow( browserWindowConfig )

Le indicamos a nuestra ventana cual es el archivo html que va a mostrar.

mainWindow.loadURL( url.format( urlFormat ) )

Ahora le indicaremos a nuestra ventana, que cuando se cierre, termine la aplicación.

mainWindow.on('closed', () => {
  app.exit()
})

Si queremos y/o lo necesitamos, podemos hacer que se muestre la barra de herramientas de desarrollo.

mainWindow.webContents.openDevTools()

Nuestra función debería quedar algo así:

const onReadyCallback = () => {
  mainWindow = new BrowserWindow( browserWindowConfig )
  mainWindow.loadURL( url.format( urlFormat ) )
  mainWindow.on('closed', () => {
    app.exit()
  })
  mainWindow.webContents.openDevTools()
}

Ahora, le indicamos a nuestra aplicación que cuando esté lista, inicialice nuestra ventana

app.on('ready', onReadyCallback )

Ejecutando la aplicación

Ya nuestra aplicación ya puede ser empaquetada. Ya podemos ejecutar nuestro comando:

npm run package

Esto va a crear un directorio nuevo en nuestro proyecto con los archivos de la aplicación.

IMPORTANTE: con esto podemos crear aplicaciones de escritorio multiplataforma, por lo que para generar los archivos en una plataforma, debe generarse en un ambiente con el sistema operativo de la plataforma que se requiere, es decir, si queremos una app para linux, debemos ejecutar el projecto en un ambiente linux.

Si ejecutamos los archivos en linux, debe ejecutar el comando:

./<directorio-de-la-app>/<nombre-de-la-app>

Para Windows y Mac se crean los archivos ejecutables, los cuales se puede hacer doble click.

Artículos que podrían gustarte