Proyectos prácticos de Electron

A través de los proyectos prácticos, se puede profundizar en la comprensión de las diversas características de Electron, incluyendo la gestión de ventanas, la comunicación IPC, las operaciones de archivos, el almacenamiento de datos y la optimización de la interfaz.

Proyecto 1: Aplicación de notas de escritorio

Diseño de funcionalidades

  • Crear, editar y eliminar notas
  • Guardado automático y almacenamiento local
  • Soporte para edición simultánea en múltiples ventanas
  • Interfaz limpia y renderizado de Markdown

Selección de tecnología

  • Framework de frontend: Vue o React
  • Proceso de renderizado: Muestra el contenido de las notas, admite texto enriquecido / Markdown
  • Almacenamiento de datos：electron-storeGuardar datos de las notas
  • Proceso principal: Gestiona ventanas, menús y atajos de teclado
  • Comunicación IPC: El proceso de renderizado solicita al proceso principal leer o guardar datos

Pasos de implementación

1. Crear el proyecto de Electron

mkdir electron-notes
cd electron-notes
npm init -y
npm install electron electron-store

2. Proceso principal main.js

Ejemplo

const { app, BrowserWindow, ipcMain } = require('electron')
const Store = require('electron-store')
const store = new Store()

let mainWindow

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: `${__dirname}/preload.js`
    }
  })
  mainWindow.loadFile('index.html')
})

// IPC: Leer nota
ipcMain.handle('get-notes', () => store.get('notes', []))
// IPC: Guardar nota
ipcMain.handle('save-notes', (event, notes) => store.set('notes', notes))

3. Script de precarga preload.js

Ejemplo

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('api', {
  getNotes: () => ipcRenderer.invoke('get-notes'),
  saveNotes: (notes) => ipcRenderer.invoke('save-notes', notes)
})

4. Proceso de renderizado index.html

Ejemplo

<!DOCTYPE html>
<html>
  <body>
    <textarea id="note"></textarea>
    <button id="saveBtn">Guardar</button>

    <script>
      const textarea = document.getElementById('note')
      const btn = document.getElementById('saveBtn')

      window.api.getNotes().then(notes => {
        textarea.value = notes.join('\n\n')
      })

      btn.addEventListener('click', async () => {
        await window.api.saveNotes([textarea.value])
alert('Guardado exitosamente')
      })
    </script>
  </body>
</html>

Análisis de código

  • electron-store: Se encarga del almacenamiento local de datos, serializando automáticamente JSON
  • ipcMain.handle / ipcRenderer.invoke: Implementa la comunicación entre el proceso de renderizado y el proceso principal
  • contextBridge: Expone de forma segura la API al proceso de renderizado
  • textarea + botón: Implementa de forma sencilla la edición y el guardado del contenido de las notas

Proyecto 2: Administrador de archivos

Diseño de interfaz

  • Árbol de directorios a la izquierda, lista de archivos a la derecha
  • Soporta operaciones de archivos: crear, eliminar, renombrar
  • Arrastrar archivos al directorio de destino
  • Funciones sencillas de búsqueda y ordenación

Implementación de operaciones con archivos

  • Módulo fs de Node.js: Leer, escribir y eliminar archivos
  • Módulo path: Manejo de rutas
  • Comunicación IPC: El proceso de renderizado solicita al proceso principal realizar operaciones con archivos

Ejemplo

// Proceso principal main.js
const fs = require('fs')
const path = require('path')

ipcMain.handle('read-dir', (event, dirPath) => fs.readdirSync(dirPath))
ipcMain.handle('create-file', (event, filePath) => fs.writeFileSync(filePath, ''))
ipcMain.handle('delete-file', (event, filePath) => fs.unlinkSync(filePath))

Ejemplo

// Proceso de renderizado
window.api.readDir('/Users/username/Documents').then(files => {
  console.log(files)
})

Función de arrastrar y soltar

  • El proceso de renderizado escuchadragstartydropel evento
  • El proceso principal usafs.renameofs.copyFilemover archivos

Ejemplo

// Evento drop del proceso de renderizado
const dropArea = document.getElementById('fileList')
dropArea.addEventListener('drop', (event) => {
  event.preventDefault()
  const filePath = event.dataTransfer.files[0].path
  window.api.moveFile(filePath, targetDir)
})

Optimización de rendimiento

  • Para directorios grandes, usar lectura asíncrona para evitar bloquear el proceso de renderizado
  • Virtualizar la lista de archivos para reducir la carga de renderizado del DOM
  • Usar actualizaciones por lotes o Web Workers para operaciones frecuentes

Resumen

Con estos dos proyectos prácticos, podrás dominar:

  • Comunicación entre ventanas y multiproceso: Ventanas padre-hijo, IPC
  • Almacenamiento de datos local：electron-store、fs
  • Optimización de interfaz y rendimiento: Listas virtuales, carga diferida, procesamiento asíncrono
  • Integración de funciones nativas: Operaciones de archivos, arrastrar y soltar, menús y atajos de teclado

Estos proyectos pueden servir como plantillas base para el desarrollo posterior de aplicaciones de escritorio complejas, ayudando a crear rápidamente aplicaciones Electron con todas las funciones.

Otras extensiones