Primera app con Electron, creando una ventana
Ya podemos empezar a trabajar según la el proyecto que creamos con Electron y Node; vamos a conocer en detalle y en la práctica los conceptos de "proceso principal" y "proceso de renderizado (página web)".
Veremos ahora, nuestro package.json con la dependencia de Electron:
package.json
{
"name": "electron-chat2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^20.0.3"
}
}En la raíz del proyecto, vamos a crear un archivo JS con el siguiente contenido:
index.js
const { app, BrowserWindow } = require('electron')
function createWindow() {
let win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile("index.html")
}
app.whenReady().then(createWindow)Primero, debe importar los objetos y las clases necesarios que nosotros vamos a usar para trabajar; Electron al usar Node, es bastante modular y por ende, importamos los elementos necesarios para trabajar con él, en este caso:
- Una referencia a un objeto del tipo BrowserWindow que va a instanciar y mostrar a sus usuarios.
- Con el objeto de app, controlador el ciclo de vida de la aplicación.
Después de eso, debemos esperar a que la aplicación esté lista para poder crear una pequeña ventana de 800 x 600 de tamaño (el tamaño especificado mediante new BrowserWindow({ width: 800, height: 600, })).
Finalmente, se carga y muestra el contenido del archivo index.html, que contiene el contenido principal de la aplicación de Electron:
win.loadFile("index.html")Aunque aún no hemos definido el archivo de index.html, como puedes suponer, este corresponde al proceso de renderizado o página web, recordemos que las páginas web, tienen la extensión de HTML.
La función de app.whenReady() Devuelve una promesa cuando se inicializa Electron (y por ende, está listo para hacer llamados al SO, en este caso, para crear una ventana).
Este archivo, como puedes suponer, en el proceso principal en el cual mantenemos la comunicación con el SO con la amplia API de funcionalidades que nos provee Electron, en este caso, la función que nos permite crear una ventana.
Ahora, necesitamos mostrar algo de Interfaz Gráfica al usuario, botones, textos, imágenes, etc, para esto, tenemos que trabajar en el proceso de renderizado o página web, que tal cual indica su nombre, viene siendo una página HTML que puede tener cualquier contenido HTML:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Electron</h1>
</body>
</html>Como puedes ver, en la página web anterior, podemos colocar cualquier tipo de contenido HTML, en este caso, un mensaje de bienvenida.
Ahora necesitamos un mecanismo con el cual ejecutar la aplicación y poder visualizar la ventana con el saludo; creamos el comando para ejecutar nuestra aplicación:
package.json
{
"name": "electron-chat2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^20.0.3"
}
}Y al ejecutar en la terminal del comando de:
$ npm run startRecuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
El siguiente paso es, avanzar en el desarrollo de la aplicación de Electron.js.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter