Найдите код этого приложения здесь.
Многие организации заменили более традиционные настольные приложения более привлекательными веб-приложениями, отчасти из-за простоты их разработки, эстетики и, что наиболее важно, многоплатформенных возможностей. С веб-приложениями пользователь не ограничен конкретной операционной системой, такой как 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
Теперь у вас есть стандартное приложение для углов и электронов, которое можно упаковать для любой операционной системы.
Надеюсь, вам понравился этот простой урок. Пожалуйста, хлопайте, комментируйте и делитесь, если вы нашли этот урок полезным.