Share
Mit Node.js können wir Webanwendungen einfach erstellen. Dank Node-Webkit können wir jetzt auch Desktop-Apps erstellen, indem wir eine einzigartige Kombination aus HTML5 und Node verwenden.
Die Bibliothek kombiniert WebKit-Engine und Node.js auf einzigartige Weise. Sowohl WebKit als auch Node verwenden denselben Kontext, sodass Sie Ihren Code so schreiben können, wie er in einem Browser ausgeführt werden soll, jedoch zusätzlich alle Funktionen von Node.
Die Verwendungsliste ist endlos. Sie können Geschäftsanwendungen, Text- und Bildeditoren, Spiele, Präsentationen, Administrationsfenster usw. erstellen. Benennen Sie einfach die Desktop-App, die Sie erstellen möchten, und ich kann Ihnen versichern, dass dies mit node-webkit möglich ist.
In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Erstellen eines einfachen Texteditors beginnen.
Zuerst musst du die Bibliothek bekommen. Laden Sie die für Ihr Betriebssystem geeignete Version (die Anwendung selbst wird auf allen von ihnen ausgeführt) von github herunter und entpacken Sie sie, wo immer Sie möchten. Jetzt können Sie eine grundlegende Ordnerstruktur erstellen. Wir werden Ordner für HTML-Dateien haben (.html) und für JavaScript-Dateien (.js). Erstellen Sie auch das package.json Datei im selben Verzeichnis wie das nw ausführbar ist in und a Knotenmodule Ordner, um die Module zu behalten, die wir erstellen werden.
Als Erstes müssen Sie die erforderlichen Felder im Feld ausfüllen package.json Datei. Im Falle von node-webkit sind dies Name und Main (auf Github finden Sie die vollständige Liste der verfügbaren package.json Optionen). Der erste ist genau derselbe wie bei einer einfachen Node.js-App. Der zweite sollte ein (relativer oder absoluter) Pfad zur HTML-Hauptdatei sein, der beim Start der Anwendung angezeigt wird. In unserem Beispiel das package.json Datei sollte so aussehen:
"name": "simple-text-editor", "main": "./html/index.html"
Wenn Sie jetzt Ihre App mit der nw ausführbar, sollte ein leerer Bildschirm wie folgt angezeigt werden:
Das Erstellen der Benutzeroberfläche mit node-webkit unterscheidet sich nicht vom Erstellen einer Webseite (mit dem geringfügigen Unterschied, dass Sie mit der Rendering-Engine vertraut sind. Sie müssen also keine Fallbacks für ältere Browser bereitstellen oder Bibliotheken wie jQuery verwenden - und eigentlich Sie selbst) sollte nicht, da sie Fallback-Code enthalten, der Ihre App verlangsamt). Lass uns einen erstellen index.html Datei, die wir verwenden werden:
Einfacher Texteditor
Fügen wir die Haupt-JavaScript-Datei, die wir verwenden werden, in den Body ein (und erstellen), damit sie ausgeführt wird, nachdem das DOM geladen wurde:
Das einzige, was sich beim Öffnen der App ändern wird, ist der Titel.
Um Ihnen zu zeigen, wie einfach Sie Node.js in node-webkit verwenden können, lesen Sie den Inhalt von package.json und drucken Sie es auf dem Bildschirm. Erstellen Sie die js / main.js Datei und fügen Sie den folgenden Code ein:
Accentsconagua
var fs = required ('fs'); fs.readFile ('./ package.json', 'utf-8', Funktion (Fehler, Inhalt) document.write (Inhalt);); Wie Sie sehen, sieht der Code genau so aus, als ob Sie ihn für Node schreiben würden. Aber dann benutzen wir document.write um den Inhalt der Datei auf die Seite zu setzen. Sie müssen keinen lokalen Server einrichten.
Öffne jetzt die App und du solltest so etwas sehen:
Über das node-webkit gibt es noch eine andere nette Sache. Sie müssen keine Reihe von einfügen >benötigen. Erstellen Sie ein einfaches Modul, um den Inhalt einer Datei in ein Textfeld zu lesen oder in eine Datei zu schreiben. Benennen Sie die Datei file.js und steck es in die Knotenmodule Verzeichnis. Fügen Sie nun die gesamte Modulstruktur ein:
var fs = required ('fs'); Funktion Datei () Funktion offen (Pfad, Dokument) Funktion speichern (Pfad, Dokument) this.open = offen; this.save = speichern; module.exports = neue Datei; Wie Sie sehen, wird dies eine statische Klasse mit zwei öffentlichen Methoden sein - eine zum Öffnen der Dateien und eine zum Speichern.
Das öffnen Methode wird so aussehen:
Funktion offen (Pfad, Dokument) fs.readFile (Pfad, 'utf-8', Funktion (Fehler, Inhalt) document.getElementById ('editor'). value = Inhalt;); Ziemlich einfach richtig? Die Funktion akzeptiert den Pfad zur Datei als ersten Parameter und fügt den Inhalt der Datei mit der ID "editor" in das Element ein. Wir müssen auch das bestehen dokumentieren Objekt an die Funktion, weil das Skript mit Nodes aufgerufen wird benötigen und es hat keinen direkten Zugriff auf das WebKit-Material.
Das sparen Methode ist so einfach wie die vorige:
function save (Pfad, Dokument) var text = document.getElementById ('editor'). value; fs.writeFile (Pfad, Text); Lassen Sie uns jetzt testen, ob alles funktioniert. Ändern Sie den Inhalt von js / main.js zu diesem:
var file = required ('file.js'); console.log (file.open, file.save); Wenn Sie jetzt zur Entwicklertools-Konsole wechseln, klicken Sie auf die Schaltfläche Entwickler aktualisieren In der rechten Ecke des Fensters sollten Sie die beiden Funktionen dieses Moduls protokollieren. Dies ist eine weitere nützliche Sache in node-webkit - Ihrem console.log Anrufe werden in der Entwicklertools-Konsole angezeigt, sodass Sie Ihre Anwendungen einfacher debuggen können.
Fügen wir zwei Dateieingaben hinzu, die wir später benötigen werden:
Beachten Sie die nwsaveas Attribut in der zweiten Eingabe. Hierbei handelt es sich um eine spezielle Art der Eingabe von node-webkit, mit der der Benutzer eine nicht vorhandene Datei auswählen kann. Beide Eingaben sind verborgen, da wir nur über JavaScript darauf zugreifen. In node-webkit werden Dateieingaben so geändert, dass Sie a auslösen können klicken Sie können das Dateidialogfeld öffnen, ohne dass der Benutzer auf die Eingabe klickt (ohne dass die Problemumgehungen wie unsichtbare Eingaben über der Schaltfläche erforderlich sind). Jetzt können wir zum JavaScript wechseln.
Entfernen Sie zuerst die console.log Anruf von der js / main.js Datei. Geben Sie nun diesen Code dort ein:
function clickInput (id) var event = document.createEvent ('MouseEvents'); event.initMouseEvent ('click'); document.getElementById (id) .dispatchEvent (event); document.addEventListener ('keyup', Funktion (e) if (e.keyCode == 'O'.charCodeAt (0) && e.ctrlKey) clickInput (' open '); else if (e.keyCode = = 'S'.charCodeAt (0) && e.ctrlKey) clickInput (' save ');); Dieser Code ist für die Anzeige der Öffnen und sparen Dialoge. Das clickInput function erledigt hier die Hauptaufgabe - sie simuliert das Klickereignis auf dem Eingabeelement - in einem normalen Browser wäre dies aus Sicherheitsgründen unmöglich, aber hier handelt es sich nicht um eine Sicherheitsbedrohung. Später gibt es eine Normalität keyup Eventhandler, der prüft, ob die richtige Tastenkombination gedrückt wurde (Strg + O oder Strg + S) und "klickt" auf die Eingänge. Beachten Sie, dass dies auch in einem Browser nicht möglich ist - Kombinationen wie Strg + O und Strg + S sind für die interne Verwendung des Browsers reserviert und es wird kein Ereignis ausgelöst, wenn sie gedrückt werden (nur Firefox löst Ereignisse für sie aus).
Drücken Sie jetzt die Entwickler aktualisieren und Sie sollten den entsprechenden Dialog sehen, wenn Sie drücken Strg + S oder Strg + O. Sie machen natürlich vorerst nichts.
Da wir jetzt einen Texteditor erstellen, brauchen wir etwas zum Schreiben. Ergänzen Sie die Textbereich zum HTML:
Als nächstes müssen wir den Öffnungs- / Speichercode abschließen. Lass uns die erstellen bei Änderung Event-Hörer für die öffnen und sparen Eingänge:
document.getElementById ('open'). addEventListener ('change', Funktion (e) file.open (this.value, document);); document.getElementById ('save'). addEventListener ('change', Funktion (e) file.save (this.value, document);); Dank des zuvor erstellten Moduls ist der Code sehr einfach. Dies ist auch dank node-webkit möglich, da in Browsern (wiederum aus Sicherheitsgründen) der Wert des Dateieingabeelements auf einen gefälschten Pfad gesetzt wird - hier wurde der Pfad ausgewählt. Öffnen Sie jetzt die App (oder drücken Sie die Entwickler aktualisieren Schaltfläche, wenn Sie es nicht geschlossen haben) und Sie sollten einen perfekt funktionierenden Texteditor haben.
Wir können auch ein paar andere Dinge tun, um den Editor etwas fortgeschrittener und nützlicher zu machen. Lassen Sie uns zum Beispiel ein neues Fenster öffnen, wenn ein Benutzer drückt Strg + N. Fügen Sie zuerst das hinzu benötigen zum Anfang des Skripts:
var gui = erfordern ('nw.gui'); Das nw.gui Das Modul ist eine Bibliothek des Node-Webkits, die sich auf die Benutzeroberfläche bezieht (mehr darüber finden Sie auf Gode von Node-Webkit). Als nächstes fügen Sie dies hinzu sonst wenn zu dem Dokument keyup Hörer:
else if (e.keyCode == 'N'.charCodeAt (0) & & e.ctrlKey) gui.Window.open (' index.html '); Und Bratsche! Wenn Sie die App aktualisieren, können Sie jetzt drücken Strg + N ein neues Fenster öffnen. Diese Funktion unterscheidet sich von der normalen window.open obwohl. Sie können verschiedene Fensteroptionen als zweiten Parameter übergeben. Die Liste dessen, was Sie dort einstellen können, finden Sie in der Dokumentation.
Eine andere Sache, die in einem Texteditor nützlich sein kann, ist ein Anwendungsmenü (das sich in Windows / Linux unter der Titelleiste und auf dem Mac oben auf dem Bildschirm befindet). Im node-webkit ist das ziemlich einfach. Zuerst erstellen wir das Menü:
var menu = new gui.Menu (type: 'menubar');
Der Typ Menüleiste ist für das Anwendungsmenü reserviert. Jetzt können wir Elemente hinzufügen. Lass es ein sein Datei Speisekarte:
menu.append (new gui.MenuItem (label: 'File', Untermenü: new gui.Menu ()));
Jetzt fügen wir diesem Menü einige Elemente hinzu:
menu.items [0] .submenu.append (new gui.MenuItem (label: 'New', klicken Sie auf: function () gui.Window.open ('index.html');)); menu.items [0] .submenu.append (new gui.MenuItem (type: 'separator')); menu.items [0] .submenu.append (new gui.MenuItem (label: 'Close', klicken Sie auf: function () gui.Window.get (). close ();)); menu.items [0] ist das erste Element unseres Anwendungsmenüs (Sie können es bei der Erstellung auch einer Variablen zuordnen, wenn Sie möchten). Wir hängen neue Elemente an Untermenü, und jeder Artikel erhält eine klicken Rückruf, um den Klick darauf zu erledigen. Das gui.Window.get Die Methode ruft das aktuelle Fenster ab, sodass wir es schließen können, wenn der Benutzer das auswählt Schließen Option in der Datei Speisekarte.
Schließlich können wir das Menü dem Fenster zuweisen:
gui.Window.get (). menu = menu;
Wieder verwenden wir gui.Window.get Um das aktuelle Fenster zu erhalten, weisen wir ihm sein Menü zu Speisekarte Eigentum. Bitte beachten Sie, dass, obwohl wir jedem Fenster ein anderes Menü zuweisen können, eine App unter OSX (Mac) nur ein Menü haben kann (das für alle Fenster global ist). Wenn Sie also möchten, dass Ihre App auf Macs verwendet wird, können Sie dies tun sollte vermeiden, unterschiedliche Menüs in verschiedenen Fenstern zu verwenden.
Wenn Sie nun Ihre App öffnen oder aktualisieren, sollte eine angezeigt werden Systemmenü unter dem Titelleiste:
Wenn Sie Ihre App jetzt für andere Benutzer freigeben möchten, können Sie sie in eine Datei packen, sodass die Benutzer die für ihre Plattform geeignete ausführbare Datei des node-webkit herunterladen und Ihre App damit starten können. Zuerst entfernen wir das Werkzeugleiste Dadurch wirkt das Fenster wie ein Browser - es ist schön, es während der Entwicklung zu haben, aber Ihre Benutzer möchten es wahrscheinlich nicht sehen. Wir können dies durch Einstellung erreichen window.toolbar zu falsch im package.json, so sieht es so aus:
"name": "example-app", "main": "./html/index.html", "window": "toolbar": false
Wenn Sie jetzt die App öffnen, ändert sich nichts, wenn Sie sie nur aktualisieren, package.json wird nur beim Start geladen), sollten Sie das Endergebnis sehen:
Die App zu verpacken ist ziemlich einfach. Erstellen Sie einfach eine .Postleitzahl archivieren Sie alle Ihre Assets (alle Dateien, die Sie erstellt haben, ohne die mit node-webkit gelieferten Dateien) und ändern Sie die Erweiterung in .nw. Das ist alles. Wenn ein Benutzer node-webkit und Ihr Paket herunterlädt, muss er es nur im Verzeichnis des node-webkit ablegen und das Verzeichnis ausführen nw ausführbar. Detaillierte Beschreibungen mit ein paar weiteren Tipps finden Sie auf dem Github des node-webkit.
Jetzt kann Ihr Editor an Ihre Benutzer versendet werden.
Wie Sie sehen, ist node-webkit eine sehr vielversprechende und leistungsstarke Bibliothek. Bei häufigen Updates und Fehlerbehebungen, die von Intel unterstützt werden, besteht fast keine Chance, dass dies eingestellt wird. Dies kann bei Open-Source-Projekten manchmal der Fall sein.
Teilen Sie Ihre Gedanken zu diesem Projekt in den Kommentaren unten mit. Ich persönlich denke, dass es das Beste ist, wenn Sie eine Desktop-Anwendung mit Node.js und HTML erstellen möchten.
Schauen Sie sich auch die Auswahl nützlicher Node.js- und HTML5-Skripts und Apps auf Envato Market an.
