Создайте Desktop приложение на JavaScript за 20 минут: Electron JS

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

Необходимые инструменты и подготовка

Для работы потребуются:

Текстовый редактор (например, Atom).
Node.js с менеджером пакетов npm (устанавливается вместе с Node.js).
Библиотека Electron JS (устанавливается через npm).

Ссылки на загрузку компонентов доступны на официальном сайте Electron JS.

Настройка проекта

Создайте папку для проекта.
Откройте терминал в папке (в Atom — с помощью плагина PlatformIO IDE Terminal).
Инициализируйте проект: npm init -y. Это создаст файл package.json с настройками проекта. Поле name можно изменить.
Установите Electron JS глобально: npm install -g electron.
Установите Electron JS локально: npm install electron —save. Это добавит Electron в зависимости проекта.
Добавьте в раздел scripts файла package.json команду для запуска: "start": "electron .". Запуск приложения: npm start.

Файлы приложения

Создайте следующие файлы в папке проекта:

index.js: главный файл JavaScript.
index.html: файл HTML, определяющий интерфейс.

index.js

В index.js подключите необходимые модули и создайте окно приложения:

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

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 700,
        height: 500,
        icon: path.join(__dirname, 'icon.png') // Замените 'icon.png' на имя файла иконки
    });

    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    win.webContents.openDevTools(); // Для разработчиков, отключите в релизе

    win.on('closed', () => {
        win = null;
    });

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

app.on('ready', createWindow);

path.join создает корректные пути к файлам, url.format — URL. Функция createWindow создает окно, загружает index.html и открывает инструменты разработчика (DevTools). app.on(‘ready’, createWindow) запускает createWindow после загрузки приложения.

index.html

index.html содержит разметку интерфейса. В этом примере используется Bootstrap для стилизации:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Electron Кибер Брокер</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Hello World</title>
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
    </div>
    <script src="render.js"></script>
</body>
</html>

Подключается Bootstrap через CDN, создан заголовок <h1>Hello World</h1>. render.js — пустой файл JavaScript, необходимый для работы Electron.

Запуск приложения

Запустите приложение командой npm start в терминале. Приложение откроется в новом окне.

Пример: конвертер температур

Можно добавить функциональность конвертера температур Цельсия и Фаренгейта, обрабатывая события в index.js и добавляя элементы в index.html.

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