Используя Node.js , мы можем легко создавать веб-приложения. Теперь, благодаря node-webkit, мы также можем создавать настольные приложения, используя уникальную комбинацию 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 должен выглядеть так:
{ "имя": "простой текстовый редактор", "main": "./html/index.html" }
Теперь, если вы запустите свое приложение с помощью исполняемого файла nw , вы должны увидеть пустой экран, подобный этому:
Основной файл
Создание пользовательского интерфейса с помощью node-webkit ничем не отличается от создания веб-страницы (с небольшой разницей в том, что вы знаете механизм рендеринга, поэтому вам не нужно предоставлять какие-либо запасные варианты для старых браузеров или использовать библиотеки, такие как jQuery — и на самом деле вы не должно, потому что они включают запасной код, который замедлит ваше приложение). Давайте создадим файл index.html который мы будем использовать:
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<html>
<head>
<title>Simple Text Editor</title>
</head>
<body>
</body>
</html>
|
Давайте также включим (и создадим) основной файл JavaScript, который мы будем использовать, в тело, чтобы он выполнялся после загрузки DOM:
|
1
|
<script src=»../js/main.js»></script>
|
Теперь единственное, что изменится при открытии приложения, будет заголовок.
Давайте использовать некоторый узел
Чтобы показать вам, как легко вы можете использовать Node.js в node-webkit, давайте прочитаем содержимое package.json и выведем его на экран. Создайте файл js/main.js и поместите в него следующий код:
var fs = require ('fs'); fs.readFile ('./ package.json', 'utf-8', функция (ошибка, содержимое) { document.write (содержание); });
Как видите, код выглядит точно так же, как если бы вы писали его для Node. Но затем мы используем document.write чтобы поместить содержимое файла на страницу. Нет необходимости настраивать любой локальный сервер.
Теперь откройте приложение, и вы должны увидеть что-то вроде этого:
Модули
Есть еще одна приятная вещь о node-webkit; Вам не нужно включать ряд тегов <script> в ваш HTML, если вы хотите разделить ваш код на модули. Вы можете сделать это так же, как в Node.js — используя require . Давайте создадим простой модуль для чтения содержимого файла в текстовое поле или записи его в файл. Назовите файл file.js и поместите его в каталог node_modules . Теперь поместите в него общую структуру модуля:
var fs = require ('fs'); function File () { функция открыта (путь, документ) { } функция сохранения (путь, документ) { } this.open = открыть; this.save = сохранить; } module.exports = новый файл;
Как видите, это будет статический класс с двумя открытыми методами — один для открытия файлов и один для их сохранения.
open метод будет выглядеть так:
функция открыта (путь, документ) { fs.readFile (путь, 'utf-8', функция (ошибка, содержимое) { document.getElementById ('editor'). value = content; }); }
Довольно просто, верно? Функция принимает путь к файлу в качестве первого параметра и помещает содержимое файла в элемент с идентификатором «редактор». Нам также нужно передать объект document в функцию, потому что скрипт вызывается с использованием Node’s require и у него нет прямого доступа к содержимому WebKit.
Метод save такой же простой, как и предыдущий:
функция сохранения (путь, документ) { var text = document.getElementById ('editor'). value; fs.writeFile (путь, текст); }
Теперь давайте проверим, все ли работает. Измените содержимое js/main.js на это:
var file = require ('file.js'); console.log (file.open, file.save);
Теперь, если вы перейдете в консоль инструментов разработчика и нажмете кнопку обновления разработчика в правом углу окна, вы увидите две функции из этого модуля в журнале. Это еще одна полезная вещь в node-webkit — ваши вызовы console.log отображаются в консоли инструментов разработчика, что упрощает отладку ваших приложений.
Файловые входы Node-Webkit
Давайте добавим два файла, которые нам понадобятся позже:
<input id = "open" type = "file" style = "display: none" accept = "text / *" /> <input id = "save" type = "file" nwsaveas style = "display: none" accept = "text / *" />
Обратите внимание на атрибут nwsaveas во втором входе. Это специальный тип ввода из node-webkit, который позволяет пользователю выбирать несуществующий файл. Оба входа скрыты, потому что мы будем обращаться к ним только из JavaScript. В node-webkit файловые входы модифицируются таким образом, чтобы вы могли click событие click по ним, чтобы вы могли открыть диалоговое окно файла без нажатия пользователем на вход (без необходимости обходных путей, таких как невидимые входы над кнопкой). ). Теперь мы можем перейти к JavaScript.
Сначала удалите вызов console.log из файла js/main.js Теперь поместите этот код там:
function clickInput (id) { var event = document.createEvent ('MouseEvents'); event.initMouseEvent ( 'щелчок'); document.getElementById (ID) .dispatchEvent (событие); } document.addEventListener ('keyup', function (e) { if (e.keyCode == 'O'.charCodeAt (0) && e.ctrlKey) { clickInput ( 'открытый'); } else if (e.keyCode == 'S'.charCodeAt (0) && e.ctrlKey) { clickInput ( 'Сохранить'); } });
Этот код отвечает за отображение диалогов Open и Save . Функция clickInput выполняет здесь основную работу — она моделирует событие нажатия на элементе ввода — в обычном браузере это было бы невозможно по соображениям безопасности, но здесь это вовсе не угроза безопасности. Позже, есть обычный обработчик событий keyup, который проверяет, была ли нажата правильная комбинация клавиш ( Ctrl + O или Ctrl + S ) и «щелкает» на входах. Обратите внимание, что этого также невозможно достичь в браузере — комбинации, такие как Ctrl + O и Ctrl + S , зарезервированы для внутреннего использования браузером, и никакие события не запускаются, когда они нажаты (только Firefox запускает события для них).
Теперь нажмите кнопку обновления разработчика , и вы должны увидеть соответствующий диалог при нажатии Ctrl + S или Ctrl + O. Они конечно пока ничего не делают.
Создание редактора
Теперь, поскольку мы будем создавать текстовый редактор, нам нужно что-то написать. Добавьте textarea в HTML:
<textarea id = "editor" style = "position: fixed; top: 0; bottom: 0; left: 0; right: 0"> </ textarea>
Далее мы должны закончить открытие / сохранение кода. Давайте создадим onchange событий onchange для входов open и save :
document.getElementById ('open'). addEventListener ('change', function (e) { file.open (this.value, document); }); document.getElementById ('save'). addEventListener ('change', function (e) { file.save (this.value, document); });
Благодаря модулю, созданному ранее, код действительно прост. Это также возможно благодаря node-webkit, потому что в браузерах (опять же из соображений безопасности) значение элемента ввода файла установлено на поддельный путь — здесь это путь, который был выбран. Теперь откройте приложение (или нажмите кнопку обновления разработчика , если вы не закрыли его), и у вас должен быть отлично работающий текстовый редактор.
Дальнейшие улучшения
Мы также можем сделать несколько других вещей, чтобы сделать редактор немного более продвинутым и полезным. Например, давайте откроем новое окно, когда пользователь нажмет Ctrl + N. Сначала добавьте это require в начало скрипта:
var gui = require ('nw.gui');
Модуль nw.gui является библиотекой node-webkit, связанной с пользовательским интерфейсом (об этом вы можете прочитать на Github Node-webkit ). Затем добавьте это else if к слушателю keyup документа:
} else if (e.keyCode == 'N'.charCodeAt (0) && e.ctrlKey) { gui.Window.open ( 'index.html'); }
И альт! Если вы обновляете приложение, теперь вы можете нажать Ctrl + N, чтобы открыть новое окно. Эта функция отличается от обычного window.open . Вы можете передать различные параметры окна в качестве второго параметра. Список того, что вы можете установить там, доступен в документации .
Еще одна вещь, которая может быть полезна в текстовом редакторе — это меню приложений (которое находится под строкой заголовка в Windows / Linux и в верхней части экрана на Mac). В node-webkit это довольно просто. Сначала давайте создадим меню:
var menu = new gui.Menu ({type: 'menubar'});
Тип menubar зарезервирован для меню приложения. Теперь мы можем добавлять предметы к нему. Пусть это будет меню File :
menu.append (новый gui.MenuItem ({ ярлык: «Файл», подменю: новый gui.Menu () }));
Теперь давайте добавим несколько пунктов в это меню:
menu.items [0] .submenu.append (новый gui.MenuItem ({ ярлык: «Новый», click: function () { gui.Window.open ( 'index.html'); } })); menu.items [0] .submenu.append (новый gui.MenuItem ({ тип: «разделитель» })); menu.items [0] .submenu.append (новый gui.MenuItem ({ ярлык: «Закрыть», click: function () { gui.Window.get () близко (). } }));
menu.items[0] является первым пунктом нашего меню приложения (вы также можете назначить его переменной при создании, если хотите). Мы добавляем новые элементы в его submenu , и каждый элемент получает обратный вызов, чтобы обработать его. Метод gui.Window.get возвращает текущее окно, поэтому мы можем закрыть его, когда пользователь выберет опцию « Закрыть» в меню « Файл» .
Наконец, мы можем назначить меню окну:
gui.Window.get (). menu = menu;
Опять же, мы используем gui.Window.get для получения текущего окна, затем мы назначаем наше меню его свойству menu . Обратите внимание, что даже если мы можем назначить различное меню для каждого окна, в OSX (Mac) одно приложение может иметь только одно меню (которое является глобальным для всех окон), поэтому, если вы хотите, чтобы ваше приложение использовалось на Mac, вы следует избегать использования разных меню в разных окнах.
Теперь, если вы откроете или обновите свое приложение, вы должны увидеть системное меню под заголовком :
Упаковка приложения
Теперь, если вы хотите поделиться своим приложением с другими пользователями, вы можете упаковать его в один файл, чтобы пользователи могли загрузить исполняемый файл node-webkit, соответствующий их платформе, и запустить ваше приложение вместе с ним. Во-первых, давайте удалим панель инструментов, которая делает окно похожим на браузер — это приятно иметь во время разработки, но ваши пользователи, вероятно, не хотят его видеть. Мы можем достичь этого, установив для window.toolbar значение false в package.json , так что это выглядит так:
{ "имя": "пример-приложение", "main": "./html/index.html", "окно": { "панель инструментов": ложь } }
Теперь, если вы откроете приложение (ничего не изменится, если вы просто обновите его, package.json загружается только при запуске), вы должны увидеть конечный результат:
Упаковка приложения довольно проста. Просто создайте .zip архив со всеми вашими активами (всеми файлами, которые вы создали, без файлов, поставляемых с node-webkit) и измените его расширение на .nw . Это все. Если пользователь загружает node-webkit и ваш пакет, ему нужно только поместить его в каталог node-webkit и запустить исполняемый файл nw . Подробные описания, с несколькими советами, доступны на GitHub узла webkit .
Теперь ваш редактор готов к отправке вашим пользователям.
Вывод
Как видите, node-webkit — очень многообещающая и мощная библиотека. Благодаря частым обновлениям и исправлениям, а также поддержке Intel практически нет шансов на его прекращение, что иногда может случиться с проектами с открытым исходным кодом.
Поделитесь своими мыслями об этом проекте в комментариях ниже. Лично я считаю, что лучше всего создавать настольные приложения с использованием Node.js и HTML.
Также ознакомьтесь с подборкой полезных скриптов и приложений Node.js и HTML5 на Envato Market.