Автор оригинала: Alexandru Rosianu.
После создания двух успешных приложений на основе NW.JS, Messenger для настольного компьютера и WhatsApp для рабочего стола Мне сказали, что я должен создать учебник. Итак, вот я, говорю вам (почти) Все, что нужно знать о создании приложений, таких как мой.
Но сначала позвольте мне представить вас герою: Nw.js , ранее известный как узел-вебКит. От их github Репозиторий :
Nw.js – это приложение Runtime на основе Chromium и Node.js. Вы можете написать нативные приложения в HTML и JavaScript с NW.JS. Он также позволяет вам звонить в модули Node.js непосредственно с DOM и включает новый способ написания собственных приложений со всеми веб-технологиями.
0. План
Первый шаг – найти приложение к порту. Может быть, это ваш любимый сайт, или приборная панель вашей стартапы или просто Случайный сайт Отказ Что бы это ни было, это будет работать.
Я решил создать настольное приложение для Klout , Онлайн-сервис, использующий аналитику социальных сетей для измерения влияния онлайн. Я зарегистрировался сегодня, и мне любопытно, станет ли это моим инструментом для обмена. Мне нравится элегантные пользовательские пользователи и цвета, которые они выбрали, так что это плюс.
Кажется, не имеет HTML5 настольных уведомлений. Я думаю, что мы могли бы ввести какой-то код на страницу приборной панели, чтобы проверить уведомления, если мы действительно хотели.
Еще одна аккуратная вещь, которую я думаю о добавлении «доли с klout» интеграции на ОС X. Я не уверен, что можно сделать с NW.JS, но с электроном можно наверняка.
1. Начало работы
Мы начнем с Cloning My NWJS-стартер Репозиторий, который должен помочь нам встать и быстро работать:
$ git clone https://github.com/Aluxian/nwjs-starter.git klout $ cd klout
Я собираюсь заменить стартер, что является именем по умолчанию приложение, с 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
Это ищет Стартер и Стартер и заменяет их с 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:
nwdisable атрибут отключает поддержку node.js внутри iframe. NWFAKETOP заменит по умолчанию окно Глобальный объект с пользовательским. Я решил показать страницу входа прямо, и она никогда не узнает, что она работает внутри iFrame.
Давайте также добавим некоторые правила стиля. Удалите все внутри src/app.csss И вставьте это:
html, body, iframe {
margin: 0;
padding: 0;
border: none;
width: 100%;
height: 100%;
overflow: hidden;
}
2. Создайте активы
Потому что Эскиз Мой любимый дизайн-инструмент, я буду использовать его, чтобы создать некоторые значки для приложения. Я буду использовать Design.sketch файл в качестве отправной точки.
Вы можете пропустить этот шаг, и приложение будет использовать общий значок, или вы можете загрузить активы, которые я создал из здесь Отказ
3. Создать его
Убедитесь, что у вас есть node.js установлены:
$ node --version $ npm --version
Если вы хотите создать пакеты для Linux, вам нужно FPM Отказ Если вы не на машине Windows, вам нужно установить вино построить для Windows.
Чтобы создать установщик Windows, вам нужно иметь Makensis Команда на вашем пути.
На 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 вместо Знак: osx64 Отказ В противном случае Гульп попытается подписать приложение с удостоверением, что, скорее всего (или, по крайней мере, я надеюсь, что так) не в вашем брете.
5. Следующие шаги
Вы можете быть счастливы с вашим приложением, как есть, и вы, вероятно, просто будете держать его для себя или поделиться им с близкими. Но что если один день вы решили опубликовать это?
Обновления
Каждый раз, когда приложение проверяет обновления, это выглядит в src/package.json для Манифестарл Отказ Этот URL должен указывать на файл json с Версия поле и объект, который выглядит так:
"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-стартер : Это помогает вам встать и быстро работать, предлагая много функций, но он основан на Электрон Отказ
Электрон, кажется, новее, более исполнительная и привлекательная версия NW.JS. Это активно работает потрясающей командой, которая создала Атом Отказ
Мне это больше нравится, и, как только я закончу электрон Superkit, я буду портировать как Messenger, так и WhatsApp для рабочего стола к нему. Я рекомендую новые пользователи, чтобы попытаться учиться и использовать электрон.
Я создал репозиторий на моем аккаунте Github, и теперь я бегу Выпуск глотала загрузить приложение там. Вы можете скачать приложение из релизы страница, и вы можете получить весь исходный код здесь Отказ
Дайте мне знать, если я пропустил какие-либо шаги. Если вы застряли, просто спросите помощь ниже. Счастливое кодирование!
Эта статья впервые появилась на моем Блог Отказ Пожалуйста, подпишитесь на большее!