Electron: Создаем кроссплатформенное десктопное приложение на Node.js и JavaScript
Введение
Electron — фреймворк, позволяющий создавать нативные десктопные приложения, используя веб-технологии: HTML, CSS и JavaScript. Под капотом Electron объединяет среду выполнения Node.js и рендер движок Chromium. Такие приложения, как Visual Studio Code, Slack и Discord, построены на Electron.
Как это работает?
Electron-приложение состоит из двух основных процессов:
-
Главный процесс (Main Process): Управляет жизненным циклом приложения, создает окна. Работает в среде Node.js.
-
Процесс рендерера (Renderer Process): Отображает пользовательский интерфейс (ваш HTML/CSS/JS). Это обычная веб-страница, запущенная в Chromium.
Пример: Простой менеджер задач (To-Do List)
Создадим простое приложение для управления списком задач.
-
Инициализация проекта:
mkdir my-electron-todo
cd my-electron-todo
npm init -y
2. Установка Electron:
npm install —save-dev electron
3. Изменение package.json:
Добавьте точку входа для приложения.
{
«name»: «my-electron-todo»,
«version»: «1.0.0»,
«description»: «»,
«main»: «main.js», // Указываем главный файл
«scripts»: {
«start»: «electron .», // Добавляем скрипт для запуска
«test»: «echo \»Error: no test specified\» && exit 1″
},
«devDependencies»: {
«electron»: «^28.0.0»
}
}
4. Создание главного процесса (main.js):
// Подключаем модули Electron
const { app, BrowserWindow } = require(‘electron’);
const path = require(‘path’);// Функция для создания главного окна приложения
function createWindow() {
// Создаем окно браузера
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // Разрешаем использовать Node.js в процессе рендерера
contextIsolation: false // Для простоты примера отключаем изоляцию контекста
}
});// Загружаем файл index.html в окно
mainWindow.loadFile(‘index.html’);// Опционально: открываем инструменты разработчика
// mainWindow.webContents.openDevTools();
}// Этот метод будет вызван, когда Electron закончит инициализацию
app.whenReady().then(createWindow);// Выйти, когда все окна закрыты (кроме macOS)
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit();
}
});// На macOS приложение перезапускается, когда пользователь кликает на иконку в доке
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
5. Создание интерфейса (index.html):
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>My Electron To-Do List</title>
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
#taskInput { padding: 10px; width: 300px; }
button { padding: 10px 15px; margin-left: 10px; }
ul { list-style: none; padding: 0; }
li { padding: 8px; background: #f4f4f4; margin-bottom: 5px; display: flex; justify-content: space-between; }
.delete-btn { background: red; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Мой Список Задач</h1>
<div>
<input type=»text» id=»taskInput» placeholder=»Введите новую задачу…»>
<button onclick=»addTask()»>Добавить</button>
</div>
<ul id=»taskList»></ul><script src=»renderer.js»></script>
</body>
</html>
6. Создание логики интерфейса (renderer.js):
// Эта часть выполняется в процессе рендерера (в контексте веб-страницы)
function addTask() {
const taskInput = document.getElementById(‘taskInput’);
const taskText = taskInput.value.trim();if (taskText === ») return;
const taskList = document.getElementById(‘taskList’);
// Создаем новый элемент списка
const li = document.createElement(‘li’);
li.innerHTML = `
<span>${taskText}</span>
<button class=»delete-btn» onclick=»removeTask(this)»>Удалить</button>
`;taskList.appendChild(li);
taskInput.value = »; // Очищаем поле ввода
}function removeTask(button) {
const li = button.parentElement;
li.remove();
}// Обработка нажатия Enter в поле ввода
document.getElementById(‘taskInput’).addEventListener(‘keypress’, function(e) {
if (e.key === ‘Enter’) {
addTask();
}
});
7. Запуск приложения:
npm start
Описание кода:
-
main.js: Управляет созданием окна приложения.BrowserWindow— это класс для создания окон. -
index.html: Определяет структуру и стили интерфейса. Это обычный HTML. -
renderer.js: Содержит логику взаимодействия с пользователем (добавление, удаление задач). Это обычный JavaScript для фронтенда.
Заключение
Вы только что создали полнофункциональное десктопное приложение, используя веб-технологии. Electron стирает границы между вебом и десктопом, позволяя разработчикам быстро создавать кроссплатформенные приложения. Дальнейшие шаги могут включать упаковку приложения в установочный файл (.exe, .dmg, .deb) с помощью electron-builder.