Создание приложения для управления задачами с использованием Electron.





Создание приложеия для управления задачами с использованием Electron

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

Что такое Electron и почему он подходит для управления задачами

Electron — это платформа с открытым исходным кодом, которая позволяет создавать настольные приложения с использованием HTML, CSS и JavaScript. Программы, разработанные на Electron, работают в оболочке Chromium и используют Node.js для взаимодействия с операционной системой. Это дает разработчикам возможность писать код, которым они уже привыкли пользоваться при веб-разработке, и переносить приложения на настольные операционные системы без значительных изменений.

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

Ключевые преимущества Electron для создания настольных приложений

  • Кроссплатформенность: одна кодовая база для всех популярных ОС.
  • Использование популярных технологий: HTML, CSS, JavaScript, что снижает барьер входа для веб-разработчиков.
  • Широкая экосистема: множество готовых пакетов npm можно использовать в проекте.
  • Прямой доступ к API ОС: работа с файлами, уведомлениями, процессами и другими системными ресурсами.

Установка и первичная настройка проекта

Прежде чем начать создавать наше приложение, необходимо настроить рабочее окружение. Для этого потребуется установленный Node.js и менеджер пакетов npm. Если они у вас уже есть, можно сразу переходить к созданию проекта.

Создайте новую папку для приложения и инициализируйте в ней npm-проект командой: 

npm init -y

Далее установите Electron как зависимость для разработки: 

npm install --save-dev electron

После установки создайте структуру проекта. В корне должны находиться основные файлы:

  • main.js — главный процесс приложения, которая отвечает за создание окон и их поведение.
  • index.html — основной HTML-файл интерфейса.
  • renderer.js — скрипт для рендер-процесса, управляющий взаимодействием с пользователем.
  • package.json — манифест npm-проекта, в котором будет указана команда запуска приложения.

Настройка package.json для запуска Electron

В package.json добавьте секцию "scripts", если её там нет, или расширьте имеющуюся следующим образом: 

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

Теперь команда npm start будет запускать наше приложение на Electron.

Создание основного окна приложения на Electron

Главное окно — это оболочка, в которой будет отображаться интерфейс приложения. В Electron создание окна происходит в главном процессе в файле, который мы назвали main.js. Здесь необходимо написать код, который инициализирует приложение и создаёт окно с нужными параметрами.

Пример минимального кода для main.js: 

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

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

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

app.whenReady().then(() => {
  createWindow();

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

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

Этот код создаёт окно приложения размером 800×600 пикселей и загружает в него файл index.html. Опция nodeIntegration позволяет использовать модули Node.js в рендер-скриптах, что упрощает взаимодействие между фронтендом и бэкендом.

Объяснение ключевых элементов main.js

Элемент Назначение
app.whenReady() Ждёт, пока Electron будет готов к созданию окон.
BrowserWindow Класс для создания и управления окнами.
win.loadFile('index.html') Загружает HTML-файл с интерфейсом внутрь окна.
app.on('window-all-closed') Обрабатывает событие закрытия всех окон, чтобы корректно завершить приложение.

Разработка пользовательского интерфейса для управления задачами

Теперь перейдём к созданию самого интерфейса приложения. Файл index.html будет содержать разметку, которая обеспечит базовую структуру для списка задач и элементов управления. Мы сделаем простой, но удобный интерфейс с возможностью добавлять, просматривать и удалять задачи.

Ниже приведён пример минимального HTML с элементами: 

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Менеджер задач</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 600px;
            margin: auto;
        }
        #task-input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }
        #add-btn {
            padding: 10px 15px;
            font-size: 16px;
            margin-top: 10px;
        }
        #task-list {
            margin-top: 20px;
            list-style: none;
            padding: 0;
        }
        .task-item {
            background: #f0f0f0;
            margin-bottom: 10px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }
        .delete-btn {
            color: red;
            border: none;
            background: transparent;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>Менеджер задач</h2>
    <input type="text" id="task-input" placeholder="Введите новую задачу" />
    <button id="add-btn">Добавить задачу</button>

    <ul id="task-list"></ul>

    <script src="renderer.js"></script>
</body>
</html>

Этот код создаёт инпут для ввода новой задачи, кнопку для добавления, а также список, в котором задачи будут отображаться. Стили обеспечивают простую и удобную визуализацию элементов.

Описание интерфейсных компонентов