Tutorial Corregido: Crear Aplicación de Escritorio con Electron

Te guiaré paso a paso con las correcciones necesarias para que funcione correctamente.

📋 Paso 1: Instalar Node.js (Si aún no lo tienes)

1. Ve a nodejs.org
2. Descarga la versión LTS (recomendada)
3. Instálala siguiendo el asistente
4. Verifica la instalación:

• Abre terminal (Windows: Windows + R → cmd → Enter)
• Escribe: node --version
• Deberías ver algo como: v18.17.0

📁 Paso 2: Crear Estructura de Carpetas CORREGIDA

1. En tu Escritorio, crea una carpeta llamada: mi-aplicacion-condominio
2. NO crees subcarpetas adicionales – los archivos irán directamente aquí

📄 Paso 3: Crear los Archivos en la Carpeta Principal

Archivo 1: package.json

Crea este archivo directamente en mi-aplicacion-condominio/:

{
  "name": "mi-aplicacion-condominio",
  "version": "1.0.0",
  "description": "Sistema de Administración de Condominios",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Tu Nombre",
  "license": "MIT",
  "devDependencies": {
    "electron": "^22.0.0"
  }
}

Archivo 2: main.js

Crea este archivo directamente en mi-aplicacion-condominio/:

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // Cargar tu archivo HTML
  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Archivo 3: index.html

Crea este archivo directamente en mi-aplicacion-condominio/ y copia TODO tu código HTML aquí.

🔧 Paso 4: Instalar Dependencias

1. Abre terminal/CMD
2. Navega a tu carpeta:

   cd Desktop/mi-aplicacion-condominio

3. Instala Electron:

   npm install

4. Espera a que termine la instalación

🎯 Paso 5: Probar la Aplicación

En la misma terminal, ejecuta:

npm start

¡Tu aplicación debería abrirse correctamente!

📂 Estructura Final CORRECTA:

mi-aplicacion-condominio/
├── index.html          ← TU CÓDIGO HTML AQUÍ
├── main.js             ← Archivo de Electron
├── package.json        ← Configuración
├── package-lock.json   ← (Se crea automáticamente)
└── node_modules/       ← (Se crea automáticamente)

❗ Puntos Clave Corregidos:

1. ✅ NO usar carpeta src – Los archivos van directamente en la carpeta principal
2. ✅ package.json apunta a "main": "main.js" (sin rutas complicadas)
3. ✅ main.js busca index.html en la misma carpeta
4. ✅ Estructura simple – Sin rutas relativas complicadas

🛠 Si Encuentras Problemas:

Verifica que tengas esta estructura exacta:

cd Desktop/mi-aplicacion-condominio
dir

Deberías ver:

• index.html
• main.js
• package.json
• node_modules/ (carpeta)

Comandos de verificación:

# Verificar archivos
dir

# Verificar que Node.js funciona
node --version

# Verificar que npm funciona
npm --version

# Instalar dependencias (si es necesario)
npm install

# Ejecutar la aplicación
npm start