Представляем Электрон
Node.js — это кроссплатформенная среда выполнения с открытым исходным кодом для разработки серверных веб-приложений с использованием JavaScript. Он использует движок Google V8 для интерпретации JavaScript. В настоящее время он очень часто используется для инструментальных целей в обычном цикле разработки программного обеспечения. Например, большинство клиентских JavaScript-фреймворков используют Node.js для автоматизации различных процессов разработки, таких как сборка, минимизация JavaScript, компиляция исходного кода и т. д. Но у большинства людей сложилось ложное впечатление, что узел предназначен исключительно для веб-приложений и утилит командной строки. Но правда в том, что мы можем использовать Node.js для создания большинства функций, как и другие языки программирования и платформы.
Эта статья посвящена использованию Node.js для создания настольных приложений, работающих во всех основных операционных системах. Возможно, вы сейчас задаетесь вопросом: «Подождите, я могу использовать JavaScript для создания настольных приложений?». Ответ «ДА», возможно, вы уже используете этот тип приложений в своей повседневной жизни. Вы когда-нибудь использовали Slack? Или редактор GitHub Atom, или Microsoft Visual Studio Code? Затем вы использовали настольное приложение на основе Node.js. Это некоторые из классических примеров настольных приложений на основе Node.js.
Когда дело доходит до фреймворков, есть несколько вариантов, но эта статья посвящена Electron. так что такое электрон? Это среда выполнения, которая позволяет разрабатывать настольные приложения с использованием HTML, CSS и JavaScript. Это фреймворк с открытым исходным кодом, разработанный GitHub. По сути, он работает, объединяя фреймворк содержимого хрома и Node.js в один фреймворк. Вы можете рассматривать его как вариант среды выполнения Node.js, ориентированный на настольное приложение, а не на веб-серверы. Это не означает, что Electron является привязкой JavaScript для собственных API-интерфейсов платформы и библиотек графического интерфейса. Ваше приложение будет работать в минимальном браузере Chromium, который управляется средой выполнения Node.js и JavaScript.
Интересно то, что вы можете использовать всю мощь хрома и Node.js вместе в одном приложении. Обычно веб-браузеры используют изолированные модели безопасности, которые блокируют доступ веб-страниц к компонентам операционной системы. Вы очень ограничены с веб-приложениями с точки зрения доступа к API собственной операционной системы. С другой стороны, Node.js обеспечивает собственный доступ на системном уровне, но не позволяет создавать графические пользовательские интерфейсы для вашего приложения.
Что мы будем строить
Это приложение для тех из нас, у кого есть осадочная работа. Чтобы продемонстрировать, как работает электрон, мы создадим небольшое настольное приложение, которое будет находиться в системном трее и уведомлять пользователя о необходимости вставать и двигаться с интервалами, которые устанавливает пользователь. Приложение будет кроссплатформенным, поэтому не имеет значения, используете ли вы Windows, Linux или Mac.
Требования к нему:
- Кросс-платформенный (в основном он будет вести себя одинаково независимо от операционной системы пользователя)
- Пользователь должен иметь возможность выбирать предустановленные интервалы для уведомлений.
- Уведомления должны иметь вид «Исходный».
- Уведомления должны вести себя как «собственные» уведомления.
Начальная структура проекта
Начнем с создания и настройки базовой структуры проекта. Первое, что вам нужно сделать, это создать папку проекта. Мой выбор ОС для моей рабочей станции — Windows 10, поэтому скриншоты и команды будут из нее.
Откройте новое окно Powershell/CMD и выполните приведенные ниже команды, чтобы настроить первоначальную структуру проекта:
- Перейдите на путь по вашему выбору.
- Создать новую папку.
- Перейдите во вновь созданную папку и выполните следующие команды
- npm init
- npm install --save-dev electronic
- npm install node-notifier - Создайте новый файл index.js в корне папки проекта, этот файл будет содержать весь наш код, так как это очень маленькое приложение.
- Запустите редактор и измените package.json в папке проекта. В файле есть свойство «скрипты» и измените его, чтобы оно выглядело так, как показано ниже.
Приступаем к кодированию
Весь код, который мы собираемся написать, попадет в созданный нами файл index.js. И когда мы запустим команду «npm run start», электрон запустится и загрузит файл index.js.
Начните с добавления приведенного ниже кода в index.js.
Так что же на самом деле делает приведенный выше код? Проще говоря, это минимальный старт для нашего приложения. После этого вы можете запустить «npm run start», и вы увидите новое приложение в системном трее, которое вы можете щелкнуть правой кнопкой мыши, и он покажет только 1 пункт меню «Выход», который закрывает приложение.
Обратите внимание, что в приведенном выше примере кода предполагается, что в папке проекта есть файл icon.png. Поэтому перед запуском приложения добавьте icon.png в папку проекта. Какой значок приложения будет отображаться в системном трее.
Следующий шаг — добавить одно уведомление и возможность показать его пользователю. Как это делается хорошо на самом деле довольно легко. Что нам нужно сделать, так это:
- Создайте функцию для отображения уведомлений.
- Добавьте переменную для хранения статуса, если уведомления включены/отключены.
- Добавьте 2 новых пункта меню в функцию getContextMenu().
Код ниже содержит обновленный index.js.
Запустив приложение сейчас, мы должны иметь возможность отображать некоторые уведомления, когда для включенной переменной установлено значение true и установлен временной интервал.
Расширение имеющегося у нас функционала
На данный момент приложение имеет следующий функционал
- Отображает значок приложения на панели задач
- У него есть меню, которое отображается, когда пользователь щелкает правой кнопкой мыши значок на панели задач
- Может показывать базовое тестовое уведомление
- Он может отображать базовое тестовое уведомление с интервалом в 10 минут.
- Уведомления, которые он показывает, выглядят и действуют как «собственные» уведомления.
Итак, чтобы достичь нашей цели, чего не хватает, так это
- Добавить дополнительные параметры интервала уведомлений
- Рефакторинг частей кода, так как некоторые значения являются статическими и код повторяется.
Один из примеров того, как может выглядеть рефакторинг и расширенный код, приведен ниже.
В приведенном выше коде есть несколько изменений, некоторые большие, а некоторые маленькие. Я не буду вдаваться в подробности, но скажу, что самое большое заметное изменение после рефакторинга заключается в том, что у нас есть массив строк уведомлений, из которых функция уведомлений выбирает строки случайным образом. Теперь, если мы запустим «npm run start» и попробуем уведомления, мы должны увидеть что-то вроде того, что показано ниже. :)
Что дальше?
Ну, это зависит от вас, вы можете сделать несколько других вещей, таких как
- Добавить способ для пользователя ввести определенный пользователем интервал времени
- Расширьте внешний вид уведомлений, добавив контент, например, клипы к медитативным видео на YouTube или что-то подобное.
- Найдите способ интегрировать его с носимыми устройствами, чтобы он мог уведомлять пользователя о том, что ему нужен перерыв, только если носимое устройство говорит, что пользователь сидит неподвижно в течение определенного периода времени.
Весь код и полный проект доступны в моей учетной записи GitHub в общедоступном репозитории. Не стесняйтесь клонировать или разветвлять, как вы считаете нужным :)
Если у вас есть какие-либо предложения по другим улучшениям, которые были бы крутыми, напишите их в комментариях ниже.
