Найдите код этого приложения здесь.

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

Electron взял эту динамику и перевернул ее с ног на голову, разработав структуру для разработки настольных приложений, использующих мощные веб-технологии, с которыми знакомо большинство разработчиков, такие как JavaScript, HTML и CSS, для создания гибридных приложений, которые можно упаковать для работы на Mac. Windows, Linux и любые другие операционные системы из единой кодовой базы.

Angular — одна из самых популярных в мире сред JavaScript/Typescript для создания модульных компонентов, которые используются для создания мощных, быстрых и безопасных одностраничных веб-приложений. Angular — мой выбор для этого руководства, поскольку он лучше всего демонстрирует мощь веб-технологий и может быть легко интегрирован с электроном для разработки удивительных гибридных настольных приложений.

Введение

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

Прежде всего, убедитесь, что на вашем компьютере установлена ​​последняя LTS-версия Node. Это связано с тем, что в старых версиях node и npm возникают проблемы с установкой электрона в Windows 8 и 10. Выполните следующую команду, чтобы проверить текущую версию узла.

node –v

Версии выше 7.0.0 кажутся подходящими, но наиболее рекомендуется последняя версия LTS. Если у вас нет узла, то вы можете скачать его на их сайте здесь.

Затем, если у вас нет Angular CLI, установите его глобально на свой компьютер, выполнив следующую команду в своем терминале.

npm install -g @angular/cli

Теперь вы готовы начать разработку.

1. Создайте новое приложение Angular

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

ng new electron-angular-starter

Затем войдите в каталог проекта angular с помощью следующей команды.

cd electron-angular-starter

2. Установите электрон

Находясь в каталоге проекта angular, установите электрон и сохраните его в файле package.json.

npm install electron --save

3. Обновите файл index.html.

В корневой папке только что сгенерированного проекта electronic-angular-starter откройте файл index.html и обновите базовую ссылку href, чтобы избежать каких-либо помех для электрона.

<base href = ’’./’’>

4. Настройте Электрон

Находясь в корневой папке вашего проекта, создайте новый файл с именем main.js. Это основной файл для вашего электронного проекта, и он определяет, как ваше настольное приложение будет действовать и функционировать.

Настройте функцию createWindow для определения свойств окна приложения. Эта функция управляет такими функциями, как размер, цвет, шрифты и так далее.

Когда приложение angular создается, файлы сохраняются в папке «dist» в корневой папке вашего приложения, и файл index.html в этой папке — это то, на что мы будем указывать в вашем новом файле main.js. Постарайтесь не путать его с файлом index.html в вашей папке «src». Это будет тело вашего электронного настольного приложения.

const electron = require('electron'); //require electron
const { app, BrowserWindow } = electron;//import these
let window;
function createWindow () {
// Create the new browser window.
window = new BrowserWindow({
width: 800,
height: 700,
backgroundColor: '#ffffff',
});
//set the URL to the angular build folder index.html file
window.loadURL(`file://${__dirname}/dist/index.html`)
// What happens when the window closes.
window.on('closed', function () {
window = null
});
}
// Create window when electron is initialized
app.on('ready', createWindow)
// Close process.
app.on('window-all-closed', function () {
if (process.platform !== 'win32') {
app.quit()
}
});

Обязательно используйте процесс закрытия, специфичный для вашей операционной системы.

(process.platform !== ‘win32’) //for windows
(process.platform !== ‘darwin’) // for macOS

Обновите файл package.json, чтобы отобразить новый файл main.js. Обычно я ставлю его перед объектом «скрипты».

“main”: “main.js”

5. Создайте угловое приложение

Создание углового приложения создаст папку «dist», о которой мы упоминали в нашем файле main.js. Для этого выполните в терминале следующую команду:

ng build

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

electron .

6. Упаковка приложения

Теперь мы подтвердили, что наше приложение работает, и пришло время упаковать его для различных операционных систем. Мы собираемся использовать электронный упаковщик для этого приложения, но вы можете исследовать и найти другие библиотеки, которые могут быть ближе к тому, что вы хотите. В терминале выполните следующую команду, чтобы установить его глобально, а затем сохраните его в файле package.json.

npm install electron-packager –g
npm install electron-package --save

Для упаковки для вдов мы используем «win32» в качестве платформы, тогда как для Mac OS мы используем Darwin. Однако для упаковки для Mac OS или Linux вам потребуется установить WineHQ.

electron-packager . --platform=win32

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

electron -v
electron-packager . --platform=win32 --electron-version= 1.7.9

Теперь у вас есть стандартное приложение для углов и электронов, которое можно упаковать для любой операционной системы.

Надеюсь, вам понравился этот простой урок. Пожалуйста, хлопайте, комментируйте и делитесь, если вы нашли этот урок полезным.