Νωρίτερα φέτος, η Github κυκλοφόρησε το Atom-Shell, τον πυρήνα του διάσημου συντάκτη ανοιχτού κώδικα Ατομο , και μετονομάστηκε σε Ηλεκτρόνιο για την ειδική περίσταση.

Η Electron, σε αντίθεση με άλλους ανταγωνιστές στην κατηγορία εφαρμογών επιτραπέζιων υπολογιστών που βασίζονται στο Node.js, φέρνει τη δική της συστροφή σε αυτήν την ήδη καθιερωμένη αγορά συνδυάζοντας τη δύναμη του Node.js ( io.js μέχρι τις πρόσφατες κυκλοφορίες) με το Μηχανή Chromium για να μας προσφέρει το καλύτερο JavaScript διακομιστή και πελάτη.

Φανταστείτε έναν κόσμο όπου θα μπορούσαμε να κατασκευάσουμε επιδόσεις επιτραπέζιων εφαρμογών που βασίζονται σε δεδομένα και βασίζονται σε δεδομένα, που υποστηρίζονται όχι μόνο από το συνεχώς αναπτυσσόμενο αποθετήριο των μονάδων NPM, αλλά και από ολόκληρο το μητρώο Bower για να καλύψει όλες τις ανάγκες μας από την πλευρά του πελάτη.

Εισαγω Ηλεκτρόνιο .

Δημιουργία εφαρμογών επιτραπέζιων υπολογιστών πολλαπλών πλατφορμών με ηλεκτρονικό Τιτίβισμα

Σε αυτό το σεμινάριο, θα δημιουργήσουμε μια απλή εφαρμογή keychain με κωδικό πρόσβασης χρησιμοποιώντας Electron, Angular.js και Loki.js , μια ελαφριά βάση δεδομένων και στη μνήμη με μια γνωστή σύνταξη για Προγραμματιστές MongoDB .

Ο πλήρης πηγαίος κώδικας για αυτήν την εφαρμογή είναι διαθέσιμος εδώ .

Αυτό το σεμινάριο προϋποθέτει ότι:

• Ο αναγνώστης έχει Node.js και Bower εγκατεστημένο στον υπολογιστή τους.
• Είναι εξοικειωμένοι με τη σύνταξη ερωτημάτων Node.js, Angular.js και MongoDB.

Να πάρει τα αγαθά

Πρώτα πράγματα πρώτα, θα χρειαστεί να λάβουμε τα δυαδικά ηλεκτρονικά για να δοκιμάσουμε την εφαρμογή μας τοπικά. Μπορούμε να το εγκαταστήσουμε παγκοσμίως και να το χρησιμοποιήσουμε ως CLI ή να το εγκαταστήσουμε τοπικά στη διαδρομή της εφαρμογής μας. Συνιστώ να το εγκαταστήσετε παγκοσμίως, έτσι ώστε να μην χρειάζεται να το κάνουμε ξανά και ξανά για κάθε εφαρμογή που αναπτύσσουμε.

Θα μάθουμε αργότερα πώς να συσκευάσουμε την εφαρμογή μας για διανομή χρησιμοποιώντας το Gulp. Αυτή η διαδικασία περιλαμβάνει την αντιγραφή των δυαδικών ηλεκτρονίων και επομένως δεν έχει νόημα να το εγκαταστήσετε χειροκίνητα στη διαδρομή της εφαρμογής μας.

Για να εγκαταστήσετε το Electron CLI, μπορούμε να πληκτρολογήσουμε την ακόλουθη εντολή στο τερματικό μας:

$ npm install -g electron-prebuilt

Για να ελέγξετε την εγκατάσταση, πληκτρολογήστε electron -h και θα πρέπει να εμφανίζει την έκδοση του Electron CLI.

Τη στιγμή που γράφτηκε αυτό το άρθρο, η έκδοση του Electron ήταν 0.31.2.

Ρύθμιση του Έργου

Ας υποθέσουμε την ακόλουθη βασική δομή φακέλων:

my-app |- cache/ |- dist/ |- src/ |-- app.js | gulpfile.js

… που: - κρύπτη/ θα χρησιμοποιηθεί για τη λήψη των δυαδικών ηλεκτρονίων κατά τη δημιουργία της εφαρμογής. - απόσταση / θα περιέχει τα δημιουργημένα αρχεία διανομής. - src / θα περιέχει τον πηγαίο κώδικα μας. - src / app.js θα είναι το σημείο εισόδου της αίτησής μας.

Στη συνέχεια, θα μεταβούμε στο src/ φάκελο στο τερματικό μας και δημιουργήστε το package.json και bower.json αρχεία για την εφαρμογή μας:

$ npm init $ bower init

Θα εγκαταστήσουμε τα απαραίτητα πακέτα αργότερα σε αυτό το σεμινάριο.

Κατανόηση των διαδικασιών ηλεκτρονίων

Το ηλεκτρόνιο κάνει διάκριση μεταξύ δύο τύπων διεργασιών:

• Η κύρια διαδικασία : Το σημείο εισόδου της εφαρμογής μας, το αρχείο που θα εκτελείται κάθε φορά που εκτελούμε την εφαρμογή. Συνήθως, αυτό το αρχείο δηλώνει τα διάφορα παράθυρα της εφαρμογής και μπορεί προαιρετικά να χρησιμοποιηθεί για τον καθορισμό καθολικών ακροατών συμβάντων χρησιμοποιώντας τη μονάδα IPC της Electron.
• Η διαδικασία απόδοσης : Ο ελεγκτής για ένα συγκεκριμένο παράθυρο στην εφαρμογή μας. Κάθε παράθυρο δημιουργεί τη δική του διαδικασία Renderer.

Για σαφήνεια κώδικα, πρέπει να χρησιμοποιείται ξεχωριστό αρχείο για κάθε διαδικασία Renderer. Για να ορίσουμε την κύρια διαδικασία για την εφαρμογή μας, θα ανοίξουμε src/app.js και συμπεριλάβετε το app ενότητα για την εκκίνηση της εφαρμογής και το browser-window ενότητα για τη δημιουργία των διαφόρων παραθύρων της εφαρμογής μας (και τα δύο μέρη του πυρήνα των ηλεκτρονίων), ως εξής:

var app = require('app'), BrowserWindow = require('browser-window');

Όταν η εφαρμογή ξεκινά πραγματικά, ενεργοποιεί ένα ready συμβάν, στο οποίο μπορούμε να δεσμευτούμε. Σε αυτό το σημείο, μπορούμε να δημιουργήσουμε το κύριο παράθυρο της εφαρμογής μας:

var mainWindow = null; app.on('ready', function() { mainWindow = new BrowserWindow({ width: 1024, height: 768 }); mainWindow.loadUrl('file://' + __dirname + '/windows/main/main.html'); mainWindow.openDevTools(); });

Βασικά σημεία:

• Δημιουργούμε ένα νέο παράθυρο δημιουργώντας μια νέα παρουσία του BrowserWindow αντικείμενο.
• Παίρνει ένα αντικείμενο ως ένα μόνο επιχείρημα, επιτρέποντάς μας να ορίσουμε διάφορες ρυθμίσεις , μεταξύ των οποίων η προεπιλογή πλάτος και ύψος του παραθύρου.
• Η παρουσία παραθύρου έχει loadUrl() μέθοδο, επιτρέποντάς μας να φορτώσουμε τα περιεχόμενα ενός πραγματικού αρχείου HTML στο τρέχον παράθυρο. Το αρχείο HTML μπορεί να είναι είτε τοπικός ή μακρινός .
• Η παρουσία παραθύρου έχει προαιρετικό openDevTools() μέθοδο, επιτρέποντάς μας να ανοίξουμε μια παρουσία των εργαλείων Chrome Dev στο τρέχον παράθυρο για σκοπούς εντοπισμού σφαλμάτων.

Στη συνέχεια, πρέπει να οργανώσουμε λίγο τον κώδικα μας. Προτείνω να δημιουργήσετε ένα windows/ φάκελο στο src/ φάκελο και όπου μπορούμε να δημιουργήσουμε έναν υποφάκελο για κάθε παράθυρο, ως εξής:

my-app |- src/ |-- windows/ |--- main/ |---- main.controller.js |---- main.html |---- main.view.js

… Όπου main.controller.js θα περιέχει τη λογική της 'πλευράς διακομιστή' της εφαρμογής μας και main.view.js θα περιέχει τη λογική της 'πλευράς πελάτη' της εφαρμογής μας.

Το main.html Το αρχείο είναι απλώς μια ιστοσελίδα HTML5, έτσι μπορούμε απλώς να το ξεκινήσουμε ως εξής:

Password Keychain

Σε αυτό το σημείο, η εφαρμογή μας πρέπει να είναι έτοιμη για εκτέλεση. Για να το δοκιμάσουμε, μπορούμε απλά να πληκτρολογήσουμε τα ακόλουθα στο τερματικό μας, στη ρίζα του src ντοσιέ:

$ electron .

Μπορούμε να αυτοματοποιήσουμε αυτήν τη διαδικασία ορίζοντας το start σενάριο του αρχείου package.son.

Δημιουργία εφαρμογής επιτραπέζιων υπολογιστών με κωδικό πρόσβασης κωδικού πρόσβασης

Για να δημιουργήσουμε μια εφαρμογή keychain κωδικού πρόσβασης, χρειαζόμαστε: - Ένας τρόπος προσθήκης, δημιουργίας και αποθήκευσης κωδικών πρόσβασης. - Ένας βολικός τρόπος αντιγραφής και αφαίρεσης κωδικών πρόσβασης.

Δημιουργία και αποθήκευση κωδικών πρόσβασης

Μια απλή φόρμα αρκεί για την εισαγωγή νέων κωδικών πρόσβασης. Για λόγους επίδειξης επικοινωνίας μεταξύ πολλαπλών παραθύρων στο Electron, ξεκινήστε προσθέτοντας ένα δεύτερο παράθυρο στην εφαρμογή μας, το οποίο θα εμφανίζει τη φόρμα «ένθεση». Δεδομένου ότι θα ανοίξουμε και θα κλείσουμε αυτό το παράθυρο πολλές φορές, θα πρέπει να ολοκληρώσουμε τη λογική σε μια μέθοδο, ώστε να μπορούμε απλώς να το καλέσουμε όταν χρειάζεται:

function createInsertWindow() { insertWindow = new BrowserWindow({ width: 640, height: 480, show: false }); insertWindow.loadUrl('file://' + __dirname + '/windows/insert/insert.html'); insertWindow.on('closed',function() { insertWindow = null; }); }

Βασικά σημεία:

• Θα πρέπει να ρυθμίσουμε το προβολή ιδιοκτησία προς ψευδής στο αντικείμενο επιλογών του κατασκευαστή BrowserWindow, προκειμένου να αποφευχθεί το άνοιγμα του παραθύρου από προεπιλογή κατά την εκκίνηση των εφαρμογών.
• Θα χρειαστεί να καταστρέψουμε την παρουσία του BrowserWindow κάθε φορά που ανοίγει το παράθυρο a κλειστό Εκδήλωση.

Άνοιγμα και κλείσιμο του παραθύρου 'Εισαγωγή'

Η ιδέα είναι να μπορέσετε να ενεργοποιήσετε το παράθυρο «ένθετο» όταν ο τελικός χρήστης κάνει κλικ σε ένα κουμπί στο «κύριο» παράθυρο. Για να γίνει αυτό, θα χρειαστεί να στείλουμε ένα μήνυμα από το κύριο παράθυρο στην Κύρια διαδικασία για να το καθοδηγήσουμε να ανοίξει το παράθυρο εισαγωγής. Μπορούμε να το επιτύχουμε χρησιμοποιώντας τη μονάδα IPC της Electron. Υπάρχουν στην πραγματικότητα δύο παραλλαγές της ενότητας IPC:

• Ένα για το Κύρια διαδικασία , επιτρέποντας στην εφαρμογή να εγγραφεί σε μηνύματα που αποστέλλονται από τα παράθυρα.
• Ένα για το Διαδικασία απόδοσης , επιτρέποντας στην εφαρμογή να στέλνει μηνύματα στην κύρια διαδικασία.

Παρόλο που το κανάλι επικοινωνίας της Electron είναι ως επί το πλείστον μονοκατευθυντικό, είναι δυνατή η πρόσβαση στη μονάδα IPC της κύριας διαδικασίας σε μια διαδικασία Renderer χρησιμοποιώντας το μακρινός μονάδα μέτρησης. Επίσης, η Κύρια διαδικασία μπορεί να στείλει ένα μήνυμα πίσω στη Διαδικασία Renderer από την οποία προήλθε το συμβάν χρησιμοποιώντας το Event.sender.send () μέθοδος.

Για να χρησιμοποιήσετε τη λειτουργική μονάδα IPC, το απαιτούμε απλώς όπως κάθε άλλη μονάδα NPM στο σενάριο Κύριας διαδικασίας:

var ipc = require('ipc');

… Και μετά δεσμεύστε σε συμβάντα με το on() μέθοδος:

ipc.on('toggle-insert-view', function() { if(!insertWindow) { createInsertWindow(); } return (!insertWindow.isClosed() && insertWindow.isVisible()) ? insertWindow.hide() : insertWindow.show(); });

Βασικά σημεία:

• Μπορούμε να ονομάσουμε το συμβάν όπως θέλουμε, το παράδειγμα είναι απλώς αυθαίρετο.
• Μην ξεχάσετε να ελέγξετε αν το στιγμιότυπο του BrowserWindow έχει ήδη δημιουργηθεί, αν όχι τότε να το δημιουργήσετε.
• Η παρουσία του BrowserWindow έχει μερικές χρήσιμες μεθόδους:
  • είναι κλειστό() επιστρέφει ένα boolean, ανεξάρτητα από το αν το παράθυρο βρίσκεται αυτήν τη στιγμή σε ένα closed κατάσταση.
  • είναι ορατό () : επιστρέφει ένα boolean, ανεξάρτητα από το αν το παράθυρο είναι ορατό ή όχι.
  • εμφάνιση απόκρυψη() : μέθοδοι ευκολίας για εμφάνιση και απόκρυψη του παραθύρου.

Τώρα πρέπει πραγματικά να ενεργοποιήσουμε αυτό το συμβάν από τη διαδικασία Renderer. Θα δημιουργήσουμε ένα νέο αρχείο σεναρίου που ονομάζεται main.view.js και θα το προσθέσουμε στη σελίδα HTML όπως θα κάναμε με οποιοδήποτε κανονικό σενάριο:

script

Φόρτωση του αρχείου σεναρίου μέσω του HTML window. Η ετικέτα φορτώνει αυτό το αρχείο σε περιβάλλον πελάτη. Αυτό σημαίνει ότι, για παράδειγμα, οι καθολικές μεταβλητές είναι διαθέσιμες μέσω require(). Για να φορτώσουμε ένα σενάριο σε περιβάλλον διακομιστή, μπορούμε να χρησιμοποιήσουμε το require('./main.controller.js'); απευθείας στη σελίδα HTML: var ipc = require('ipc'); angular .module('Utils', []) .directive('toggleInsertView', function() { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); ipc.send('toggle-insert-view'); }); }; }); .

Ακόμα κι αν το σενάριο έχει φορτωθεί πελάτη πλαίσιο, μπορούμε ακόμα να αποκτήσουμε πρόσβαση στη λειτουργική μονάδα IPC για τη διαδικασία Renderer με τον ίδιο τρόπο που μπορούμε για την κύρια διαδικασία και, στη συνέχεια, να στείλουμε το συμβάν μας ως έχει:

add

Υπάρχει επίσης μια μέθοδος sendSync (), σε περίπτωση που χρειαστεί να στείλουμε τα συμβάντα μας συγχρονισμένα.

Τώρα, το μόνο που πρέπει να κάνουμε για να ανοίξουμε το παράθυρο 'εισαγωγή' είναι να δημιουργήσουμε ένα κουμπί HTML με την αντίστοιχη γωνιακή οδηγία σε αυτό:

angular .module('MainWindow', ['Utils']) .controller('MainCtrl', function() { var vm = this; });

Και προσθέστε αυτήν την οδηγία ως εξάρτηση του γωνιακού ελεγκτή του κύριου παραθύρου:

uuid

Δημιουργία κωδικών πρόσβασης

Για να διατηρήσουμε τα πράγματα απλά, μπορούμε απλώς να χρησιμοποιήσουμε το NPM var uuid = require('uuid'); angular .module('Utils', []) ... .factory('Generator', function() { return { create: function() { return uuid.v4(); } }; }) ενότητα για τη δημιουργία μοναδικών αναγνωριστικών που θα λειτουργούν ως κωδικοί πρόσβασης για τους σκοπούς αυτού του σεμιναρίου. Μπορούμε να το εγκαταστήσουμε όπως κάθε άλλη μονάδα NPM, να το απαιτήσουμε στο σενάριο «Utils» και στη συνέχεια να δημιουργήσουμε ένα απλό εργοστάσιο που θα επιστρέψει ένα μοναδικό αναγνωριστικό:

generate

Τώρα, το μόνο που μένει να κάνουμε είναι να δημιουργήσουμε ένα κουμπί στην προβολή εισαγωγής και να επισυνάψουμε μια οδηγία σε αυτό που θα ακούσει συμβάντα κλικ στο κουμπί και θα καλέσει τη μέθοδο create ():

// in Utils.js angular .module('Utils', []) ... .directive('generatePassword', ['Generator', function(Generator) { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); if(!scope.vm.formData) scope.vm.formData = {}; scope.vm.formData.password = Generator.create(); scope.$apply(); }); }; }]) { 'id': String 'description': String, 'username': String, 'password': String }

Αποθήκευση κωδικών πρόσβασης

Σε αυτό το σημείο, θέλουμε να αποθηκεύσουμε τους κωδικούς πρόσβασης. Η δομή δεδομένων για τις καταχωρήσεις κωδικού πρόσβασης είναι αρκετά απλή:

Description... Username... Password... generate cancel save

Επομένως, το μόνο που χρειαζόμαστε είναι ένα είδος βάσης δεδομένων στη μνήμη που μπορεί προαιρετικά να συγχρονιστεί με το αρχείο για δημιουργία αντιγράφων ασφαλείας. Για το σκοπό αυτό, το Loki.js μοιάζει με τον ιδανικό υποψήφιο. Κάνει ακριβώς αυτό που χρειαζόμαστε για τους σκοπούς αυτής της εφαρμογής, και προσφέρει πάνω από αυτό το Δυναμικές προβολές χαρακτηριστικό, που μας επιτρέπει να κάνουμε πράγματα παρόμοια με την ενότητα Συγκέντρωσης της MongoDB.

Οι Δυναμικές προβολές δεν προσφέρουν όλες τις λειτουργίες που προσφέρει η ενότητα Συγκέντρωσης της MongodDB. Ανατρέξτε στο τεκμηρίωση Για περισσότερες πληροφορίες.

Ας ξεκινήσουμε δημιουργώντας μια απλή φόρμα HTML:

var loki = require('lokijs'), path = require('path'); angular .module('Utils', []) ... .service('Storage', ['$q', function($q) { this.db = new loki(path.resolve(__dirname, '../..', 'app.db')); this.collection = null; this.loaded = false; this.init = function() { var d = $q.defer(); this.reload() .then(function() { this.collection = this.db.getCollection('keychain'); d.resolve(this); }.bind(this)) .catch(function(e) { // create collection this.db.addCollection('keychain'); // save and create file this.db.saveDatabase(); this.collection = this.db.getCollection('keychain'); d.resolve(this); }.bind(this)); return d.promise; }; this.addDoc = function(data) { var d = $q.defer(); if(this.isLoaded() && this.getCollection()) { this.getCollection().insert(data); this.db.saveDatabase(); d.resolve(this.getCollection()); } else { d.reject(new Error('DB NOT READY')); } return d.promise; }; }) .directive('savePassword', ['Storage', function(Storage) { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); if(scope.vm.formData) { Storage .addDoc(scope.vm.formData) .then(function() { // reset form & close insert window scope.vm.formData = {}; ipc.send('toggle-insert-view'); }); } }); }; }])

Και τώρα, ας προσθέσουμε τη λογική JavaScript για να χειριστούμε την ανάρτηση και την αποθήκευση των περιεχομένων της φόρμας:

getCollection()

Βασικά σημεία:

• Πρέπει πρώτα να προετοιμάσουμε τη βάση δεδομένων. Αυτή η διαδικασία περιλαμβάνει τη δημιουργία μιας νέας παρουσίας του Loki Object, παρέχοντας τη διαδρομή προς το αρχείο βάσης δεδομένων ως επιχείρημα, αναζητώντας εάν υπάρχει αυτό το αντίγραφο ασφαλείας, δημιουργώντας το εάν χρειάζεται (συμπεριλαμβανομένης της συλλογής «Keychain») και, στη συνέχεια, φόρτωση των περιεχομένων του αυτό το αρχείο στη μνήμη.
• Μπορούμε να ανακτήσουμε μια συγκεκριμένη συλλογή στη βάση δεδομένων με το insert() μέθοδος.
• Ένα αντικείμενο συλλογής εκθέτει διάφορες μεθόδους, συμπεριλαμβανομένου ενός saveDatabase() μέθοδο, επιτρέποντάς μας να προσθέσουμε ένα νέο έγγραφο στη συλλογή.
• Για να διατηρηθεί το περιεχόμενο της βάσης δεδομένων στο αρχείο, το αντικείμενο Loki εκθέτει ένα getCollection() μέθοδος.
• Θα χρειαστεί να επαναφέρουμε τα δεδομένα της φόρμας και να στείλουμε ένα συμβάν IPC για να πούμε στην κύρια διαδικασία να κλείσει το παράθυρο μόλις αποθηκευτεί το έγγραφο.

Τώρα έχουμε μια απλή φόρμα που μας επιτρέπει να δημιουργήσουμε και να αποθηκεύσουμε νέους κωδικούς πρόσβασης. Ας επιστρέψουμε στην κύρια προβολή για να απαριθμήσουμε αυτές τις εγγραφές.

Κωδικοί καταχώρησης

Μερικά πράγματα πρέπει να συμβούν εδώ:

• Πρέπει να είμαστε σε θέση να πάρουμε όλα τα έγγραφα στη συλλογή μας.
• Πρέπει να ενημερώνουμε την κύρια προβολή κάθε φορά που αποθηκεύεται ένας νέος κωδικός πρόσβασης, ώστε να μπορεί να ανανεώσει την προβολή.

Μπορούμε να ανακτήσουμε τη λίστα των εγγράφων καλώντας το this.getCollection = function() { this.collection = this.db.getCollection('keychain'); return this.collection; }; this.getDocs = function() { return (this.getCollection()) ? this.getCollection().data : null; }; μέθοδο στο αντικείμενο Loki. Αυτή η μέθοδος επιστρέφει ένα αντικείμενο με μια ιδιότητα που ονομάζεται δεδομένα , που είναι απλώς ένας πίνακας όλων των εγγράφων σε αυτήν τη συλλογή:

angular .module('MainView', ['Utils']) .controller('MainCtrl', ['Storage', function(Storage) { var vm = this; vm.keychain = null; Storage .init() .then(function(db) { vm.keychain = db.getDocs(); }); });

Στη συνέχεια, μπορούμε να καλέσουμε το getDocs () στον ελεγκτή Angular και να ανακτήσουμε όλους τους κωδικούς πρόσβασης που είναι αποθηκευμένοι στη βάση δεδομένων, αφού το αρχικοποιήσουμε:

{{item.description}} {item.username } • copy remove

Λίγο γωνιακό πρότυπο, και έχουμε μια λίστα κωδικών πρόσβασης:

main.view.js

Μια ωραία προστιθέμενη δυνατότητα θα ήταν η ανανέωση της λίστας των κωδικών πρόσβασης μετά την εισαγωγή ενός νέου. Για αυτό, μπορούμε να χρησιμοποιήσουμε τη μονάδα IPC της Electron. Όπως αναφέρθηκε προηγουμένως, η ενότητα IPC της κύριας διαδικασίας μπορεί να κληθεί σε μια διαδικασία Renderer για να τη μετατρέψει σε μια διαδικασία ακρόασης, χρησιμοποιώντας την απομακρυσμένη μονάδα. Ακολουθεί ένα παράδειγμα για το πώς να το εφαρμόσετε στο var remote = require('remote'), remoteIpc = remote.require('ipc'); angular .module('MainView', ['Utils']) .controller('MainCtrl', ['Storage', function(Storage) { var vm = this; vm.keychain = null; Storage .init() .then(function(db) { vm.keychain = db.getDocs(); remoteIpc.on('update-main-view', function() { Storage .reload() .then(function() { vm.keychain = db.getDocs(); }); }); }); }]); :

require()

Βασικά σημεία:

• Θα χρειαστεί να χρησιμοποιήσουμε την απομακρυσμένη μονάδα μέσω της δικής της on() μέθοδος για να απαιτείται η απομακρυσμένη μονάδα IPC από την κύρια διαδικασία.
• Στη συνέχεια, μπορούμε να ρυθμίσουμε τη Διαδικασία Renderer ως ακροατή συμβάντων μέσω του Storage .addDoc(scope.vm.formData) .then(function() { // refresh list in main view ipc.send('update-main-view'); // reset form & close insert window scope.vm.formData = {}; ipc.send('toggle-insert-view'); }); μέθοδος και δεσμεύστε τις λειτουργίες επανάκλησης σε αυτά τα συμβάντα.

Η προβολή ένθετου θα είναι τότε υπεύθυνη για την αποστολή αυτού του συμβάντος κάθε φορά που αποθηκεύεται ένα νέο έγγραφο:

var clipboard = require('clipboard'); angular .module('Utils', []) ... .directive('copyPassword', [function() { return function(scope, el, attrs) { el.bind('click', function(e) { e.preventDefault(); var text = (scope.vm.keychain[attrs.copyPassword]) ? scope.vm.keychain[attrs.copyPassword].password : ''; // atom's clipboard module clipboard.clear(); clipboard.writeText(text); }); }; }]);

Αντιγραφή κωδικών πρόσβασης

Συνήθως δεν είναι καλή ιδέα να εμφανίζονται κωδικοί πρόσβασης σε απλό κείμενο. Αντ 'αυτού, πρόκειται να κρύψουμε και να παρέχουμε ένα κουμπί ευκολίας που επιτρέπει στον τελικό χρήστη να αντιγράψει τον κωδικό πρόσβασης απευθείας για μια συγκεκριμένη καταχώριση.

πού είναι το αρχείο καταγραφής σφαλμάτων php

Εδώ και πάλι, το Electron μας βοηθάει, παρέχοντάς μας ένα πρόχειρο ενότητα με εύκολες μεθόδους αντιγραφής και επικόλλησης όχι μόνο περιεχομένου κειμένου, αλλά και εικόνων και κώδικα HTML:

writeText()

Δεδομένου ότι ο δημιουργημένος κωδικός πρόσβασης θα είναι μια απλή συμβολοσειρά, μπορούμε να χρησιμοποιήσουμε το copy-password μέθοδος για την αντιγραφή του κωδικού πρόσβασης στο πρόχειρο του συστήματος. Στη συνέχεια, μπορούμε να ενημερώσουμε την κύρια προβολή HTML και να προσθέσουμε το κουμπί αντιγραφής με το copy οδηγία σχετικά με αυτό, παρέχοντας το ευρετήριο του πίνακα κωδικών πρόσβασης:

remove()

Κατάργηση κωδικών πρόσβασης

Οι τελικοί χρήστες μας μπορεί επίσης να θέλουν να διαγράφουν κωδικούς πρόσβασης, σε περίπτωση που είναι παρωχημένοι. Για να γίνει αυτό, το μόνο που πρέπει να κάνουμε είναι να καλέσουμε το this.removeDoc = function(doc) { return function() { var d = $q.defer(); if(this.isLoaded() && this.getCollection()) { // remove the doc from the collection & persist changes this.getCollection().remove(doc); this.db.saveDatabase(); // inform the insert view that the db content has changed ipc.send('reload-insert-view'); d.resolve(true); } else { d.reject(new Error('DB NOT READY')); } return d.promise; }.bind(this); }; μέθοδος στη συλλογή μπρελόκ. Πρέπει να παρέχουμε ολόκληρο το έγγραφο στη μέθοδο «κατάργηση ()», ως εξής:

var remote = require('remote'), Menu = remote.require('menu');

Η τεκμηρίωση του Loki.js δηλώνει ότι μπορούμε επίσης να καταργήσουμε ένα έγγραφο με το αναγνωριστικό του, αλλά δεν φαίνεται να λειτουργεί όπως αναμενόταν.

Δημιουργία μενού επιτραπέζιου υπολογιστή

Το Electron ενσωματώνεται απρόσκοπτα με το περιβάλλον επιφάνειας εργασίας OS για να παρέχει μια «εγγενή» εμφάνιση και αίσθηση εμπειρίας χρήστη στις εφαρμογές μας. Επομένως, το Electron συνοδεύεται από ένα Ενότητα μενού , αφιερωμένο στη δημιουργία σύνθετων δομών μενού για επιτραπέζιους υπολογιστές για την εφαρμογή μας.

Η ενότητα μενού είναι ένα τεράστιο θέμα και αξίζει σχεδόν ένα δικό της φροντιστήριο. Σας συνιστώ ανεπιφύλακτα να διαβάσετε Εκπαιδευτικό πρόγραμμα Ενσωμάτωσης Περιβάλλοντος Επιτραπέζιου Ηλεκτρονικού για να ανακαλύψετε όλες τις δυνατότητες αυτής της ενότητας.

Για το εύρος αυτού του τρέχοντος οδηγού, θα δούμε πώς να δημιουργήσουμε ένα προσαρμοσμένο μενού, να προσθέσουμε μια προσαρμοσμένη εντολή σε αυτό και να εφαρμόσουμε την τυπική εντολή quit.

Δημιουργία & εκχώρηση προσαρμοσμένου μενού στην εφαρμογή μας

Συνήθως, η λογική JavaScript για ένα μενού ηλεκτρονίων θα ανήκε στο κύριο αρχείο σεναρίου της εφαρμογής μας, όπου ορίζεται η κύρια διαδικασία. Ωστόσο, μπορούμε να το αφαιρέσουμε σε ένα ξεχωριστό αρχείο και να αποκτήσουμε πρόσβαση στη λειτουργική μονάδα μενού μέσω της απομακρυσμένης λειτουργικής μονάδας:

buildFromTemplate()

Για να ορίσουμε ένα απλό μενού, θα χρειαστεί να χρησιμοποιήσουμε το var appMenu = Menu.buildFromTemplate([ { label: 'Electron', submenu: [{ label: 'Credits', click: function() { alert('Built with Electron & Loki.js.'); } }] } ]); μέθοδος:

label

Το πρώτο στοιχείο του πίνακα χρησιμοποιείται πάντα ως το στοιχείο 'προεπιλεγμένο' μενού.

Η τιμή του Electron Η ιδιότητα δεν έχει μεγάλη σημασία για το προεπιλεγμένο στοιχείο μενού. Στη λειτουργία dev θα εμφανίζεται πάντα setApplicationMenu(). Θα δούμε αργότερα πώς να ορίσετε ένα προσαρμοσμένο όνομα στο προεπιλεγμένο στοιχείο μενού κατά τη φάση κατασκευής.

Τέλος, πρέπει να αντιστοιχίσουμε αυτό το προσαρμοσμένο μενού ως το προεπιλεγμένο μενού για την εφαρμογή μας με το Menu.setApplicationMenu(appMenu); μέθοδος:

Command+A

Χαρτογράφηση συντομεύσεων πληκτρολογίου

Η ηλεκτρονική παρέχει « επιταχυντές ', Ένα σύνολο προκαθορισμένων συμβολοσειρών που αντιστοιχούν σε πραγματικούς συνδυασμούς πληκτρολογίου, π.χ.: Ctrl+Shift+Z ή Command.

Το File ο επιταχυντής δεν λειτουργεί σε Windows ή Linux. Για την εφαρμογή keychain κωδικού πρόσβασης, πρέπει να προσθέσουμε ένα ... { label: 'File', submenu: [ { label: 'Create Password', accelerator: 'CmdOrCtrl+N', click: function() { ipc.send('toggle-insert-view'); } }, { type: 'separator' // to create a visual separator }, { label: 'Quit', accelerator: 'CmdOrCtrl+Q', selector: 'terminate:' // OS X only!!! } ] } ... στοιχείο μενού, προσφέροντας δύο εντολές:

• Δημιούργησε κωδικό : ανοίξτε την προβολή εισαγωγής με Cmd (ή Ctrl) + Ν
• Εγκαταλείπω : κλείστε την εφαρμογή εντελώς με Cmd (ή Ctrl) + Q

type

Βασικά σημεία:

• Μπορούμε να προσθέσουμε ένα οπτικό διαχωριστικό προσθέτοντας ένα στοιχείο στον πίνακα με το separator η ιδιότητα ορίστηκε σε CmdOrCtrl.
• Το selector Ο επιταχυντής είναι συμβατός με πληκτρολόγια Mac και PC
• Το mdl- Η ιδιότητα είναι συμβατή μόνο με OSX!

Στυλ για την εφαρμογή μας

Πιθανότατα έχετε παρατηρήσει σε όλα τα παραδείγματα κώδικα παραπομπές σε ονόματα τάξεων ξεκινώντας από gulp electron. Για τους σκοπούς αυτού του σεμιναρίου επέλεξα να χρησιμοποιήσω το Υλικό σχεδίασης Lite Πλαίσιο διεπαφής χρήστη, αλλά μη διστάσετε να χρησιμοποιήσετε οποιοδήποτε πλαίσιο διεπαφής χρήστη της επιλογής σας.

Οτιδήποτε μπορούμε να κάνουμε με HTML5 μπορεί να γίνει στο Electron. απλώς λάβετε υπόψη το αυξανόμενο μέγεθος των δυαδικών αρχείων της εφαρμογής και τα προκύπτοντα ζητήματα απόδοσης που ενδέχεται να προκύψουν εάν χρησιμοποιείτε πάρα πολλές βιβλιοθήκες τρίτων.

Συσκευασία ηλεκτρονικών εφαρμογών για διανομή

Φτιάξατε μια εφαρμογή Electron, φαίνεται υπέροχη, γράψατε τις δοκιμές e2e με Selenium και WebDriver και είστε έτοιμοι να το διανείμετε στον κόσμο!

Ωστόσο, εξακολουθείτε να θέλετε να το εξατομικεύσετε, να του δώσετε ένα προσαρμοσμένο όνομα διαφορετικό από το προεπιλεγμένο 'Electron', και ίσως επίσης να παρέχετε προσαρμοσμένα εικονίδια εφαρμογών για πλατφόρμες Mac και PC.

Κτίριο με τον Γκουλπ

Αυτές τις μέρες, υπάρχει Χαψιά πρόσθετο για οτιδήποτε μπορούμε να σκεφτούμε. Το μόνο που έπρεπε να κάνω είναι ο τύπος $ npm install gulp-electron --save-dev στο Google, και σίγουρα υπάρχει ένα gulp-electron συνδέω!

Αυτό το πρόσθετο είναι αρκετά εύχρηστος όσο διατηρήθηκε η δομή των φακέλων που περιγράφεται λεπτομερώς στην αρχή αυτού του σεμιναρίου. Εάν όχι, ίσως χρειαστεί να μετακινήσετε τα πράγματα λίγο.

Αυτή η προσθήκη μπορεί να εγκατασταθεί όπως κάθε άλλη προσθήκη Gulp:

var gulp = require('gulp'), electron = require('gulp-electron'), info = require('./src/package.json'); gulp.task('electron', function() { gulp.src('') .pipe(electron({ src: './src', packageJson: info, release: './dist', cache: './cache', version: 'v0.31.2', packaging: true, platforms: ['win32-ia32', 'darwin-x64'], platformResources: { darwin: { CFBundleDisplayName: info.name, CFBundleIdentifier: info.bundle, CFBundleName: info.name, CFBundleVersion: info.version }, win: { 'version-string': info.version, 'file-version': info.version, 'product-version': info.version } } })) .pipe(gulp.dest('')); });

Και μετά μπορούμε να ορίσουμε την εργασία μας Gulp ως εξής:

src/

Βασικά σημεία:

• το platforms Ο φάκελος δεν μπορεί να είναι ίδιος με τον φάκελο στον οποίο βρίσκεται το Gulpfile.js, ούτε ο ίδιος φάκελος με τον φάκελο διανομής.
• Μπορούμε να καθορίσουμε τις πλατφόρμες στις οποίες επιθυμούμε να εξαγάγουμε μέσω του cache πίνακας.
• Πρέπει να ορίσουμε ένα packageJson φάκελο, όπου θα γίνει λήψη των δυαδικών ηλεκτρονίων, ώστε να μπορούν να συσκευαστούν με την εφαρμογή μας.
• Τα περιεχόμενα του αρχείου package.json της εφαρμογής πρέπει να μεταφερθούν στην εργασία κόλπου μέσω του packaging ιδιοκτησία.
• Υπάρχει ένα προαιρετικό platformResources ιδιοκτησία, επιτρέποντάς μας να δημιουργήσουμε επίσης αρχεία zip των εφαρμογών που δημιουργήθηκαν.
• Για κάθε πλατφόρμα, υπάρχει ένα διαφορετικό σύνολο «πόρων πλατφόρμας» που μπορεί να οριστεί .

Προσθήκη εικονιδίων εφαρμογής

Ένα από τα icon ιδιότητες είναι το 'icon': 'keychain.ico' ιδιοκτησία, επιτρέποντάς μας να ορίσουμε ένα προσαρμοσμένο εικονίδιο για την εφαρμογή μας:

.icns

Το OS X απαιτεί εικονίδια με το .png επέκταση αρχείου. Υπάρχουν πολλά διαδικτυακά εργαλεία που μας επιτρέπουν τη μετατροπή .ico αρχεία σε .icns και

|_+_|

δωρεάν.

συμπέρασμα

Σε αυτό το άρθρο έχουμε γρατσουνίσει μόνο την επιφάνεια του τι μπορεί πραγματικά να κάνει το Electron. Σκεφτείτε υπέροχες εφαρμογές όπως το Atom ή το Χαλαρότητα ως πηγή έμπνευσης όπου μπορείτε να πάτε με αυτό το εργαλείο.

Ελπίζω να βρείτε αυτό το σεμινάριο χρήσιμο, μη διστάσετε να αφήσετε τα σχόλιά σας και να μοιραστείτε τις εμπειρίες σας με την Electron!