it-swarm.com.de

Wie entwickle ich Desktop-Apps mit HTML / CSS / JavaScript?

Erstens bin ich nicht daran interessiert, dies professionell zu tun. Ich bin ein Webentwickler, ein Kollege von mir, der kürzlich zu Spotify gewechselt 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 darin wie eine Web-App (HTML/JS/CSS) gemacht wird.

Als Webentwickler, der noch nie etwas für Desktop erstellt hat, sind dies großartige Neuigkeiten. Wenn ich die Technologien verwenden kann, kenne ich sie bereits und implementiere sie in einer Art "Frame" und kann trotzdem eine Windows- oder besser plattformübergreifende App erstellen.

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

Wie geht man damit um? Was genau muss ich wissen?

187
TK123

Sie können mit Titanium for Desktop Dev beginnen. Sie können sich auch Chromium Embedded Framework ansehen. Grundsätzlich handelt es sich um ein auf Chrom basierendes Webbrowser-Steuerelement.

Es ist in C++ geschrieben, so dass Sie alle gewünschten Betriebssysteme auf niedriger Ebene (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 damit 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.

Sie können damit auch 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 auch versuchen AppJS.com (Hilft beim Erstellen von Desktop-Anwendungen. Für Linux, Windows und Mac mit HTML, CSS und JavaScript)

Wie von @Clint hervorgehoben, hat das Team von brackets.io (Adobe) mit Chromium Embedded eine fantastische Shell erstellt Framework, das den Einstieg erleichtert. Es heißt die Klammern-Shell: github.com/Adobe/brackets-Shell Weitere Informationen dazu finden Sie hier: clintberry.com/2013/html5-desktop-apps-with-brackets- Shell

73

NW.js

(Früher bekannt als Node-Webkit)

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

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
  • Umfassende Unterstützung für Node.js-APIs und alle Module von Drittanbietern.
  • Gute Performance: Node und WebKit laufen im selben Thread: Funktionsaufrufe erfolgen 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

Sie finden das NW.js-Repo hier und eine gute Einführung in NW.js hier . Wenn Sie Lust haben, Node.js zu lernen, würde ich empfehlen this SO Post mit vielen guten Links.

33
Rawa

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

Aktualisieren

Meine vorherige Antwort ist jetzt veraltet. Heutzutage wäre es verrückt, nicht zu prüfen, ob Electron dafür verwendet wird. Darüber hinaus wurden viele beliebte Desktop-Apps entwickelt.

26
Ronnie Overby

HINWEIS: AppJS ist veraltet und wird nicht mehr empfohlen.

Schauen Sie sich stattdessen NW.js an.

16

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 in der Dokumentation sehr vielversprechend erscheint.

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

9
mydoghasworms

Es tut uns leid, dass Sie Ihre Sprechblase platzen lassen, aber 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 über eine JS-Engine sowie eine Chromium-Rendering-Engine verfügt. 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 für iOS, Android und Blackberry-Geräte) bereitgestellt werden können als Vermittler zwischen bestimmten API-Aufrufen und gerätespezifischen Funktionen verfügbar.

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

3
o.v.

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

In Chrome können Sie Desktop-Verknüpfungen für Websites erstellen. (Das machst du in Chrome, das kannst/solltest du nicht mit deiner App packen.) Chrome Frame ist anders:

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

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

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 Art Anleitung, wo Sie anfangen sollen.

1
sachleen

Mit Adobe AIR können Sie Javascript-Apps erstellen ... http://www.Adobe.com/products/air.html

1
Clintm

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

Wenn es keine nativen Module für die Integration von Node-Webkit gibt, können Sie eine bessere Laufleistung erzielen. Mit nativen Modulen C/C++ oder sogar C # ist es besser mit CEF.

0
harsha