Десктопные приложения с кросс-платформенным интерфейсом на NW.JS и C#

NW.JS — ранее назывался node-webkit. Нужен для того, чтобы запускать написанные с помощью HTML/JavaScript/CSS и Node.JS проекты в виде десктопного приложения.
SDK-версия — версия NW.JS со встроенным отладчиком (скачиваем, работаем и отлаживаем проект с ней).
Normal -версия nw.js для запаковки приложения и будущей публикации (понадобится один раз при публикации приложения).
Edge.js — это модуль Node.js, который позволяет в приложениях, написанные с помощью Node.js, подключать .NET-библиотеки и писать в этих приложениях вставки кода, например, на C#.

Замечательную инструкцию по использованию Edge.js в десктопном приложении на NW.JS описал Frankhale в https://github.com/frankhale/nw-edge-example
Далее я опишу чуть более подробно то же, что описал он. Предыдущая версия NW.JS полноценно работает в связке c edge.js следующих версий:
NW.JS 0.12.0 и edge.js 0.10.1.
На момент написания статьи рабочая связка:
NW.JS 0.13.4 + edge.js 5.0.0 + node.js 5.10.1 (причём работают обе версии связки: x86 и x64):
1) Сначала необходимо убедиться, что на ПК установлено всё необходимое (в моём случае работа производилась на Windows 7, x64:
— Visual Studio 2013
— Python 2.7.3 (рекомендуемая версия, должны подходить все 2.7.*)
— Node.JS 5.10.0 (в него кстати встроена утилита npm 3.8.3 и командная строка Node.js), но должна работать и 5.10.0
— nw-gyp 0.13.0 (npm install -g nw-gyp)
— nw.js 0.13.4 , sdk версия, x64 (с сайта)
— edge.js 5.0.0 (npm install edge для нужного приложения; см. далее)
— также обычно рекомендуют устанавливать Windows SDK 7.1

2) Скачиваем 0.13.4 версию NW.JS и распаковываем, например: C:\nwjs-v0.13.4-win-x64\
3) Скачиваем пример nw-edge-example-master_for_NW.JS_v0.13.4 и распаковываем сюда: C:\nwjs-v0.13.4-win-x64\nw-edge-example-master
4) К этому моменту На ПК должно быть установлено несколько командных строк: cmd.exe, Командная строка разработчика для VS 2013, Node.js Command Prompt, Windows SDK 7.1 Command Prompt
Обычно рекомендуют пользоваться Командной строкой разработчика для VS2013 или Windows SDK 7.1 Command Prompt. У меня полноценно использовать Node.JS получилось только с его же родной утилитой: Node.JS Command Prompt. Поэтому далее открываем командную строку Node.JS и вводим следующие команды:
npm install -g nw-gyp // установка крайней версиии утилиты nw-gyp
cd "C:\nwjs-v0.13.4-win-x64\nw-edge-example-master"
npm install edge // при необходимости, как в данном случае, версия указывается после знака "@", например "edge@0.10.1"; также необходимо учесть, что модуль при установке сразу автоматически собирается утилитой node-gyp, по умолчанию - как x64, но для работы в NW.JS его необходимо пересобрать
cd node_module
cd edge
nw-gyp configure --target=v0.13.4 --msvs_version=2013 --arch=x64 // --arch=ia32 для NW.JS x86; v0.13.4 - версия NW.JS
nw-gyp build

(как и будет написано в командной строке: если результат ОК — то сборка произведена успешно)
5) Скопировать получившиеся файлы из «C:\nwjs-v0.13.4-win-x64\nw-edge-example-master\node_module\edge\build\» в «C:\nwjs-v0.13.4-win-x64\nw-edge-example-master\node-module\edge\lib\native\win32\x64\5.1.0». Нужно помнить, что при использовании других версий node.js папка может меняться.
6) В файле «C:\nwjs-v0.12.0-win-x64\nw-edge-example-master\node-module\edge\lib\edge.js» необходимо в массив versionmapping добавить строку для сопоставления — версии node.js — 1.2.0 папке с собранными файлами : 0.12.0; т.е., например, если версия node.js 5.0.0, а файлы складываютя в папку «\node_modules\edge\lib\native\win32\x64\5.1.0» то можно добавить строку «[ /1.2.0/, ‘0.12.0’ ]», которая означает, что edge.js версии 1.2.0 будeт обращаться за собранными файлами в папку 0.12.0.
[ /^0\.8\./, '0.8.22' ],
[ /^0\.10\./, '0.10.0' ],
[ /^0\.12\./, '0.12.0' ],
[ /^5\./, '5.1.0' ], // добавленная строка

7) Как запускать и реализовывать отладку проекта?
Для запуска и отладки проекта подходит JetBrains WebStorm. Эта программа открывает папку с Вашим приложением в виде проекта.
Т.е. c помощью WebStorm открываем папку «C:\nwjs-v0.13.4-win-x64\nw-edge-example-master»
Модули node.js можно скачать прямо из WebStorm: File-Settings-Languages&Frameworks-Node.js and NPM

Но в любом случае, для NW.JS их необходимо пересобрать с помощью nw-gyp.
Для запуска приложения необходимо настроить конфигурацию отладки:
— Добавляем новую конфигурацию Run-Edit Configuration-«+»-NW.js
— задаём ей имя: «nwjs-v0.13.4-win-x64_nw-edge-example-master»
— задаём «NW.js app» — папка с приложением «C:/nwjs-v0.13.4-win-x64/nw-edge-example-master»
— задаём путь к файлу nw.exe: «C:\nwjs-v0.13.4-win-x64\nw.exe»
— сохраняем и запускаем приложение с этой конфигурацией:

P.S.:
1) В случае, если команда «nw-gyp build» всегда завершается с ошибкой, можно попробовать
а) использовать одну из других командных строк, установленных в процессе сборки приоложения
б) в папке «C:\nwjs-v0.13.4-win-x64\nw-edge-example-master\node_module\edge\build\» лежит полноценное решение binding.sln, которое можно открыть в Visual Studio 2013 и пересобрать (рекомендуется сначала перестроить все проекты по отдельности и уже после всё решение, поскольку могут вылетать ошибки линковки при первом-втором перестроении) и точно также копировать получившиеся файлы в папку «edge\lib».
P.P.S.: в запущенном приложении справа от адресной строки есть т.н. сендвич-баттон (кнопка из трёх полосок, которая открывает окно отладки в версии nw.js 0.12.0), в более поздних версиях NW.JS можно назначить открытие окна отладки, например, на кнопку, с помощью JavaScript-функции
function Debug(form)
{
require('nw.gui').Window.get().showDevTools();
return true;
}

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.