---

МИНИСТЕРСТВО ОБРАЗОВАНИЯ
Профессиональная образовательная организация

РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ
по работе с инструментом electron-builder
для создания установочных пакетов кросс-платформенных настольных приложений
Экзаменационный вариант: Кросс-платформенные настольные приложения (В6)






Выполнил(а): _______________________________
Группа: ____________________________________
Проверил: __________________________________




2026 г.
 
Введение
Настоящее руководство пользователя разработано для инструмента electron-builder, используемого при выполнении экзаменационного задания по варианту «Кросс-платформенные настольные приложения (В6)». В рамках задания рабочая среда настраивается на базе операционной системы Ubuntu Linux. Выбранное программное обеспечение предназначено для разработки, сборки и упаковки настольных приложений, созданных с использованием JavaScript, TypeScript, Node.js и Electron.
Electron-builder применяется как инструмент автоматизации сборки и создания установочных пакетов. С его помощью пользователь может подготовить Electron-приложение к распространению, указать параметры сборки, сформировать AppImage и deb-пакет, проверить запуск собранного приложения и установить его в систему Ubuntu Linux.
[ВСТАВИТЬ СКРИНШОТ: Рабочий стол Ubuntu Linux после запуска виртуальной машины]
Рисунок 1 – Рабочий стол Ubuntu Linux после запуска виртуальной машины
Назначение программы
Electron-builder предназначен для упаковки настольных приложений на Electron в готовые установочные файлы. Он берет исходный проект, анализирует файл package.json, собирает приложение и формирует итоговые пакеты для выбранной операционной системы. В Ubuntu Linux удобно показать сборку AppImage и deb-пакета.
В выбранном варианте electron-builder используется для демонстрации создания установочного пакета кросс-платформенного настольного приложения. Это соответствует требованию задания о наличии программы для создания установочных пакетов и инструмента автоматизации сборки исполняемых файлов.
Условия выполнения
Для выполнения работы используется виртуальная машина VirtualBox с установленной операционной системой Ubuntu Linux. Виртуальной машине рекомендуется выделить не менее 4096 МБ оперативной памяти, 2 процессора и виртуальный жесткий диск объемом не менее 30–40 ГБ. Сетевой адаптер настраивается в режиме NAT, чтобы Ubuntu имела доступ в интернет и могла устанавливать пакеты через apt и npm.
[ВСТАВИТЬ СКРИНШОТ: Окно настроек VirtualBox с параметрами виртуальной машины]
Рисунок 2 – Окно настроек VirtualBox с параметрами виртуальной машины
Перед установкой electron-builder выполняется первичная настройка системы: проверяется интернет-соединение, устанавливаются обновления безопасности, базовые утилиты, Node.js, npm, Git и Visual Studio Code.
[ВСТАВИТЬ СКРИНШОТ: Проверка подключения к сети командой ping]
Рисунок 3 – Проверка подключения к сети командой ping
[ВСТАВИТЬ СКРИНШОТ: Обновление списка пакетов и установка обновлений безопасности]
Рисунок 4 – Обновление списка пакетов и установка обновлений безопасности
Установка компонентов среды разработки
Для разработки кросс-платформенных настольных приложений были установлены Node.js, npm, Git, Visual Studio Code, Electron и electron-builder. Эти компоненты позволяют писать исходный код, управлять зависимостями, запускать приложение в режиме разработки, собирать проект и формировать установочные пакеты.
Node.js используется как среда выполнения JavaScript и основа для npm. npm устанавливает зависимости проекта, включая Electron и electron-builder. Visual Studio Code применяется как редактор кода с поддержкой JavaScript, TypeScript, терминала, расширений ESLint и Prettier. Git используется для контроля версий исходного кода.
[ВСТАВИТЬ СКРИНШОТ: Проверка установленной версии Node.js и npm]
Рисунок 5 – Проверка установленной версии Node.js и npm
[ВСТАВИТЬ СКРИНШОТ: Проверка установленной версии Git]
Рисунок 6 – Проверка установленной версии Git
[ВСТАВИТЬ СКРИНШОТ: Запуск Visual Studio Code в Ubuntu Linux]
Рисунок 7 – Запуск Visual Studio Code в Ubuntu Linux
Создание тестового Electron-приложения
Для проверки работы среды создается тестовый проект electron-bank-demo. В каталоге проекта выполняется команда npm init -y, после чего устанавливается Electron. Далее создаются файлы main.js и index.html. Файл main.js описывает создание окна приложения, а файл index.html содержит простую страницу, которая будет отображаться в окне Electron.
[ВСТАВИТЬ СКРИНШОТ: Инициализация npm-проекта и установка Electron]
Рисунок 8 – Инициализация npm-проекта и установка Electron
После добавления команды start в файл package.json приложение запускается командой npm start. Если открывается отдельное окно с текстом тестового приложения, значит Electron установлен правильно и рабочая среда готова к сборке настольного приложения.
[ВСТАВИТЬ СКРИНШОТ: Запуск тестового Electron-приложения]
Рисунок 9 – Запуск тестового Electron-приложения
Установка и запуск electron-builder
Electron-builder устанавливается как dev-зависимость проекта командой npm install --save-dev electron-builder. После установки пользователь проверяет версию команды npx electron-builder --version. Это подтверждает, что инструмент сборки доступен внутри проекта.
[ВСТАВИТЬ СКРИНШОТ: Установка electron-builder через npm]
Рисунок 10 – Установка electron-builder через npm
[ВСТАВИТЬ СКРИНШОТ: Проверка версии electron-builder]
Рисунок 11 – Проверка версии electron-builder
Основные параметры сборки указываются в файле package.json. В нем задаются имя приложения, версия, описание, главный файл main.js, команда dist и блок build. В блоке build задается идентификатор приложения appId, название productName и цели сборки для Linux: AppImage и deb.
[ВСТАВИТЬ СКРИНШОТ: Настройка package.json для сборки AppImage и deb]
Рисунок 12 – Настройка package.json для сборки AppImage и deb
Описание интерфейса и принципа работы electron-builder
Electron-builder не имеет отдельного графического интерфейса. Работа с ним выполняется через терминал Ubuntu Linux и файл package.json. Пользователь редактирует параметры сборки в проекте, запускает команду npm run dist и получает готовые установочные файлы в папке dist.
Основными элементами настройки являются appId, productName, linux.target, category и scripts. Параметр appId задает уникальный идентификатор приложения. ProductName определяет название программы, которое увидит пользователь. Linux.target указывает форматы пакетов, например AppImage и deb. Команда scripts.dist запускает процесс сборки.
Создание установочных пакетов
После настройки package.json пользователь запускает команду npm run dist. Electron-builder собирает приложение, подготавливает необходимые файлы, упаковывает ресурсы и создает установочные пакеты в каталоге dist. В Ubuntu Linux для демонстрации удобно сформировать AppImage и deb-пакет.
[ВСТАВИТЬ СКРИНШОТ: Запуск сборки командой npm run dist]
Рисунок 13 – Запуск сборки командой npm run dist
После завершения сборки нужно открыть папку dist или выполнить команду ls -lh dist. В списке файлов должны отображаться AppImage и deb-пакет. Наличие этих файлов подтверждает, что инструмент создания установочных пакетов работает правильно.
[ВСТАВИТЬ СКРИНШОТ: Готовые установочные пакеты в папке dist]
Рисунок 14 – Готовые установочные пакеты в папке dist
Проверка AppImage и deb-пакета
Формат AppImage удобен тем, что приложение можно запустить без установки. Пользователь выдает файлу право на запуск командой chmod +x и открывает приложение из папки dist. Если окно приложения запускается, пакет AppImage собран успешно.
[ВСТАВИТЬ СКРИНШОТ: Запуск приложения из AppImage]
Рисунок 15 – Запуск приложения из AppImage
Формат deb используется для установки программы в Ubuntu и другие Debian-подобные системы. Пользователь устанавливает пакет командой sudo apt install ./dist/*.deb. После установки приложение можно найти в меню Ubuntu или запустить из терминала. Это подтверждает корректную сборку установочного пакета.
[ВСТАВИТЬ СКРИНШОТ: Установка deb-пакета через apt]
Рисунок 16 – Установка deb-пакета через apt
[ВСТАВИТЬ СКРИНШОТ: Запуск установленного desktop-приложения]
Рисунок 17 – Запуск установленного desktop-приложения
Контроль зависимостей и безопасность проекта
Для проверки JavaScript-зависимостей используется команда npm audit. Она анализирует установленные пакеты и показывает известные уязвимости. Если исправления доступны и не нарушают работу проекта, можно выполнить npm audit fix. Такая проверка важна для настольных приложений, так как уязвимые зависимости могут повлиять на безопасность пользователя.
[ВСТАВИТЬ СКРИНШОТ: Проверка зависимостей командой npm audit]
Рисунок 18 – Проверка зависимостей командой npm audit
Для защиты системы Ubuntu Linux включаются автоматические обновления безопасности через unattended-upgrades. Также используется UFW для фильтрации подключений, AppArmor для ограничения действий процессов и ClamAV для проверки подозрительных файлов.
[ВСТАВИТЬ СКРИНШОТ: Настройка автоматических обновлений безопасности]
Рисунок 19 – Настройка автоматических обновлений безопасности
[ВСТАВИТЬ СКРИНШОТ: Статус UFW и AppArmor]
Рисунок 20 – Статус UFW и AppArmor
Защита от фишинга и безопасное хранение учетных данных
Для безопасного хранения учетных данных устанавливается Bitwarden. Он хранит пароли в зашифрованном виде и помогает снизить риск фишинга, потому что автозаполнение работает только для соответствующего домена. В дополнение используется системное хранилище GNOME Keyring, которое применяется приложениями Linux для хранения паролей, токенов и секретов.
[ВСТАВИТЬ СКРИНШОТ: Запуск Bitwarden в Ubuntu Linux]
Рисунок 21 – Запуск Bitwarden в Ubuntu Linux
[ВСТАВИТЬ СКРИНШОТ: Окно GNOME Keyring / Пароли и ключи]
Рисунок 22 – Окно GNOME Keyring / Пароли и ключи
Для защиты от фишинга также используется современный браузер с включенной защитой от опасных сайтов. При работе с репозиториями, npm-пакетами и учетными записями важно проверять адреса сайтов, не вводить пароли на подозрительных страницах и использовать менеджер паролей вместо хранения данных в обычных текстовых файлах.
Настройка защиты и доступа
Для защищенного удаленного доступа в Ubuntu Linux устанавливается и запускается служба OpenSSH. После установки проверяется статус службы. Если служба находится в состоянии active (running), настройка SSH выполнена успешно.
[ВСТАВИТЬ СКРИНШОТ: Статус службы SSH]
Рисунок 23 – Статус службы SSH
Для разграничения прав создаются пользователи developer и tester, а также группа desktopdev. Рабочая папка /opt/desktop-app-projects назначается группе desktopdev и получает права 770. Это означает, что доступ к проектам настольных приложений имеют только владелец и участники рабочей группы.
[ВСТАВИТЬ СКРИНШОТ: Создание пользователей и группы desktopdev]
Рисунок 24 – Создание пользователей и группы desktopdev
[ВСТАВИТЬ СКРИНШОТ: Настройка прав доступа к рабочей папке проекта]
Рисунок 25 – Настройка прав доступа к рабочей папке проекта
Для аудита действий используется auditd, а для просмотра системных событий используется journalctl. Эти инструменты помогают показать журнал мониторинга и подтвердить, что события системы фиксируются.
[ВСТАВИТЬ СКРИНШОТ: Статус auditd]
Рисунок 26 – Статус auditd
[ВСТАВИТЬ СКРИНШОТ: Просмотр журнала системных событий journalctl]
Рисунок 27 – Просмотр журнала системных событий journalctl
Настройка совместимости интерфейса приложения
Для проверки корректного отображения приложения в Ubuntu Linux открываются настройки экрана. Рекомендуется установить стандартное разрешение 1366×768 или 1920×1080 и масштаб 100%. Это помогает проверить, что меню, кнопки и текст приложения отображаются без искажений.
[ВСТАВИТЬ СКРИНШОТ: Настройки экрана Ubuntu Linux]
Рисунок 28 – Настройки экрана Ubuntu Linux
Если Electron-приложение отображается размыто или слишком крупно, можно запустить его с параметром --force-device-scale-factor=1. Если возникают проблемы с графикой, можно проверить запуск с параметром --disable-gpu. Эти действия помогают продемонстрировать настройку совместимости программного обеспечения с установленной операционной системой.
[ВСТАВИТЬ СКРИНШОТ: Корректное отображение интерфейса Electron-приложения]
Рисунок 29 – Корректное отображение интерфейса Electron-приложения
Резервное копирование и виртуальный принтер
Для резервного копирования системы используется программа Timeshift. Она позволяет создавать снимки состояния Ubuntu Linux и восстанавливать систему при сбоях. В рамках экзамена необходимо показать установленную программу и созданную точку восстановления.
[ВСТАВИТЬ СКРИНШОТ: Установка и запуск Timeshift для резервного копирования]
Рисунок 30 – Установка и запуск Timeshift для резервного копирования
Для сохранения документации в электронном виде устанавливается виртуальный принтер CUPS-PDF. Его наличие подтверждает установку базового программного обеспечения и возможность вывода руководства пользователя в PDF-формат.
[ВСТАВИТЬ СКРИНШОТ: Установленный виртуальный принтер CUPS-PDF]
Рисунок 31 – Установленный виртуальный принтер CUPS-PDF
Возможные ошибки и способы устранения
Если команда установки не выполняется, необходимо проверить подключение к интернету командой ping -c 4 google.com и повторить sudo apt update. Если система сообщает о нехватке прав, команду нужно выполнять с sudo. Если npm не устанавливает пакеты, нужно проверить доступ к интернету и повторить команду npm install.
Если Electron-приложение не запускается, нужно проверить файл package.json, наличие команды start, правильное имя главного файла main.js и установленный пакет electron. Также можно удалить папку node_modules и выполнить npm install повторно.
Если electron-builder не создает пакеты, нужно проверить блок build в package.json, наличие команды dist и отсутствие синтаксических ошибок в JSON. Если сборка завершается ошибкой доступа, нужно проверить права на папку проекта и запускать команды от пользователя developer.
Если deb-пакет не устанавливается, нужно открыть терминал в папке проекта и выполнить sudo apt install ./dist/*.deb. Если система сообщает о зависимостях, следует выполнить sudo apt --fix-broken install. Если AppImage не запускается, нужно выдать право на запуск командой chmod +x dist/*.AppImage.
Обоснование выбора программного обеспечения
Операционная система Ubuntu Linux выбрана как стабильная среда для разработки и сборки настольных приложений на Electron. Она поддерживает установку Node.js, npm, Git, Visual Studio Code, средств защиты, резервного копирования и сетевой диагностики через стандартные команды apt, snap и npm.
Visual Studio Code выбран как удобная среда разработки для JavaScript и TypeScript. Он поддерживает расширения ESLint и Prettier, встроенный терминал, работу с Git и настройку проекта. Node.js и npm используются для запуска JavaScript-инструментов, установки зависимостей и выполнения команд сборки. Electron выбран как среда выполнения, позволяющая создавать настольные приложения на веб-технологиях.
Electron-builder выбран как инструмент создания установочных пакетов, так как он автоматизирует упаковку Electron-приложений и формирует удобные форматы распространения для Linux, включая AppImage и deb. Bitwarden и GNOME Keyring применяются для безопасного хранения учетных данных. UFW, AppArmor, ClamAV, auditd и unattended-upgrades используются для защиты системы, аудита и снижения риска эксплуатации уязвимостей.
Вывод
В ходе выполнения задания была подготовлена рабочая среда для разработки кросс-платформенных настольных приложений на базе Ubuntu Linux. Установлены и настроены Node.js, npm, Git, Visual Studio Code, Electron, electron-builder, а также компоненты защиты, безопасного хранения учетных данных, аудита и резервного копирования. Тестовое Electron-приложение успешно запускается, собирается и упаковывается в AppImage и deb-пакет.
Подготовленное руководство пользователя описывает назначение electron-builder, условия выполнения работы, порядок установки и настройки проекта, создание установочных пакетов, проверку AppImage и deb-пакета, настройку защиты, контроль зависимостей и возможные ошибки. Скриншоты, вставляемые в документ, подтверждают выполнение установки, настройки и демонстрации результата экзаменационного задания.