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

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

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

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

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

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

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

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

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

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


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

(function () {
    'use strict';

    angular
        .module('main', [])
        .controller('MainCtrl', [MainCtrl]);

    function MainCtrl() {
      this.data = [];

        return this;
    }

})();

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

<input  ng-model="value">
<span ng-click="edit()">{{value}}</span>

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


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

.editable-text span {
   cursor: pointer;
}

.editable-text input {
   display: none;
}

.editable-text.active span {
   display: none;
}

.editable-text.active input {
   display: inline-block;
}

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

<editable-text value="variable"></editable-text>

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

scope: {
   value: "=",
   crypto: "="
}

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

<input  ng-model="value">
<span ng-click="edit()">{{crypto?'***':value}}</span>

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

<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="controller/main.ctrl.js"></script>
<script type="text/javascript" src="directive/editableText.js"></script>

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


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


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


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

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

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

var gui = require('nw.gui');
var clipboard = gui.Clipboard.get();

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

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

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

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

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

// подключаем все модули, доступ к отдельному модулю можно получить например так CryptoJS.HmacSHA1
var CryptoJS = require("crypto-js"); 

// подключаем отдельный модуль, например AES
var AES = require("crypto-js/aes");

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

var ciphertext = CryptoJS.AES.encrypt('сообщение', 'секретный ключ');

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

var bytes  = CryptoJS.AES.decrypt(ciphertext.toString(), 'секретный ключ');
var plaintext = bytes.toString(CryptoJS.enc.Utf8);

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


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


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

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

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

var gui = require("nw.gui");
var tray = new gui.Tray({ title: 'Tray', icon: 'img/icon.png' }); 

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

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

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

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

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

var win = gui.Window.get();

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

var win = gui.Window.open ('https://myurl', {
  position: 'center',
  width: 901,
  height: 127
});

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

win.on ('loaded', function(){
  // получим элемент document текущего окна, с которым впоследствии мы можем работать
  var document = win.window.document;
  
  // логика для работы с созданным окном...
});

Как видно из примера, одним из свойств окна является объект 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, напишем функциональность сворачивания в трей. Для этого в разметку необходимо (как говорилось выше) добавить элемент, например кнопку или ссылку:

<a ng-click="ctrl.toTray()">В трей</a>

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

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

Заключение

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

• можно подписаться на событие keydown и для первых 10 паролей, при нажатии на кнопку от 0 до 9, копировать пароль в буфер обмена, это упростит и ускорит работу с программой
• добавить способ копирования не только пароля, но и логина

Успехов в программировании!