Do you want to switch to Platzi in English?
9

Desarrollando aplicaciones de escritorio con Electron.js

20657Puntos

hace 2 años

Curso de Electron: Apps de escritorio en Windows y Mac
Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

Aprende a crear aplicaciones para escritorio con JavaScript, HTML y CSS usando Electron, el framework desarrollado por GitHub para programar una sola vez y tener tus aplicaciones en Windows, Mac y Linux. Con Electron, lleva tus aplicaciones al siguiente nivel.

Electron.js es una plataforma para desarrollar aplicaciones de escritorio usando tecnologías web (HTML, CSS y JavaScript) creada y mantenida por Github. Electron.js funciona creando dos tipos de procesos, el proceso main y el proceso renderer. El primero es un proceso de Node.js, este es nuestro proceso principal, viene a ser nuestra aplicación en si misma, este proceso tiene acceso a varias API de Electron.js solo para este proceso que nos ayudan a comunicarnos con el SO y realizar distintas acciones o efectos.

El segundo (renderer) es un proceso de Chromium, con una diferencia, este Chromium tiene un Node.js incorporado y acceso a todos sus módulos y los que instalemos con npm (esto nos permitiría usar React.js, Angular.js, Polymer, etc. para desarrollar nuestra UI o cualquier otra librería básicamente), por lo que desde nuestrorenderer podemos usar módulos como fs para leer y escribir en el disco, o hacer peticiones a una base de datos directamente.

Además de acceder a los módulos de Node.js y npm, Electron.js nos da acceso a una pocas API en este proceso igual que hace con el procesomain.

electron-process

Desarrollando una aplicación

Para empezar a usar Electron.js lo primero que necesitamos es iniciar un proyecto con npm init e instalar la dependencia de desarrolloelectron-prebuilt. Esta dependencia nos permite iniciar nuestra aplicación de Electron.js con el comando electron .. Veamos como quedaría nuestro package.json luego de instalar todo:

{
	"name": "my-app",
	"version": "0.1.0",
	"description": "My first Electron.js application",
	"main": "app/index.js",
	"scripts": {
		"start": "electron ."
	},
	"devDependencies": {
		"electron-prebuilt": "1.3.3"
	}
}

Ahí tenemos nuestra dependencia de desarrollo instalada y el scriptstart que inicia la aplicación, también definimos que el entry point de nuestra aplicación va a ser el archivo index.js ubicado en la carpetaapp. Vamos entonces a crear este archivo y dentro vamos a colocar lo siguiente:

// de electron nos traemos app y BrowserWindowconst { app, BrowserWindow } = require('electron');

// definimos `window`, acá vamos a guardar la instancia de BrowserWindow actualletwindow;

// cuando nuestra app haya terminado de iniciar va a disparar el evento `ready`// lo escuchamos y ejecutamos la función `createWindow`
app.on('ready', createWindow);

// escuchamos el evento `window-all-closed` y si no estamos en Mac cerramos la aplicación// lo de Mac es debido a que en este SO es común que se pueda cerrar todas las ventanas sin cerrar// la aplicación completa
app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit();
	}
});

// definimos la función `createWindow`functioncreateWindow() {
	// instanciamos BrowserWindow, esto va a iniciar un proceso `renderer`window = new BrowserWindow({
		height: 768,
		width: 1024,
	});

	// le decimos a nuestro `renderer` que cargue un archivo que tenemos en `statics/index.html`// acá podríamos cargar cualquier URL, por ejemplo podríamos haber iniciado un servidor HTTP// y luego cargar la URL de este servidorwindow.loadURL(`file://${__dirname}/../statics/index.html`);

	window.on('closed', () => {
		// por último escuchamos el evento `closed` de la ventana para limpar la variable `window`// de esta forma permitimos matar la ventana sin matar al aplicaciónwindow = null
	});
}

Ese archivo va a ser nuestro proceso main (nuestra aplicación), cuando iniciemos Electron.js con el comando npm start vamos a iniciar este script, crear una ventana y abrir el archivostatics/index.html. Ya que tenemos todo esto, vamos a crear el HTML que vamos a cargar.

<htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Nuestra aplicación de Electron.jstitle>
head>
<body><mainid="app-container"><header><h1>Acabo de iniciar una app de Electron.jsh1>
		header>
	main>
body>
html>

Ese va a ser nuestro HTML inicial, ahora cuando iniciemos Electron.js vamos a ver una ventana en blanco con el mensaje: Acabo de iniciar una app de Electron.js Ahora vamos a incluir un poco de JS en el renderer y vamos hacer uso del módulo fs (directo en la ventana). Vamos a incluir una etiqueta script con el siguiente código:

<script>
	// importamos `fs` y `path`
	const { readFile } = require('fs');
	const { resolve } = require('path');
	// leemos el archivo `package.json` como utf-8
	readFile(resolve('./package.json'), 'utf8', (error, data) => {
    if (error) {
      // si hay un error lo mostramos en consola
      console.error(error);
      return error;
    }
    // si no escribimos el contenido del `package.json` en el HTML
    return document.write(data);
  });
<script>

Ahora simplemente recargamos la aplicación (si tenemos la ventana abierta podemos hacerlo como en una página web normal, para cambios en el proceso main es necesario pausar la aplicación y volverla a lanzar, si no tenemos algo que lo haga automático) y si no hay ningún error vamos a ver todo el contenido del package.json impreso en el HTML de nuestra aplicación.

Fijense como desde el mismo HTML usamos require para traernos dos módulos de Node.js y leer el archivo, gracias a que el proceso renderer es un Chromium+Node.js podemos combinar cualquier módulo que funcione en ambos para hacer aplicaciones. También ya que Electron.js trae Node.js v6 y la última versión de Chromium podemos usar (casi) todas las características de ECMAScript 2015 (solo faltan módulos) y sin necesidad de usar Babel, aunque si podríamos usarlos para otras funciones como Async/Await o soportar JSX si usamos React.js

Empaquetando la aplicación

Ahora que tenemos nuestra aplicación (super básica) vamos a empaquetarla para poder distribuirla, para esto nos tenemos que bajar electron-packager el cual nos permite generar los .app o .exe para nuestra aplicación (también soporta Linux sin problema).

Así que vamos a instalarlo como dependencia de desarrollo y luego vamos a crear el script build en el package.json con la siguiente línea:

electron-packager . --platform=darwin --arch=x64 --version=1.3.3 --ignores=node_modules/electron-* MyApp

Esta línea va a crear una aplicación llamada MyApp usando el contenido del path . (la raíz del proyecto) para la plataforma darwin (Mac, para Windows se usa win32, tanto para 32 como 64 bits), en la arquitectura x64, con la versión de Electron.js 1.3.3 (la última hasta el momento) e ignorando el todos los paquetes con el nombre electron- que haya en node_modules.

Una aclaración: es necesario correr electron-packager desde el SO para el que se quiere compilar.

Con esto vamos a tener nuestra aplicación enpaquetada y lista para ser distribuida. Hay otra opción que es usar electron-builder, este incluye más funciones que electron-packager, pero también te trata de hacer seguir una forma específica de crear y organizar tu aplicación.

Aplicaciones que usan Electron.js

Hay muchas aplicaciones populares usando Electron.js hoy en día, la principal (y la razón de que exista) es el editor Atom, de hecho Electron.js nació como atom-shell.

Otra aplicaciones son el cliente de chat Slack, el editor de Microsoft VisualStudio Code, la aplicación de escritorio de WordPress, el navegador Brave, la terminalHyperTerm y muchas, muchas más (varias open source).

Conclusión

Electron.js es una excelente, y cada vez más popular, plataforma para desarrollar aplicaciones de escritorio usando JavaScript, y gracias a que es el mismo lenguaje que la web podemos compartir módulos entre nuestro frontend y backend con nuestra aplicación de escritorio sin problemas permitiendo lo que antes se hacía con Java: Write once, run everywhere.

Aprende todo lo que puedes hacer con esta plataforma en el Curso de Electron: Apps Nativas en Windows y Mac.

Curso de Electron: Apps de escritorio en Windows y Mac
Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

Aprende a crear aplicaciones para escritorio con JavaScript, HTML y CSS usando Electron, el framework desarrollado por GitHub para programar una sola vez y tener tus aplicaciones en Windows, Mac y Linux. Con Electron, lleva tus aplicaciones al siguiente nivel.
Sergio Daniel
Sergio Daniel
@sergiodxa

20657Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
1
3348Puntos

Excelente artículo. Me gustaría saber como podemos hacer para “compilar” la aplicación en un solo archivo ejecutable en Linux.
Salvo en Mac: tanto en Linux como Windows tenemos una carpeta que dentro tiene archivos y desde la cual puedes acceder al código fuente. ¿Existe alguna forma de entregar un solo archivo que se ejecute desde cualquier máquina sin tener acceso a este código?

Gracias, un abrazo

1

Tengo una pregunta, si tengo un archivo .ASAR como lo puedo abrir? gracias

0

Buenas noches, mas que un comentario es una duda, me gustaría saber si electron permite la ejecucion como un servidor (hablando de ejemplo servidores locales como xampp, wampp) o se debe de crear el servidor para que permita la ejecucion de algunas funcionalidades que estoy usando en un desarrollo, espero me puedas responder lo mas pronto posible, por su atencion muchas gracias

1
20657Puntos
2 años

@icemancapohouse sí lo permite, podés hacerlo en el proceso main, pero no es tan seguro depender de eso en producción, sí podés en desarrollo.

0
304Puntos

Excelente artículo, pero tengo una pregunta el código fuente de la app realizada queda seguro o no?
Gracias…

0

Hola,
¿Podrías indicar cómo hacer la conexión a BBDD (por ejemplo, mysql) desde el proceso renderer?
Gracias!

0

Sergio una pregunta.
Después de tener un paquete .exe, puedo volver a desempaquetar el .exe? ya que por motivos de daño en mi HDD no tengo mi carpeta con los fuentes solo el .exe.
Agradezco si me puedes indicar o ponerme en el camino correcto.

0
893Puntos

se pueden crear aplicaciones para todas las plataformas? android, ios,etc? o seria mecor react o angular?

1
20657Puntos
2 años

Electron es para aplicaciones de escritorio nada más, de hecho podés usar React o Angular en Electron para tu UI. Electron solo va a permitirte crear la app de escritorio e integrarla con el sistema.

0

Perdon sergio acabo de colocar el comando de empaquetado en mi windows . solo que no logro encontrar el archivo.exe aun. ¿Donde se guarda por defecto?