Share
Usando Node.js, possiamo creare facilmente applicazioni web. Ora, grazie a node-webkit, possiamo anche creare app desktop utilizzando una combinazione unica di HTML5 e Node.
La libreria combina il motore WebKit e Node.js in un modo unico. Sia WebKit che Node condividono lo stesso contesto, permettendoti di scrivere il tuo codice come se fosse pensato per essere eseguito in un browser, ma con l'aggiunta di tutte le funzionalità del Node.
L'elenco degli usi è infinito. È possibile creare applicazioni aziendali, editor di testo e immagini, giochi, presentazioni, pannelli di amministrazione, ecc. Basta nominare l'app desktop che si desidera creare e posso assicurarvi che sarà possibile con node-webkit.
In questo tutorial, ti mostrerò come iniziare mostrandoti come creare un semplice editor di testo.
Per prima cosa devi ottenere la biblioteca. Scarica la versione appropriata per il tuo sistema operativo (l'applicazione stessa verrà eseguita su tutti) da github e decomprimila dove preferisci. Ora, creiamo una struttura di cartelle di base. Avremo cartelle per i file HTML (.html) e per i file JavaScript (.js). Inoltre, crea il package.json file nella stessa directory in cui si trova il file nw eseguibile è in e a node_modules cartella per mantenere i moduli che creeremo.
La prima cosa da fare è riempire i campi richiesti nel package.json file. Nel caso di node-webkit questi sono nome e principale (su Github puoi trovare l'elenco completo di disponibili package.json opzioni). Il primo è esattamente lo stesso come nel caso di una semplice app Node.js. Il secondo dovrebbe essere un percorso (relativo o assoluto) al file HTML principale che verrà visualizzato all'avvio dell'applicazione. Nel caso del nostro esempio, il package.json il file dovrebbe assomigliare a questo:
"nome": "simple-text-editor", "main": "./html/index.html"
Ora se esegui la tua app utilizzando il nw eseguibile, dovresti vedere una schermata vuota come questa:
La creazione dell'interfaccia utente tramite node-webkit non è diversa dalla creazione di una pagina Web (con la leggera differenza che conosci il motore di rendering, quindi non devi fornire fallback per i browser più vecchi o utilizzare librerie come jQuery - e in realtà tu non dovrebbe, perché includono codice di fallback che rallenterà la tua app). Creiamo un index.html file che useremo:
Semplice editor di testo
Includiamo anche (e creiamo) il file JavaScript principale che useremo, nel corpo, quindi verrà eseguito dopo il caricamento del DOM:
Ora l'unica cosa che cambierà quando apri l'app sarà il titolo.
Per mostrarti quanto facilmente puoi usare Node.js in node-webkit, leggiamo i contenuti di package.json e stampalo sullo schermo. Crea il JS / main.js file e inserisci il seguente codice:
Accentsconagua
var fs = require ('fs'); fs.readFile ('./ package.json', 'utf-8', function (error, contents) document.write (contents);); Come puoi vedere, il codice sembra esattamente come se lo stessimo scrivendo per Nodo. Ma poi usiamo document.write mettere il contenuto del file sulla pagina. Non c'è bisogno di installare alcun server locale.
Ora apri l'app e dovresti vedere qualcosa di simile a questo:
C'è un'altra cosa carina di node-webkit; Non devi includere una serie di >richiedere. Creiamo un semplice modulo per leggere il contenuto del file in una textarea o scriverlo in un file. Nominare il file file.js e mettilo nel node_modules directory. Ora metti la struttura generale del modulo al suo interno:
var fs = require ('fs'); function File () function open (path, document) function save (percorso, documento) this.open = open; this.save = salva; module.exports = new File; Come puoi vedere, questa sarà una classe statica con due metodi pubblici: uno per aprire i file e uno per salvarli.
Il Aperto il metodo sarà simile a questo:
function open (path, document) fs.readFile (percorso, 'utf-8', funzione (errore, contenuto) document.getElementById ('editor'). value = contents;); Abbastanza semplice, vero? La funzione accetta il percorso del file come primo parametro e inserisce il contenuto del file nell'elemento con un id di "editor". Dobbiamo anche passare il documento oggetto alla funzione perché lo script è chiamato usando Node richiedere e non ha accesso direttamente al materiale WebKit.
Il salvare il metodo è semplice come il precedente:
function save (path, document) var text = document.getElementById ('editor'). valore; fs.writeFile (percorso, testo); Ora proviamo se tutto funziona. Cambia il contenuto di JS / main.js a questo:
var file = require ('file.js'); console.log (file.open, file.save); Ora se vai alla console degli strumenti per sviluppatori e fai clic su aggiornamento dello sviluppatore pulsante nell'angolo destro della finestra dovresti vedere le due funzioni registrate da questo modulo. Questa è un'altra cosa utile in node-webkit - your console.log le chiamate vengono visualizzate nella console degli strumenti per sviluppatori, quindi è più facile eseguire il debug delle app.
Aggiungiamo due input di file che avremo bisogno in seguito:
Notare il nwsaveas attributo nel secondo input. È un tipo speciale di input da node-webkit, che consente all'utente di selezionare un file non esistente. Entrambi gli input sono nascosti, perché li accediamo solo da JavaScript. In node-webkit, gli input dei file sono modificati in modo tale da consentire di sparare a clic evento su di essi, quindi è possibile aprire la finestra di dialogo del file senza che l'utente faccia clic sull'input (senza la necessità di soluzioni alternative come input invisibili sopra il pulsante). Ora possiamo passare al JavaScript.
Innanzitutto, rimuovi il console.log chiamata dal JS / main.js file. Ora inserisci questo codice qui:
function clickInput (id) var event = document.createEvent ('MouseEvents'); event.initMouseEvent ( 'click'); document.getElementById (id) .dispatchEvent (evento); document.addEventListener ('keyup', function (e) if (e.keyCode == 'O'.charCodeAt (0) && e.ctrlKey) clickInput (' apri '); else if (e.keyCode = = 'S'.charCodeAt (0) && e.ctrlKey) clickInput (' save ');); Questo codice è responsabile della visualizzazione di Aperto e Salvare le finestre di dialogo. Il clickInput funzione fa il lavoro principale qui - simula l'evento click sull'elemento input - in un normale browser, questo sarebbe impossibile per ragioni di sicurezza, ma qui non è affatto una minaccia per la sicurezza. Più tardi, c'è un normale keyup gestore di eventi che controlla se è stata premuta la combinazione di tasti corretta (Ctrl + O o Ctrl + S) e "clic" sugli input. Si noti che questo sarebbe anche impossibile da ottenere in un browser - combinazioni come Ctrl + O e Ctrl + S sono riservati per l'uso interno del browser e nessun evento si attiva quando vengono premuti (solo Firefox attiva gli eventi per loro).
Ora premi il aggiornamento dello sviluppatore pulsante e dovresti vedere la finestra di dialogo appropriata quando premi Ctrl + S o Ctrl + O. Ovviamente non fanno nulla per ora.
Ora, poiché creeremo un editor di testo, abbiamo bisogno di qualcosa su cui scrivere. Aggiungi il textarea al codice HTML:
Quindi dobbiamo terminare il codice di apertura / salvataggio. Creiamo il onchange ascoltatori di eventi per il Aperto e salvare ingressi:
document.getElementById ('open'). addEventListener ('change', function (e) file.open (this.value, document);); document.getElementById ('save'). addEventListener ('change', function (e) file.save (this.value, document);); Grazie al modulo creato in precedenza, il codice è davvero semplice. Questo è anche possibile grazie a node-webkit, perché nei browser (sempre per ragioni di sicurezza) il valore dell'elemento di input del file è impostato su un percorso falso - qui è il percorso che è stato selezionato. Ora apri l'app (o premi il tasto aggiornamento dello sviluppatore pulsante, se non l'hai chiuso) e dovresti avere un editor di testo perfettamente funzionante.
Possiamo anche fare alcune altre cose per rendere l'editor un po 'più avanzato e utile. Ad esempio, apriamo una nuova finestra quando un utente preme Ctrl + N. Innanzitutto, aggiungi questo richiedere all'inizio della sceneggiatura:
var gui = require ('nw.gui'); Il nw.gui module è una libreria di node-webkit relativa all'interfaccia utente (puoi leggere ulteriori informazioni su Github di Node-webkit). Quindi aggiungi questo altrimenti se al documento keyup ascoltatore:
else if (e.keyCode == 'N'.charCodeAt (0) && e.ctrlKey) gui.Window.open (' index.html '); E viola! Se aggiorni l'app, ora puoi premere Ctrl + N per aprire una nuova finestra. Questa funzione differisce dalla normale window.open anche se. Puoi passare varie opzioni della finestra come secondo parametro. L'elenco di ciò che puoi impostare è disponibile nella documentazione.
Un'altra cosa che può essere utile in un editor di testo è un menu dell'applicazione (quello che si trova sotto la barra del titolo in Windows / Linux e nella parte superiore dello schermo su Mac). In node-webkit è piuttosto semplice. Per prima cosa, creiamo il menu:
var menu = new gui.Menu (type: 'menubar');
Il tipo barra dei menu è riservato per il menu dell'applicazione. Ora possiamo aggiungere elementi ad esso. Lascia che sia a File menu:
menu.append (new gui.MenuItem (label: 'File', sottomenu: new gui.Menu ()));
Ora aggiungiamo alcuni elementi a questo menu:
menu.items [0] .submenu.append (new gui.MenuItem (label: 'New', click: 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', click: function () gui.Window.get (). close ();)); menu.items [0] è il primo elemento del nostro menu dell'applicazione (puoi anche assegnarlo a una variabile quando lo crei, se lo desideri). Stiamo aggiungendo nuovi articoli al suo sottomenu, e ogni oggetto ottiene un clic callback per gestire il clic su di esso. Il gui.Window.get il metodo ottiene la finestra corrente, quindi possiamo chiuderla quando l'utente seleziona il Vicino opzione nel File menu.
Infine, possiamo assegnare il menu alla finestra:
gui.Window.get (). menu = menu;
Di nuovo, stiamo usando gui.Window.get per ottenere la finestra corrente, assegniamo il nostro menu al suo menu proprietà. Tieni presente che, anche se possiamo assegnare un menu diverso ad ogni finestra, su OSX (Mac) un'app può avere solo un menu (che è globale per tutte le finestre), quindi se vuoi che la tua app sia utilizzata su Mac, dovrebbe evitare di usare menu diversi su finestre differenti.
Ora se apri o aggiorni la tua app, dovresti vedere a menu di sistema sotto il barra del titolo:
Ora, se desideri condividere la tua app con altri utenti, puoi comprimerla in un unico file, in modo che gli utenti possano scaricare l'eseguibile del nodo-webkit appropriato per la loro piattaforma e avviare l'app con esso. Innanzitutto, rimuoviamo il barra degli strumenti questo rende la finestra simile a un browser: è bello avere durante lo sviluppo, ma probabilmente i tuoi utenti non vogliono vederlo. Possiamo ottenere questo impostando window.toolbar a falso nel package.json, così sembra:
"nome": "esempio-app", "principale": "./html/index.html", "finestra": "barra degli strumenti": falso
Ora se apri l'app (non cambierà nulla se lo aggiorni semplicemente, package.json viene caricato solo all'avvio), dovresti vedere il risultato finale:
Imballare l'app è abbastanza semplice. Basta creare un .cerniera lampo archiviare con tutte le risorse (tutti i file creati senza i file forniti con node-webkit) e modificarne l'estensione in .nw. È tutto. Se un utente scarica node-webkit e il pacchetto, è sufficiente inserirlo nella directory del nodo-webkit ed eseguire il file nw eseguibile. Descrizioni dettagliate, con alcuni suggerimenti in più, sono disponibili sul github di node-webkit.
Ora il tuo editor è pronto per essere spedito ai tuoi utenti.
Come puoi vedere, node-webkit è una libreria molto promettente e potente. Con frequenti aggiornamenti e correzioni e essendo supportato da Intel, non c'è quasi nessuna possibilità che venga interrotto, cosa che a volte può capitare con progetti open source.
Condividi le tue opinioni su questo progetto nei commenti sottostanti. Personalmente ritengo che sia la cosa migliore là fuori se vuoi creare un'applicazione desktop usando Node.js e HTML.
Dai anche un'occhiata alla selezione di utili script e app Node.js e HTML5 su Envato Market.
