За последние несколько недель я изучал ElectronJS (также известный как «Electron») и хотел написать о своем опыте и приложениях, которые я создал. В процессе обучения я построил как Angular, так и Electron версии классической игры Connect 4.
С проектами можно ознакомиться по следующим ссылкам:
Я написал как Angular, так и версию Electron, чтобы я мог сравнить эти две платформы и узнать немного больше о базовых инструментах в процессе.
В этом посте будут рассмотрены некоторые предыстории об Electron и пошаговое руководство по созданию с его помощью игры «Connect 4». Я также собираюсь сделать краткое обсуждение реализаций сборки Electron и Angular.
Вы можете просмотреть размещенную на хосте версию Angular версии здесь или посмотреть видео, как электронная версия работает:
Что такое Электрон?
Электрон - это фреймворк, который позволяет создавать настольные приложения с использованием JavaScript.
Первоначально разработанный GitHub, Electron использует Chromium и Node.js для создания и упаковки приложений для настольных платформ. Я был очень впечатлен тем, что многие приложения, которые я уже использую, написаны на Electron! Сюда входят VSCode и Atom.io!
У Electron действительно отличная документация, и это малоизвестный фреймворк. Это означает, что у вас есть возможность создавать свои приложения Electron так, как вы хотите (помимо некоторой базовой структуры, о которой я расскажу в следующем разделе). Кроме того, поскольку Electron - это JavaScript, конвертировать интерфейсные приложения в Electron не так уж и сложно. В рамках своего обучения я фактически сделал это с помощью приложения Angular (подробнее об этом позже).
Чтобы помочь в создании приложений Electron, доступно несколько проектов интерфейса командной строки и шаблонов. Приложение Быстрый старт - отличное место для начала, так как вы можете легко изменить его, чтобы начать работу.
Еще мне очень понравилось работать с electronics-builder над сборкой и упаковкой моего приложения. Если вы немного погуглите, вы обнаружите, что есть также несколько других инструментов, включая electronic-packager, которые тоже хороши.
Наконец, я также хотел отметить, что если ваша команда уже знакома с интерфейсными технологиями, такими как JavaScript, CSS и HTML, то использование электронов является супер-интуитивным. С Electron можно использовать множество навыков, которые веб-разработчики используют каждый день. Вы даже можете использовать платформы для связывания, такие как webpack, чтобы делать еще более крутые вещи с вашими приложениями Electron.
Как устроены электронные приложения?
Итак, заимствуя из официальных документов, ваше приложение действительно состоит только из следующего:
your-app/
├── package.json
├── main.js
└── index.html- Очевидно, что файл
package.jsonуправляет зависимостями ваших проектов, но также определяет основную точку входа вашего приложения и (необязательно) конфигурацию сборки. - В файле
main.jsвы определяете поведение окна приложения, включая размер, меню панели инструментов, закрытие, значки и многое другое. - Страница
index.html- это основная презентация или «представление» вашего приложения. Вы также можете использовать дополнительные библиотеки JavaScript, как и в любом другом проекте.
Из этой базовой настройки вы можете увидеть, как можно создавать более сложные приложения. Эта настройка является минимальным, и, используя базовый HTML, CSS и JavaScript, вы можете создавать гораздо более крупные объекты с помощью этих строительных блоков.
Вам также, очевидно, понадобится установленный электрон в качестве зависимости или глобально в вашей системе для сборки и т. Д. Это может быть легко установлено с помощью всего лишь npm i electron.
В дополнение к вашим зависимостям файл package.json должен как минимум иметь следующее (снова скопировано и вставлено из документации):
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
Обратите внимание на главную запись в файле, она определяет расположение вашего main.js файла. Это очень похоже на то, как ExpressJS делает это с файлом index.js.
Также обратите внимание, что если вы используете electronics-builder, вам нужно определить
buildконфигурацию. Вы можете избежать этого, просто используя их интерфейс командной строки, в любом случае документация здесь поможет вам начать.
В файле main.js (опять же копирование из документации) у вас обычно будет такая настройка:
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create the browser window.
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// Open the DevTools.
win.webContents.openDevTools()
// and load the index.html of the app.
win.loadFile('index.html')
}
app.on('ready', createWindow)
Что делает этот код? Сначала вы создаете экземпляр приложения, а затем определяете его поведение окна. Метод createWindow определяет, что будет делать фактическое приложение, как оно обрабатывается ОС. Обратите внимание, что вы должны определить, как закрывается окно, и что вам нужно загрузить файл index.html.
Также обратите внимание на этот небольшой раздел:
// Open the DevTools. win.webContents.openDevTools()
Это тот самый Chrome DevTools, который мы знаем и любим? Почему да! Поскольку Electron использует те же внутренние компоненты, что и Chrome для веб-приложений, вы можете запускать DevTools и отлаживать свое приложение Electron так же, как и веб-приложение с Chrome.
Кроме того, эту базовую настройку в файле main.js можно настроить для процессов для платформ Mac, Windows и Linux. Например, на Mac вы обычно «выходите» из приложения, а не просто закрываете окно.
Для завершения вашего приложения Electron у вас должен быть соответствующий index.html файл, который выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
Обратите внимание, что это просто HTML. Это похоже на старые времена, когда вам приходилось вручную создавать страницы до таких фреймворков, как Angular или React. Однако это также очень просто, и вы можете представить, как внедрять пользовательские компоненты и другие варианты поведения прямо на вашу index.html страницу. Если вы знакомы со стандартным выводом таких сборщиков, как webpack, то вы также можете увидеть, насколько легко было бы ссылаться на пакеты и преобразовать интерфейсное приложение в Electron.
Я также не учел такие вещи, как файл renderer.js и файл preload.js, которые вы обычно видите в приложениях. Они не требуются для начала работы, но вы видите их во многих проектах и можете узнать больше об этих параметрах в документации здесь.
У производителей Electron тоже есть несколько хороших примеров, которые вы тоже можете просмотреть здесь.
После того, как вы настроили эти базовые файлы, вы можете запустить приложение с electron . в корневом каталоге вашего проекта. Для получения дополнительной информации ознакомьтесь с документацией по началу работы здесь.
Как упаковываются приложения Electron?
Как я упоминал в предыдущем разделе, после того, как вы настроили и запустили свое приложение, вы можете связать его с несколькими различными инструментами и утилитами.
Я нашел конструктор электронов очень полезным. Вы просто создаете свое приложение, подобное быстрому запуску, о котором я только что упоминал, а затем добавляете electronic-builder в качестве зависимости NPM к вашему проекту.
Доступные другие конструкторы имеют аналогичные конфигурации, но основная идея состоит в том, чтобы скомпилировать ваш JavaScript, CSS и HTML в двоичные файлы для различных платформ. Для Mac у вас будет файл DMG или .app. В Windows будет файл .exe и т. Д. Полученные двоичные файлы затем можно будет подписать и распространить через обычные платформы, такие как магазин приложений iOS или другой вариант развертывания.
Для своего приложения «Connect 4» я использовал electronic-builder и определил конфигурацию «build» в моем package.json файле следующим образом:
"build": {
"appId": "connectindex.htmlwith_electron",
"mac": {
"category": "public.app-category.entertainment"
}
}
В дополнение к этой настройке я также использовал интерфейс командной строки для построения электронов для создания упакованных версий моего приложения.
Что касается этих двух, то я предпочел CLI, потому что он требует наименьшего количества настроек. Я думаю, что в конечном итоге, какой бы из них вы ни выбрали, он будет зависеть от требований вашего проекта.
Электронные и угловые сборки
Итак, все это резюме привело нас к тому, что мы можем обсудить мое приложение Connect 4 Electron. Вы можете пойти дальше и сделать git clone проект здесь. Вы также можете обратиться к Angular-версии проекта здесь.
Сам проект в основном следует тем же правилам, через которые я уже прошел. Скетч или графическая часть игровой доски Connect 4 выполняется с помощью P5JS.
Приятно то, что моя реализация проекта в Electron очень похожа на мою реализацию того же кода на Angular.
В проекте Electron есть те же main.js, index.html и package.json, которые мы уже обсуждали. Единственная реальная разница заключалась в том, что я должен был следовать некоторым соглашениям о том, как работают скетчи P5JS (дополнительные сведения см. В документации). Я также создал контекстное меню и сделал несколько других небольших настроек.
Вдобавок, если вы посмотрите на главный home-page-component.ts, он будет иметь очень похожую структуру на файл sketch.js в приложении Electron. Я не буду вдаваться в подробности того, как P5JS обрабатывает изображения, но вы можете сравнить эти два раздела проектов и понять, насколько они похожи.
Однако что я действительно хотел подчеркнуть, так это то, насколько похож код. Я просто использую Angular здесь, поскольку я его фанат, но теоретически вы можете сделать это для любого из основных фреймворков внешнего интерфейса. Самым важным является понимание того, как приложения связаны с центральным index.html файлом и поддерживают «фрагменты» кода и стили CSS.
И Angular, и Electron состоят из JavaScript, CSS и HTML, которые объединяются для формирования приложения. Angular CLI создает пакет с веб-пакетом, который можно развернуть. Electron полагается на JavaScript, CSS и HTML для рендеринга своего приложения и использует компоновщики для упаковки двоичных файлов для распространения.
Вы действительно можете увидеть сходство, если сравните пакет Angular, созданный с помощью интерфейса командной строки и веб-пакета, с базовой структурой приложения Electron.
В Angular-реализации моей игры «Connect 4» финальный комплект выглядит следующим образом:
. ├── assets │ └── favicon.ico ├── favicon.ico ├── index.html ├── main-es2015.js ├── main-es2015.js.map ├── main-es5.js ├── main-es5.js.map ├── polyfills-es2015.js ├── polyfills-es2015.js.map ├── polyfills-es5.js ├── polyfills-es5.js.map ├── runtime-es2015.js ├── runtime-es2015.js.map ├── runtime-es5.js ├── runtime-es5.js.map ├── styles-es2015.js ├── styles-es2015.js.map ├── styles-es5.js ├── styles-es5.js.map ├── vendor-es2015.js ├── vendor-es2015.js.map ├── vendor-es5.js └── vendor-es5.js.map
Теперь сравните это со структурой электронной версии приложения «Connect 4» (очевидно, до того, как оно было упаковано):
. ├── LICENSE ├── README.md ├── dist ├── icon.icns ├── index.html ├── main.js ├── node_modules ├── package-lock.json ├── package.json ├── preload.js ├── renderer.js ├── sketch.js └── style.css
Нетрудно понять, как можно легко взять сборку, созданную из проекта Angular, и построить из нее приложение Electron. Вам действительно нужно просто вытащить файлы main.js, preload.js и renderer.js и сделать так, чтобы они ссылались на связанные пакеты из Angular CLI и веб-пакета. Это не совсем простая задача и потребует некоторого тестирования и т. Д., Но я просто хотел указать, что основные строительные блоки есть.
Мне действительно удалось это сделать с другим проектом. Потребовалось немного погуглить и узнать о разных строителях. На самом деле проблема заключалась не в преобразовании проекта, а просто в понимании того, как правильно генерировать двоичные файлы, которые я хотел. Если вы хотите сделать что-то подобное, я рекомендую вам действовать постепенно и не торопиться. Проще сначала сделать небольшой проект.
Заключительные мысли
Надеюсь, вам понравился этот пост, и он немного помог в получении знаний об Electron. Я рекомендую проверить свои проекты на GitHub для справки.
В целом, у меня есть хороший опыт работы с платформой и создания приложений. Я думаю, это действительно здорово, что вы можете использовать навыки внешнего интерфейса для создания настольных приложений. Также мне очень понравилась документация и большой объем информации по работе с Electron. В целом это было довольно просто.
Кроме того, когда вы будете готовы упаковать и развернуть, я настоятельно рекомендую electronic-builder и связанный с ним интерфейс командной строки. Они упростили создание электронных приложений, и в целом с ними было очень удобно работать.
Следуйте за мной в Твиттере на @ AndrewEvans0102!
Первоначально опубликовано на https://rhythmandbinary.com 6 декабря 2019 г.
