Превращаем генератор паролей в настоящую программу
Настало время настоящего программирования — собираем приложение из исходников.
У нас есть веб-страницы, они работают в браузере. С помощью JavaScript и CSS эти веб-страницы могут выглядеть и работать так же хорошо, как и приложения на компьютере — с интерфейсом, интерактивностью, хранением данных и так далее.
И есть сами приложения: они работают на компьютерах без браузера.
«Почему бы их не объединить? — подумали разработчики. — Пусть приложения из веба живут на компьютерах как десктопные приложения!» Так появился Electron.
Electron — фреймворк, который позволяет создавать на базе веб-страниц приложения для настольных операционных систем. В его основе — библиотека отображения страниц Chromium Node.js, которая расширяет возможности JavaScript. В результате из HTML-страницы с помощью Электрона получится готовое приложение, которое будет работать само по себе.
На базе Электрона построен, например, VSCode — один из любимых инструментов многих программистов. Если вы не знаете, что это — почитайте наш обзор средств разработки. Ещё на Электроне собрали новую версию Скайпа и десктопный клиент Вордпресса.
В этой статье мы соберём программу из нашего генератора паролей.
Также мы будем показывать все примеры на Windows. Для мака читайте документацию — всё будет почти так же, но с некоторыми нюансами.
Устанавливаем Node.js
Переходим на nodejs.org/en/download/ и выбираем свою операционную систему. Скачивание и установка дистрибутива займёт около 5 минут. В результате у вас на компьютере появится несколько новых программ, среди которых будет командная строка Node.js — Node.js command prompt. В ней мы и будем дальше собирать наш генератор.
Выбор платформы для установки
Чтобы убедиться, что всё установилось правильно, откроем командную строку Node.js и выполним такие команды:
Просто вводим эти команды в программу и нажимаем клавишу ввода:
Проверка прошла успешно — все версии на экране
Устанавливаем Электрон
Для этого запускаем такую команду:
Она установит Электрон и скачает все нужные файлы на компьютер, чтобы не выкачивать их каждый раз из сети.
После установки Электрона на компьютер добавилось 145 пакетов, часть их будет использоваться в проекте
Подготавливаем папку проекта
Самое простое приложение на Electron будет иметь такую структуру папок:
Это значит, что у нас должна быть папка с названием программы, где расположены три файла. Package.json отвечает за то, как Электрон соберёт наш проект, main.js — скрипт, который открывает окно приложения, определяет некоторые параметры и некоторые обработчики событий, а index.html — это будет наш файл с генератором, только под другим именем.
Создаём папку gen в корне диска С и наполняем её пока пустыми тремя файлами. Как наполнить эти файлы — читайте ниже.
Наполняем package.json
Наполняем main.js
Копируем генератор в папку проекта
Прелесть Электрона в том, что если у вас проект — одна HTML-страница, то всё, что вам нужно сделать, это скопировать её в папку проекта и переименовать в index.html. Так и поступим.
В итоге у нас в папке лежат все три файла, которые нужны для сборки. Можно приступать к основной части.
Устанавливаем модули
Нам понадобятся два модуля: один отвечает за окно браузера, в котором будет работать наша программа, а второй — за сборщик, который соберёт все файлы в один исполняемый автономный файл.
Оба модуля устанавливаются одинаково — в командной строке Node.js выполним по очереди следующее:
Собираем приложение
Не выходя из командной строки Node.js, переходим в папку проекта. Чтобы перейти на папку уровнем выше, используйте команду
А чтобы зайти в нужную папку, нужна такая команда:
Если всё сделано правильно, то командная строка будет начинаться так: с:\gen>
Теперь обновляем все зависимости в проекте. Это значит, что Электрон зайдёт в папку проекта, заглянет во все файлы и убедится, что у нас всего хватает. Если не хватает — подскажет, чего именно и где это взять.
Создание десктопного приложения с помощью Electron и веб-технологий
Знакомство с Electron
Изначально Electron был разработан для редактора Atom компанией GitHub.
Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.
Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.
Таким образом это не что иное как среда в которой будет выполнятся наше веб приложение.
На текущий момент Electron v0.35.0 включает в себя:
Хочу отметить ещё один, по моему мнению, плюс, который дает нам разработка десктопных приложений с помощью веб-технологий — отсутствие ограничения в создании пользовательского интерфейса.
Интерфейсом взаимодействия с пользователем является созданная нами веб-страница. В данном случае мы не ограничены системным набором элементов интерфейса нашей платформы и можем создавать нужные нам UI элементы с помощью веб-технологий. А учитывая, что в коробочке у нас один из самых продвинутых браузеров, мы можем использовать самые новые веб-технологии.
Я предполагаю, что вы будете использовать ваш основной текстовый редактор (или IDE), и у вас установлен Node.js/npm. Я также надеюсь, что у вас есть знания HTML/CSS/JavaScript (знания Node.js не помешали бы, но не является обязательными) так что я могу не беспокоится о вашем понимании создания веб-страниц. Если же таких знаний нет, то вы, наверное, будете чувствовать себя несколько потерянными, и я рекомендую вам вначале изучить основы веб-разработки.
Итак, как же работает Electron.
Входной точкой является основной файл определенный в файле package.json, именно он и выполняется, когда стартует ваше приложение. В этом основном файле (который обычно называется main) создаются окна приложения, в которых происходит рендеринг и отображение веб-страниц с дополнительною возможностью взаимодействия с нативным GUI вашей операционной системы. Процесс, который запускает основной скрипт, называется основной процесс (main process).
Electron использует Chromium для отображения веб-страниц, мульти-процессорная архитектура Chromium тоже используется. Каждая веб-страница в Electron запускается в своем собственном процессе, который называется рендер процессом (renderer process).
В обычном браузере веб-страницы запускаются в закрытом окружении (так называемой песочнице) и не имеют доступ к нативным ресурсам. Пользователи Electron, однако, имеют возможность использовать Node.js API на веб-страницах, имея доступ к взаимодействию с операционной системой на низком уровне.
Исходя из того, что мы уже знаем, для создания самого простого приложения нам нужно всего три файла:
package.json
main.js
index.html
Напишем простое приложение Hello world
Наше первое приложение будет выводит информацию о версиях тех частей, которые входят в Electron.
package.json в нашем случае будет выглядеть так:
«name»: «electron-simple-app» — это имя для вашего приложения;
«version»: «0.0.1» — это его версия, соответственно;
«main»: «main.js» — и основной скрипт.
Если поле main не будет указано в pakage.json, то по умолчанию Electron будет пытаться загрузить index.js файл.
В main.js мы должны создать окно нашего приложения и обрабатывать системные события, вот так будет выглядеть основной скрипт нашего приложения:
index.html — это веб-страница которую мы хотим отобразить:
Когда вы создадите все файлы или склоните репозиторий, вы захотите попробовать запустить ваше приложение локально и проверить, работает ли оно как задумано.
Для запуска приложения нам понадобится модуль electron-prebuilt.
Его мы можем с помощью npm поставить глобально или локально в наше приложение.
В случае глобальной установки для запуска приложения мы выполняем в корне нашего приложения команду:
В случае локальной установки выполняем:
В подготовленном мной репозитории для запуска приложения вам нужно установить зависимости:
и запустить скрипт с помощью npm:
Пример запуска созданного приложения можно посмотреть на видео ниже:
23 приложения на Electron, о которых нужно знать
Здесь мы представляем лучшие приложения Electron, доступные для настольных систем Linux, включая Ubuntu, а также macOS и Windows.
Не все ценят кроссплатформенную универсальность Electron так же, как мы. У некоторых возникают проблемы с количеством используемой ими памяти, процессора и размером занимаемого ими места на диске.
Но для тех, кто не против использовать приложения Electron, а также для тех, кто просто любит устанавливать новые приложения, может быть интересен обзор лучших приложений Electron, доступных для Linux.
Что такое приложения Electron?
Electron справляется со сложными задачами, позволяя разработчикам сосредоточиться на создании великолепных приложений с великолепным дизайном.
Преимущества использования Electron для создания приложения:
Недостатки использования Electron для создания приложений:
Каждое приложение Electron запускает свой отдельный экземпляр Chromium.
Поклонники Electron утверждают, что преимущества, функции и полезность этих приложений перевешивают заявления о чрезмерном использовании ресурсов. В конце концов, вы, вероятно, не будете запускать 23 приложения Electron одновременно, только пару.
Если ваш ноутбук или настольный компьютер не является антиквариатом, он, вероятно, отлично справится с запуском нескольких приложений Electron!
23 лучших приложений на Electron.js
После того как мы рассказали что такое Electron, давайте посмотрим, как разработчики используют его для настольных ПК. Ниже приведены 23 приложения Electron, которые я считаю достойными внимания.
1. Visual Studio Code (текстовый редактор)
VS Code включает в себя интеграцию с Git, подсветку синтаксиса, интеллектуальное завершение кода, фрагменты кода и рефакторинг кода. Пользователи могут быстро изменить внешний вид редактора с помощью тем, добавить дополнительные функциональные возможности с помощью доступных модулей и перенастроить сочетания клавиш.
Visual Studio Code поддерживает C, C#, C ++, HTML, JSON, Objective-C, Objective-C ++, PHP и другие.
2. Etcher (Запись образов)
С помощью Etcher легко создать загрузочную флешку на настольных ПК с Windows, MacOS или Linux.
Приложение для записи ISO имеет невероятно простой пользовательский интерфейс. Просто подключите пустой USB-накопитель, выберите совместимый образ ISO, и дождитесь окончания записи!
3. Raven (RSS Ридер)
Raven лучше всего работает локально и поддерживает импорт списка каналов в виде XML-файла. Последняя версия также интегрируется со службой RSS-ленты Inoreader, помогая синхронизировать прочитанные и непрочитанные элементы на разных устройствах и платформах.
Настоятельно рекомендуется для фанатов rss и новостных лент.
4. Temps (Погода)
Красивый вертикально ориентированный дизайн в сочетании с тонкой анимацией создает мобильное и привлекательное приложение. Temps может автоматически определять ваше местоположение (хотя вы можете ввести его вручную, если это необходимо).
Основное окно Temps показывает текущие условия для данного места, включая температуру, имеет скрытый интерактивный «почасовой» график условий и показывает краткий 4-дневный прогноз.
К сожалению, вы не можете переместить главное приложение Temps. Автоматически, оно исчезает, как только вы фокусируете другое приложение. Несмотря на этот недостаток, приложение остается полезным. Его элемент в трее может отображать текущие условия и температуру, что очень удобно.
Temps стоит скачать, если вы страстный любитель погоды.
5. Ramme (Instagram Клиент)
И да: Ramme даже позволяет загружать в Instagram с компьютера, телефон не нужен!
Ramme доступен для Windows, MacOS и Linux. Вы можете узнать больше о приложении на Github.
6. Museeks (Музыкальный плеер)
Museeks позиционирует себя как «простой, понятный и кроссплатформенный музыкальный проигрыватель», и, конечно же, это именно так.
Простой пользовательский интерфейс и библиотека мультимедиа позволяют легко управлять музыкальными файлами и сортировать их. Библиотека представлена в виде списка (без просмотра обложек альбомов здесь), и вы можете сортировать треки по названию, исполнителю, альбому или жанру.
В целом, без излишеств, но хорошо оснащен музыкальным проигрывателем Electron.
7. Tusk (Evernote Клиент)
Поскольку официального клиента Evernote для Linux не существует, веб-приложению хорошо известной службы ведения заметок предоставляется возможность справиться с трудностями.
Tusk предлагает более 70 сочетаний клавиш, дополнительные темы и режим фокусировки без отвлекающих факторов. Он даже позволяет вам экспортировать заметки в PDF, HTML или файлы разметки, чтобы вы могли делать полезные заметки в другом месте.
Независимо от ОС, Tusk является важным инструментом для пользователей Evernote.
8. Typora (Редактор Markdown)
Разработанный так, чтобы как можно меньше отвлекать пользователя от основной задачи. Здесь нет больших кнопок или яркой плавающей палитры. Вместо этого вы форматируете текст с использованием встроенной разметки markdown и автоматически отображаются отформатированный текст с использованием предварительного просмотра в реальном времени.
Помощь под рукой, если вы забудете, как вставить изображение или сделать текст жирным: просто выделите текст и / или щелкните правой кнопкой мыши.
Typora стоит попробовать для изысканного, внимательного написания, основанного на простом для изучения формате редактирования текста Markdown.
9. Windows 95 (OS)
Я добавляю этот приложение в пользу ностальгирующих геймеров и фанатов винтажа.
Да, вы можете запустить Windows 95 на вашем рабочем столе (Linux, macOS или Windows). Это полноценная ОС: инструменты, утилиты и игры, всё как в Windows 95. Вы можете играть в Doom в Windows 95 и создавать иллюстрации в Microsoft Paint и всё это из под вашей любимой Linux.
Созданное просто потому, что это возможно, приложение Windows 95 Electron обеспечивает триповый способ создания операционной системы без запаса мощности для традиционной виртуальной машины.
10. TweetTray (Twitter Клиент)
Откройте обычный веб-сайт Twitter в новой вкладке, и вы получите билет в один конец. Вот где приходит TweetTray.
Это простое приложение на основе трея позволяет вам делиться своими мыслями и размышлениями со всем миром, не беспокоясь о том, чтобы быть втянутым в новую вирусную нить или провал знаменитостей.
Восхитительно простое приложение позволяет твитнуть с рабочего стола и ничего более. Вы не можете читать твиты, отвечать на твиты или добавлять их в избранное, но вы можете поделиться своими мыслями и добавить картинки или изображения.
11. Mailspring (Email Client)
Почтовые клиенты для настольных компьютеров в наши дни устарели, и если вы большой любитель Gmail (как и я), вы можете вообще пропустить его.
Но Mailspring предлагает вескую причину не делать этого.
Во-первых, приложение невероятно хорошо разработано. Оно выглядит великолепно, и функционирует фантастически. Оно даже поддерживает пользовательские темы и другие макеты.
Во-вторых, оно полно действительно полезных функций. Фактически полезные, такие как: поддержка нескольких учетных записей (IMAP и Office 365); единый почтовый ящик; сверхбыстрый поиск по электронной почте; и пользовательские темы и макеты, чтобы помочь вам создать пользовательский интерфейс, который соответствует вашим вкусам (или теме вашего рабочего стола).
Поддержка почтовых подписей, встроенные инструменты перевода, средство проверки орфографии и, если хотите, такие функции «за», как отслеживание ссылок и отчёте о прочтении, также доступны в приложении.
Так что, если вы ищете современный настольный почтовый клиент для Linux, macOS или Windows, вам, честно говоря, не нужно искать дальше.
12. Simplenote (Продуктивность)
Все приложения Simplenote для настольных ПК используют Electron для предоставления удобного инструмента для заметок на разных платформах.
И хотя приложениям для настольных компьютеров не хватает расширенных функций, доступных через Evernote (см. Пункт № 7), я думаю, что для оно все-таки лучше: вы получаете надежный инструмент с облачной синхронизацией и историей изменений, но без наворотов и лишних функций которые все ты всё равно не используешь.
Если вам нужна целенаправленная и понятная заметка, ознакомьтесь с Simplenote.
13. Rambox (Сообщения)
Использование современных систем обмена сообщениями и социальных сетей имеет существенный недостаток: их очень много.
Rambox стремится решить эту проблему. Он объединяет ваши учетные записи для Twitter, Facebook Messenger, WhatsApp, Telegram, Slack и более 90 других сервисов в единое окно.
Поэтому вместо того, чтобы открывать в браузере 12 вкладок, просто откройте Rambox.
Rambox может похвастаться отличной интеграцией с рабочим столом, например уведомлениями о новых / непрочитанных сообщениях и апплетом в системном трее с быстрыми действиями, поддержкой мастер-пароля и режимом блокировки (чтобы отвлечь внимание от ваших социальных сетей) и полезной настройкой «не беспокоить» когда хочешь расслабиться и отдохнуть.
14. Skype
Ни один список приложений Electron не будет полным без ссылки на самое известное из всех приложений Electron: Skype.
VoIP-клиент Microsoft не является той мощной платформой, которой он был когда-то (благодаря видео и голосовым вызовам, внедряемым, казалось бы, во все мыслимые сервисы, включая Facebook Messenger и Telegram), но он все еще имеет место быть.
Для альтернативы Skype, ориентированной на конфиденциальность, я рекомендую попробовать Signal и Wire, которые используют Electron для своих настольных клиентов.
15. Discord (Сообщения)
Пока мы говорим о VoIP-клиентах, было бы упущением, если бы я пропустил Discord, бесплатный (но не с открытым исходным кодом) сервис обмена сообщениями в видеоиграх.
Discord может похвастаться более чем 200 миллионами пользователей и рассматривается как важный инструмент для общения геймеров (хотя многие другие сообщества также используют его). Он позволяет вам присоединяться к каналам чата, отправлять текст, изображения или видео другим пользователям, а также поддерживает аудиовызовы.
Самое приятное, что Discord работает на всех основных настольных операционных системах благодаря Electron.
16. Musixmatch Lyrics
Это в основном все, что он делает, но что еще нужно сделать?
17. Left (Писательский инструмент)
Для приложения также есть отличный онлайн-справочник.
Короче говоря, если вы серьезно относитесь к письму, вам нужно попробовать Left.
18. Upterm (IDE)
Частично терминал, частично интерактивная оболочка, частично IDE: Upterm превосходит ожидания.
Upterm имеет удобную функцию автозаполнения, которая исключает ошибки при вводе.
Этот инструмент также может похвастаться совместимостью и поддержкой большинства программ и утилит CLI, включая такие основные продукты, как vim, emacs, htop, git и другие.
19. Poddr (Клиент подкастов)
Если вы ищете настольный клиент подкастов с привлекательным дизайном, полезными функциями и доступом к самым популярным подкастам через iTunes, подружитесь с Poddr.
Poddr обладает всеми ожидаемыми функциями, включая просмотр и поиск подкастов, списки эпизодов, описания шоу, кнопки быстрого перехода назад / вперед и многое другое.
Пользователи Linux также получают выгоду от поддержки медиа-ключей и интеграции MPRIS. Приложение также доступно через магазин Snapcraft.
20. Sftp Client
Передача файлов с удаленных серверов не является простой задачей, но она легко справляется с ней.
Sftp Client не будет отличаться методом передачи от того же FileZilla, но его простой пользовательский интерфейс, может кому-то понравится больше. Это программа помогает передавать файлы по FTP, FTPIS, FTPES и SFTP, включая SSH Terminal, без особых хлопот.
Приложение скрывает несколько функций за «pro» подписку (который, естественно, стоит денег), но бесплатная версия также доступна.
21. Noty (Записки)
Я очень плохо запоминаю, что мне нужно делать, поэтому стараюсь писать что-то на пост-заметках (или на заметках) и прикреплять их на свой рабочий стол.
Большинство настольных компьютеров поставляются с функцией заметок для использования на рабочем столе. Но, честно говоря, у меня их слишком много. Они просто мешают.
Оно поддерживает автоматическое сохранение, поддерживает функциональность чекбоксов / списков дел, базовое форматирование текста и использует шрифт FiraCode, чтобы разрешить все виды изящных глифов и стрелок.
Революционный? Нет. Полезно? Абсолютно.
22. Image Shrinker (Фотография)
Я стараюсь стремиться к небольшому размеру файла (что ускоряет загрузку), но не влияет на качество.
Обычно я использую собственный инструмент сжатия изображений Linux (например, Trimmage) или командную строку. Но в последнее время я перешел на использование приложения Image Shrinker.
Быстро, эффективно и действительно очень приятно!
23. LosslessCut (Видео редактор)
Для быстрой и эффективной обрезки видео и аудио файлов используйте LosslessCut.
Это позволяет быстро пролистывать клипы, чтобы пометить часть видеофайла для «вырезания». Вы можете выбрать несколько разделов и объединить их в один клип, и все это без необходимости перекодировать или снижать качество.
LosslessCut работает на ffmpeg, поэтому поддерживаются наиболее распространенные форматы видео. А поскольку он работает без перекодирования или обработки видео, он тоже очень быстрый.
Вырезанное видео сохраняется в том же каталоге, что и исходное видео, без перезаписи.
Приложения на Electronjs не популярны, но могут быть полезны
Какие приложения Electron вы используете?
Поделитесь своими мыслями в разделе комментариев ниже
