Создание десктопных приложений с использованием Электрона — Софт Эйт Софт
Description: Узнайте, как использовать «Электрон» для создания кросс-платформенных приложений «Вердж3Д» для настольных компьютеров.

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

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

- Создание приложения
- Запуск вашего приложения
- Настройка дополнительных параметров приложения
  - Изменение имени и значка приложения
  - Настройка меню
- Продвинутая разработка «Электрон»-приложений с помощью NPM
- Изменение файлов шаблона приложений
- Создание приложений при отсутствии подключения к интернету

#

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

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

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

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

None
  Собрать npm-пакет вместо готовой к использованию сборки. Для опытных пользователей, знакомых с NPM. Следуйте инструкциям ниже, чтобы продолжить создание приложения.
Windows (Intel, AMD)
  «Виндоус» 10 или более поздняя версия на устройствах с 64-разрядными процессорами «Интел»/«АМД».
Windows (ARM)
  «Виндоус» 10 или более поздняя версия на устройствах с 64-разрядными процессорами «АРМ».
macOS (Apple Silicon)
  «Мак ОС» 11 («Биг Сур») или более поздняя версия, компьютеры «Эпл Силикон» (также известные как M1-M5).
macOS (64-bit)
  «Мак ОС» 11 («Биг Сур») или более поздняя версия на платформе «Интел».
Linux (Intel, AMD)
  «Линукс» на устройствах с 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()`:

`const 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/имя_продукта`

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

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

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