Share
Met Node.js kunnen we eenvoudig webtoepassingen maken. Dankzij de node-webkit kunnen we nu ook desktop-apps ermee maken, met behulp van een unieke combinatie van HTML5 en Node.
De bibliotheek combineert de WebKit-engine en Node.js op een unieke manier. Zowel WebKit als Node delen dezelfde context, zodat u uw code kunt schrijven alsof het is bedoeld om te worden uitgevoerd in een browser, maar met de toevoeging van alle Node-functies.
De lijst met toepassingen is eindeloos. U kunt zakelijke apps, tekst- en afbeeldingseditors, games, presentaties, beheerderspanelen etc. maken. Noem alleen de desktop-app die u wilt maken en ik kan u verzekeren dat dit mogelijk is met node-webkit.
In deze zelfstudie laat ik u zien hoe u aan de slag kunt gaan door u te laten zien hoe u een eenvoudige teksteditor maakt.
Eerst moet je de bibliotheek pakken. Download de juiste versie voor uw besturingssysteem (de toepassing zelf wordt op alle versies uitgevoerd) vanuit github en pak het uit, waar u maar wilt. Laten we nu een basismapstructuur maken. We zullen mappen voor HTML-bestanden hebben (.html) en voor JavaScript-bestanden (.js). Maak ook de package.json bestand in dezelfde map die de nw uitvoerbaar bestand is in en een node_modules map om de modules die we zullen maken te behouden.
Het eerste wat u moet doen, is de vereiste velden in de package.json het dossier. In het geval van node-webkit zijn dit naam en hoofd (op Github vindt u de volledige lijst met beschikbare package.json opties). De eerste is precies hetzelfde als in het geval van een eenvoudige Node.js-app. De tweede moet een (relatief of absoluut) pad naar het hoofd-HTML-bestand zijn dat bij het starten van de toepassing wordt weergegeven. In het geval van ons voorbeeld, de package.json bestand zou er als volgt uit moeten zien:
"name": "simple-text-editor", "main": "./html/index.html"
Nu als u uw app uitvoert met behulp van de nw uitvoerbaar, zou u een leeg scherm zoals dit moeten zien:
Het maken van de gebruikersinterface met behulp van node-webkit is niet anders dan het maken van een webpagina (met een klein verschil dat je de rendering-engine kent, dus je hoeft geen fallbacks te geven voor oudere browsers of bibliotheken zoals jQuery te gebruiken - en eigenlijk heb je zou niet moeten, omdat ze fallback-code bevatten die uw app zal vertragen). Laten we een maken index.html bestand dat we zullen gebruiken:
Eenvoudige teksteditor
Laten we ook het belangrijkste JavaScript-bestand opnemen (en maken) dat we zullen gebruiken, dus het zal worden uitgevoerd nadat de DOM is geladen:
Het enige dat verandert wanneer je de app opent, is de titel.
Om je te laten zien hoe gemakkelijk je Node.js in node-webkit kunt gebruiken, kunnen we de inhoud van package.json en print het op het scherm. Maak het js / main.js bestand en plaats de volgende code erin:
Accentsconagua
var fs = require ('fs'); fs.readFile ('./ package.json', 'utf-8', functie (fout, inhoud) document.write (inhoud);); Zoals je ziet, ziet de code er exact hetzelfde uit alsof je hem voor Node schrijft. Maar dan gebruiken we document.write om de inhoud van het bestand op de pagina te plaatsen. U hoeft geen lokale server in te stellen.
Open nu de app en je zou zoiets als dit moeten zien:
Er is nog iets leuks aan node-webkit; U hoeft geen reeks te vermelden >vereisen. Laten we een eenvoudige module maken om de bestandsinhoud naar een tekstgebied te lezen of naar een bestand te schrijven. Geef het bestand een naam file.js en zet het in de node_modules directory. Plaats nu de algemene modulestructuur erin:
var fs = require ('fs'); functie Bestand () functie open (pad, document) functie opslaan (pad, document) this.open = open; this.save = opslaan; module.exports = nieuw bestand; Zoals u kunt zien, is dit een statische klasse met twee openbare methoden: een voor het openen van de bestanden en een voor het opslaan ervan.
De Open methode ziet er als volgt uit:
functie open (pad, document) fs.readFile (pad, 'utf-8', functie (fout, inhoud) document.getElementById ('editor'). value = contents;); Best simpel, toch? De functie accepteert het pad naar het bestand als de eerste parameter en zet de inhoud van het bestand in het element met een id van "editor". We moeten ook de document bezwaar tegen de functie omdat het script wordt aangeroepen met behulp van Node's vereisen en het heeft geen directe toegang tot de WebKit-dingen.
De opslaan methode is net zo eenvoudig als de vorige:
functie opslaan (pad, document) var text = document.getElementById ('editor'). waarde; fs.writeFile (pad, tekst); Laten we nu eens kijken of alles werkt. Verander de inhoud van js / main.js hieraan:
var file = require ('file.js'); console.log (bestand.open, bestand.save); Als u nu naar de console voor ontwikkelaarstools gaat en op de knop klikt ontwikkelaar vernieuwen knop in de rechterhoek van het venster zou je de twee functies uit deze module moeten zien loggen. Dit is een ander nuttig ding in node-webkit - jouw console.log oproepen worden weergegeven in de console voor ontwikkelaarstools, zodat het eenvoudiger is om uw apps te debuggen.
Laten we twee bestandsingangen toevoegen die we later nodig hebben:
Let op de nwsaveas attribuut in de tweede invoer. Het is een speciaal type invoer van knooppunt-webkit, waarmee de gebruiker een niet-bestaand bestand kan selecteren. Beide ingangen zijn verborgen, omdat we ze alleen via JavaScript zullen benaderen. In node-webkit worden bestandsingangen zo gewijzigd dat je een a kunt vuren Klik een gebeurtenis op hen, zodat u de bestandsdialoog kunt openen zonder dat de gebruiker op de invoer hoeft te klikken (zonder de tijdelijke oplossingen zoals onzichtbare invoer boven de knop). Nu kunnen we naar het JavaScript gaan.
Verwijder eerst de console.log bel vanuit de js / main.js het dossier. Plaats nu deze code daarin:
function clickInput (id) var event = document.createEvent ('MouseEvents'); event.initMouseEvent ( 'klik'); document.getElementById (id) .dispatchEvent (event); document.addEventListener ('keyup', functie (e) if (e.keyCode == 'O'.charCodeAt (0) && e.ctrlKey) clickInput (' open '); else if (e.keyCode = = 'S'.charCodeAt (0) && e.ctrlKey) clickInput (' save ');); Deze code is verantwoordelijk voor het weergeven van de Open en Opslaan dialogen. De clickInput functie doet de hoofdtaak hier - het simuleert de klikgebeurtenis op het invoerelement - in een normale browser zou dit om veiligheidsredenen onmogelijk zijn, maar hier is het helemaal geen beveiligingsdreiging. Later is er een normaal keyup gebeurtenishandler die controleert of de juiste toetscombinatie is ingedrukt (Ctrl + O of CTRL + S) en "klikken" op de ingangen. Merk op dat dit ook in een browser onmogelijk te bereiken is - zoals combinaties Ctrl + O en CTRL + S zijn gereserveerd voor het interne gebruik van de browser en er treedt geen gebeurtenis op wanneer deze wordt ingedrukt (alleen Firefox vuurt gebeurtenissen voor hen af).
Druk nu op ontwikkelaar vernieuwen knop en je zou het juiste dialoogvenster moeten zien wanneer je op drukt CTRL + S of Ctrl + O. Ze doen nu natuurlijk niets.
Nu we een teksteditor gaan maken, hebben we iets nodig om op te schrijven. Voeg de toe textarea naar de HTML:
Vervolgens moeten we de opening- / spaarcode afmaken. Laten we het maken onchange gebeurtenis luisteraars voor de Open en opslaan ingangen:
document.getElementById ('open'). addEventListener ('wijzigen', functie (e) file.open (this.value, document);); document.getElementById ('opslaan'). addEventListener ('wijzigen', functie (e) file.save (this.value, document);); Dankzij de eerder gemaakte module is de code heel eenvoudig. Dit is ook mogelijk dankzij node-webkit, omdat in browsers (ook om veiligheidsredenen) de waarde van het bestandsinvoerelement op een nep pad is ingesteld - hier is het pad dat is geselecteerd. Open nu de app (of druk op de ontwikkelaar vernieuwen knop, als je het niet hebt gesloten) en je zou een perfect werkende teksteditor moeten hebben.
We kunnen ook een paar andere dingen doen om de editor een beetje geavanceerder en bruikbaarder te maken. Laten we bijvoorbeeld een nieuw venster openen wanneer een gebruiker op drukt Ctrl + N. Voeg eerst dit toe vereisen naar de top van het script:
var gui = require ('nw.gui'); De nw.gui module is een bibliotheek van een node-webkit met betrekking tot de gebruikersinterface (u kunt hier meer over lezen op Github van Node-webkit). Voeg dit toe anders als naar de documenten keyup luisteraar:
else if (e.keyCode == 'N'.charCodeAt (0) && e.ctrlKey) gui.Window.open (' index.html '); En altviool! Als u de app ververst, kunt u nu op drukken Ctrl + N om een nieuw venster te openen. Deze functie verschilt van de normale window.open though. U kunt verschillende venster-opties doorgeven als de tweede parameter. De lijst met wat u daar kunt instellen, is beschikbaar in de documentatie.
Een ander ding dat nuttig kan zijn in een teksteditor is een applicatiemenu (het programma dat zich onder de titelbalk in Windows / Linux en aan de bovenkant van het scherm op Mac bevindt). In node-webkit is het vrij eenvoudig. Laten we eerst het menu maken:
var menu = new gui.Menu (type: 'menubar');
Het type menubalk is gereserveerd voor het applicatiemenu. Nu kunnen we er items aan toevoegen. Laat het een zijn het dossier menu:
menu.append (nieuwe gui.MenuItem (label: 'File', submenu: new gui.Menu ()));
Laten we nu een paar items toevoegen aan dit menu:
menu.items [0] .submenu.append (nieuwe gui.MenuItem (label: 'Nieuw', klik: function () gui.Window.open ('index.html');)); menu.items [0] .submenu.append (new gui.MenuItem (type: 'separator')); menu.items [0] .submenu.append (nieuwe gui.MenuItem (label: 'Sluiten', klik op: function () gui.Window.get (). close ();)); menu.items [0] is het eerste item in ons applicatiemenu (je kunt het ook toewijzen aan een variabele wanneer je het maakt als je dat wilt). We voegen nieuwe items toe aan zijn submenu, en elk item krijgt een Klik terugbellen om de klik erop af te handelen. De gui.Window.get methode krijgt het huidige venster, dus we kunnen het sluiten wanneer de gebruiker de Dichtbij optie in de het dossier menu.
Ten slotte kunnen we het menu toewijzen aan het venster:
gui.Window.get (). menu = menu;
Nogmaals, we gebruiken gui.Window.get om het huidige venster te krijgen, dan wijzen we ons menu eraan toe menu eigendom. Houd er rekening mee dat, hoewel we een ander menu aan elk venster kunnen toewijzen, één OS slechts één menu kan hebben (wat globaal is voor alle vensters), dus als je wilt dat je app op Macs wordt gebruikt, zou het gebruik van verschillende menu's in verschillende vensters moeten vermijden.
Als u nu uw app opent of ververst, ziet u a systeemmenu onder de titelbalk:
Als u uw app nu met andere gebruikers wilt delen, kunt u deze in één bestand verpakken, zodat de gebruikers het uitvoerbare bestand van de node-webkit op hun platform kunnen downloaden en uw app ermee kunnen starten. Laten we eerst de. Verwijderen toolbar dat maakt het venster eruitzien als een browser - het is leuk om te hebben tijdens de ontwikkeling, maar uw gebruikers willen het waarschijnlijk niet zien. We kunnen dit bereiken door in te stellen window.toolbar naar vals in package.json, dus het ziet er zo uit:
"naam": "example-app", "main": "./html/index.html", "window": "werkbalk": false
Nu als je de app opent (er verandert niets als je het gewoon opfrist, package.json is alleen bij het opstarten geladen), u zou het eindresultaat moeten zien:
Het verpakken van de app is vrij eenvoudig. Maak gewoon een .ritssluiting archiveer met al uw assets (alle bestanden die u hebt gemaakt, zonder de bestanden die met node-webkit zijn meegeleverd) en verander de extensie naar .nw. Dat is alles. Als een gebruiker node-webkit en uw pakket downloadt, hoeven ze het alleen in de map van de node-webkit te plaatsen en de map uit te voeren. nw uitvoerbaar. Gedetailleerde beschrijvingen, met nog een paar tips, zijn beschikbaar op de github van de node-webkit.
Uw editor is nu klaar om te worden verzonden naar uw gebruikers.
Zoals u kunt zien, is node-webkit een veelbelovende en krachtige bibliotheek. Met frequente updates en fixes en ondersteund door Intel, is er bijna geen kans dat het wordt beëindigd, wat soms kan gebeuren met open source projecten.
Deel uw mening over dit project in de reacties hieronder. Ik denk persoonlijk dat dit het beste is als je een desktop-applicatie wilt maken met Node.js en HTML.
Bekijk ook de selectie nuttige Node.js- en HTML5-scripts en -apps op Envato Market.
