Volver a la página principal
lunes 30 diciembre 2024
4

Cómo crear un proyecto en Electron

Aprende a crear un proyecto en Electron, un framework que permite construir aplicaciones de escritorio multiplataforma usando tecnologías web como HTML, CSS y JavaScript. Sigue esta guía paso a paso para iniciar tu aplicación fácilmente.

Introducción a Electron

Electron es un framework desarrollado por GitHub que combina Chromium y Node.js para construir aplicaciones de escritorio que funcionan en Windows, macOS y Linux. Se utiliza ampliamente para aplicaciones como Visual Studio Code, Slack y Discord.

Pasos para crear un proyecto en Electron

1. Instalar Node.js y npm

Asegúrate de tener Node.js y su gestor de paquetes, npm, instalados en tu máquina. Descárgalos desde Node.js.

2. Crear un directorio para tu proyecto

Abre tu terminal y ejecuta los siguientes comandos: 

mkdir mi-proyecto-electron
   cd mi-proyecto-electron

3. Inicializar un proyecto Node.js

Usa el comando npm init para generar un archivo package.json: 

npm init -y

4. Instalar Electron

Instala Electron como dependencia de desarrollo: 

npm install electron --save-dev

5. Configurar el archivo principal de tu aplicación

Crea un archivo main.js con el siguiente contenido básico: 

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

   let mainWindow;

   app.on('ready', () => {
       mainWindow = new BrowserWindow({
           width: 800,
           height: 600,
           webPreferences: {
               nodeIntegration: true,
           },
       });

       mainWindow.loadFile('index.html');
   });

   app.on('window-all-closed', () => {
       if (process.platform !== 'darwin') {
           app.quit();
       }
   });

6. Crear un archivo HTML

Crea un archivo index.html en el mismo directorio: 

<!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Mi App Electron</title>
   </head>
   <body>
       <h1>¡Hola desde Electron!</h1>
   </body>
   </html>

7. Agregar un script de inicio en package.json

Modifica package.json para incluir el script de inicio: 

"scripts": {
       "start": "electron ."
   }

8. Iniciar la aplicación

Ejecuta tu aplicación con: 

npm start

Ejemplos prácticos

  • Aplicaciones simples de cronómetro.
  • Reproductores multimedia personalizados.
  • Interfaces gráficas para herramientas de línea de comandos.

Documentación oficial

Para más información, visita la documentación oficial de Electron.

Etiquetas:
javascript nodejs electron
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer