Share
Ved å bruke Node.js kan vi enkelt lage webapplikasjoner. Nå, takket være nodenettet kan vi også lage stasjonære apper med den, ved hjelp av en unik kombinasjon av HTML5 og Node.
Biblioteket kombinerer WebKit-motor og Node.js på en unik måte. Både WebKit og Node deler samme kontekst, slik at du kan skrive koden din slik at den er ment å bli utført i en nettleser, men med tillegg av alle Node-funksjoner.
Listen over bruksområder er uendelig. Du kan opprette forretningsapps, tekst- og bildeditorer, spill, presentasjoner, administrasjonspaneler osv. Bare skriv inn skrivebordsprogrammet du vil opprette, og jeg kan forsikre deg om at det vil være mulig med nod-webkit.
I denne veiledningen vil jeg vise deg hvordan du kommer i gang, ved å vise deg hvordan du lager en enkel tekstredigerer.
Først må du få biblioteket. Last ned versjonen som passer for operativsystemet ditt (selve applikasjonen vil kjøre på alle) fra github og pakke den ut uansett hvor du vil. Nå kan vi lage en grunnleggende mappestruktur. Vi vil ha mapper for HTML-filer (.html) og for JavaScript-filer (.js). Lag også package.json fil i samme katalog som nw kjørbar er inne og a node_modules mappe for å beholde modulene vi skal opprette.
Det første du må gjøre er å fylle de nødvendige feltene i package.json fil. I tilfelle node-webkit er disse Navn og hoved- (på Github finner du hele listen over tilgjengelige package.json opsjoner). Den første er nøyaktig den samme som i tilfelle av en vanlig Node.js app. Den andre skal være en (relativ eller absolutt) bane til hoved HTML-filen som skal vises når programmet starter. I tilfelle av vårt eksempel, er package.json filen skal se slik ut:
"navn": "enkel tekstredigerer", "hoved": "./html/index.html"
Nå hvis du kjører appen din med nw kjørbar, bør du se en tom skjerm som dette:
Å lage brukergrensesnittet ved hjelp av node-webkit er ikke annerledes enn å lage en nettside (med den lille forskjellen som du kjenner gjengivelsesmotoren, så du ikke trenger å gi noen fallbacks for eldre nettlesere, eller bruk biblioteker som jQuery - og egentlig deg bør ikke, fordi de inkluderer tilbakekallingskode som vil bremse appen din). La oss lage en index.html fil som vi skal bruke:
Enkel tekstredigerer
La oss også inkludere (og opprette) hoved JavaScript-filen som vi skal bruke, i kroppen, slik at den blir utført etter at DOM er lastet:
Nå er det eneste som endres når du åpner appen, tittelen.
For å vise deg hvor enkelt du kan bruke Node.js i node-webkit, la oss lese innholdet i package.json og skriv den ut på skjermen. Opprett JS / main.js fil og legg inn følgende kode i den:
Accentsconagua
var fs = krever ('fs'); fs.readFile ('./ package.json', 'utf-8', funksjon (feil, innhold) document.write (innhold);); Som du ser, ser koden ut akkurat det samme som om du skrev det til Node. Men så bruker vi document.write å legge inn innholdet på siden. Du trenger ikke å sette opp en lokal server.
Åpne nå appen, og du bør se noe slikt:
Det er en annen fin ting om node-webkit; Du trenger ikke å inkludere en serie av >krever. La oss lage en enkel modul for å lese filinnhold til en tekstarea eller skrive den til en fil. Gi filen navnet file.js og legg det i node_modules katalogen. Sett nå den generelle modulstrukturen i den:
var fs = krever ('fs'); funksjon fil () funksjon åpen (bane, dokument) funksjon lagre (bane, dokument) this.open = open; this.save = lagre; module.exports = ny fil; Som du kan se vil dette være en statisk klasse med to offentlige metoder - en for å åpne filene og en for å lagre dem.
De åpen Metoden vil se slik ut:
funksjon åpen (sti, dokument) fs.readFile (sti, 'utf-8', funksjon (feil, innhold) document.getElementById ('editor'). verdi = innhold;); Ganske enkelt rett? Funksjonen aksepterer banen til filen som den første parameteren og setter filens innhold inn i elementet med et ID av "editor". Vi må også passere dokument Motta funksjonen fordi skriptet kalles ved hjelp av Node krever og det har ikke tilgang til WebKit-ting direkte.
De lagre Metoden er så enkel som den forrige:
funksjon lagre (sti, dokument) var text = document.getElementById ('editor'). verdi; fs.writeFile (bane, tekst); La oss nå teste om alt fungerer. Endre innholdet i JS / main.js til dette:
var fil = krever ('file.js'); console.log (file.open, file.save); Nå hvis du går til utviklerverktøyskonsollen og klikker på utvikler oppdatering knappen i høyre hjørne av vinduet bør du se de to funksjonene fra denne modulen logget. Dette er en annen nyttig ting i node-webkit - din console.log Samtaler blir vist i utviklerverktøyskonsollen, så det er lettere å feilsøke appene dine.
La oss legge til to filinnganger som vi trenger senere:
Legg merke til nwsaveas attributt i den andre inngangen. Det er en spesiell type inngang fra node-webkit, som lar brukeren velge en ikke eksisterende fil. Begge inngangene er skjult, fordi vi bare får tilgang til dem fra JavaScript. I node-webkit er filinngangene endret på en måte som lar deg brenne a klikk hendelse på dem, så du kan åpne fildialogen uten at brukeren klikker på inngangen (uten behov for løsninger som usynlige innganger over knappen). Nå kan vi flytte til JavaScript.
Fjern først console.log ring fra JS / main.js fil. Legg nå denne koden inn der:
funksjon clickInput (id) var event = document.createEvent ('MouseEvents'); event.initMouseEvent ( 'klikk'); document.getElementById (id) .dispatchEvent (event); document.addEventListener ('keyup', funksjon (e) if (e.keyCode == 'O'.charCodeAt (0) && e.ctrlKey) clickInput (' open '); annet hvis (e.keyCode = = 'S'.charCodeAt (0) && e.ctrlKey) clickInput (' save ');); Denne koden er ansvarlig for å vise Åpen og Lagre dialoger. De clickInput funksjonen gjør hovedarbeidet her - det simulerer klikkhendelsen på inngangselementet - i en vanlig nettleser vil dette være umulig av sikkerhetshensyn, men her er det ikke en sikkerhetsrisiko i det hele tatt. Senere er det en normal keyup hendelseshåndterer som kontrollerer om riktig tastekombinasjon ble trykket (Ctrl + O eller Ctrl + S) og "klikk" på inngangene. Merk at dette også ville være umulig å oppnå i en nettleserkombinasjon som Ctrl + O og Ctrl + S er reservert for nettleserens interne bruk og ingen hendelse branner når de trykkes (bare Firefox branner hendelser for dem).
Trykk nå på utvikler oppdatering knappen og du bør se riktig dialog når du trykker på Ctrl + S eller Ctrl + O. De gjør selvfølgelig ingenting for nå.
Nå, siden vi skal lage en tekstredigerer, trenger vi noe å skrive på. Legg til textarea til HTML:
Deretter må vi fullføre åpning / lagringskoden. La oss lage OnChange hendelse lyttere for åpen og lagre innganger:
document.getElementById ('open'). addEventListener ('endre', funksjon (e) file.open (this.value, document);); document.getElementById ('save'). addEventListener ('endre', funksjon (e) file.save (this.value, document);); Takket være modulen som ble opprettet tidligere, er koden veldig enkel. Dette er også mulig takket være node-webkit, fordi i weblesere (igjen av sikkerhetshensyn) er verdien av filinngangselementet satt til en falsk sti - her er banen som ble valgt. Åpne nå appen (eller trykk på utvikler oppdatering knappen, hvis du ikke lukket den), og du burde ha et perfekt fungerende tekstredigeringsprogram.
Vi kan også gjøre noen andre ting for å gjøre redaktøren litt mer avansert og nyttig. For eksempel, la oss åpne et nytt vindu når en bruker trykker Ctrl + N. Først legg til dette krever til toppen av skriptet:
var gui = krever ('nw.gui'); De nw.gui modulen er et nodes webkit bibliotek relatert til brukergrensesnittet (du kan lese mer om dette på Node-webkit's Github). Neste legg til dette eller hvis til dokumentets keyup lytteren:
annet hvis (e.keyCode == 'N'.charCodeAt (0) && e.ctrlKey) gui.Window.open (' index.html '); Og viola! Hvis du oppdaterer appen, kan du nå trykke på Ctrl + N å åpne et nytt vindu. Denne funksjonen er forskjellig fra det normale window.open selv om. Du kan passere ulike vindualternativer som den andre parameteren. Listen over hva du kan sette der er tilgjengelig i dokumentasjonen.
En annen ting som kan være nyttig i et tekstredigeringsprogram er en applikasjonsmeny (den som sitter under tittellinjen i Windows / Linux og øverst på skjermen på Mac). I node-webkit er det ganske enkelt. Først la oss lage menyen:
varmeny = ny gui.Menu (type: 'menylinje');
Typen menyfelt er reservert for programmenyen. Nå kan vi legge til elementer til den. La det være en Fil Meny:
menu.append (new gui.MenuItem (label: 'File', undermeny: new gui.Menu ()));
La oss nå legge til noen elementer i denne menyen:
menu.items [0] .submenu.append (new gui.MenuItem (label: 'New', klikk: 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', klikk: function () gui.Window.get (). close ();)); menu.items [0] er det første elementet i vår programmeny (du kan også tildele det til en variabel når du oppretter den hvis du vil). Vi legger til nye elementer i sin undermeny, og hvert element får en klikk tilbakeringing for å håndtere klikk på den. De gui.Window.get Metoden får det nåværende vinduet, slik at vi kan lukke det når brukeren velger Lukk alternativ i Fil Meny.
Til slutt kan vi tilordne menyen til vinduet:
gui.Window.get () .meny = meny;
Igjen bruker vi gui.Window.get for å få det nåværende vinduet, så tilordner vi vår meny til sin Meny eiendom. Vær oppmerksom på at selv om vi kan tilordne en annen meny til alle vinduer, kan OSX (Mac) en app bare ha en meny (som er global for alle vinduer), så hvis du vil at appen skal brukes på Mac, bør unngå å bruke forskjellige menyer på forskjellige vinduer.
Nå, hvis du åpner eller oppdaterer appen din, bør du se en systemmeny under tittellinje:
Nå hvis du vil dele appen din med andre brukere, kan du pakke den inn i en fil, slik at brukerne kan laste ned nodenes webkitens kjørbarhet til deres plattform og starte appen din med den. Først, la oss fjerne verktøylinje Det gjør vinduet til å se ut som en nettleser - det er fint å ha under utviklingen, men brukerne dine vil sannsynligvis ikke se det. Vi kan oppnå dette ved å sette inn window.toolbar til falsk i package.json, så det ser slik ut:
"navn": "eksempel-app", "hoved": "./html/index.html", "vindu": "verktøylinje": falskt
Nå hvis du åpner appen (ingenting vil endres hvis du bare oppdaterer det, package.json er lastet bare ved oppstart), bør du se det endelige resultatet:
Pakking av appen er ganske enkel. Bare opprett en .glidelås arkiv med alle dine eiendeler (alle filene du opprettet, uten filene som leveres med nod-webkit) og endre utvidelsen til .nw. Det er alt. Hvis en bruker laster ned nodes webkit og din pakke, trenger de bare å sette den i nodens nettkatalog og kjøre nw kjørbar. Detaljert beskrivelse, med noen flere tips, er tilgjengelig på nodenettets github.
Nå er redaktøren din klar til å bli sendt til brukerne dine.
Som du kan se, er nod-webkit et meget lovende og kraftig bibliotek. Med hyppige oppdateringer og reparasjoner, og støttes av Intel, er det nesten ingen sjanse for at den vil bli avviklet, noe som noen ganger kan skje med åpen kildekodeprosjekter.
Del dine tanker om dette prosjektet i kommentarene nedenfor. Jeg tror personlig det er det beste der ute hvis du vil lage et skrivebordsprogram ved hjelp av Node.js og HTML.
Ta også en titt på valget av nyttige Node.js- og HTML5-skript og -programmer på Envato Market.
