Я слышал об Electron, но никогда не использовал его, кроме клонирования и запуска одного из примеров приложений из README. Вместо того, чтобы изучать новый язык программирования или фреймворк, я решил, что пришло время посмотреть, смогу ли я перенаправить свои навыки Javascript, используя Electron, при этом создавая хороший пользовательский интерфейс.
Если вы следили за моими недавними статьями, значит, вы знаете, что я нахожусь в процессе создания службы хостинга изображений под названием Eikona. В настоящее время у меня есть рабочий прототип веб-приложения и серверных служб. Единственная недостающая часть - это настольное приложение, которое можно упаковать и установить для синхронизации данных между клиентом и сервисами Eikona. Если вы хотите узнать, где я сейчас, ознакомьтесь с моей последней статьей ниже.
Настройка Electron с помощью Vue.js
Я не буду тратить кучу времени на настройку Electron с Vue.js, так как по этой теме есть масса ресурсов и документации. Однако я кратко перечислю команды и шаги, которые я предпринял, чтобы мы могли добраться до хорошего - кода.
Я использовал vue-cli для создания начального каркаса для моего проекта, затем я использовал cd, чтобы войти в каталог проекта и, наконец, vue add electronic-builder и альт. Я был готов разработать настольное приложение с электроном, используя свои навыки Vue.js и Javascript.
Я был удивлен, насколько плавнее был процесс настройки электронов по сравнению с моими предыдущими попытками его использования. После всех настроек я добавил Vuetify (vue add vuetify) для компонентов пользовательского интерфейса, CSS-сетки и помощников утилит, и у меня получилось отличное начало для создания своего прототипа.
Базовый интерфейс
Моим первым шагом было создание базового пользовательского интерфейса для выполнения локальной синхронизации.
Настройка функций проводника в ОС Electron
Электронный dialog.showOpenDialog открывает файловый менеджер операционной системы. Параметры свойств позволяют вам установить, хотите ли вы разрешить файлы и каталоги. После выбора файла или каталога filePath возвращается и отправляется пользовательскому интерфейсу для заполнения формы синхронизации.
Настройте rsync с помощью Node.js
Перед инициализацией rsync поток основного процесса Electron ожидает отправки события start-sync из ipcRenderer. Флаги
- a - архивировать, рекурсивно синхронизирует файлы и папки с сохранением метаданных файлов
- v - подробный, для отображения прогресса на стандартный вывод для отправки в пользовательский интерфейс
- z - сжатие данных, полезно для медленных соединений
progress () - гарантирует, что прогресс передается в stdout и доступен в rsync.execute.
source () - каталог, который вы хотите синхронизировать
destination () - сервер или место на диске, с которым вы хотите выполнить синхронизацию.
Я запускаю rsync.execute, потому что он возвращает PID, который позволяет мне завершить процесс, чтобы гарантировать, что я не буду держать какие-либо соединения открытыми, если приложение закрыто или что-то пойдет не так.
Вы также заметите, что я возвращаю событие отправителю, когда синхронизация завершается с помощью sync-complete.
sync-inprogress отправляет информацию о ходе выполнения команды rsync в пользовательский интерфейс.
Добавить ipcRenderer в Vue.js
Добавляет объект ipcRenderer к объекту окна браузера, чтобы на него можно было ссылаться в Vue.js после добавления preload.js в пакет Javascript приложения Electron.
Подключите preload.js к потоку основного процесса Electron
Строка 23 - это то место, где файл preload.js был добавлен в комплект Electron.
Настройте пользовательский интерфейс для связи с потоком основного процесса Electron.
Все прослушиватели событий ipcRenderer находятся в хуке жизненного цикла mount (), потому что они всегда доступны (прослушивают) после отображения пользовательского интерфейса.
Интересной частью этого кода является функция scrollTo. Эта функция автоматически прокручивается до конца журнала выполнения rsync в пользовательском интерфейсе по мере его потоковой передачи. Это позволяет пользователю всегда видеть последний прогресс без постоянной прокрутки. Для достижения этой функциональности я установил пакет vue-scrollto и добавил элемент html с идентификатором, который находится в нижней части журнала выполнения rsync, чтобы компонент scrollTo имел фиксированный элемент пользовательского интерфейса для прокрутки. к. В функциональности scrollTo я установил состояние для isScrolling в onStart и onDone, чтобы несколько событий scrollTo не запускались, пока заканчивается предыдущее. потому что событие sync-inprogress постоянно запускается во время активной синхронизации.
Обложка кейсов UI Edge
Убедитесь, что всякий раз, когда обнаруживается событие обновления браузера, выдает kill-sync, чтобы в процессе синхронизации соединение не оставалось открытым, пока приложение закрыто.
Обеспечивает удаление прослушивателя событий beforeunload при уничтожении экземпляра Vue. Это предотвращает утечку обработчиков событий.
Собирая все вместе, мы получаем
Окончательные результаты
* Это прототип кода для демонстрации простоты использования и мощности электрона. Не подходит для производства.
Если вы нашли эту статью интересной и хотите, чтобы я публиковал больше на Electron по мере добавления функций в это приложение, оставьте комментарий ниже. Я планирую добавить в это приложение удаленную синхронизацию, аутентификацию, обработку ошибок, стыковку с системной строкой состояния и другие функции в ближайшем будущем.
