Wie entwickle ich Desktop Apps mit HTML / CSS / JavaScript? [geschlossen]

189

Erstens bin ich nicht daran interessiert, dies professionell zu tun. Ich bin ein Webentwickler, ein Mitarbeiter von mir, der kürzlich zu Spotify gegangen ist, und sagte, er werde hauptsächlich in JavaScript für die Spotify Desktop-App arbeiten. Er sagte, dass es "Chrome Frame" verwendet und alles im Inneren wie eine Web-App (HTML / JS / CSS) gemacht wird.

Als Webentwickler, der nie etwas für Desktop erstellt hat, sind dies großartige Neuigkeiten. Wenn ich die Technologien, die ich bereits kenne, nutzen und in einer Art "Rahmen" implementieren kann und trotzdem in der Lage bin, ein Windows oder besser noch eine plattformübergreifende App zu erstellen.

Ich weiß, dass ich nichts über die Datenbank erwähnt habe, aber selbst eine einfache Hallo-Welt-Desktop-App mit Webtechnologien wäre großartig, um loszulegen.

Wie geht man also vor? Was genau muss / muss ich wissen?

javascript html css desktop-application TK123
quelle
Es ist zu beachten, dass es mindestens zwei nicht exklusive Ebenen von Web-Apps gibt. Eine davon wären clientseitige Apps im Anwendungsstil mit nur einer Seite und eine App, die den Status einer Datenbank oder Ähnlichem beibehält. (Die besten Apps sind natürlich beide.) Sie können lernen, wie man eine macht, ohne viel über die andere zu lernen.
Waleed Khan
Ein weiterer verwandter Thread hier [Können Sie Desktop-Entwicklung mit JavaScript durchführen?] [1] [1]: stackoverflow.com/questions/109399/… Grüße, Ben
benbai123
Du machst es falsch. Das Web ist nicht für die Desktop-App konzipiert. Wenn Sie möchten, können Sie QML / QtQuick verwenden, was ein guter Kompromiss ist (aber es bleibt Desktop, nicht Web!)
Stef
ähnlich hier: stackoverflow.com/questions/109399/…
Zhang LongQI
6
Electron.atom.io
Emlai

Antworten:

74

Sie können mit Titanium für Desktop-Entwickler beginnen. Sie können sich auch Chromium Embedded Framework ansehen . Es ist im Grunde ein Webbrowser-Steuerelement, das auf Chrom basiert.

Es ist in C ++ geschrieben, sodass Sie alle gewünschten Betriebssysteme (Growl, Tray-Symbole, lokaler Dateizugriff, COM-Ports usw.) in Ihrer Container-App und dann die gesamte Anwendungslogik und GUI in HTML / Javascript ausführen können. Sie können jede http-Anforderung abfangen, um entweder lokale Ressourcen bereitzustellen oder eine benutzerdefinierte Aktion auszuführen. Beispielsweise könnte eine Anforderung an http://localapp.com/SetTrayIconState?state=active vom Container abgefangen werden und dann die C ++ - Funktion aufrufen, um das Taskleistensymbol zu aktualisieren.

Außerdem können Sie Funktionen erstellen, die direkt aus JavaScript aufgerufen werden können.

Es ist sehr schwierig, JavaScript direkt in CEF zu debuggen. Es gibt keine Unterstützung für so etwas wie Firebug.

Sie können es auch versuchen AppJS.com(Hilft beim Erstellen von Desktop-Anwendungen für Linux, Windows und Mac mithilfe von HTML, CSS und JavaScript).

Wie von @Clint hervorgehoben, hat das Team von brackets.io (Adobe) mit Chromium Embedded Framework eine fantastische Shell erstellt, die den Einstieg erheblich erleichtert. Es heißt Brackets-Shell: github.com/adobe/brackets-shell Erfahren Sie hier mehr darüber: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

Alfred
quelle
3
In CEF sind Chrome-Entwicklungstools integriert, mit denen Sie js debuggen können. AppJS hat auch einfachen Zugriff auf das Betriebssystem mithilfe der NodeJS-APIs.
Morteza Milani
1
Das Team von Bracket.io (Adobe) hat mit Chromium Embedded Framework eine großartige Shell erstellt, die den Einstieg erheblich erleichtert. Es heißt Brackets Shell: github.com/adobe/brackets-shell Erfahren
Clint
Ich verwende derzeit CEF und Eclipse als Entwicklungstools. Es ist möglich, CEF mit Chrome Developper Tools zu verknüpfen, indem Sie --remote-debugging-port = 8080 an die Ausführungskonfigurationen für Programmargumente übergeben und dann in Chrome zu localhost: 8080 wechseln . Entfernen Sie also bitte den Teil - es ist sehr schwierig, JavaScript direkt in CEF zu debuggen. Es gibt keine Unterstützung für so etwas wie Firebug. -
Stranded Kid
Außerdem beginne ich mit der Entwicklung von Kontena ith ン テ ナgithub.com/jhg/kontena für die Entwicklung einer Lösung für Win32, Linux, Unix, Mac und SmartPhone, die auf CEF, PhoneGap, Backet.io von Adobe, AppJS usw. Basiert Es ist so instabil und ist nur ein Prototyp, um ein MVP zu erhalten. Es wurde in Python für das Testkonzept geschrieben, übersetzt jedoch Code in C ++ / C mit QT5 (jetzt QT4 verwenden) und startet in C ++ / C die Übersetzung für Mobil Unterstützung.
@JHG gute Arbeit .. Lassen Sie uns wissen, wann es offiziell veröffentlicht und behoben wurde
Alfred
33

NW.js

(Früher als Node-Webkit bekannt)

Ich würde NW.js vorschlagen, wenn Sie mit Node vertraut sind oder Erfahrung mit JavaScript haben.

NW.js ist eine App-Laufzeit, die auf Chromium und node.js basiert.

Eigenschaften

  • Apps, die in modernem HTML5, CSS3, JS und WebGL geschrieben sind
  • Vollständige Unterstützung für Node.js APIs und alle Module von Drittanbietern.
  • Gute Leistung: Node und WebKit laufen im selben Thread: Funktionsaufrufe sind unkompliziert; Objekte befinden sich im selben Heap und können sich nur gegenseitig referenzieren
  • Einfach zu verpackende und zu verteilende Apps
  • Verfügbar unter Linux, Mac OS X und Windows

Das NW.js-Repo finden Sie hier und eine gute Einführung in NW.js hier . Wenn Sie Node.js lernen möchten, würde ich diesen SO-Beitrag mit vielen guten Links empfehlen .

Rawa
quelle
2
Abgeordnet. Tolles Werkzeug.
Erik Reppen
Aber dies kann nicht zwischen Leuten verteilt werden, ohne sie zu bitten, Node und Node-Webkit zu installieren, oder?
Jānis Gruzis
@ JānisGruzis Nein, Sie haben Ihre App mit NW.js Binärdateien ausgeliefert .
ungefähr
27

Awesomium erleichtert die Verwendung der HTML-Benutzeroberfläche in Ihrer C ++ - oder .NET-App

Aktualisieren

Meine vorherige Antwort ist jetzt veraltet. Heutzutage wären Sie verrückt, Electron nicht dafür zu verwenden. Darüber hinaus wurden viele beliebte Desktop-Apps entwickelt.

Ronnie Overby
quelle
16

HINWEIS : AppJS ist veraltet und wird nicht mehr empfohlen.

Schauen Sie sich stattdessen NW.js an.

Siwei Shen 申思维
quelle
3
Dies scheint von den AppJs-Erstellern
Dan Esparza
@ DanEsparza danke, ich habe meine Antwort verbessert
Siwei Shen 18
9

Es scheint, dass die Lösungen für HTML / JS / CSS-Desktop-Apps nicht knapp sind.

Eine Lösung, auf die ich gerade gestoßen bin, ist TideSDK: http://www.tidesdk.org/ , was der Dokumentation sehr vielversprechend erscheint.

Sie können mit Python, PHP oder Ruby entwickeln und für Mac, Windows oder Linux verpacken.

Mydoghaswürmer
quelle
1
Sah vielversprechend aus, wurde aber nicht mehr entwickelt. Das Kernteam arbeitet jetzt an etwas namens TideKit, aber es dauert ewig, bis sie es veröffentlichen - PLUS es wird Geld kosten :(
TheStoryCoder
1
Ja, schade. Es sah vielversprechend aus, als ich antwortete. Ich denke, das ist ein Grund, warum sie Fragen zu Empfehlungen für Sachen missbilligen.
Mydoghaswürmer
3

Es tut uns leid, dass Sie Ihre Blase platzen lassen, aber der Spotify-Desktop-Client ist nur ein Webkit-basierter Browser . Natürlich bietet es bestimmte zusätzliche Funktionen, aber es kann nur JS ausführen und HTML / CSS rendern, da es sowohl eine JS-Engine als auch eine Chromium-Rendering-Engine hat. Dies hilft Ihnen nicht beim Codieren einer clientseitigen Web-App und beim Bereitstellen auf mehreren Plattformen.

Was Sie suchen, ähnelt Sencha Touch - einem Framework, mit dem HTML5-Apps nativ auf iOS-, Android- und Blackberry-Geräten bereitgestellt werden können. Es fungiert im Wesentlichen als Vermittler zwischen bestimmten API-Aufrufen und verfügbaren gerätespezifischen Funktionen.

Ich habe keine Erfahrung mit Appcelerator , aber es scheint genau das zu tun - und ich bekomme online sehr günstige Bewertungen. Sie sollten es versuchen (es sei denn, Sie wollten zurück zu 1999 gehen und mit MS HTA rollen ;)

ov
quelle
Es verwendet Webkit für die Anwendung, aber die Hauptsoftware basiert nicht auf HTML / JS
Sucrenoir
1

Ich weiß, dass es Fluid und Prism gibt (es gibt andere, die ich früher verwendet habe), mit denen Sie eine Website in eine eigenständige App laden können.

In Chrome können Sie Desktop-Verknüpfungen für Websites erstellen. (Sie tun dies in Chrome. Sie können / sollten dies nicht mit Ihrer App verpacken.) Chrome Frame ist anders:

Google Chrome Frame ist ein Plug-In für Internet Explorer, das auf dem Open-Source-Chromium-Projekt basiert. Es bringt die offenen Webtechnologien von Google Chrome in den Internet Explorer.

Sie müssten einen solchen Wrapper für Ihre Webanwendung haben, und der Rest sind die Webtechnologien, an die Sie gewöhnt sind. Sie können den lokalen HTML5- Speicher verwenden , um Daten zu speichern, während die App offline ist. Ich denke, Sie können möglicherweise sogar mit SQLite arbeiten.

Ich weiß jedoch nicht, wie Sie auf betriebssystemspezifische Funktionen zugreifen sollen. Was ich oben beschrieben habe, hat die gleichen Einschränkungen wie jede "normale" Website. Hoffentlich gibt Ihnen dies eine Anleitung, wo Sie anfangen sollen.

Sachleen
quelle
0

CEF bietet viel Flexibilität und Anpassungsmöglichkeiten. Aber wenn die Absicht besteht, schnell ein Node-Webkit zu entwickeln, ist dies auch eine gute Option. Das Node-Web-Kit bietet auch die Möglichkeit, Knotenmodule direkt aus dem DOM aufzurufen.

Wenn keine nativen Module zur Integration vorhanden sind, bietet Node-Webkit eine bessere Kilometerleistung. Mit nativen Modulen C / C ++ oder sogar C # ist es mit CEF besser.

Harsha
quelle