Как разрабатывать настольные приложения с использованием HTML / CSS / JavaScript? [закрыто]

189

Во-первых, мне не интересно заниматься этим профессионально. Я веб-разработчик, мой коллега недавно ушел в Spotify и сказал, что он будет работать в основном на JavaScript для приложения Spotify Desktop. Он сказал, что он использует «Chrome frame», и все внутри сделано как веб-приложение (HTML / JS / CSS).

Для веб-разработчика, который никогда не создавал ничего для Desktop, это отличная новость. Если я смогу использовать технологии, которые я уже знаю, и внедрить их в своего рода «фрейм», я все равно смогу создать Windows или, что еще лучше, кроссплатформенное приложение.

Я знаю, что ничего не упомянул о базе данных, но даже простое настольное приложение hello world с веб-технологиями было бы здорово начать работу.

Так как же это сделать? Что именно мне нужно / нужно знать?

TK123
источник
Следует отметить, что существует как минимум два неисключительных уровня доступа к веб-приложениям. Один из них - это приложения на стороне клиента, одностраничные, а другой - приложение, которое поддерживает состояние с базой данных или чем-то еще. (Конечно, лучшие приложения - это оба.) Вы можете научиться делать одно без особого изучения другого.
Валид Хан
Еще одна связанная ветка здесь [Можете ли вы
разрабатывать десктопы,
Вы делаете это неправильно. Веб не предназначен для настольных приложений. Period.If вы хотите использовать QML / QtQuick, который является хорошим компромиссом (но он остается рабочим, а не веб-сайтом!)
Stef
похожий здесь: stackoverflow.com/questions/109399/…
Чжан LongQI

Ответы:

74

Вы можете начать с Titanium для настольных разработчиков. Также вы можете взглянуть на Chromium Embedded Framework . Это в основном элемент управления веб-браузера на основе хрома.

Он написан на C ++, так что вы можете делать все необходимое для низкоуровневой ОС (Growl, иконки в трее, локальный доступ к файлам, com-порты и т. Д.) В приложении-контейнере, а затем всю логику и графический интерфейс приложения в html / javascript. Это позволяет вам перехватывать любой http-запрос либо для обслуживания локальных ресурсов, либо для выполнения некоторых пользовательских действий. Например, контейнер может перехватить запрос к http://localapp.com/SetTrayIconState?state=active, а затем вызвать функцию C ++ для обновления иконки в трее.

Это также позволяет создавать функции, которые можно вызывать непосредственно из JavaScript.

Отладить JavaScript прямо в CEF очень сложно. Там нет поддержки для ничего, как Firebug.

Вы также можете попробовать AppJS.com (Помогает создавать настольные приложения. Для Linux, Windows и Mac, используя HTML, CSS и JavaScript)

Кроме того, как отмечает @Clint, команда brackets.io (Adobe) создала потрясающую оболочку с использованием Chromium Embedded Framework, которая значительно упрощает начало работы. Она называется оболочкой скобок: github.com/adobe/brackets-shell. Узнайте больше об этом здесь: clintberry.com/2013/html5-desktop-apps-with-brackets-shell.

Альфред
источник
3
CEF имеет встроенные инструменты chrome dev, так что вы можете использовать его для отладки js. AppJS также имеет низкоуровневый доступ к ОС с помощью API-интерфейсов nodejs.
Мортеза Милани
1
Команда Bracket.io (Adobe) создала потрясающую оболочку с использованием Chromium Embedded Framework, которая значительно упрощает начало работы. Она называется оболочкой скобок: github.com/adobe/brackets-shell Подробнее об этом можно узнать
Клинт
В настоящее время я использую CEF и Eclipse в качестве инструментов разработчика, и можно связать CEF с Chrome Developper Tools, передав --remote-debugging-port = 8080 конфигурации запуска для аргументов программы, а затем перейдите к localhost: 8080 в Chrome , Поэтому, пожалуйста, удалите часть - очень трудно отлаживать JavaScript непосредственно в CEF. Там нет поддержки для ничего, как Firebug. -
Многожильный Малыш
Кроме того, я начинаю разрабатывать Kontena github.com/jhg/kontena для разработки решения для Win32, Linux, Unix, Mac и SmartPhone, которое будет основано на CEF, PhoneGap, Backet.io от Adobe, AppJS и т. Д. Он настолько нестабилен и является теперь только прототипом для получения MVP, написан на Python для концепции тестирования, но будет переводить код в C ++ / C с помощью QT5 (теперь используйте QT4), а когда будет в C ++ / C, начните перевод для mobil служба поддержки.
@JHG хорошая работа .. Дайте нам знать, когда он будет официально выпущен и исправлен
Альфред
33

NW.js

(Ранее известный как node-webkit)

Я бы предложил NW.js, если вы знакомы с Node или имеете опыт работы с JavaScript.

NW.js - это среда выполнения приложений, основанная на Chromium и node.js.

Характеристики

  • Приложения написаны на современных HTML5, CSS3, JS и WebGL
  • Полная поддержка API Node.js и всех сторонних модулей.
  • Хорошая производительность: Node и WebKit работают в одном потоке: вызовы функций выполняются просто; объекты находятся в одной куче и могут просто ссылаться друг на друга
  • Легко упаковывать и распространять приложения
  • Доступно в Linux, Mac OS X и Windows

Вы можете найти репозиторий NW.js здесь и хорошее введение в NW.js здесь . Если вам нравится изучать Node.js, я бы порекомендовал этот пост с большим количеством хороших ссылок.

Рава
источник
2
Откомандирован. Отличный инструмент.
Эрик Реппен
Но это нельзя распределить между людьми, не прося их установить node и node-webkit, верно?
Янис Грузис
@ JānisGruzis Нет, вы грузили приложение с NW.js бинарных файлов .
Примерно
27

Awesomium упрощает использование HTML-интерфейса в вашем приложении на C ++ или .NET

Обновить

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

Ронни Оверби
источник
16

ПРИМЕЧАНИЕ: AppJS устарела и больше не рекомендуется.

Взгляните на NW.js вместо этого.

Сивей Шен 申思维
источник
3
Похоже, это было признано создателями appjs устаревшими
Дэн Эспарза
@DanEsparza спасибо, я улучшил свой ответ
Сивей Шен 申思维
9

Похоже, что решения для настольных приложений HTML / JS / CSS не в дефиците.

Одним из решений, с которым я только что столкнулся, является TideSDK: http://www.tidesdk.org/ , который выглядит очень многообещающе, если посмотреть на документацию.

Вы можете разрабатывать с Python, PHP или Ruby, и упаковать его для Mac, Windows или Linux.

mydoghasworms
источник
1
Выглядело многообещающе, но, похоже, не разрабатывается. Основная команда сейчас работает над чем-то, называемым TideKit, но для его выпуска потребуется целая вечность - ПЛЮС это будет стоить денег :(
TheStoryCoder
1
Да жалко Хотя в тот момент, когда я ответил, это выглядело многообещающе. Я думаю, что это одна из причин, почему они не одобряют вопросы относительно рекомендаций для вещей.
mydoghasworms
3

Извините, что лопнул, но настольный клиент Spotify - это всего лишь браузер на основе Webkit . Конечно, он предоставляет определенные дополнительные функциональные возможности, но он способен только запускать JS и рендерить HTML / CSS, потому что у него есть JS-движок, а также механизм рендеринга Chromium. Это не поможет вам с написанием клиентского веб-приложения и развертыванием на нескольких платформах.

То, что вы ищете, похоже на Sencha Touch - фреймворк, позволяющий развертывать приложения HTML5 на устройствах iOS, Android и Blackberry. По сути, он выступает в качестве посредника между определенными вызовами API и доступными функциями, специфичными для устройства.

У меня нет опыта работы с appcelerator , но похоже, что он делает именно это - и получаю очень положительные отзывы в Интернете. Вы должны попробовать его (если вы не хотите вернуться в 1999 год и перейти на MS HTA ;)

OV
источник
Он использует webkit для приложений, но основной софт не основан на html / js
Sucrenoir
1

Я знаю, что есть Fluid и Prism (есть и другие, которыми я привык пользоваться), которые позволяют загружать веб-сайт в нечто похожее на отдельное приложение.

В Chrome вы можете создавать ярлыки на рабочем столе для веб-сайтов. (вы делаете это изнутри Chrome, вы не можете / не должны упаковывать это с вашим приложением) Chrome Frame отличается:

Google Chrome Frame - это плагин, разработанный для Internet Explorer на основе проекта Chromium с открытым исходным кодом; это приносит открытые веб-технологии Google Chrome в Internet Explorer.

Для вашего веб-приложения вам потребуется подобная обертка, а остальное - это веб-технологии, к которым вы привыкли. Вы можете использовать локальное хранилище HTML5 для хранения данных, пока приложение находится в автономном режиме. Я думаю, вы даже сможете работать с SQLite.

Я не знаю, как вы поступили бы с определенными функциями ОС. То, что я описал выше, имеет те же ограничения, что и любой «обычный» сайт. Надеюсь, это даст вам какое-то руководство о том, с чего начать.

sachleen
источник
0

CEF предлагает большую гибкость и возможности для настройки. Но если целью является быстрая разработка node-webkit, это тоже хороший вариант. Node-web kit также предлагает возможность вызова узловых модулей напрямую из DOM.

Если нет никаких встроенных модулей для интеграции, Node-Webkit может предложить лучший пробег. С родными модулями C / C ++ или даже C # лучше с CEF.

Харша
источник