Electron: Si puedes crear una pagina web, puedes crear una Aplicación de escritorio - Primeros Pasos.

febrero 01, 2017
141
542
42

andre

Ing Informática

Sabes con que framework están programadas muchas de las mejores app de escritorio de la actualidad? Aplicaciones como el editor de código Atom, la famosa app de mensajería Slack, el IDE de Microsoft Visual Studio. Pues bueno todas estas grandiosas apps están codificadas usando este grandioso Framework.

Electron usa Chromium y Node.js así que puedes crear una app con HTML, CSS y JAVASCRIPT tal cual como una página web. También es OPEN SOURCE así que puedes encontrar el código en github y ver la grandiosa comunidad detrás de este gran proyecto. Además de esto como lo dice en el titulo de esta entrada es CROSS-PLATFORM es decir que puedes exportar tu proyecto a cualquier sistemas operativo como Windows, Mac o Linux.

Electron facilita muchas de las grandes dificultades al momento de programar una Aplicacion de escritorio, como:

Actualizaciones automaticas
Menus nativos
Reportes cuando la app no responde
Depuración
Instalador para Windows

Si puedes construir un Sitio Web, puedes construir una App.
- electron team. -

Vamos a crear una app sencilla, mostrare los pasos y al final de esta entrada colocare un video que hemos subido a nuestro canal de youtube (no olviden suscribirse)

Show me the code!

Vamos a crear una App sencilla que nos muestra el famoso "Hello World" dentro una ventana y abriremos una ventana secundaria exportando funciones dentro del proceso principal de electron.

Bueno lo primero que tienes que hacer es tener los paquetes npm instalados en tu sistema operativo estos vienen cuando instalas node.js, puedes descargarlo e instalarlo desde su pagina oficial aqui

Luego dentro de tu consola, sitúate en una carpeta de tu preferencia para crear el proyecto electron y ejecuta el siguiente comando:

npm init

Seguido de esto instalamos electron dentro de nuestra carpeta de trabajo:

npm install electron

Al finalizar trabajo del comando, el framework será descargado dentro de tu carpeta node_module

El siguiente paso es agregar nuestro archivo principal main.js dentro de la raíz de nuestra carpeta y agregamos el siguiente código:

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

const path = require('path')
const url  = require('url')

let win

function createWindow(){
	win = new BrowserWindow ({width: 800, height:600})
	win.loadURL(url.format({
		pathname: path.join(__dirname, 'index.html'),
		protocol: 'file',
		slashes: true
	}))

	win.webContents.openDevTools()
}

exports.openWindow = () => {
	let newWin = new BrowserWindow ({width: 400, height:200})
	newWin.loadURL(url.format({
		pathname: path.join(__dirname, 'enupal.html'),
		protocol: 'file',
		slashes: true
	}))
}

app.on('ready', createWindow)

Como pueden ver en nuestro archivo main.js ejecutara el proceso principal de nuestra aplicación aquí podemos ejecutar el ciclo de vida de nuestra aplicación. Creamos nuestra variable electron la cual contiene nuestro objeto de nuestro framework. Y también creamos un objeto BrowserWindow para agregar las diferentes pantallas de nuestro aplicación. BrowserWindow será al final una ventana como la de nuestro explorador Chrome. Agregamos una función createWindow() para agregar la ventana a nuestra aplicación cuando este lista con app.on('ready', createWindow) y finalmente hemos exportado una funcion para que puede ser llamada desde el front-end que abrira una ventana secundaria a nuestra app luego de presionar un boton.

Lo siguiente que tenemos que hacer es agregar los archivos html que hemos cargado a nuestro BrowserWindow en este caso index.html y enupal.html este ultimo sera nuestra ventana secundaria.

El codigo para index.html es:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello Electron</title>
</head>
<body>
	<h1> Hello world</h1>
		<script> require('./index.js') </script>
</body>
</html>

Como aprecian en nuestra ventana principal, mostramos el famoso "Hello World" y agregamos un archivo javascript que llamara la función que hemos exportado desde nuestro proceso principal y abrirá nuestra ventana secundaria

El código del archivo index.js es el siguiente:

const remote = require('electron').remote
const main = remote.require('./main.js')

let button = document.createElement('button')
button.textContent = "Open Window"
document.body.appendChild(button)

button.addEventListener('click', () => {
	main.openWindow()
})

Simplemente llamamos a electron remote para agregar la función que hemos exportado y poderla invocar al hacer click en nuestro boton de la pantalla principal.

El código para nuestra ventana secundaria enupal.html es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Enupal</title>
</head>
<body>
	<h2>Hello world from ENUPAL</h2>
</body>
</html>

Eso seria todo! fácil eh? para ejecutar y probar nuestra primera aplicación solo falta agregar el comando start para que ejecute nuestro archivo principal main.js esto lo hacemos dentro de nuestro archivo package.json al final lucirá asi:

{
  "name": "enupal-electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start" : "electron main.js"
  },
  "author": "",
  "license": "ISC"
}

Finalmente para ejecutar nuestra aplicacion electron simplemente ejecutamos en nuestra consola el siguiente comando:

npm start

Eso es todo! si tienes alguna duda aquí te dejamos el vídeo que hemos creado para esta aplicación en nuestro canal de youtube, espero sea de ayuda nos vemos en la próxima!