Что такое Electron?
Electron — это фреймворк для разработки десктопных приложений с использованием HTML, CSS и JavaScript. В двоичный код Electron уже встроены Chromium и Node.js, и это позволяет вам поддерживать только JavaScript код и создавать кроссплатформенные приложение, которые будут работать как на Windows, так и на macOS и Linux без необходимости иметь собственный опыт разработки.
Начало работы
Мы рекомендуем вам начать с руководства, которое пошагово познакомит вас с процессом разработки и последующего распространения приложения Electron. Примеры и документацию API также можно использовать для поиска и изучения новых для вас вещей.
Эксперименты с Electron Fiddle
Electron Fiddle — песочница, написанная на Electron и поддерживаемая разработчиками Electron. Мы настоятельно рекомендуем установить его в качестве обучающего инструмента для экспериментов с API-интерфейсами Electron или для создания прототипов функций во время разработки.
Fiddle также прекрасно интегрируется с нашей документацией. При просмотре примеров в наших учебниках вы часто видите кнопку «Открыть в Electron Fiddle» под блоком кода. Если у вас установлен Fiddle эта кнопка откроет , fiddle.electronjs. rg ссылка, которая автоматически загрузит пример в Fiddle, не требуется. fiddle docs/latest/fiddles/quick-start
Что есть в документации?
Вся официальная документация доступна на боковой панели. Ниже перечислены различные категории и то, что вы можете ожидать в каждой из них:
- Руководство: Комплексное пособие по созданию и публикации вашего первого приложения Electron.
- Процессы в Electron: Подробная информация о процессах Electron и о том, как с ними работать.
- Рекомендации: Важные правила, о которых следует помнить при разработке приложения Electron.
- Примеры: Краткие руководства по добавлению функций в ваше приложение Electron.
- Разработка: Различные руководства по разработке.
- Распространение: Узнайте, как распространять ваше приложение конечным пользователям.
- Тестирование и отладка: Как отлаживать JavaScript, писать тесты, а также различные инструменты для создания качественных приложений Electron.
- Ссылки: Полезные ссылки, позволяющие лучше понять, как работает и организован проект Electron.
- Вклад в проект: Компиляция Electron и участие в разработке могут казаться сложными. В этом разделе мы постараемся облегчить эту задачу.
Получение помощи
Вы застряли где-нибудь? Вот несколько ссылок для поиска:
- Если вам нужна помощь в разработке вашего приложения, наше сообщество Discord сервер отличное место для получения советов от других разработчиков приложений Electron.
- Если вы подозреваете, что вы столкнулись с ошибкой в пакете electron , пожалуйста, проверьте на GitHub issue tracker, чтобы увидеть, соответствуют ли какие-либо проблемы вашей проблеме. Если нет, заполните наш шаблон отчета об ошибке и отправьте новый выпуск.
Требования
Это 1 часть руководства по Electron.
- Требования
- Создание Вашего первого приложения
- Использование скриптов предварительной загрузки
- Добавление возможностей
- Упаковка приложения
- Публикация и Обновление
Electron — это фреймворк для разработки десктопных приложений с использованием HTML, CSS и JavaScript. Встраивая Chromium и Node.js в свой исполняемый файл, Electron позволяет создавать кросс-платформенные приложения для Windows, macOS и Linux используя единую кодовую базу JavaScript.
В этом руководстве вы узнаете, как разработать настольное приложение с помощью Electron и распространить его конечным пользователям.
Цели
В этом руководстве мы рассмотрим все этапы создания базового приложения Electron с нуля, а затем научим вас собирать и распространять его среди пользователей с помощью Electron Forge.
Если вы предпочитаете создавать проект с помощью одной команды, мы рекомендуем начать с команды Electron Forge create-electron-app .
Предпосылки
Electron является нативной оболочкой для веб-приложений и исполняется в среде Node.js. Поэтому в данном руководстве предполагается, что вы в общих чертах знакомы с Node и основами front-end веб-разработки. Если вам необходимо получить дополнительную информацию, прежде чем продолжить, мы рекомендуем воспользоваться следующими ресурсами:
- Новички начинают здесь! (MDN Web Docs)
- Введение в Node.js
Необходимые инструменты
Редактор кода
Вам понадобится текстовый редактор, чтобы писать код. Мы рекомендуем использовать Visual Studio Code, но вы можете выбрать любой из тех, что вы предпочитаете.
Командная строка
На протяжении руководства мы будем просить вас использовать различные командные интерфейсы (CLI). Эти команды можно вводить в стандартном терминале системы:
- Windows: Командная строка или PowerShell
- macOS: Terminal
- Linux: зависит от дистрибутива (например: GNOME Terminal, Konsole)
Большинство редакторов имеют встроенный терминал, который вы также можете использовать.
Git и GitHub
Git — это наиболее распространенная система контроля версий исходного кода, а GitHub — платформа для совместной разработки, построенная на ее основе. Хотя ни то, ни другое не является строго необходимым для создания приложения Electron, далее в руководстве, мы будем использовать GitHub releases для настройки автоматических обновлений. Поэтому от вас потребуется:
- Создать учетную запись GitHub
- Установить Git
Если вы не знакомы с механизмом работы Git, мы рекомендуем ознакомиться с руководствами GitHub по работе с Git. Также можно воспользоваться приложением GitHub Desktop, если вы предпочитаете использовать графический интерфейс, а не командную строку.
Перед началом обучения мы рекомендуем создать локальный Git-репозиторий и разместить его на GitHub, а также делать commit после каждого шага.
Установка Git через GitHub Desktop
GitHub Desktop установит последнюю версию Git в вашей системе, если у вас он ещё не установлен.
Node.js и npm
Для начала разработки приложения Electron необходимо установить Node.js и входящий в ее состав менеджер пакетов npm. Мы рекомендуем использовать последнюю версию с длительной поддержкой (LTS).
Пожалуйста, установите Node.js с помощью предварительно собранных установщиков для вашей платформы. В противном случае могут возникнуть проблемы совместимости. Если вы используете macOS, мы рекомендуем воспользоваться менеджером пакетов, например Homebrew или nvm чтобы избежать проблем с правами доступа к каталогам.
Чтобы проверить, что Node.js был установлен правильно, используйте флаг -v при выполнении команд node и npm . В результате должны быть отображены их версии.
$ node -v v16.14.2 $ npm -v 8.7.0 Хотя для создания проекта Electron необходима установленная локально Node.js, Electron не использует Node.js вашей системы для выполнения своего кода. Вместо этого он поставляется в комплекте с собственной средой выполнения Node.js. Таким образом, конечным пользователям не нужно самостоятельно устанавливать Node.js для запуска вашего приложения.
mrmlnc / electron-api.md
process — это объект, позволяющий получить информацию о типе запущенного процесса (рендеринг или основной процесс), версию Chrome и Electron, а также путь до выполняемого js-файла.
Пользовательские элементы DOM:
Объект File — это абстракция над нативным File, передающая стандартному HTML5 file API путь к физическому расположению файла в файловой системе пользователя.
Функция window.open — создание нового окна на странице (экземпляр BrowserWindow ) и возможность отправки сообщений в родительское (основное) окно.
app — модуль, отвечающий за управление жизненным циклом приложения. Предоставляет доступ к событиям (выход, фокус и т.д.) и методам (имя, версия, док и т.д.), позволяющим управлять приложением.
auto-updater — возможность автоматического обновления приложения. На момент написания статьи доступен только на OS X (на GitHub висит PR для Windows от 15 июня этого года).
browser-window — создание нового окна браузера с заданными параметрами (размер, иконка, заголовок, позиционирование и т.д.). Предоставляет доступ к событиям и методам, позволяющим управлять созданным окном.
content-tracing — модуль, собирает данные трассировки, генерируемые контентным модулем Chromium. Для анализа данных требуется браузер Chrome.
dialog — создание нативных диалоговых окон. Модуль позволяет создавать нативное окно открытия файлов или директорий, сохранения файлов, а также возможность отображать окно сообщения.
global-shortcut — регистрация и сопровождение глобальных сочетаний клавиш, доступных для приложения после его полной загрузки.
ipc (main process) — модуль, обрабатывающий синхронные и асинхронные сообщения, посылаемые из процесса рендеринга (веб-страницы) в главный процесс.
menu — создание нативного меню приложения и контексного меню. Пункты меню создаются с помощью модуля menuItem .
menu-item — позволяет добавлять пункты в контексное меню или меню приложения.
power-monitor — модуль, предоставляющий возможность отслеживать состояние питания системы после полной загрузки приложения, используя несколько событий.
power-save-blocker — включение этого модуля запрещает переход системы в спящий режим, когда запущено окно, на котором подключен этот модуль.
protocol — регистрация собственного протокола или перехват уже существующего. Протокол здесь следует понимать буквально: http, atom, file и т.д.
session — объект, являющийся свойством webContents , который в свою очередь является свойством BrowserWindow . Предоставляет возможность работать с cookies и некоторыми другими методами.
web-contents — одно из свойств BrowserWindow , отвечающее за рендеринг и контроль веб-страницы. Позволяет получать информацию о текущем окне и управлять его содержимым (аудио, копировать, вставить и т.д.).
tray — создание иконки в трее, а также его содержимого (пунктов меню). Есть специальные методы для работы с различными операционными системами, например, доком на OS X.
Модули процесса рендеринга (веб-страница)
ipc (render) — несколько методов, позволяющих отправлять сообщения из процесса рендеринга (веб-страницы) в главный (основной) процесс.
remote — простой способ межпроцессного взаимодействия (IPC) между процессом рендеринга и основным процессом.
web-frame — предоставляет возможность управлять рендеренгом веб-страницы (зум, проверка правописания, приватное окно).
clipboard — предоставляет доступ к буферу обмена и таким операциям, как копирование и вставка.
crash-reporter — модуль позволяет отправлять отчеты о сбоях в работе приложения на удаленный сервер.
native-image — возможность передачи изображений в API, которые требуют наличия изображения (иконки), например, модуль tray или browser-window . Есть поддержка ретины и работы с изображениями в буфере обмена.
screen — предоставление информации о разрешении, дисплеях и положении курсора. Работает только после полной загрузки приложения.
shell — методы для работы с десктопными приложениями. Здесь речь идет об открытии файлов в других приложениях, удалении файлов и т.д.
Введение
Веб-разработка стала главным направлением в программировании за последние десятилетия. Во-многом — благодаря способности веб-приложений к сетевому взаимодействию и унификации способов генерации пользовательских интерфейсов на манер привычных людям документов. Почти все современное программное обеспечение использует браузерный интерфейс для своих клиентских модулей.
При этом потребность в десктопных и мобильных приложениях также остается высокой. В первую очередь, для ответственных приложений, которые должны работать независимо от версии браузера и включенных пользовательских функций. И для десктопных приложений можно использовать веб-разработку в качестве основного подхода. Для этого создано несколько контейнерных платформ с разной степенью включения браузера в приложения.
GitHub Electron
Крупнейший банк свободного программного обеспечения GitHub создал свою платформу для контейнерной разработки десктопных приложений с встроенным браузером Google Chrome. На платформе GitHub Electron уже создано много современных приложений, таких как Slack, Mattermost, WordPress, Figma, GitHub Desktop, Skype, Atom.
Для WebGL приложений это очень эффективная среда с ожидаемым браузером. Пользователи могут устанавливать такие приложения и не задумываться, какой браузер установлен в их операционную систему, какие расширения включены, как будет решаться вопрос безопасности.
Контейнер Blend4Web приложения
В качестве пользовательского интерфейса Electron приложений работает веб-приложение, запущенное во встроенном браузере Google Chrome. В это веб-приложение можно обычным способом встраивать Blend4Web контейнер для визуализации трехмерных сцен.
NodeJS сервер
Серверные задачи в Elelctron приложениях сводятся к работе локальными компьютерными ресурсами, такими как файловая система, консольные и интерфейсные вызовы функций других программ для обработки изображений. Удобно хранить на локальном диске конфигурационные файлы приложений, читать их при запуске и инициализации, а также записывать измененные опции.
Пользовательский интерфейс
Все необходимые элементы пользовательского интерфейса в Electron приложениях можно делать с помощью HTML элементов на манер любого веб-сайта. Опыт разработки веб-сайтов прямо применим для разработки красивых и разнообразных интерфейсов. Особо интересным видится практика SPA сайтов на клиентских JavaScript библиотеках рендера веб-страниц.
Сборка приложения
Большое удобство платформы GitHub Electron состоит в возможности собирать один программный проект под разные операционные системы. Главная сборка производится из npm пакетов под Windows, MacOS, Linux. Для формируемого установщика можно дописывать скрипты дополнительных сценариев взаимодействия с пользователем во время установки, например msi скрипты для Windows. Также можно формировать и портативные сборки (portable), не требующие установки на компьютер пользователя для запуска прямо из файловой папки.
Демонстрация
Вывод
С помощью платформы GitHub Electron и Blend4Web можно создавать десктопные программы с трехмерной визуализацией под все популярные операционные системы, используя распространенный опыт веб-разработки.
Разработка кроссплатформенных трехмерных программ с Blend4Web и GitHub Electron — быстро и просто.