Вступление

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

От текстовых редакторов, таких как Visual Studio Code, Atom или Sublime, до платформ для онлайн-конференций, таких как Zoom, Microsoft Teams или Skype, до коммуникационных платформ, таких как Discord или Whatsapp, у нас есть ярлыки для многих таких приложений на нашем рабочем столе. В этой статье мы рассмотрим возможность разработки настольных приложений с использованием инфраструктуры JavaScript под названием Electron. Давайте начнем!

Что такое Electron JS?

Electron JS - это среда выполнения с открытым исходным кодом для создания настольных приложений с использованием HTML, CSS и Javascript. Он разработан и поддерживается GitHub. Он сочетает в себе механизм рендеринга Chromium со средой выполнения Node JS. Приложения, созданные с использованием Electron, являются кроссплатформенными, другими словами, совместимы с Mac, Windows и Linux. Большинство популярных настольных приложений разрабатываются с использованием Electron JS.

Работает

В приложениях Electron есть два процесса, а именно основной процесс и процесс рендеринга. Основной процесс создает экземпляры окна браузера и отвечает за отправку запросов в окно или передачу данных между различными окнами. Процесс рендеринга отображает окно как интерфейс для пользователя. Каждый процесс использует преимущества многопроцессорной архитектуры Chromium. Короче говоря, главный процесс управляет всем приложением и его отдельными процессами рендеринга. Electron также поддерживает различные API-интерфейсы для обоих процессов, что упрощает взаимодействие с операционной системой рабочего стола и ее ресурсами.

Начало работы с Electron JS

Перед тем, как начать работу с Electron, необходимо установить Node JS. С этим все в порядке. Перейдите в командную строку, cd в папку, а затем дайте

npm init -y

для создания файла package.json. Теперь, чтобы установить Electron, который является пакетом npm, дайте

npm install electron --save-dev

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

Как всегда, мы начнем знакомство с Electron с создания приложения «Hello World». Чтобы запустить основной процесс, мы должны создать файл main.js со следующим содержимым.

Функция createWindow () создает новое окно браузера с указанными размерами и загружает файл index.html. Кроме того, мы добавляем слушателей, чтобы останавливать приложение при закрытии окна и предотвращать одновременный запуск нескольких приложений.

Теперь для рендеринга приложения мы даем процессу рендеринга, который представляет собой простой файл index.html, чтобы отобразить «Hello World!» в новом окне.

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

npm start

который открывает новое окно Electron, которое выглядит следующим образом.

Если мы наблюдаем за окном приложения, у нас есть строка меню по умолчанию, которая заполняется при запуске приложения. С «Hello World!» После успешного создания приложения мы переходим к другому простому приложению, чтобы изучить некоторые другие возможности Electron JS.

Межпроцессного взаимодействия

Развивая наши знания, мы рассмотрим разработку многооконных приложений и обеспечение взаимодействия между ними. Эта функция называется межпроцессным взаимодействием (IPC). Обратите внимание, что у одного основного процесса может быть несколько процессов рендеринга. Однако эти процессы рендеринга не могут напрямую взаимодействовать друг с другом. Они должны использовать основной процесс в качестве посредника. Electron предоставляет нам два модуля IPC, а именно ipcMain и ipcRenderer.

Модуль ipcMain используется для связи основного процесса с процессами рендеринга. Этот модуль обрабатывает асинхронные и синхронные сообщения, отправленные из процесса рендеринга, когда он используется в основном процессе.

Модуль ipcRenderer используется для связи от процесса рендеринга с основным процессом. Этот модуль обрабатывает отправку синхронных и асинхронных сообщений от процесса рендеринга к основному процессу, а также получение ответов от основного процесса.

Обладая этими знаниями, мы теперь разработаем приложение, которое вводит данные о городе от пользователя в одном окне и отображает текущую информацию о погоде в городе в другом окне. Подробная информация о погоде берется из OpenWeatherMap API. В качестве дополнительной функции мы также создадим собственное настраиваемое меню для приложения. Теперь файл main.js будет выглядеть так:

Поскольку приложение включает два окна, у нас есть две функции: createMainWindow (), которая создает новое окно браузера и загружает index.html, и createAddWindow () , который создает новое окно и загружает add.html. Обработчик событий ipcMain (присутствует в основном процессе) получает данные из дополнительного окна (один процесс визуализации) и отправляет их в главное окно (другой процесс визуализации). Кроме того, мы создаем новое меню с сочетаниями клавиш, создавая новый шаблон меню.

Теперь главное окно создается файлом index.html со следующим фрагментом кода.

Приведенный выше код используется для отображения погодных условий конкретного города с помощью API OpenWeatherMap. Но где именно та функция ввода, которая была обещана ранее?

Мы используем другое окно, содержащее форму, для получения ввода от пользователя. Этой цели поможет содержимое файла add.html.

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

npm start

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

Вуаля! Мы успешно реализовали межпроцессное взаимодействие между двумя окнами с помощью модулей ipcMain и ipcRenderer.

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

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

Electron предоставляет нам электронный упаковщик, который объединяет всю кодовую базу в соответствующие пакеты и делает приложение готовым к производству. Чтобы установить электронный упаковщик, введите в терминале следующую команду:

npm install electron-packager --save-dev

Затем добавьте следующую строку под сценариями в файле package.json.

"package": "electron-packager ."

Теперь приложение готово к упаковке. Запустите упаковщик, набрав в терминале следующее:

npm run package

В каталоге вашего проекта будет создана новая папка, и внутри этой папки вы найдете исполняемый файл. Двойной щелчок по нему откроет наше созданное приложение. Мы ведь не использовали никаких команд для запуска приложения? Вот какой удивительный и мощный Electron JS!

Особенности Electron JS

Electron JS достаточно прост, чтобы начать работу, и он невероятно настраиваемый. Для разработки приложения не требуется отдельный интерфейс или процедура. Подобно тому, как разрабатываются веб-страницы, мы использовали базовый HTML, CSS и Javascript для разработки настольного приложения. Мы также определились с размером окна, параметрами меню и сочетаниями клавиш для выполнения желаемых действий. В качестве вишенки на торте приложения Electron JS так же совместимы с Linux и macOS, как и с Microsoft Windows.

Заключение

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

Удачного обучения!

использованная литература

Эта статья опубликована в рамках веб-среды JavaScripted в разделе Клуб исследований и разработки пауков, NIT Trichy!