Advertisement
  1. Code
  2. Web Development

Введение в создание десктопных HTML5-приложений при помощи Node-Webkit

by
Read Time:10 minsLanguages:

Russian (Pусский) translation by Nadia Gonzales (you can also view the original English article)

При помощи Node.js мы можем легко создавать веб-приложения. Теперь благодаря библиотеке node-webkit мы также можем создавать с помощью Node.js десктопные приложения, используя уникальную комбинацию HTML5 и Node.


Введение

В этой библиотеке движок WebKit и Node.js сочетаются уникальным образом. WebKit и Node используют один и тот же контекст (* среда исполнения программы. Здесь и далее прим. пер.), благодаря чему вы можете писать код таким образом, как если бы его предполагалось исполнять в браузере, но с возможностью использовать весь функционал Node.

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

В данном руководстве я покажу вам, как начать использовать библиотеку на примере создания простого текстового редактора.


Подготовка

Для начала вам необходимо получить библиотеку. Скачайте подходящую для вашей операционной системы версию (само же приложение будет запускаться на всех платформах) с github и распакуйте ее, где захотите. Теперь давайте создадим базовую структуру папок. У нас будут папки для файлов HTML (.html) и для файлов JavaScript (.js). Также создайте файл package.json в той же папке, в которой расположен исполняемый файл nw, и папку node_modules для размещения модулей, которые мы создадим.


Package.json

Первым делом необходимо заполнить необходимые поля в фале package.json. В случае использования node-webkit это name и main  (на Github вы можете ознакомиться со всем списком доступных опций для package.json). Первое поле то же самое, что и для простых приложений Node.js. Во втором поле должен быть указан путь (относительный или абсолютный) к главному файлу HTML, который будет показан при запуске приложения. В нашем случае файл package.json должен выглядеть следующим образом:

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

blank_appblank_appblank_app

Главный файл

Создание пользовательского интерфейса при помощи node-webkit не отличается от создания веб-страницы (кроме как того, что вам известен движок рендеринга (визуализации), в связи с чем вам не нужно предоставлять каких-либо альтернатив для более старых браузеров или использовать библиотеки (jQuery и т. д.) – и, собственно, не стоит, поскольку они содержат код запасных вариантов, что может замедлить ваше приложение). Давайте создадим файл index.html, который будем использовать:

Давайте также подключим (и создадим) главный файл JavaScript, который будем использовать, в теле документа так, что он будет выполняться после загрузки DOM (* Document Object Model – объектная модель документа).

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


Давайте воспользуемся некоторыми возможностями Node

Для демонстрации простоты использования возможностей Node.js при помощи node-webkit, давайте прочтем содержимое package.json и выведем его на экран. Создайте js/main.js и напишите в нем следующий код:

Как вы видите, код выглядит так же, как если бы вы писали его для Node. Но затем мы используем document.write для выведения содержимого файла на страницу. Нет необходимости в установке какого-либо локального сервера.

Теперь откройте приложение и вы должны будете увидеть нечто подобное:

file_contents_printedfile_contents_printedfile_contents_printed

Модули

У node-webkit есть еще одно преимущество: нет необходимости в написании тегов <script>  в вашем HTML, если вы хотите разбить ваш код на модули. Вы можете это сделать так же, как и в Node.js – при помощи require (* функция Node для импорта модулей). Давайте создадим простой модуль для выведения содержимого файла в текстовое поле или для записи его в файл. Создайте файл file.js и поместите его в папку node_modules. Теперь напишите в нем следующий код:

Как вы видите, это будет один класс со статическими свойствами (* принадлежат непосредственно классу, то есть доступные из него «через точку») – двумя публичными методами: один – для открытия файлов, а другой – для их сохранения.

Метод open будет выглядеть следующим образом:

Довольно просто, да? Функция принимает в качестве первого параметра путь к файлу и помещает содержимое файла в элемент с id= "editor". Нам также необходимо передать объект document в функцию, поскольку скрипт вызывается при помощи функции Node require и не имеет доступа к объектам WebKit напрямую.

Метод save так же прост, как и предыдущий:

Теперь давайте проверим, все ли работает. Замените содержимое js/main.js на следующее:

Если вы теперь перейдете в консоль инструментов разработчика и кликнете кнопку developer refresh в правом углу окна, то должны будете увидеть определения двух функций из этого модуля. Это еще одно преимущество node-webkit – вызовы console.log отображаются в консоли инструментов разработчика, благодаря чему легче проводить отладку вашего приложения.

dev_tools_logdev_tools_logdev_tools_log

Реализация полей для отправки файлов в Node-Webkit

Давайте добавим два поля для отправки файлов, которые нам понадобятся позже:

Обратите внимание на атрибут nwsaveas во втором поле. Это – специальный тип поля для ввода в node-webkit, который позволяет пользователю выбрать несуществующий файл. Оба поля скрыты, поскольку нам необходим к ним доступ только из JavaScript. В node-webkit поля для отправки файлов модифицированы таким образом, что вы можете сгенерировать событие click на них, благодаря чему есть возможность открыть диалоговое окно для проведения операций с файлом без участия пользователя, кликающего по полю (без необходимости применения  обходных приемов, например, скрытых полей выше кнопки). Теперь мы можем перейти к JavaScript

Для начала удалите вызов console.log из файла js/main.js. Теперь напишите в нем следующий код:

Благодаря этому коду реализуется возможность показа диалоговых окон для открытия (Open) и сохранения (Save) файла. Главную работу выполняет функция clickInput – она симулирует событие click по элементу для ввода; в обычном браузере это было бы невозможно по соображениям безопасности, однако здесь это вообще не является угрозой безопасности. Далее идет обычный обработчик событий для keyup, в котором проверяется, была ли нажата верная комбинация клавиш (Ctrl+O или Ctrl+S), и осуществляется «клик» по полям для ввода. Обратите внимание, что вышеописанный функционал невозможно реализовать в браузере – комбинации клавиш такие как Ctrl+O и Ctrl+S зарезервированы браузером для внутреннего использования и никаких событий не генерируется при их нажатии (за исключением Firefox).

Теперь нажмите кнопку developer refresh, и вы должны будете увидеть соответствующее диалоговое окно при нажатии Ctrl+S или Ctrl+O. Они, конечно же, пока ничего не выполняют.


Создание редактора

Теперь, поскольку мы будем создавать текстовый редактор, нам необходимо создать что-то, на чем можно писать. Добавьте textarea в HTML:

Далее нам нужно завершить код для открытия/сохранения файла. Давайте создадим слушатель событий события onchange для полей open и save:

Благодаря ранее созданному модулю код очень прост. Создание редактора возможно благодаря еще одной особенности node-webkit: в отличие от браузеров (опять по соображениям безопасности), где значением элемента поля для отправки файлов является ненастоящий путь, у нас значением является выбранный путь. Теперь откройте приложение (или нажмите кнопку developer refresh, если вы его не закрыли), и у вас должен быть отлично работающий текстовый редактор.


Дальнейшее усовершенствование

Мы также можем сделать еще кое-что, чтобы улучшить редактор и сделать его более полезным. Например, давайте добавим возможность открывать новое окно, когда пользователь нажимает Ctrl+N. Для начала добавьте require в верхнюю часть скрипта:

Модуль nw.gui – это библиотека node-webkit, с помощью которой реализуется интерфейс пользователя (вы можете почитать больше о нем на Node-webkit Github). Далее добавьте эту конструкцию else if к слушателю  события keyup в документе:

И viola! Если вы обновите приложение, то теперь можете нажать Ctrl+N для открытия нового окна. Тем не менее, эта функция действительно отличается от обычной window.open. Вы можете передавать различные опции для window в качестве второго параметра. Список возможных настроек доступен в документации.

Еще одна штука, которая может быть полезна в текстовом редакторе, – это меню приложения (то, которое расположено под строкой заголовка в Windows/Linux и находится в верхней части экрана в Macintosh). В node-webkit реализовать меню довольно просто. Для начала давайте создадим его:

Тип menubar зарезервирован для меню приложения. Теперь мы можем добавить в него пункты (* которые в свою очередь могут быть подменю). Пускай это будет File:

Теперь давайте добавим в него некоторые пункты:

menu.items[0] – это первый пункт меню нашего  приложения (вы также можете при желании присвоить его значение переменной при его создании). Мы добавляем новые пункты к его submenu (* подменю) и для каждого определяем функцию обраного вызова для обработки события click при клике по пункту. Метод gui.Window.get принимает текущее окно так, что мы можем его закрыть, когда пользователь выбирает опцию Close в File.

Наконец, мы можем присвоить меню окну:

Опять-таки, мы используем gui.Window.get для получения текущего окна; затем мы присваиваем наше меню в свойство menu окна. Пожалуйста, обратите внимание, что хотя мы и можем присваивать каждому окну различные меню, в OSX (Macintosh) одно приложение может иметь только одно меню (общее для всех окон), так что если вы хотите, чтобы ваше приложение использовалось на Macintosh, вам необходимо избегать использования разных меню для различных окон.

Если вы теперь откроете или обновите ваше приложение, то вы должны будете увидеть системное (* главное) меню под строкой заголовка.

system_menusystem_menusystem_menu

Упаковка приложения

Если теперь вы захотите поделиться вашим приложнеием в другими пользователями, то вы можете упаковать его в один файл так, что пользователи смогут скачивать исполняемый файл node-webkit, соответствующий их платформе, и запускать ваше приложение с его помощью. Для начала давайте удалим панель инструментов, из-за которой окно выглядит подобно браузеру, – оно может пригодиться при разработке, однако ваши пользователи, скорее всего, не захотят его видеть. Мы можем это осуществить, задав значением window.toolbar false в package.json, и теперь файл выглядит так:

Если вы теперь откроете приложение (ничего не поменяется, если вы просто обновите его, поскольку package.json загружается только при запуске), то должны будете увидеть конечный результат:

final_resultfinal_resultfinal_result

Упаковать приложение очень просто. Нужно только создать zip-архив со всеми своими ресурсами (всеми созданными вами файлами и без файлов, поставляемых с node-webkit) и изменить его разрешение на .nw. Вот и все. Если пользователь скачает node-webkit и ваш модуль, то нужно будет всего лишь поместить его в папку  node-webkit и запустить исполняемый файл nw. Детальная информация с дополнительными рекомендациями доступна на node-webkit GitHub.

Теперь ваш редактор можно предоставить пользователям.


Заключение

Как вы видите, node-webkit – это очень многообещающая и мощная библиотека. Поскольку часто происходит обновление и исправление багов, то маловероятно, что развитие этого проекта будет прекращено, что иногда случается с проектами с открытым исходным кодом.

Поделитесь своими мыслями о проекте ниже в комментариях. Лично я считаю, что это лучшее решение для создания десктопных приложений при помощи Node.js и HTML.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.