Share
Folosind Node.js, putem crea aplicații web cu ușurință. Acum, datorită nodului-webkit putem crea, de asemenea, aplicații desktop cu ajutorul acestuia, folosind o combinație unică de HTML5 și Node.
Biblioteca combină motorul WebKit cu Node.js într-un mod unic. Atât WebKit, cât și Nodul partajează același context, permițându-vă să vă scrieți codul așa cum ar trebui să fie executat într-un browser, dar cu adăugarea tuturor caracteristicilor Node.
Lista de utilizări este nesfârșită. Puteți crea aplicații de afaceri, editoare de text și imagini, jocuri, prezentări, panouri de administrare etc. Numiți doar aplicația desktop pe care doriți să o creați și vă pot asigura că va fi posibil cu nodul-webkit.
În acest tutorial, vă voi arăta cum să începeți, arătându-vă cum să creați un simplu editor de text.
În primul rând, trebuie să luați biblioteca. Descărcați versiunea potrivită pentru sistemul de operare (aplicația în sine va funcționa pe toate) de la github și dezarhivați-o ori de câte ori doriți. Acum, permiteți crearea unei structuri de bază de directoare. Vom avea dosare pentru fișiere HTML (.html) și pentru fișiere JavaScript (.js). De asemenea, creați package.json fișier în același director ca nw executabilul este în și a node_modules pentru păstrarea modulelor pe care le vom crea.
Primul lucru pe care trebuie să îl faceți este să completați câmpurile obligatorii din package.json fişier. În cazul nodului-webkit acestea sunt Nume și principal (pe Github puteți găsi lista completă a celor disponibile package.json Opțiuni). Prima este exact aceeași ca în cazul unei aplicații simple Node.js. Al doilea ar trebui să fie o cale (relativă sau absolută) față de fișierul HTML principal care va fi afișat la pornirea aplicației. În cazul exemplului nostru, package.json fișierul ar trebui să arate astfel:
"nume": "simplu text-editor", "principal": "./html/index.html"
Acum, dacă rulați aplicația utilizând nw executabil, ar trebui să vedeți un ecran gol astfel:
Crearea interfeței cu utilizatorul folosind nodul webkit nu este altceva decât crearea unei pagini web (cu o mică diferență pe care o cunoașteți motorul de randare, astfel încât să nu trebuiască să furnizați nicio rezervă pentru browserele mai vechi sau să folosiți biblioteci precum jQuery - nu ar trebui, deoarece acestea includ codul de rezervă care va încetini aplicația dvs.). Să creăm un index.html fișier pe care îl vom folosi:
Editor text simplu
Să includeți, de asemenea, (și să creați) fișierul JavaScript principal pe care îl vom folosi în organism, astfel încât acesta să fie executat după încărcarea DOM-ului:
Acum, singurul lucru care se va schimba când deschideți aplicația va fi titlul.
Pentru a vă arăta cât de ușor puteți folosi Node.js în nodul webkit, să citim conținutul package.json și imprimați-o pe ecran. Creați js / main.js fișier și puneți următorul cod în el:
Accentsconagua
var fs = cer ('fs'); fs.readFile ('./ package.json', 'utf-8', funcția (eroare, conținut) document.write (contents);); După cum puteți vedea, codul pare exact același lucru ca și cum l-ați scrie pentru Nod. Dar apoi vom folosi document.write pentru a pune conținutul fișierului pe pagină. Nu este nevoie să configurați niciun server local.
Acum deschideți aplicația și ar trebui să vedeți ceva de genul:
Există un alt lucru frumos despre nodul-webkit; Nu trebuie să includeți o serie de >necesita. Să creăm un modul simplu pentru a citi conținutul fișierului într-o textare sau pentru a scrie într-un fișier. Denumiți fișierul file.js și pune-l în node_modules director. Acum puneți structura modulului general în el:
var fs = cer ('fs'); funcția Fișier () funcția deschis (cale, document) funcția salva (cale, document) this.open = deschis; this.save = salva; module.exports = fișier nou; După cum puteți vedea, aceasta va fi o clasă statică cu două metode publice - una pentru deschiderea fișierelor și una pentru salvarea acestora.
deschis metoda va arata astfel:
funcția deschisă (calea, documentul) fs.readFile (calea, 'utf-8', funcția (eroare, conținut) document.getElementById ('editor'); Destul de simplu? Funcția acceptă calea către fișier ca primul parametru și pune conținutul fișierului în element cu un id de "editor". Trebuie, de asemenea, să trecem document obiect pentru funcția deoarece script-ul este apelat folosind Nodul necesita și nu are acces direct la chestiile WebKit.
Salvați metoda este la fel de simplă ca cea precedentă:
funcția save (cale, document) var text = document.getElementById ('editor'). fs.writeFile (cale, text); Acum, să verificăm dacă totul funcționează. Modificați conținutul js / main.js la acest:
var fișier = necesită ('file.js'); console.log (file.open, file.save); Acum, dacă accesați consola de instrumente pentru dezvoltatori și dați clic pe developer refresh în colțul din dreapta al ferestrei ar trebui să vedeți cele două funcții din acest modul logat. Acesta este un alt lucru util în nodul webkit - dvs. console.log apelurile sunt afișate în consola de instrumente pentru dezvoltatori, deci este mai ușor să depanați aplicațiile.
Să adăugăm două intrări de fișiere pe care le vom avea nevoie ulterior:
Observați nwsaveas atribut în a doua intrare. Acesta este un tip special de intrare de la nodul-webkit, care permite utilizatorului să selecteze un fișier inexistent. Ambele intrări sunt ascunse, pentru că le vom accesa numai din JavaScript. În nodul-webkit, intrările de fișiere sunt modificate într-un mod care vă permite să faceți foc a clic eveniment pe ele, astfel încât să puteți deschide dialogul de fișier fără ca utilizatorul să facă clic pe intrare (fără a fi nevoie de soluții cum ar fi intrările invizibile de deasupra butonului). Acum putem trece la JavaScript.
Mai întâi, eliminați console.log sunați de la js / main.js fişier. Acum puneți acest cod acolo:
funcția clickInput (id) var event = document.createEvent ('MouseEvents'); event.initMouseEvent ( 'clic'); document.getElementById (id) .dispatchEvent (eveniment); document.addEventListener ('keyup', funcția (e) if (e.keyCode == 'O'.charCodeAt (0) && e.ctrlKey) clickInput (' = 'S'.charCodeAt (0) && e.ctrlKey) clickInput (' salvați ');); Acest cod este responsabil pentru afișarea Deschis și Salvați dialoguri. clickInput funcția principală aici - simulează evenimentul clic pe elementul de intrare - într-un browser normal, acest lucru ar fi imposibil din motive de securitate, dar aici nu este o amenințare la adresa securității. Mai târziu, există o normalitate keyup de gestionare a evenimentului care verifică dacă a fost apăsată combinația corectă de taste (Ctrl + O sau Ctrl + S) și "clicuri" pe intrări. Rețineți că acest lucru ar fi, de asemenea, imposibil de realizat într-un browser - combinații cum ar fi Ctrl + O și Ctrl + S sunt rezervate pentru utilizarea internă a browserului și niciun eveniment nu apare când acestea sunt apăsate (numai Firefox declanșează evenimente pentru aceștia).
Acum, apăsați pe developer refresh buton și ar trebui să vedeți dialogul corespunzător când apăsați Ctrl + S sau Ctrl + O. Desigur, nu fac nimic pentru moment.
Acum, deoarece vom crea un editor de text, avem nevoie de ceva de scris. Adaugă textarea la HTML:
Apoi trebuie să terminăm codul de deschidere / salvare. Să creăm cu privire la schimbările ascultători de evenimente pentru deschis și Salvați intrări:
document.getElementById ('deschide') addEventListener ('schimbare', functie (e) file.open (aceasta.value, document);); document.getElementById ('salvați') addEventListener ('schimbare', funcție (e) file.save (această valoare, document);); Datorită modulului creat mai devreme, codul este foarte simplu. Acest lucru este posibil și datorită nodului-webkit, deoarece în browsere (din motive de securitate) valoarea elementului de intrare a fișierului este setată pe o cale falsă - aici este calea selectată. Deschideți acum aplicația (sau apăsați butonul developer refresh butonul, dacă nu l-ați închis) și ar trebui să aveți un editor de text perfect de lucru.
Putem face și alte câteva lucruri pentru a face editorul un pic mai avansat și mai util. De exemplu, să deschidem o nouă fereastră când un utilizator apasă Ctrl + N. Mai întâi, adăugați acest lucru necesita în partea de sus a scriptului:
var gui = cer ('nw.gui'); nw.gui modulul este o bibliotecă a nodului-webkit în legătură cu interfața cu utilizatorul (puteți citi mai multe despre acest lucru pe Nodul-webkit lui Github). Înainte adăugați aceasta altfel dacă la documentul lui keyup ascultător:
altfel dacă (e.keyCode == 'N'.charCodeAt (0) && e.ctrlKey) gui.Window.open (' index.html '); Și viola! Dacă actualizați aplicația, acum puteți apăsa Ctrl + N pentru a deschide o nouă fereastră. Această funcție diferă de cea normală window.open deşi. Puteți parcurge diverse opțiuni de ferestre ca al doilea parametru. Lista cu ceea ce puteți seta acolo este disponibilă în documentație.
Un alt lucru care poate fi util într-un editor de text este un meniu de aplicații (cel care se află sub bara de titlu din Windows / Linux și în partea de sus a ecranului pe Mac). În nodul webkit este destul de simplu. Mai întâi, să creăm meniul:
var meniu = nou gui.Menu (tip: 'menubar');
Tipul Bară de meniu este rezervat pentru meniul aplicației. Acum putem adăuga elemente la el. Să fie a Fişier meniul:
menu.append (nou gui.MenuItem (etichetă: 'Fișier', submeniu: new gui.Menu ()));
Acum, să adăugăm câteva elemente în acest meniu:
menu.items [0] .submenu.append (noul gui.MenuItem (etichetă: 'New', faceți clic pe: function () gui.Window.open ('index.html');)); meniu.items [0] .submenu.append (nou gui.MenuItem (type: 'separator')); menu.items [0] .submenu.append (noul gui.MenuItem (label: 'Close', faceți clic pe: function () gui.Window.get () close ();)); menu.items [0] este primul element al meniului nostru de aplicații (de asemenea, îl puteți atribui unei variabile când îl creați, dacă doriți). Adăugăm noi articole la ei submeniul, și fiecare element devine a clic apel invers pentru a manipula clicul pe el. gui.Window.get metoda primește fereastra curentă, astfel încât să o putem închide când utilizatorul selectează Închide opțiune în Fişier meniul.
În final, putem aloca meniul ferestrei:
gui.Window.get () meniu = meniu;
Din nou, folosim gui.Window.get pentru a obține fereastra curentă, atunci ne alocăm meniul nostru meniul proprietate. Rețineți că, deși putem aloca un meniu diferit pentru fiecare fereastră, pe OSX (Mac), o aplicație poate avea doar un singur meniu (care este global pentru toate ferestrele), deci dacă doriți ca aplicația dvs. să fie utilizată pe Mac, vă ar trebui să evitați utilizarea diferitelor meniuri pe ferestre diferite.
Acum, dacă deschideți sau actualizați aplicația, ar trebui să vedeți a meniu sistem sub bara de titlu:
Acum, dacă doriți să distribuiți aplicația dvs. altor utilizatori, puteți să o împachetați într-un singur fișier, astfel încât utilizatorii să poată descărca executabilul nodului webkit corespunzător platformei lor și să lanseze aplicația împreună cu acesta. În primul rând, să eliminăm Bara de instrumente care face ca fereastra să pară un browser - este frumos să ai în timpul dezvoltării, dar probabil că utilizatorii nu vor să o vadă. Putem realiza acest lucru prin stabilirea window.toolbar la fals în package.json, așa că arată astfel:
"nume": "exemplu-app", "principal": "./html/index.html", "fereastră": "toolbar": false
Acum, dacă deschideți aplicația (nimic nu se va schimba dacă o reîmprospătați, package.json este încărcat numai la pornire), ar trebui să vedeți rezultatul final:
Ambalarea aplicației este destul de simplă. Doar creați un .zip arhiva cu toate activele dvs. (toate fișierele pe care le-ați creat, fără fișierele furnizate împreună cu nodul-webkit) și modificați extensia acestuia .nw. Asta e tot. Dacă un utilizator descarcă nodul-webkit și pachetul, trebuie doar să-l pună în directorul nodului-webkit și să ruleze nw executabil. Descrierile detaliate, cu câteva sfaturi, sunt disponibile pe github-ul nodului-webkit.
Editorul dvs. este gata să fie expediat utilizatorilor dvs..
După cum puteți vedea, nodul-webkit este o bibliotecă foarte promițătoare și puternică. Cu actualizări și remedii frecvente, fiind susținută de Intel, nu există aproape nicio șansă ca aceasta să fie întreruptă, ceea ce se poate întâmpla uneori în cazul proiectelor open source.
Împărtășiți-vă gândurile despre acest proiect în comentariile de mai jos. Eu personal cred că este cel mai bun lucru acolo dacă doriți să creați o aplicație desktop utilizând Node.js și HTML.
De asemenea, aruncați o privire asupra selecției de scripturi și aplicații utilitare Node.js și HTML5 pe Envato Market.
