Создание десктопных приложений с использованием «Электрона»

«Электрон» — это инструмент для преобразования веб-приложений в кросс-платформенные десктопные приложения. «Электрон» может создавать приложения для «Виндоус», «Мак ОС» (поддерживаются архитектуры «Интел» и «Эпл Силикон») и «Линукс». Инструмент полностью бесплатен, прост в использовании и позволяет выполнять расширенную настройку с помощью «Ява Скрипта» (если это необходимо).

Создание приложения

«Электрон» можно установить через NPM или загрузить из интернета. Чтобы упростить работу, мы интегрировали конструктор приложений «Электрон» прямо в диспетчер приложений.

С его помощью вы можете загрузить двоичные файлы «Электрон» для выбранной целевой платформы, а затем создать готовое к использованию приложение прямо из приложения «Вердж3Д».

Поскольку количество доступных платформ огромно, воспользуйтесь следующей памяткой, чтобы понять, что вам действительно нужно:

None: Собрать npm-пакет вместо готовой к использованию сборки. Для опытных пользователей, знакомых с NPM. Следуйте инструкциям ниже, чтобы продолжить создание приложения.
Windows (64-bit): «Виндоус» 7 или более поздняя версия, 64 бит.
Windows (ARM): «Виндоус» 10 на устройствах с 64-разрядными процессорами АРМ.
Windows (32-bit): «Виндоус» 7 или более поздняя версия, 32 бит.
macOS (64-bit): «Мак ОС» 10.13 («Хай Сиерра») или более поздняя версия на платформе «Интел».
macOS (Apple Silicon): «Мак ОС» 11 («Биг Сур») или более поздняя версия, компьютеры «Эпл Силикон» (также известные как M1-M4).
Linux (64-bit): «Линукс», 64 бит, такие как «Убунту», «Федора», «ОпенСусе», или «Арч».
Linux (ARM): «Линукс» на 64-битных устройствах АРМ.

Из-за ограничений архитектуры ОС «Виндоус» невозможно создавать приложения для «Мак ОС» на этой системе. Вместо этого используйте «Мак ОС« или «Линукс».

Когда ваше приложение будет готово, скачайте его, а затем распакуйте .zip-архив в какую-нибудь папку.

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

Выполните ваше приложение, запустив app_name.exe (или AppName.app на «Мак ОС», или app_name на «Линуксе»), расположенный в распакованной папке с приложением.

Имейте в виду, что поскольку ваше приложение не подписано, и «Виндоус», и «Мак ОС» (но не «Линукс») не позволят его запустить. Например, в «Виндоус» вы увидите следующее диалоговое окно Windows protected your PC («Система Windows защитила ваш компьютер»):

Нажмите на ссылку More info («Подробнее»), затем Run anyway («Выполнить в любом случае»), чтобы запустить приложение. Чтобы решить эту проблему, особенно когда вы распространяете свою работу среди конечных пользователей, ваше приложение должно быть подписано. Подробнее смотрите в разделе подписание кода документации «Электрон».

В «Мак ОС» (в версии для «Эпл Силикон») вы можете получить сообщение, что приложение повреждено (хотя это не так):

В этом случае вам потребуется очистить атрибут нахождения .zip-архива на карантине (с помощью приложения Terminal):


      xattr -r -d com.apple.quarantine my_awesome_app.zip

а затем снова распаковать и запустить приложение.

Настройка дополнительных параметров приложения

Изменение имени и значка приложения

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

Настройка меню

Чтобы полностью отключить меню приложения, вставьте следующую строку в main.js сразу после метода loadFile():


      win.removeMenu();

Чтобы создать собственное меню, сначала подключите модуль Menu к вашему приложению:


      const { Menu } = require('electron');

Мы будем использовать модуль shell для открытия внешнего сайта при нажатии на меню. Поэтому добавьте модуль shell и сюда:


      const { shell } = require('electron');

Затем добавьте следующий код в main.js сразу после метода loadFile():


    var menu = Menu.buildFromTemplate([{
        label: 'Menu',
        submenu: [
            {
                label: 'Soft8Soft Website',
                click() {
                    shell.openExternal('https://www.soft8soft.com');
                }
            },
            {
                label: 'Exit',
                click() {
                    app.quit()
                }
            }
        ]
    }]);
    Menu.setApplicationMenu(menu);

Пример измененного файла main.js можно скачать здесь.

Поместите модифицированный файл main.js в папку с приложение и снова его запустите. Вы должны получить следующее:

Продвинутая разработка «Электрон»-приложений с помощью NPM

С помощью утилиты npm вы можете сделать разработку «Электрон»-приложений более эффективной. Вы можете установить её, следуя этим инструкциям.

Более подробную информацию об использовании NPM можно найти в документации на «Электрон».

Изменение файлов шаблона приложений

Файлы шаблона, используемого для создания приложений на основе «Электрона» расположены в подпапке manager/templates/Electron внутри установочной папки «Вердж3Д». Мы не рекомендуем редактировать эти файлы напрямую, однако вы легко можете заменить любой из них, поместив файл с тем же именем внутри папки разрабатываемого приложения. Например, чтобы заменить шаблонный скрипт main.js, используемый для инициализации приложения, своей собственной реализацией, скопируйте этот файл из папки с шаблоном (либо создайте новый с нуля) и разместите внутри папки с приложением:

Создание приложений при отсутствии подключения к интернету

Для создания готового приложения, диспетчеру приложений требуется загрузить одну из сборок «Электрона» с серверов «Софт Эйт Софт», для чего требуется соединение к интернету. Если соединения нет, либо оно ограничено (прокси-сервером или файрволлом), вам потребуется скачать сборки вручную, чтобы диспетчер приложений смог найти их на локальном носителе.

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

Затем скопируйте скачанные сборки в папку с настройками диспетчера приложений (находится в пользовательской папке). Разместите их как есть (не распаковывая!):

«Виндоус» — AppData\Roaming\Soft8Soft\Имя Продукта
«Мак ОС» — Library/Application Support/Имя Продукта
«Линукс» — .config/имя_продукта

С этого момента диспетчер приложений будет использовать эти сборки для создания десктопных приложений, не закачивая их в интернете.

Остались вопросы?

Задайте их на нашем форуме!