Como Hacer Aplicaciones Con Electron
2 min read
Electron es una plataforma de desarrollo de aplicaciones de escritorio que permite crear aplicaciones multiplataforma usando tecnologías web como HTML, CSS y JavaScript. En este artículo, se explicará cómo crear aplicaciones de escritorio utilizando Electron.
- Instalación de Electron Para empezar, necesitarás instalar Electron en tu ordenador. Puedes hacerlo de varias maneras, pero una forma común de hacerlo es a través de Node.js y npm. Si no tienes Node.js instalado, descárgalo e instálalo desde el sitio web oficial de Node.js. Una vez que tengas Node.js, abre la terminal y escribe el siguiente comando para instalar Electron:
npm install electron –save-dev
Este comando instalará la última versión de Electron y la agregará a las dependencias de desarrollo de tu proyecto.
- Estructura del proyecto Para crear una aplicación con Electron, necesitarás crear una estructura de proyecto básica. En primer lugar, crea una carpeta para tu proyecto y luego crea un archivo package.json en la carpeta raíz de tu proyecto. El archivo package.json es un archivo de configuración que contiene información sobre tu proyecto, incluyendo sus dependencias.
{
“name”: “mi-aplicacion-electron”,
“version”: “1.0.0”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
},
“dependencies”: {
“electron”: “^12.0.0”
}
}
En este archivo, especifica el nombre y la versión de tu proyecto, así como la versión de Electron que deseas utilizar. También se especifica el archivo principal de tu proyecto (main.js) y un script de arranque que ejecutará tu aplicación (npm start).
- Creación de la ventana principal El siguiente paso es crear una ventana principal para tu aplicación. Crea un archivo main.js en la carpeta raíz de tu proyecto y agrega el siguiente código:
const { app, BrowserWindow } = require(‘electron’)
function createWindow () {
// Crea una ventana del navegador.
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// y carga el archivo index.html de la aplicación.
win.loadFile(‘index.html’)
// Abre las herramientas de desarrollo.
win.webContents.openDevTools()
}
// Este método se llamará cuando Electron haya terminado
// la inicialización y esté listo para crear ventanas de navegador.
// Algunas APIs solo se pueden usar después de que se haya producido este evento.
app.whenReady().then(createWindow)
Este código crea una nueva ventana utilizando la clase BrowserWindow de Electron y carga el archivo index.html en la ventana. También abre las herramientas de desarrollo de la ventana para que puedas depurar tu aplicación.
- Creación de la interfaz de usuario Ahora, necesitas crear la interfaz de usuario de tu aplicación. Para hacer esto, crea un archivo index.html en la carpeta raíz de tu proyecto y agrega el siguiente código HTML básico:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Mi Aplicación Electron</title>
</head>
<body>
<h1>Bienvenido a Mi Aplicación Electron</h1>
</body>
