Tutorial para crear tu primera aplicación con Electron
El Valor de Electron: Uniendo la Web y el Escritorio Nativo
Electron no es solo una excelente opción para crear aplicaciones web que se comporten como aplicaciones de escritorio nativas; también es una solución formidable para construir una GUI alrededor de aplicaciones que, de otro modo, estarían limitadas a una interfaz de línea de comandos (CLI).
Rompiendo las Barreras del Navegador
Supongamos que deseas crear una aplicación que te permita ver y editar una carpeta de imágenes directamente en tu computadora.
Aplicaciones de Navegador Tradicionales: Estas aplicaciones no pueden acceder al sistema de archivos. No podrían acceder al directorio de fotografías, cargar ninguna de las imágenes ni guardar los cambios que realices. .
Solo Node.js: Con Node, podrías implementar todas esas funciones de acceso al sistema y manejo de archivos. Sin embargo, no podrías proporcionar una GUI, lo que dificultaría enormemente el uso de tu aplicación para el usuario promedio.
Al combinar el entorno del navegador (Chromium) con Node.js, puedes usar Electron para crear una aplicación donde puedes abrir y editar fotografías, además de proporcionar una interfaz de usuario visual e intuitiva para hacerlo.
✨ Simpleza y Flexibilidad
Electron no es un framework complicado; es un tiempo de ejecución (runtime) simple. De manera similar a cómo usas Node desde la línea de comandos, puedes ejecutar aplicaciones de Electron utilizando la herramienta de línea de comando de Electron. No necesitas aprender convenciones complejas para comenzar y tienes total libertad para estructurar tu aplicación como mejor te parezca.
Crear un proyecto en Electron.js
Ahora vamos a crear una aplicación típica de hola mundo con Electron y la ejecutaremos para mostrarla en una ventana de una aplicación.
En su espacio de trabajo, vamos a crear una carpeta para el proyecto que vamos a llevar a cabo:
$ mkdir <project-name>Por ejemplo:
$ mkdir chat-app
$ cd chat-appEn este punto, puedes arrastrar la carpeta anterior a tu VSC o editor de preferencia para empezar a trabajar sobre este proyecto, un proyecto que de momento esta completamente vacío; ahora, necesitamos inicializar nuestro nuevo proyecto con la herramienta NPM usando el siguiente comando:
$ npm initEl comando anterior inicializa un proyecto en Node y nos generará el archivo de package.json; el cual contiene metadatos del proyecto, así como comandos, número de versión, dependencias, entre otros:
package.json
{
"name": "electron-chat2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",
"license": "ISC",
}Ya con esto, podemos instalar nuestro Electron.js con el siguiente comando:
$ npm i -D electron@latestCon el comando anterior, instalamos la última versión del popular framework ya listo para desarrollar aplicaciones; recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
Reederizar una ventana
Índice de contenido
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
HTML y un poco de CSS
Una aplicación básica en Electron.js, es puro HTML tal cual mostramos antes, claro está, que este HTML podemos colocarle integración con Electron para dotar a la misma con funcionalidades del sistema operativo como menús, manejo de ventanas, etc, pero, todo comienza con una sencilla página 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>
<style>
body {
background-color: purple;
}
h1 {
text-align: center;
}
#customId{
display: block;
width: 100%;
}
section{
background-color: #FFF;
font-family: Georgia;
padding: 25px;
margin-top: 10px;
}
</style>
</head>
<body>
<main>
<h1>Page Detail</h1>
<img id="customId" src="https://cdn.pixabay.com/photo/2022/08/16/20/02/wallpaper-7391054__340.jpg" alt="">
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
</section>
</main>
</body>
</html>En este ejemplo como puedes ver, estamos colocando contenido HTML y CSS, los cuales son las piezas fundamentales en cualquier desarrollo web y en Electron, no puede ser la excepción al ejecutar la aplicación, tendremos:
Recuerda que el código del main.js es la misma que la utilizada en la primera aplicación. Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
Importar Bootstrap 5 en Electron.js
Electron.js, al ser una aplicación web en sus bases, podemos utilizar todo tipo de librerías, tooltip, etc, como en este caso, es el de Bootstrap:
Para ello, tenemos el siguiente comando que debemos de ejecutar sobre el proyecto en Electron generado anteriormente:
$ npm install bootstrapY con el comando anterior, ya tenemos Bootstrap listo en el proyecto, para configurarlo tenemos varias formas, en esta oportunidad, vamos a cargar Bootstrap en base a una importación al mismo en un archivo CSS:
css/index.css
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";El cual usaremos, desde nuestra página 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>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<button class="btn btn-primary">Button</button>
</body>
</html>Y eso seria todo, ya con esto, podemos utilizar Bootstrap sin problemas, si quieres utilizar otra librería como Tailwind o similares, son los mismos pasos que debes de seguir:
- Instalar el paquete en Node
- Crear un archivos CSS en el cual coloques las dependencias de la librería
- Cargar el archivo anterior en tu archivo HTML.
Lo siguiente que veremos es cómo activar el devtool en el navegador con Electron.js
Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
Caja de texto, app tipo chat
En este apartado, vamos a crear un listado de mensajes o chats, el cual, será una estructura similares a la de listado de contactos construida en la anterior entrada:
<div class="col-8" id="right">
<div class="d-flex chat">
<div class="w-25 d-flex align-items-end justify-content-end">
<img class="rounded-pill me-3 avatar" width="60"
src="https://randomuser.me/api/portraits/men/17.jpg">
</div>
<div class="w-75">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
</div>
</div>
<p class="small text-muted">8:45 PM</p>
</div>
</div>
<div class="d-flex chat">
<div class="w-75 ">
<div class="card bg-dark">
<div class="card-body text-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
</div>
</div>
<p class="small text-muted float-end">9:17 AM</p>
</div>
<div class="w-25 d-flex align-items-end">
<img class="rounded-pill ms-3 avatar" src="https://randomuser.me/api/portraits/men/19.jpg">
</div>
</div>
</div>Y usaremos el siguiente CSS:
css/style.css
#right {
background-color: #333;
***
}
.chat {
margin-top: 8px;
}
.chat img.avatar {
width: 50px;
height: 50px;
}Con esto, quedará de la siguiente manera:
Lo siguiente que vamos a crear, es un listado de chats.
Anteriormente creamos el listado de mensajes para la aplicación, ahora vamos a crear la caja de texto, que es, donde colocaremos los mensajes, estará compuesta de dos columnas, una de ellas de tamaño automático para que ocupe solamente el tamaño necesario; en el de tamaño fijo, colocamos el TEXTAREA con el redondeado en las esquinas:
<div class="col-8" id="right">
*** CHATS
<form action="" class="form-message">
<div class="row">
<div class="col">
<textarea class="form-control rounded-pill"></textarea>
</div>
<div class="col-auto">
<button class="btn btn-primary rounded-circle send-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
</svg>
</button>
</div>
</div>
</form>
</div>Y usaremos el siguiente CSS:
css/style.css
.form-message{
margin-top: 15px;
}
.form-message button.send-button svg {
width: 40px;
height: 40px;
}
.form-message textarea{
overflow: hidden;
resize: none;
}Para la aplicación de chat que estamos llevando a cabo y ya instalado Bootstrap 5 en el proyecto en Electron.js, consta de dos secciones, una para cada columna, una para el listado de contactos y otra para el detalle del chat.
Contactos
Para la columna de contactos, definiremos un listado de UL con sus LI, en la cual, en el LI colocaremos una carta, en pocas palabras, para cada contacto, corresponde a una carta de Bootstrap; aparte de esto, colocaremos datos típicos de un contacto como imagen, nombre, último contacto y cantidad de chats que alineamos usando los flex y sus propiedades relacionadas. Finalmente, usaremos los flexs de HTML para alinear el contenido en filas para la imagen y contenido del último contacto:
<div class="col-4" id="left">
<ul class="contact list-unstyled mb-0 mt-2">
<li class="p-2 card ">
<div class="card-body">
<div class="d-flex">
<div>
<img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/women/56.jpg">
</div>
<div>
<p class="fw-bold mb-0 text-light">Alex Alexis</p>
<p class="small text-muted">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
</li>
<li class="p-2 card mt-2">
<div class="card-body">
<div class="d-flex">
<div>
<img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/men/96.jpg">
</div>
<div>
<p class="fw-bold mb-0 text-light">Eli Barrett</p>
<p class="small text-muted">Lorem ipsum dolor sit amet...</p>
</div>
<div>
<p class="small text-muted">5 min ago</p>
<span class="badge bg-danger rounded-pill float-end">2</span>
</div>
</div>
</div>
</li>
<li class="p-2 card mt-2">
<div class="card-body">
<div class="d-flex">
<div>
<img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/men/17.jpg">
</div>
<div>
<p class="fw-bold mb-0 text-light">Ramon Reed</p>
<p class="small text-muted">Lorem ipsum dolor sit amet...</p>
</div>
<div>
<p class="small text-muted">2 days ago</p>
<span class="badge bg-danger rounded-pill float-end">1</span>
</div>
</div>
</div>
</li>
<li class="p-2 card mt-2">
<div class="card-body">
<div class="d-flex">
<div>
<img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/women/83.jpg">
</div>
<div>
<p class="fw-bold mb-0 text-light">Kylie Young</p>
<p class="small text-muted">Lorem ipsum dolor sit amet...</p>
</div>
<div>
<p class="small text-muted">1 week ago</p>
<span class="badge bg-danger rounded-pill float-end">4</span>
</div>
</div>
</div>
</li>
</ul>
</div>Y un CSS personalizado:
#left {
background-color: #111;
***
}
.contact .card {
background-color: #333;
}El siguiente paso es conocer como el Proceso Principal y el Proceso de Renderizado en Electron JS.
Acepto recibir anuncios de interes sobre este Blog.
Descubre cómo crear tu primera ventana en una aplicación de escritorio moderna con Electron.js. Este framework de JavaScript te permite desarrollar software multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript.