Share
En utilisant Node.js, nous pouvons créer facilement des applications Web. Maintenant, grâce au node-webkit, nous pouvons également créer des applications de bureau avec une combinaison unique de HTML5 et de Node..
La bibliothèque combine le moteur WebKit et Node.js de manière unique. WebKit et Node partagent le même contexte, ce qui vous permet d'écrire votre code comme s'il était destiné à être exécuté dans un navigateur, mais avec l'ajout de toutes les fonctionnalités de Node..
La liste des utilisations est sans fin. Vous pouvez créer des applications professionnelles, des éditeurs de texte et d’images, des jeux, des présentations, des panneaux d’administration, etc. Il suffit de nommer l’application de bureau que vous souhaitez créer, et je peux vous assurer que cela sera possible avec node-webkit..
Dans ce tutoriel, je vais vous montrer comment commencer en vous montrant comment créer un éditeur de texte simple..
Tout d'abord, vous devez obtenir la bibliothèque. Téléchargez la version appropriée à votre système d'exploitation (l'application elle-même s'exécutera sur chacun d'entre eux) à partir de github et décompressez-la où vous le souhaitez. Maintenant, permet de créer une structure de dossier de base. Nous aurons des dossiers pour les fichiers HTML (.html) et pour les fichiers JavaScript (.js). Créez également le package.json fichier dans le même répertoire que le maintenant l'exécutable est et node_modules dossier pour garder les modules que nous allons créer.
La première chose à faire est de remplir les champs obligatoires package.json fichier. Dans le cas de node-webkit, ceux-ci sont prénom et principale (sur Github, vous trouverez la liste complète des logiciels disponibles package.json options). Le premier est exactement le même que dans le cas d'une application simple Node.js. Le second doit être un chemin d'accès (relatif ou absolu) au fichier HTML principal qui sera affiché au démarrage de l'application. Dans le cas de notre exemple, le package.json Le fichier devrait ressembler à ceci:
"name": "éditeur de texte simple", "main": "./html/index.html"
Maintenant, si vous exécutez votre application en utilisant le maintenant exécutable, vous devriez voir un écran vide comme celui-ci:
La création de l’interface utilisateur à l’aide de node-webkit n’est pas différente de la création d’une page Web (à la différence près que vous connaissez le moteur de rendu, vous n’aurez donc pas à fournir de solutions de secours pour les navigateurs plus anciens ni à utiliser des bibliothèques telles que jQuery. ne devrait pas, car ils incluent un code de secours qui ralentira votre application). Créons un index.html fichier que nous allons utiliser:
Éditeur de texte simple
Nous allons également inclure (et créer) le fichier JavaScript principal que nous allons utiliser, dans le corps, afin qu'il soit exécuté après le chargement du DOM:
Maintenant, la seule chose qui va changer lorsque vous ouvrez l'application sera le titre.
Pour vous montrer avec quelle facilité vous pouvez utiliser Node.js dans node-webkit, lisons le contenu de package.json et l'imprimer à l'écran. Créer le js / main.js fichier et y mettre le code suivant:
Accentsconagua
var fs = require ('fs'); fs.readFile ('./ package.json', 'utf-8', fonction (erreur, contenu) document.write (contenu);); Comme vous pouvez le constater, le code a exactement la même apparence que si vous l'écriviez pour Node. Mais alors nous utilisons document.write mettre le contenu du fichier sur la page. Pas besoin de configurer un serveur local.
Maintenant, ouvrez l'application et vous devriez voir quelque chose comme ça:
Il y a une autre bonne chose à propos de node-webkit; Vous n'êtes pas obligé d'inclure une série de >exiger. Créons un module simple pour lire le contenu d'un fichier dans une zone de texte ou l'écrire dans un fichier. Nommez le fichier fichier.js et le mettre dans le node_modules annuaire. Maintenant, mettez la structure globale du module dedans:
var fs = require ('fs'); function File () function open (chemin, document) function save (chemin, document) this.open = open; this.save = save; module.exports = nouveau fichier; Comme vous pouvez le voir, ce sera une classe statique avec deux méthodes publiques: une pour ouvrir les fichiers et une pour les sauvegarder..
le ouvrir méthode va ressembler à ceci:
function open (chemin, document) fs.readFile (chemin, 'utf-8', fonction (erreur, contenu) document.getElementById ('editor'). value = contents;); Assez simple non? La fonction accepte le chemin d'accès au fichier en tant que premier paramètre et place le contenu du fichier dans l'élément avec l'id "éditeur". Nous devons également passer le document objet à la fonction parce que le script est appelé en utilisant Node's exiger et il n'a pas accès au WebKit directement.
le enregistrer La méthode est aussi simple que la précédente:
function save (chemin, document) var texte = document.getElementById ('éditeur'). valeur; fs.writeFile (chemin d'accès, texte); Maintenant, testons si tout fonctionne. Changer le contenu de js / main.js pour ça:
var fichier = require ('fichier.js'); console.log (fichier.open, fichier.save); Maintenant, si vous allez à la console des outils de développement et cliquez sur le bouton actualisation du développeur Dans le coin droit de la fenêtre, vous devriez voir les deux fonctions de ce module consignées. Ceci est une autre chose utile dans node-webkit - votre console.log les appels sont affichés dans la console des outils de développement, il est donc plus facile de déboguer vos applications.
Ajoutons deux entrées de fichier dont nous aurons besoin plus tard:
Remarquez le nwsaveas attribut dans la deuxième entrée. C'est un type spécial d'entrée de node-webkit, qui permet à l'utilisateur de sélectionner un fichier non existant. Les deux entrées sont masquées, car nous n'y accéderons qu'à partir de JavaScript. Dans node-webkit, les entrées de fichier sont modifiées de manière à vous permettre de déclencher une Cliquez sur événement sur eux, vous pouvez donc ouvrir la boîte de dialogue de fichier sans que l'utilisateur ne clique sur l'entrée (sans recourir aux solutions de contournement comme les entrées invisibles au-dessus du bouton). Maintenant nous pouvons passer au JavaScript.
Tout d’abord, retirez le console.log appel du js / main.js fichier. Maintenant, mettez ce code dedans:
function clickInput (id) var event = document.createEvent ('MouseEvents'); event.initMouseEvent ('cliquez'); document.getElementById (id) .dispatchEvent (event); document.addEventListener ('keyup', fonction (e) if (e.keyCode == 'O'.charCodeAt (0) && e.ctrlKey) clickInput (' open '); sinon si (e.keyCode = = 'S'.charCodeAt (0) && e.ctrlKey) clickInput (' save ');); Ce code est responsable de montrer le Ouvrir et sauvegarder dialogues. le clickInput function effectue le travail principal ici - il simule l'événement click sur l'élément d'entrée - dans un navigateur normal, cela serait impossible pour des raisons de sécurité, mais ici ce n'est pas du tout une menace pour la sécurité. Plus tard, il y a une normale keyup gestionnaire d’événements qui vérifie si la combinaison de touches appropriée a été activée (Ctrl + O ou Ctrl + S) et "clique" sur les entrées. Notez que cela serait également impossible dans un navigateur - des combinaisons telles que Ctrl + O et Ctrl + S sont réservés à l'usage interne du navigateur et aucun événement ne se déclenche lorsqu'il est enfoncé (seul Firefox déclenche des événements pour eux).
Maintenant, appuyez sur le actualisation du développeur bouton et vous devriez voir la boîte de dialogue appropriée lorsque vous appuyez sur Ctrl + S ou Ctrl + O. Bien sûr, ils ne font rien pour l'instant.
Maintenant, puisque nous allons créer un éditeur de texte, nous avons besoin de quelque chose pour écrire. Ajouter le zone de texte au HTML:
Ensuite, nous devons terminer le code d'ouverture / enregistrement. Créons le sur le changement auditeurs d'événements pour le ouvrir et enregistrer contributions:
document.getElementById ('open'). addEventListener ('change', fonction (e) file.open (this.value, document);); document.getElementById ('save'). addEventListener ('change', fonction (e) file.save (this.value, document);); Grâce au module créé précédemment, le code est vraiment simple. Cela est également possible grâce à node-webkit, car dans les navigateurs (toujours pour des raisons de sécurité), la valeur de l'élément input du fichier est définie sur un faux chemin - ici, c'est le chemin qui a été sélectionné. Maintenant, ouvrez l'application (ou appuyez sur la touche actualisation du développeur bouton, si vous ne l'avez pas fermé) et vous devriez avoir un éditeur de texte qui fonctionne parfaitement.
Nous pouvons également faire quelques autres choses pour rendre l'éditeur un peu plus avancé et utile. Par exemple, ouvrons une nouvelle fenêtre quand un utilisateur appuie sur Ctrl + N. Tout d'abord, ajoutez ceci exiger en haut du script:
var gui = require ('nw.gui'); le nw.gui module est une bibliothèque de noeud-webkit liée à l'interface utilisateur (vous pouvez en savoir plus à ce sujet sur le Github de Node-webkit). Ajoutez ensuite ceci sinon si au document keyup auditeur:
else if (e.keyCode == 'N'.charCodeAt (0) && e.ctrlKey) gui.Window.open (' index.html '); Et alto! Si vous actualisez l'application, vous pouvez maintenant appuyer sur Ctrl + N pour ouvrir une nouvelle fenêtre. Cette fonction diffère de la normale window.open bien que. Vous pouvez passer diverses options de fenêtre en tant que deuxième paramètre. La liste de ce que vous pouvez définir est disponible dans la documentation.
Une autre chose qui peut être utile dans un éditeur de texte est un menu d'application (celui qui se trouve sous la barre de titre sous Windows / Linux et en haut de l'écran sur Mac). Dans node-webkit, c'est assez simple. Commençons par créer le menu:
var menu = new gui.Menu (type: 'menubar');
Le type barre de menu est réservé au menu de l'application. Nous pouvons maintenant y ajouter des éléments. Que ce soit un Fichier menu:
menu.append (new gui.MenuItem (label: 'Fichier', sous-menu: new gui.Menu ()));
Ajoutons maintenant quelques éléments à ce menu:
menu.items [0] .submenu.append (new gui.MenuItem (libellé: 'Nouveau', cliquez sur: fonction () gui.Window.open ('index.html');)); menu.items [0] .submenu.append (new gui.MenuItem (type: 'separator')); menu.items [0] .submenu.append (nouveau gui.MenuItem (label: 'Fermer', cliquez sur: function () gui.Window.get (). close ();)); menu.items [0] est le premier élément de notre menu d’application (vous pouvez également l’affecter à une variable lors de sa création si vous le souhaitez). Nous ajoutons de nouveaux articles à ses sous-menu, et chaque article reçoit un Cliquez sur callback pour gérer le clic dessus. le gui.Window.get méthode obtient la fenêtre en cours, afin que nous puissions la fermer lorsque l'utilisateur sélectionne la Fermer option dans le Fichier menu.
Enfin, nous pouvons assigner le menu à la fenêtre:
gui.Window.get (). menu = menu;
Encore une fois, nous utilisons gui.Window.get pour obtenir la fenêtre en cours, nous assignons notre menu à sa menu propriété. Veuillez noter que même si nous pouvons attribuer un menu différent à chaque fenêtre, sous OSX (Mac), une application ne peut avoir qu'un seul menu (qui est global pour toutes les fenêtres). Par conséquent, si vous souhaitez que votre application soit utilisée sur des Mac, vous devrait éviter d'utiliser différents menus sur différentes fenêtres.
Maintenant, si vous ouvrez ou actualisez votre application, vous devriez voir un menu système sous le barre de titre:
Désormais, si vous souhaitez partager votre application avec d'autres utilisateurs, vous pouvez la regrouper dans un seul fichier afin que les utilisateurs puissent télécharger l'exécutable de node-webkit correspondant à leur plate-forme et lancer votre application avec celui-ci. Tout d'abord, retirons le barre d'outils cela donne à la fenêtre l'apparence d'un navigateur - c'est agréable d'avoir pendant le développement, mais vos utilisateurs ne veulent probablement pas la voir. Nous pouvons y arriver en mettant window.toolbar à faux dans package.json, donc ça ressemble à ça:
"name": "example-app", "main": "./html/index.html", "fenêtre": "barre d'outils": false
Maintenant, si vous ouvrez l'application (rien ne changera si vous venez de l'actualiser, package.json est chargé uniquement au démarrage), vous devriez voir le résultat final:
Emballer l'application est assez simple. Il suffit de créer un .Zip *: français archivez avec tous vos actifs (tous les fichiers que vous avez créés, sans les fichiers fournis avec node-webkit) et remplacez son extension par .maintenant. C'est tout. Si un utilisateur télécharge node-webkit et votre package, il n’a plus qu’à le placer dans le répertoire du nœud-webkit et à exécuter le maintenant exécutable. Des descriptions détaillées, avec quelques astuces supplémentaires, sont disponibles sur le github du nœud-webkit.
Votre éditeur est maintenant prêt à être envoyé à vos utilisateurs..
Comme vous pouvez le constater, node-webkit est une bibliothèque très prometteuse et puissante. Avec des mises à jour et des correctifs fréquents, et étant pris en charge par Intel, il n'y a presque aucune chance de l'interrompre, ce qui peut parfois arriver avec des projets open source.
Partagez vos impressions sur ce projet dans les commentaires ci-dessous. Personnellement, je pense que c’est la meilleure chose à faire si vous voulez créer une application de bureau utilisant Node.js et HTML..
Découvrez également la sélection de scripts et d'applications utiles Node.js et HTML5 sur Envato Market..
