Практический проект Electron

С помощью практических проектов вы сможете углубить понимание различных возможностей Electron, включая управление окнами, IPC-взаимодействие, операции с файлами, хранение данных и оптимизацию интерфейса.

Проект 1: настольное приложение для заметок

Проектирование функциональности

  • Создание, редактирование и удаление заметок
  • Автосохранение и локальное хранение
  • Поддержка одновременного редактирования в нескольких окнах
  • Чистый интерфейс, обеспечивает рендеринг Markdown

Выбор технологий

  • Фронтенд-фреймворк: Vue или React
  • Процесс рендеринга: отображает содержимое заметок, поддерживает форматированный текст / Markdown
  • Хранение данных：electron-storeСохранение данных заметок
  • главный процесс: Управление окнами, меню и сочетаниями клавиш
  • Взаимодействие по IPC: Процесс рендеринга запрашивает у главного процесса чтение или сохранение данных

Шаги реализации

1. Создайте проект Electron

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

2. Главный процесс main.js

Пример

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: Чтение заметок
ipcMain.handle('get-notes', () => store.get('notes', []))
// IPC: Сохранение заметок
ipcMain.handle('save-notes', (event, notes) => store.set('notes', notes))

3. Скрипт предзагрузки preload.js

Пример

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

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

4. Процесс рендеринга index.html

Пример

<!DOCTYPE html>
<html>
  <body>
    <textarea id="note"></textarea>
    <button id="saveBtn">Сохранить</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('Saved successfully')
      })
    </script>
  </body>
</html>

Пояснение кода

  • electron-store: Отвечает за локальное хранение данных, автоматически сериализует JSON
  • ipcMain.handle / ipcRenderer.invoke: Реализует взаимодействие между процессом рендеринга и главным процессом
  • contextBridge: Безопасно предоставляет API процессу рендеринга
  • textarea + Button: Просто реализовать редактирование и сохранение содержимого заметок

Проект 2: Файловый менеджер

Дизайн интерфейса

  • Дерево каталогов слева, список файлов справа
  • Поддерживает файловые операции: создание, удаление, переименование
  • Перетаскивание файлов в целевую директорию
  • Простая функциональность поиска и сортировки

Реализация файловых операций

  • Модуль fs Node.js: чтение, запись и удаление файлов
  • модуль path: Обработка путей
  • Взаимодействие по IPC: процесс рендеринга запрашивает у главного процесса выполнение файловых операций

Пример

// Основной процесс 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))

Пример

// процесс рендеринга
window.api.readDir('/Users/username/Documents').then(files => {
  console.log(files)
})

Функциональность перетаскивания

  • Прослушивание процесса рендерингаdragstartиdropEvents
  • Использование главного процессаfs.renameилиfs.copyFileПеремещение файлов

Пример

// Событие drop в процессе рендеринга
const dropArea = document.getElementById('fileList')
dropArea.addEventListener('drop', (event) => {
  event.preventDefault()
  const filePath = event.dataTransfer.files[0].path
  window.api.moveFile(filePath, targetDir)
})

Оптимизация производительности

  • Используйте асинхронное чтение для больших каталогов, чтобы не блокировать процесс рендеринга
  • Виртуализация списка файлов снижает нагрузку на рендеринг DOM
  • Используйте пакетные обновления или Web Workers для частых операций

Итог

С помощью этих двух практических проектов вы сможете освоить:

  • Работа с окнами и многопроцессное взаимодействие: родительские и дочерние окна, IPC
  • Локальное хранение данных: electron-store, fs
  • Оптимизация интерфейса и производительности: виртуальный список, ленивая загрузка, асинхронная обработка
  • Интеграция нативных функций: файловые операции, перетаскивание, меню и сочетания клавиш

Эти проекты могут служить базовыми шаблонами для последующей разработки сложных десктопных приложений, помогая быстро создавать многофункциональные приложения Electron.

Другие расширения