После создания двух успешных приложений на основе NW.js (одно из них — Messenger for Desktop) мне сказали, что я должен создать туториал. Итак, я рассказываю вам (почти) все, что нужно знать о создании приложений, подобных моему.

Но сначала позвольте представить вам главного героя: NW.js, ранее известного как node-webkit. Из их репозитория на GitHub:

NW.js — это среда выполнения приложений на основе Chromium и node.js. Вы можете писать собственные приложения на HTML и JavaScript с помощью NW.js. Он также позволяет вызывать модули Node.js непосредственно из DOM и обеспечивает новый способ написания собственных приложений со всеми веб-технологиями.

0. План

Первый шаг — найти приложение для переноса. Может быть, это ваш любимый сайт, или панель управления вашего стартапа, или просто случайный сайт. Что бы это ни было, это сработает.

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

Похоже, у него нет уведомлений на рабочем столе HTML5. Я думаю, что мы могли бы внедрить некоторый код на страницу панели инструментов для проверки уведомлений, если бы мы действительно этого хотели.

Еще одна полезная вещь, о которой я думаю, — это добавить интеграцию «Share with Klout» в OS X. Я не уверен, что это возможно сделать с NW.js, но с Electron это точно возможно.

1. Начало работы

Мы начнем с клонирования моего репозитория nwjs-starter, который должен помочь нам быстро начать работу:

$ git clone https://github.com/Aluxian/nwjs-starter.git klout
$ cd klout

Я собираюсь заменить Starter, имя приложения по умолчанию, на Klout:

$ sed -i.bak "s/Starter/Klout/g" **/*.{sh,json,md,js,html,nsi,coffee,desktop}
$ sed -i.bak "s/starter/klout/g" **/*.{sh,json,md,js,html,nsi,coffee,desktop}
$ rm **/*.bak # remove backup files created by sed

Это ищет Starter и starter и заменяет их на Klout и klout соответственно. Нам также нужно переименовать некоторые файлы:

$ cd assets-linux
$ mv icons/256/starter.png icons/256/klout.png
$ mv icons/48/starter.png icons/48/klout.png
$ mv icons/scalable/starter.svg icons/scalable/klout.svg
$ mv starter.desktop klout.desktop

Теперь перейдите к src/app.html и замените строку h1 этим iframe:

<iframe src="https://klout.com/login" nwdisable nwfaketop></iframe>

Атрибут nwdisable отключает поддержку node.js внутри iframe. nwfaketop заменит глобальный объект window по умолчанию на пользовательский. Я решил показать страницу входа напрямую, и она никогда не узнает, что она работает внутри iframe.

Давайте также добавим некоторые правила стиля. Удалите все внутри src/app.css и вставьте это:

html, body, iframe {  
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

2. Создайте активы

Поскольку Sketch ​​— мой любимый инструмент для дизайна, я буду использовать его для создания иконок для приложения. Я буду использовать файл design.sketch в качестве отправной точки.

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

3. Создайте это

Убедитесь, что у вас установлен node.js:

$ node --version
$ npm --version

Если вы хотите создавать пакеты для Linux, вам понадобится fpm. Если вы не на машине с Windows, вам нужно установить вино для сборки под Windows.

Чтобы создать установщик Windows, вам нужно иметь команду makensis в вашем PATH.

В OS X вы можете использовать gem и brew:

$ sudo gem install fpm
$ brew install wine
$ brew install makensis

Наконец, пришло время создать приложение и протестировать его. Установите gulp и зависимости узла:

$ npm install -g gulp
$ npm install

Запустите задачу сборки для платформы, на которой вы хотите ее запустить:

$ gulp build:osx64
$ gulp build:linux32
$ gulp build:linux64
$ gulp build:win32

Я также сделал небольшую доработку. В src/package.json я изменил ширину на 1080 и высоту на 768.

Вот как должен выглядеть экран входа в систему:

И приборная панель:

Отличная работа до сих пор! :)

4. Упаковка и загрузка

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

$ gulp pack:osx64         # dist/Klout.dmg
$ gulp pack:linux32:deb   # dist/Klout_linux32.deb
$ gulp pack:linux64:deb   # dist/Klout_linux64.deb
$ gulp pack:win32         # dist/KloutSetup.exe

Если вы работаете в OS X, отредактируйте gulpfile.coffee и сделайте задачу pack:osx64 зависимой от build:osx64 вместо sign:osx64. В противном случае Gulp попытается подписать приложение идентификатором, которого, скорее всего (или, по крайней мере, я на это надеюсь), нет в вашей связке ключей.

5. Следующие шаги

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

Каждый раз, когда приложение проверяет наличие обновлений, оно ищет в src/package.json manifestUrl. Этот URL-адрес должен указывать на файл JSON с полем version и объектом, который выглядит следующим образом:

"packages": {
  "osx64": "https://github.com/.../v0.1.0/Klout.dmg",
  "win32": "https://github.com/.../v0.1.0/KloutSetup.exe",
  "linux32": "https://github.com/.../v0.1.0/Klout_linux32.deb",
  "linux64": "https://github.com/.../v0.1.0/Klout_linux64.deb"
}

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

Электрон

Последние недели я работал над электрон-суперкитом. Это похоже на nwjs-starter: он помогает вам быстро начать работу, предлагая множество функций, но он основан на Электроне.

Electron кажется более новой, более производительной и многофункциональной версией NW.js. Над ним активно работает замечательная команда, создавшая Атом.

Примечание. Это всего лишь мое мнение. Подробное сравнение между ними см. в статье TangibleJS.

Мне он нравится больше, и как только я закончу Electron SuperKit, я перенесу на него и Messenger, и WhatsApp for Desktop. Я рекомендую новым пользователям попробовать изучить и использовать Electron.

Я создал репозиторий в своей учетной записи GitHub и теперь запускаю gulp release, чтобы загрузить туда приложение. Вы можете скачать приложение со страницы релизы и получить весь исходный код здесь.

Дайте мне знать, если я пропустил какие-либо шаги. Если вы застряли, просто попросите помощи ниже. Удачного кодирования!