Svinkovod.ru

Бытовая техника
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Разработка и создание десктопных приложений на заказ

Разработка и создание десктопных приложений на заказ

Руководитель каждой организации старается оптимизировать и свой труд, и работу подчиненных. Если в вашем распоряжении правильно организованная база данных и удобная компьютерная программа, помогающие бизнесу развиваться — вы на правильном пути. С их помощью не только оптимизируются рабочие процессы, но и сокращаются расходы, следовательно, увеличивается прибыль.

Что из себя представляют десктопные приложения

Десктопные приложения — это программное обеспечение, устанавливающееся на компьютер пользователя. Они функционируют вне зависимости от наличия интернета. Для правильной и эффективной работы нужен только оператор. Скорость работы десктопных приложений зависит от операционной системы, им нужна установка непосредственно на каждую рабочую станцию. К таким приложениям можно отнести:

  •  текстовый редактор;
  •  Microsoft Word;
  •  Excel;
  •  Блокнот;
  •  медиа-плеер;
  •  программы для расчетов, исчислений, изучений и прочие.

В общем понимании, все программное обеспечение, установленное на персональный компьютер и является десктопным.

Разработка десктопных приложений

Компания VolhinSoft — это команда специалистов, профессионально занимающаяся разработкой десктопных приложений:

  • для Windows или АИС;
  • на Java, С#, Python ИЛИ Javascript.

Мы также под заказ напишем desktop приложения под операционную систему Linux и MacOS по различным направлениям, от утилиты до разметки данных или автоматизации промышленных процессов.

Разработанное нами десктоп-приложение, сможет работать с System Tray, запускаться автоматически, интегрироваться с системным меню, функционировать с сервером с помощью RSS, SOAP/Web Services, XML RPC, HTTP/HTML forms, REST.

По индивидуальному заказу мы сможем недорого разработать приложение, реагирующее:

  •  с клиент-сервером;
  •  как самостоятельное приложение;
  •  с графическим интерфейсом.

У нас вы также сможете заказать по приемлемой стоимости desktop-приложение, обладающее инсталлятором и автоматической системой обновления через сеть Интернет.

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

Наши предложения

Компания VolhinSoft специализируется на уникальных корпоративных информационных системах. Мы:

  •  разработаем программное обеспечение на заказ;
  •  построим сервис-ориентированную инфраструктуру предприятия — SOA;
  •  создадим программное обеспечение по готовому техническому заданию или разработаем его вместе с вами;
  •  протестируем программы в ручном, автоматизированном, нагрузочном и безопасном режиме;
  •  создадим техзадание с возможностью дальнейшей его разработки;
  •  обучим работе в программе и обеспечим техническую поддержку.

Разработанные нами приложения успешно функционируют в:

  •  коммерции;
  •  финансах;
  •  медицине;
  •  энергетике;
  •  транспорте.

Любой рабочий процесс в нашей компании заключается в следующих этапах:

  •  составлении технического задания;
  •  разработке структуры и дизайна;
  •  программирования (непосредственно разработки ПО);
  •  тестирования и отладки приложений;
  •  установки программного обеспечения на рабочие станции заказчика;
  •  обучение операторов работе с программой;
  •  обслуживание приложений в течение всего их жизненного цикла.

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

Десктопные приложения на JavaScript. Часть 2

Десктопные приложения на JavaScript. Часть 2

2016-01-21 в 9:12, admin , рубрики: angular.js, crypto.js, javascript, nw.js

Данная статья является продолжением статьи «Десктопные приложения на JavaScript. Часть 1». В предыдущей части мы рассмотрели следующее:

  • установка NW.js
  • сборка и запуск приложений на NW.js
  • основы работы с нативными контроллами (на примере создания меню)

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

Основа приложения для хранения паролей

Как известно, разработку можно вести как на чистом JavaScript, так и используя разнообразные фреймворки, которых существует такое огромное количество, что порой теряешься в их многообразии и долго не можешь решиться, что же в итоге выбрать. Для разработки приложений особенно популярны паттерны, название которых начинается с MV (MVC , MVVM , MVP ). Одним из фрейворков использующих подобный паттерн, является Angular JS, именно его мы и будем использовать при разработке нашего приложения. Если вы не знакомы с ним, советую почитать документацию (tutorial , API), также можно почерпнуть основные сведения в руководстве на русском языке.

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

Читайте так же:
Видеоплеер для видеорегистратора с gps

Реализуем базовую функциональность приложения. Для этого необходимо создать папку, в которой мы будем распологать исходный код, а также поместить в нее package.json (о том как это сделать, см. Часть 1).

Создадим базовую структуру папок, состоящую из следующих директорий:

  • CSS — в этой папке будем размещать стили (Добавим сюда файл index.css, в котором будут содержаться основные стили)
  • Controller — здесь будут находится контроллеры
  • View — папка для представлений
  • Directive — папка с директивами
  • Lib — библиотеки (в эту папку необходимо скопировать angular.min.js, о том как добавить angularJS)

Кроме того в корень проекта добавим файл index.html, который будет являться точкой входа в приложение. Создадим базовую разметку:

Так как приложение у нас достаточно простое, создадим контроллер и в рамках него будем размещать всю основную логику приложения (по мере разрастания логики, необходимо добавить папку Service и размещать в ней сервисы, в которых и должна размещаться вся сложная логика, контроллеры по возможности необходимо оставлять «тонкими»). Назовем контроллер main, а файл контроллера main.ctrl.js. Итак, заготовка для контроллера:

Данные, содержащие логины/пароли, для нашего прототипа будут размещаться в массиве data. Для упрощения реализации редактирования, создадим свой элемент EditableText и оформим его в виде директивы. Данный элемент будет работать следующим образом: элемент отображается как текст, при щелчке по элементу, текст превращается в тектовое поле input, при потере фокуса элемент вновь отображается как текст. Для этого создадим внутри папки View файл с разметкой для директивы editableText.html:

А внутри папки directive создадим файл editableText.js:

Для работы директивы необходимы также некоторые стили, которые можно разместить внутри index.css:

Использование директивы происходит следующим образом:

Для логина все в порядке — отображаем либо текст, либо текстовое поле, но как быть с паролем, ведь мы не должны его показывать. Добавим в scope нашей директивы поле crypto следующим образом:

А также изменим разметку директивы:

Кроме того, необходимо не забывать добавлять скрипты в index.html:

Пришло время добавить функциональность. Изменим контроллер следующим образом:

Кроме того необходимы изменения в разметке:

На данном этапе можно заняться стилизацией. Пример простой стилизации (напоминаю, что добавляем стили в index.css, однако если стилей будет достаточно много, можно разбить стили по файлам или даже использовать препроцессор, например LESS):

Приложение выглядит следующим образом:

Десктопные приложения на JavaScript. Часть 2 - 1

Работа с буфером обмена

Итак, основа приложения готова, но оно пока не реализует основное назначение, мы не можем копировать пароли (вернее можем, но достаточно неудобно). Для начала рассмотрим работу с буфером обмена в NW.js
Существует специальный объект — Clipboard, который используется как абстракция для буфера обмена Windows и GTK, а также для pasteboard (Mac). На момент написания статьи осуществляется поддержка записи и чтения только текста.
Для работы с объектом нам понадобится знакомый нам модуль nw.gui:

Обратите внимание, что мы не может создать свой объект, мы можем получить лишь системный. Поддерживаются три метода:

  • get ([type]) — получить объект из буфера обмена с указанием типа данного объекта, по умолчанию text, однако пока это единственный поддерживаемый тип
  • set (data, [type]) — отправить объект в буфер обмена (также поддерживается лишь type — «text»)
  • clear — очистить буфер обмена

Теперь можно доделать функциональность приложения, и контроллер будет выглядеть следующим образом:

Хранение паролей

После того, как приложение было запущено, пользователь занес на хранение несколько паролей, закрыл приложение. На следующий день оказывается, что пароли пропали. Проблема в том, что мы держали их в обычной локальной переменной, которая при закрытии удалилась.
В третьей части мы рассмотрим работу NW.js с базами данных, а пока будем хранить пароли в localStorage. Прежде чем приступить к созданию функционала, (хотя приложение у нас пока лишь только прототип) необходимо позаботиться о безопасности. Для этого мы не должны хранить пароли в открытом виде.
Для шифрования/дешифрования существуют различные библиотеки на JavaScript. Одной из таких библиотек является crypto-js. Установим ее как модуль для node.js. Библиотека поддерживает большое количество стандартов, полный список которых можно найти в документации. При этом, можно подключить как все модули, так и отдельный модуль:

Для того, чтобы зашифровать сообщение используется метод encrypt:

Расшифровка происходит немного сложнее:

Давайте модифицируем наше приложение для того, чтобы мы могли сохранять пароли при закрытии приложения и загружать их при запуске.
Создадим сервис crypto.svc и поместим в папку service (если вы еще не создали данную папку, то создайте ее в корне приложения):

Читайте так же:
Восстановление стима через почту

Для использования нашего сервиса модернизируем контроллер:

Кроме подключения сервиса, нам так же понадобился уже существующий в AngularJS сервис $scope. Мы используем метод $watch для отслеживания момента изменения данных, для того, чтобы вовремя сохранить их (обратите внимание, что третьим аргументом мы передаем true для того, чтобы отслеживались изменения не только в массиве, т.е. вставка/удаление, но и изменения элементов массива, т.е. изменение логина или пароля отдельного элемента массива). Загрузка данных происходит при открытии представления.

Сворачиваем в трей

Основа приложения готова, но как известно подобные программы зачастую сворачиваются в системный трей, чтобы не перегружать пользователя обилием открытых окон.
Еще одна абстракция, которую ввели в NW.js — это трей: System Tray Icon для Windows, Status Icon для GTK, Status Item для OSX. Данный объект создается с помощью известного нам модуля gui:

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

  • Title — будет показываться только в Mac OSX
  • Tooltip — подсказка, доступная на всех платформах
  • Icon — иконка, отображаемая в трее, также доступна на всех платформах
  • Menu — меню, которое в Mac OS X будет появляться по щелчку, для Windows и Linux — будет реагировать на одиночный щелчок и щелчок правой кнопкой (о том, как создать меню, см первую часть цикла статей)

Для того, чтобы использовать трей в нашем приложении, необходимо создать любой элемент разметки, наиболее очевидным вариантом является кнопка button. Далее необходимо подписаться на событие click, и использовать методы объекта window, с которым мы сейчас и познакомимся.

Работаем с окном

Для работы с окном, необходимо либо получить существующее окно, либо создать новое. Итак, для того, чтобы получить текущее окно, в котором и отображается наше приложение, необходимо выполнить команду:

А для создания нового окна, необходимо указать адрес, по которому располагается страница, для открытия в данном окне, а также параметры для открытия (данные параметры соотвествуют тем, что мы указываем при создании манифеста, см. первую часть из цикла статей):

Также в параметрах можно передать специальное свойство focus: true, при указании которого, только что созданное окно сразу же получит фокус, в противном случае фокус останется на нашем текущем окне.
Если мы создаем новое окно и хотим что-то с ним сделать после того, как оно будет создано, необходимо подписаться на соответствующее событие:

Как видно из примера, одним из свойств окна является объект window, из которого мы можем получить остальные элементы, включая document. Кроме данного свойства окно также поддерживает множество других:

  • x, y — координаты окна
  • width, height — размеры окна
  • title — заголовок окна
  • menu — главное меню приложения, которое будет располагаться в верхней части окна

Данные свойства можно не только читать, но и изменять. Кроме них также есть свойства, доступные только для чтения (все они логические и могут принимать значения true или false)

  • isTransparent — является ли окно прозрачным
  • isFullscreen — открыто ли окно на полный экран
  • isKioskMode — открыто ли приложение в киоск моде

Помимо свойств, объект поддерживает большое количество методов. Основные методы приводятся ниже и для удобства объединены по группам.
Методы для изменения позиции и размеров окна:

  • moveTo — переместить окно на позицию, переданную в параметрах в виде координаты x и координаты y
  • moveBy — переместить окно на определенное количество пикселей вправо и вниз (в случае задания отрицательных аргументов влево и вверх)
  • resizeTo — изменить размеры окна: первый аргумент указывает ширину, второй — высоту окна
  • resizeBy — изменить размеры окна на определенное количество пикселей вправо и вниз (в случае задания отрицательных аргументов влево и вверх)
  • setPosition — задать специфическую позицию окна, переданную в качестве аргумента (на данный момент поддерживается только ‘center’)

Методы для работы с фокусом и видимостью:

  • focus — метод без параметров для передачи фокуса окну
  • blur — метод без параметров для того, чтобы сделать окно не активным
  • hide — скрыть окно
  • show — показать окно, однако если передать в качестве аргумента false, то метод будет работать как hide

Методы для управления свертыванием/развертыванием, закрытием окна:

  • close — закрытие окна, при этом возникает событие close, однако если передать в качестве аргумента true, то событие возникать не будет
  • reload — перезагрузить окно
  • reloadDev — перезагрузить окно, но с элементами разработчика
  • maximize — распахнуть окно на весь экран
  • unmaximize — вернуть окно в исходный размер после того, как окно распахнули
  • minimize — свернуть окно
  • restore — развернуть окно, противоположно minimize
  • setShowInTaskbar — показывать ли окно на панели задач
  • setAlwaysOnTop — показывать ли окно поверх других
Читайте так же:
Ецхд видеонаблюдение вход через судир

Методы для управления состоянием:

  • enterFullscreen, leaveFullscreen, toggleFullscreen — управление полноэкранным режимом
  • enterKioskMode, leaveKioskMode, toggleKioskMode — управление киоск режимом
  • setTransparent — установить/сбросить прозрачность окна, в зависимости от переданного аргумента
  • showDevTools — показать инструменты разработчика
  • closeDevTools — скрыть инструменты разработчика
  • isDevToolsOpen — проверка: открыты ли инструменты разработчика

Методы управления возможностью изменять размеры окна

  • setResizable — установить/сбросить возможность изменения размера экрана
  • setMaximumSize — задать ограничения на максимальный размер экрана (первый аргумент — ширина, второй — высота)
  • setMinimumSize — задать ограничения на минимальный размер экрана (первый аргумент — ширина, второй — высота)

Итак, познакомившись с объектами tray и window, напишем функциональность сворачивания в трей. Для этого в разметку необходимо (как говорилось выше) добавить элемент, например кнопку или ссылку:

И изменить контроллер следующим образом:

Также для работы данного примера необходимо создать папку img и поместить туда иконку трея (в данном примере это img/test.png).

Заключение

В рамках статьи мы написали прототип приложения, который вы можете улучшить различным образом: начиная от стилей и заканчивая улучшениями в функционале. Например:

Десктопные приложения на JavaScript. Часть 1

Ни для кого не секрет, что в наше время JavaScript стал одним из самых популярных языков программирования. В далекие 90е годы, в момент зарождения языка, когда он был создан с единственной целью добавить интерактивность веб страницам и улучшить процесс взаимодействия с пользователем, кто бы мог подумать, что он достигнет столь небывалых высот. Ведь сейчас на нем можно делать практически все что угодно. Хотите написать сайт: и бэкэнд и фронтэнд на JavaScript? пожалуйста! Хотите написать мобильное приложение на JavaScript? нет проблем. Программируете микроконтроллер – и тут вам на помощь придет JavaScript.

Есть конечно небольшие минусы в подходе использования JavaScript везде, но если поразмыслить, то сколько времени и сил можно сэкономить, изучив всего лишь одни язык, особенно, если то же самое приложение должно работать на разных платформах. Разных платформах говорите? Хм… Точно – разных платформах – теперь JS может позволить себе десктопные приложения для Windows, Linux, Mac, как спросите вы? Ответ прост: встречайте – NW.js.

По первым буквам можно прочитать – Node.js + Webkit, если данные понятия вам пока не знакомы, то скоро вы поймете о чем идет речь.

Node.js – программная платформа, основанная на движке V8, который транслирует наш скрипт в машинный код. Данная платформа была создана в 2009 году преимущественно для работы с бэкэндом сайтов.

WebKit — свободный движок, разработанный компанией Apple. Впервые был анонсирован в составе Safari в 2003 году
Итак, коду, написанному на JS для данной технологии, будут доступны как Node.js модули, так и стандартный браузерный API (соответственно WebKit)

Быстрый старт

Все это конечно хорошо, но с чего же начать? На github можно найти и скачать репозиторий с исходным кодом. Так же здесь можно найти прямые ссылки для скачивания под ту платформу, на которой будет вестись разработка. Помимо прочего нам понадобится установленная node.js.

После того, как необходимое ПО скачано и установлено, вы написали свое приложение на любимом JS (как это сделать читайте далее) и локализовали все в одну папку. Полдела сделано, теперь остается самое сложное и долгое – упаковать все в один файл и подготовить для распространения. Для упрощения вы можете воспользоваться готовыми библиотеками, например nw-builder. Установка библиотеки не составит труда, если вы уже работали с node.js. Как известно, в состав node.js входит менеджер пакетов npm, с которым нужно работать из командной строки. Для того, чтобы поставить какую-либо библиотеку, необходимо выполнить команду:

Обратите внимание, что библиотеку можно ставить, как локально, так и глобально, для локальной установки используйте опцию —save-dev, для глобальной -g. Таким образом поставим наш сборщик для NW.js глобально, выполнив команду:

Для того, чтобы собрать наше приложение, необходимо выполнить команду (с большим количеством опций можно ознакомиться в документации):

В качестве имени платформы могут быть следующие значения: win32, win64, osx32, osx64, linux32, linux64.

Читайте так же:
Восстановление удаленной переписки вконтакте

Во время разработки нет нужды каждый раз собирать приложение, можно просто запустить его как есть и оно откроется в отдельном окне. Для этого нужно запустить приложение nw.exe из командной строки и передать в качестве параметров путь к папке с вашим приложением. Кроме того, если вы работаете под Windows, можно просто методом drag-n-drop перетащить папку с исходным кодом приложения на JS (обратите внимание, что именно папку целиком) в nw.exe.

Hello, world!

Теперь, когда вы знаете, как запустить приложение, как собрать его в один файл, давайте напишем что-нибудь. По традиции знакомство с новой платформой начинается с написания приложения Hello, world.

Для данного приложения, нам даже не понадобится JavaScript, только HTML. Создадим папку с названием HelloWorld. Поместим внутрь файл index.html со следующей разметкой:

Кроме того для каждого приложения под NW.js необходим файл, который обязательно должен называться package.json. Из него будет браться информация для построения приложения. Создадим простейший вариант файла и поместим в папку HelloWorld. Итак:

Содержимое файла понятно без пояснений (обратите внимание, что обязательные поля только main и name). В main необходимо записать файл с разметкой, который будет являться точкой входа в приложение. Секция window настраивает параметры окна (в данном случае мы отключаем панель инструментов и задаем размеры окна 500×200).

Кроме того, можно настроить такие поля как (за полным списком опций обращайтесь в документацию):

  • icon – указываем путь до иконки (переопределить стандартную)
  • position – можно указать позицию окна при загрузке (null, center или mouse)
  • min_width, min_height, max_width, max_height – ограничение размеров окна
  • resizable – логическое значение, которое показывает можно ли пользователю изменять размеры окна
  • fullscreen – включить полноэкранный режим
  • kiosk – включить режим киоска
  • transparent – сделать окно прозрачным

Приложение написано, но в нем всего один div элемент и совсем нет логики, а что делать, если у нас богатая на элементы разметка и сложная логика? На помощь к нам приходит элемент конфигурационного файла toolbar, который мы установили в false. Для того, чтобы сделать доступными средства отладки, необходимо установить toolbar в true. Проделав это при запуске приложения мы получим следующее окно:

После нажатия на кнопку в верхнем правом углу откроется еще одно окно, в котором будут отображены знакомые инструменты разработчика:

Работа с нативными контролами

NW.js позволяет работать с нативными контролами. Рассмотрим работу на примере меню. Для работы с нативным UI контролами в nw.js необходимо использовать модуль nw.gui, который можно подключить следующим образом:

Общий шаблон для использования контролов:

Таким образом для создания элементов меню можно воспользоваться следующей конструкцией:

Кроме того любые свойства созданного нами объекта можно легко изменить стандартными конструкциями JS, например так:

Меню создано, теперь нужно его заполнить, для манипуляции дочерними элементами существуют методы:

Кроме того для более гибкого добавления элементов в menu можно воспользоваться методом insert, в параметрах которого необходимо передать MenuItem и номер позиции, куда его вставить (позиция перед первым элементом соответствует 0).

Для доступа к созданным элементам можно использовать свойство items:

Обратите внимание, что нельзя напрямую создавать элементы:

Самое главное при работе с нативными контролами, это помнить, что любая ошибка при работе с ними может привести к краху всего приложения, поэтому необходимо быть крайне внимательными и по возможности при удалении элементов, также присваивать переменной значение null. Таким образом для удаления контрола, можно выполнить следующее:

Для более удобной работы с контролами, они унаследованы от EventEmitter, поэтому хорошая новость в том, что мы можем легко работать с событиями, например так:

Меню было создано, но если запустить приложение, то никакого меню вы не увидите. Для отображения меню существует метод popup, в параметрах которого необходимо передать координаты для отображения меню.

Для демонстрации основных возможностей меню добавьте следующий скрипт к созданному ранее проекту Hello, world:

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

Итак, теперь кроссплатформенные приложения может создавать каждый, но за все нужно платить. В данном случае мы жертвуем как скоростью, так и занимаемым объемом памяти (собранное приложение получается достаточно большим, более 50 Мб). Список приложений, созданных, используя данную технологию можно найти на github.

Первое десктопное приложение на HTML, JS и Electron

Веб-приложения становятся все более мощными с каждым годом, но остается еще место для классических приложений, обладающих полным доступом к оборудованию компьютера. Сегодня вы можете создать десктопное приложения при помощи хорошо знакомых вам HTML, JS и Node.js, упаковать его в исполняемый файл и пользоваться им на Windows, OS X и Linux.

Читайте так же:
Битрикс шаблон главной страницы

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

Начинаем работу с Electron

Программы, которые создаются при помощи Electron это просто веб сайты, которые открываются во встроенном браузере Chromium. В дополнение к стандартным API HTML5 эти сайты могут использовать полный набор модулей Node.js и специальных модулей Electron, которые позволяют получить доступ к операционной системе.

В этом уроке мы создадим простое приложение, которое получает последние статьи с сайта Tutorialzine через RSS и отображает их в виде карусели. Все исходники, вы можете скачать архивом по ссылке. Распакуйте его содержимое в любую директорию на вашем компьютере.

Глядя на структуру файлов вы никогда бы не догадались что это десктопное приложение, а не просто веб сайт.

Мы рассмотрим наиболее интересные файлы и то как они работают минутой позже, а пока давайте заглянем под капот.

Запуск приложения

Поскольку приложение Electron это просто Node.js приложение, вам нужно установить npm. Сделать это довольно просто.

Откройте терминал и выполните в директории проекта следующую команду:

Это создаст папку node_modules, содержащую все необходимые зависимости для приложения. Затем, введите в терминале следующее:

Приложение должно открыться в новом окне, обратите внимание, что оно имеет только верхнее меню и больше ничего.

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

Как это сделано

Сейчас мы поговорим о наиболее важных файлах, которые используются в любом приложении, написанном при помощи Electron. Давайте начнем с файла package.json, который содержит различную информацию о проекте. Например, версию, список npm зависимостей и другую не менее важную информацию.

package.json

Если вы уже работали с Node.js, то у вас уже имеется представление как это все работает. Важно отметить команду npm start которая запускает приложение. Когда мы вызываем эту команду в консоли, то просим electron запустить файл main.js. Этот файл содержит маленький скрипт, который открывает окно приложения, определяет некоторые параметры и обработчики событий.

main.js

Давайте взглянем на то, что мы делаем в методе ready . Сначала мы определяем окно браузера и устанавливаем его первоначальный размер. Затем мы загружаем в него файл index.html, который работает точно так же, как если бы мы открыли его в браузере.

Как вы видите, в самом файле нет ничего особенного — контейнер для карусели и пункты для отображения статистики использования процессора и оперативной памяти.

index.html

Здесь у нас html-код, ссылки на необходимые стили, js библиотеки и скрипты. Заметили что jQuery подключен странным способом? См. этот issue, чтобы узнать почему подключение происходит именно так.

Наконец, собственно сам JavaScript код нашего приложения. В нем мы подключаемся к RSS ленте, получаем последние статьи и показываем их. Если мы попытаемся провернуть такую операцию в окружении браузера, то ничего не получится. Канал находится на другом домене и получение данных с него запрещено. Однако в Electron такого ограничения нет, мы можем получить необходимую информацию при помощи AJAX-запроса.

Есть одна классная вещь, в приведенном выше коде, она заключается в том, что в одном файле можно одновременно использовать:

  • JavaScript библиотеки — jQuery и jQuery Flipster для создания карусели.
  • Собственный модули Electron — оболочку, которая предоставляет API для desktop-задач. В нашем случае открытие url в браузере по умолчанию.
  • Node.js модули — Модуль OS для доступа к информации о системе, Pretty Bytes для форматирования.

С их помощью наше приложение готово к работе!

Упаковка и дистрибуция.

Есть еще одна важная вещь, которую нужно сделать чтобы ваше приложение попало к конечному пользователю. Вы должны упаковать его в исполняемый файл, который будут запускать двойным щелчком. Необходимо будет собрать отдельный дистрибутив для каждой из систем: Windows, OS X, Linux. В этом нам поможет Electron Packager.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector