Electron: Platformlar Arası Masaüstü Uygulamaları Kolaylaştırıldı

Bu yılın başlarında Github, ünlü açık kaynak editörü Atom'un çekirdeği olan Atom-Shell'i piyasaya sürdü ve özel durum için adını Electron olarak değiştirdi.

Electron, Node.js tabanlı masaüstü uygulamaları kategorisindeki diğer rakiplerin aksine, Node.js'nin (son sürümlere kadar io.js) gücünü Chromium Engine ile birleştirerek zaten köklü olan bu pazara kendi yönünü getiriyor. bize hem sunucu hem de istemci tarafı JavaScript'in en iyisi.

Yalnızca sürekli büyüyen NPM modülleri deposuyla değil, aynı zamanda tüm müşteri tarafı ihtiyaçlarımızı karşılamak için tüm Bower kayıt defteriyle desteklenen performanslı, veri odaklı, platformlar arası masaüstü uygulamaları oluşturabileceğimiz bir dünya hayal edin.

Elektron girin.

Bu öğreticide, MongoDB geliştiricileri için tanıdık bir sözdizimine sahip hafif ve bellek içi bir veritabanı olan Electron, Angular.js ve Loki.js'yi kullanarak basit bir parola anahtar zinciri uygulaması oluşturacağız.

Bu uygulama için tam kaynak kodu burada mevcuttur.

Bu öğretici şunları varsayar:

• Okuyucunun makinesinde Node.js ve Bower kuruludur.
• Node.js, Angular.js ve MongoDB benzeri sorgu sözdizimine aşinadırlar.

Malları Almak

Öncelikle uygulamamızı yerel olarak test etmek için Elektron ikili dosyalarını almamız gerekecek. Global olarak kurabilir ve bir CLI olarak kullanabilir veya uygulamamızın yoluna yerel olarak kurabiliriz. Global olarak yüklemenizi öneririm, böylece geliştirdiğimiz her uygulama için tekrar tekrar yapmak zorunda kalmazız.

Uygulamamızı Gulp kullanarak dağıtım için nasıl paketleyeceğimizi daha sonra öğreneceğiz. Bu işlem, Elektron ikili dosyalarının kopyalanmasını içerir ve bu nedenle, uygulamamızın yoluna manuel olarak yüklemek çok az mantıklıdır veya hiç mantıklı değildir.

Electron CLI'yi kurmak için terminalimize aşağıdaki komutu yazabiliriz:

 $ npm install -g electron-prebuilt

Kurulumu test etmek için electron -h yazın ve Electron CLI sürümünü göstermelidir.

Bu makalenin yazıldığı sırada Electron sürümü 0.31.2 .

Projeyi Kurmak

Aşağıdaki temel klasör yapısını varsayalım:

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

… burada: - uygulamayı oluştururken Elektron ikili dosyalarını indirmek için önbellek/ kullanılacaktır. - dist/ oluşturulan dağıtım dosyalarını içerecektir. - src/ kaynak kodumuzu içerecektir. - src/app.js , uygulamamızın giriş noktası olacaktır.

Ardından, terminalimizde src/ klasörüne gideceğiz ve uygulamamız için package.json ve bower.json dosyalarını oluşturacağız:

 $ npm init $ bower init

Bu eğitimde daha sonra gerekli paketleri kuracağız.

Elektron Süreçlerini Anlamak

Elektron iki tür süreç arasında ayrım yapar:

• Ana İşlem : Uygulamamızın giriş noktası, uygulamayı her çalıştırdığımızda yürütülecek dosya. Tipik olarak, bu dosya uygulamanın çeşitli pencerelerini bildirir ve isteğe bağlı olarak Electron'un IPC modülünü kullanarak global olay dinleyicilerini tanımlamak için kullanılabilir.
• Renderer İşlemi : Uygulamamızdaki belirli bir pencere için kontrolör. Her pencere kendi Oluşturucu İşlemini oluşturur.

Kod netliği için her Renderer İşlemi için ayrı bir dosya kullanılmalıdır. Uygulamamız için Ana İşlemi tanımlamak için, src/app.js ve uygulamayı başlatmak için app modülünü ve uygulamamızın çeşitli pencerelerini (her ikisi de Elektron çekirdeğinin bir parçası) oluşturmak için browser-window modülünü dahil edeceğiz. haddi zatında:

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

Uygulama gerçekten başlatıldığında, bağlanabileceğimiz ready bir olayı başlatır. Bu noktada, uygulamamızın ana penceresini somutlaştırabiliriz:

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

Anahtar noktaları:

• BrowserWindow nesnesinin yeni bir örneğini oluşturarak yeni bir pencere oluşturuyoruz.
• Bir nesneyi tek bir argüman olarak alır ve aralarında pencerenin varsayılan genişliği ve yüksekliğinin de bulunduğu çeşitli ayarları tanımlamamıza izin verir.
• Pencere örneğinin, geçerli pencerede gerçek bir HTML dosyasının içeriğini yüklememize izin veren bir loadUrl() yöntemi vardır. HTML dosyası yerel veya uzak olabilir.
• Pencere örneğinin, hata ayıklama amacıyla geçerli pencerede Chrome Geliştirme Araçları örneğini açmamıza izin veren isteğe bağlı bir openDevTools() yöntemi vardır.

Ardından, kodumuzu biraz düzenlemeliyiz. src/ klasörümüzde ve her pencere için bir alt klasör oluşturabileceğimiz bir windows/ klasörü oluşturmanızı tavsiye ederim:

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

… burada main.controller.js , uygulamamızın “sunucu tarafı” mantığını içerecek ve main.view.js , uygulamamızın “istemci tarafı” mantığını içerecek.

main.html dosyası basitçe bir HTML5 web sayfasıdır, bu yüzden basitçe şöyle başlatabiliriz:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Password Keychain</title> </head> <body> <h1>Password Keychain</h1> </body> </html>

Bu noktada uygulamamız çalışmaya hazır olmalıdır. Test etmek için, terminalimize src klasörünün kök dizinine aşağıdakini yazabiliriz:

 $ electron .

package.son dosyasının start scriptini tanımlayarak bu işlemi otomatikleştirebiliriz.

Bir Parola Anahtarlık Masaüstü Uygulaması Oluşturma

Bir parola anahtar zinciri uygulaması oluşturmak için şunlara ihtiyacımız var: - Parolaları eklemenin, oluşturmanın ve kaydetmenin bir yolu. - Şifreleri kopyalamak ve kaldırmak için uygun bir yol.

Parola Oluşturma ve Kaydetme

Yeni şifreleri girmek için basit bir form yeterli olacaktır. Electron'da birden fazla pencere arasındaki iletişimi göstermek adına, uygulamamıza “insert” formunu gösterecek ikinci bir pencere ekleyerek başlayın. Bu pencereyi birden çok kez açıp kapatacağımız için, gerektiğinde basitçe çağırabilmemiz için mantığı bir metoda sarmalıyız:

 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; }); }

Anahtar noktaları:

• Uygulamalar başladığında pencerenin varsayılan olarak açılmasını önlemek için BrowserWindow yapıcısının options nesnesinde show özelliğini false olarak ayarlamamız gerekecek.
• Pencere kapalı bir olayı tetiklediğinde BrowserWindow örneğini yok etmemiz gerekecek.

“Ekle” Penceresini Açma ve Kapatma

Buradaki fikir, son kullanıcı "ana" pencerede bir düğmeyi tıkladığında "ekle" penceresini tetikleyebilmektir. Bunu yapmak için, ana pencereden Ana İşlem'e ekleme penceresini açmasını söyleyen bir mesaj göndermemiz gerekecek. Bunu Electron'un IPC modülünü kullanarak başarabiliriz. Aslında IPC modülünün iki çeşidi vardır:

• Ana İşlem için bir tane, uygulamanın pencerelerden gönderilen mesajlara abone olmasına izin verir.
• Uygulamanın ana işleme mesaj göndermesine izin veren Oluşturucu İşlemi için bir tane.

Electron'un iletişim kanalı çoğunlukla tek yönlü olmasına rağmen, uzak modülü kullanarak bir Renderer Sürecinde Ana Sürecin IPC modülüne erişmek mümkündür. Ayrıca Ana İşlem, Event.sender.send() yöntemini kullanarak olayın kaynaklandığı İşleyici İşlemine geri bir mesaj gönderebilir.

IPC modülünü kullanmak için, Ana İşlem komut dosyamızdaki diğer herhangi bir NPM modülü gibi ona ihtiyacımız var:

 var ipc = require('ipc');

… ve ardından on() yöntemiyle olaylara bağlanın:

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

Anahtar noktaları:

• Olayı istediğimiz gibi adlandırabiliriz, örnek sadece keyfi.
• BrowserWindow örneğinin önceden oluşturulmuş olup olmadığını kontrol etmeyi unutmayın, değilse onu somutlaştırın.
• BrowserWindow örneğinin bazı yararlı yöntemleri vardır:
  • isClosed() , pencere şu anda closed durumda olsa da olmasa da bir boole döndürür.
  • isVisible() : pencerenin o anda görünür olup olmadığına bakılmaksızın bir boole döndürür.
  • show() / hide() : pencereyi göstermek ve gizlemek için uygun yöntemler.

Şimdi aslında bu olayı Renderer Sürecinden başlatmamız gerekiyor. main.view.js adında yeni bir komut dosyası oluşturacağız ve herhangi bir normal komut dosyasında yaptığımız gibi onu HTML sayfamıza ekleyeceğiz:

 <script src="./main.view.js"></script>

Komut dosyası dosyasını HTML script etiketi aracılığıyla yüklemek, bu dosyayı istemci tarafı bağlamında yükler. Bu, örneğin global değişkenlerin window.<varname> aracılığıyla kullanılabilir olduğu anlamına gelir. Sunucu tarafı bağlamında bir komut dosyası yüklemek için, doğrudan HTML sayfamızda request require() yöntemini kullanabiliriz: require('./main.controller.js'); .

Komut dosyası istemci tarafı bağlamında yüklense bile, Renderer Süreci için IPC modülüne Ana Süreç için yaptığımız gibi yine erişebilir ve ardından olayımızı şu şekilde gönderebiliriz:

 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'); }); }; });

Ayrıca, olaylarımızı eşzamanlı olarak göndermemiz gerekirse, bir sendSync() yöntemi de mevcuttur.

Şimdi, "insert" penceresini açmak için tek yapmamız gereken, üzerinde Angular yönergesiyle eşleşen bir HTML düğmesi oluşturmak:

 <div ng-controller="MainCtrl as vm"> <button toggle-insert-view class="mdl-button"> <i class="material-icons">add</i> </button> </div>

Ve bu yönergeyi ana pencerenin Angular denetleyicisine bir bağımlılık olarak ekleyin:

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

Şifre Oluşturma

İşleri basit tutmak için, bu eğitimin amacı için parola görevi görecek benzersiz kimlikler oluşturmak için NPM uuid modülünü kullanabiliriz. Bunu diğer herhangi bir NPM modülü gibi kurabilir, 'Utils' betiğimizde gerektirebilir ve ardından benzersiz bir kimlik döndürecek basit bir fabrika oluşturabiliriz:

 var uuid = require('uuid'); angular .module('Utils', []) ... .factory('Generator', function() { return { create: function() { return uuid.v4(); } }; })

Şimdi tek yapmamız gereken, ekleme görünümünde bir düğme oluşturmak ve ona düğmedeki tıklama olaylarını dinleyecek ve create() yöntemini çağıracak bir yönerge eklemek:

 <!-- in insert.html --> <button generate-password class="mdl-button">generate</button>

 // 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(); }); }; }])

Şifreleri Kaydetme

Bu noktada şifrelerimizi saklamak istiyoruz. Şifre girişlerimiz için veri yapısı oldukça basittir:

 { "id": String "description": String, "username": String, "password": String }

Bu nedenle, gerçekten ihtiyacımız olan tek şey, isteğe bağlı olarak yedekleme için dosyaya eşitlenebilen bir tür bellek içi veritabanıdır. Bu amaçla Loki.js ideal bir aday gibi görünüyor. Bu uygulamanın amacı için tam olarak ihtiyacımız olanı yapıyor ve bunun üzerine Dinamik Görünümler özelliğini sunarak MongoDB'nin Toplama modülüne benzer şeyler yapmamızı sağlıyor.

Dinamik Görünümler, MongodDB'nin Toplama modülünün sunduğu tüm işlevleri sunmaz. Daha fazla bilgi için lütfen belgelere bakın.

Basit bir HTML formu oluşturarak başlayalım:

 <div class="insert" ng-controller="InsertCtrl as vm"> <form name="insertForm" no-validate> <fieldset ng-disabled="!vm.loaded"> <div class="mdl-textfield"> <input class="mdl-textfield__input" type="text" ng-model="vm.formData.description" required /> <label class="mdl-textfield__label" for="description">Description...</label> </div> <div class="mdl-textfield"> <input class="mdl-textfield__input" type="text" ng-model="vm.formData.username" /> <label class="mdl-textfield__label" for="username">Username...</label> </div> <div class="mdl-textfield"> <input class="mdl-textfield__input" type="password" ng-model="vm.formData.password" required /> <label class="mdl-textfield__label" for="password">Password...</label> </div> <div class=""> <button generate-password class="mdl-button">generate</button> <button toggle-insert-view class="mdl-button">cancel</button> <button save-password class="mdl-button" ng-disabled="insertForm.$invalid">save</button> </div> </fieldset> </form> </div>

Şimdi, form içeriğinin gönderilmesini ve kaydedilmesini işlemek için JavaScript mantığını ekleyelim:

 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'); }); } }); }; }])

Anahtar noktaları:

• Önce veritabanını başlatmamız gerekiyor. Bu süreç, Loki Nesnesinin yeni bir örneğini oluşturmayı, bir argüman olarak veritabanı dosyasının yolunu sağlamayı, bu yedekleme dosyasının var olup olmadığını araştırmayı, gerekirse onu oluşturmayı ('Anahtarlık' koleksiyonu dahil) ve ardından içeriğini yüklemeyi içerir. Bu dosya bellekte.
• getCollection() yöntemi ile veritabanındaki belirli bir koleksiyonu alabiliriz.
• Bir koleksiyon nesnesi, bir insert() yöntemi de dahil olmak üzere çeşitli yöntemleri ortaya çıkararak koleksiyona yeni bir belge eklememize olanak tanır.
• Veritabanı içeriğini dosyada kalıcı kılmak için Loki nesnesi bir saveDatabase() yöntemi sunar.
• Formun verilerini sıfırlamamız ve Ana İşlem'e belge kaydedildikten sonra pencereyi kapatmasını söylemek için bir IPC olayı göndermemiz gerekecek.

Artık yeni şifreler oluşturmamıza ve kaydetmemize izin veren basit bir formumuz var. Bu girdileri listelemek için ana görünüme dönelim.

Şifreleri Listeleme

Burada birkaç şeyin olması gerekiyor:

• Koleksiyonumuzdaki tüm belgeleri alabilmemiz gerekiyor.
• Yeni bir şifre kaydedildiğinde, görünümü yenileyebilmesi için ana görünümü bilgilendirmemiz gerekiyor.

Loki nesnesi üzerinde getCollection() yöntemini çağırarak belgelerin listesini alabiliriz. Bu yöntem, yalnızca o koleksiyondaki tüm belgelerin bir dizisi olan data adlı özelliğe sahip bir nesne döndürür:

 this.getCollection = function() { this.collection = this.db.getCollection('keychain'); return this.collection; }; this.getDocs = function() { return (this.getCollection()) ? this.getCollection().data : null; };

Daha sonra Angular denetleyicimizde getDocs() öğesini çağırabilir ve onu başlattıktan sonra veritabanında depolanan tüm parolaları alabiliriz:

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

Biraz Açısal şablonlama ve bir şifre listemiz var:

 <tr ng-repeat="item in vm.keychain track by $index" class="item--{{$index}}"> <td class="mdl-data-table__cell--non-numeric">{{item.description}}</td> <td>{{item.username || 'n/a'}}</td> <td> <span ng-repeat="n in [1,2,3,4,5,6]">&bull;</span> </td> <td> <a href="#" copy-password="{{$index}}">copy</a> <a href="#" remove-password="{{item}}">remove</a> </td> </tr> 

Güzel bir ek özellik, yeni bir tane ekledikten sonra şifre listesini yenilemek olacaktır. Bunun için Electron'un IPC modülünü kullanabiliriz. Daha önce bahsedildiği gibi, Ana İşlem'in IPC modülü, uzak modülü kullanarak onu bir dinleyici işlemine dönüştürmek için Renderer İşleminde çağrılabilir. main.view.js nasıl uygulanacağına dair bir örnek:

 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(); }); }); }); }]);

Anahtar noktaları:

• Ana İşlemden uzak IPC modülünü talep etmek için uzak modülü kendi require() yöntemiyle kullanmamız gerekecek.
• Daha sonra Renderer Process'imizi on() metodu ile bir olay dinleyicisi olarak ayarlayabilir ve bu olaylara geri çağırma fonksiyonlarını bağlayabiliriz.

Ekleme görünümü, yeni bir belge kaydedildiğinde bu olayı göndermekten sorumlu olacaktır:

 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'); });

Şifreleri Kopyalama

Parolaları düz metin olarak görüntülemek genellikle iyi bir fikir değildir. Bunun yerine, son kullanıcının belirli bir giriş için şifreyi doğrudan kopyalamasına izin veren bir kolaylık düğmesi gizleyecek ve sağlayacağız.

Burada yine Electron, yalnızca metin içeriğini değil, aynı zamanda görüntüleri ve HTML kodunu da kopyalamak ve yapıştırmak için kolay yöntemler içeren bir pano modülü sağlayarak imdadımıza yetişiyor:

 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); }); }; }]);

Oluşturulan parola basit bir dize olacağından, parolayı sistemin panosuna kopyalamak için writeText() yöntemini kullanabiliriz. Daha sonra ana görünüm HTML'mizi güncelleyebilir ve üzerinde copy-password yönergesi bulunan kopyala düğmesini ekleyerek parola dizisinin dizinini sağlayabiliriz:

 <a href="#" copy-password="{{$index}}">copy</a>

Şifreleri Kaldırma

Son kullanıcılarımız da, parolaların geçerliliğini yitirmesi durumunda silebilir. Bunu yapmak için tek yapmamız gereken anahtarlık koleksiyonundaki remove() yöntemini çağırmak. Belgenin tamamını 'remove()' yöntemine şu şekilde sağlamamız gerekiyor:

 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); };

Loki.js belgeleri, bir dokümanı kimliğine göre de kaldırabileceğimizi belirtir, ancak beklendiği gibi çalışmıyor gibi görünüyor.

Masaüstü Menüsü Oluşturma

Electron, uygulamalarımıza "yerel" bir kullanıcı deneyimi görünümü ve hissi sağlamak için işletim sistemi masaüstü ortamımızla sorunsuz bir şekilde bütünleşir. Bu nedenle Electron, uygulamamız için karmaşık masaüstü menü yapıları oluşturmaya adanmış bir Menü modülü ile birlikte gelir.

Menü modülü geniş bir konudur ve neredeyse başlı başına bir öğreticiyi hak etmektedir. Bu modülün tüm özelliklerini keşfetmek için Electron'un Masaüstü Ortamı Entegrasyonu eğitimini okumanızı şiddetle tavsiye ederim.

Bu mevcut öğreticinin kapsamı için, özel bir menünün nasıl oluşturulacağını, ona özel bir komut nasıl ekleneceğini ve standart çıkış komutunun nasıl uygulanacağını göreceğiz.

Uygulamamıza Özel Menü Oluşturma ve Atama

Tipik olarak, bir Elektron menüsü için JavaScript mantığı, Ana Sürecimizin tanımlandığı uygulamamızın ana komut dosyasına ait olacaktır. Ancak, onu ayrı bir dosyaya soyutlayabilir ve uzak modül aracılığıyla Menü modülüne erişebiliriz:

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

Basit bir menü tanımlamak için buildFromTemplate() yöntemini kullanmamız gerekecek:

 var appMenu = Menu.buildFromTemplate([ { label: 'Electron', submenu: [{ label: 'Credits', click: function() { alert('Built with Electron & Loki.js.'); } }] } ]);

Dizideki ilk öğe her zaman "varsayılan" menü öğesi olarak kullanılır.

label özelliğinin değeri, varsayılan menü öğesi için pek önemli değildir. Geliştirme modunda her zaman Electron gösterecektir. Oluşturma aşamasında varsayılan menü öğesine nasıl özel bir ad atanacağını daha sonra göreceğiz.

Son olarak, setApplicationMenu() yöntemiyle bu özel menüyü uygulamamız için varsayılan menü olarak atamamız gerekiyor:

 Menu.setApplicationMenu(appMenu);

Klavye Kısayollarını Eşleme

Electron, gerçek klavye kombinasyonlarıyla eşleşen önceden tanımlanmış bir dizi dizi olan "hızlandırıcılar" sağlar, örneğin: Command+A veya Ctrl+Shift+Z .

Command hızlandırıcı, Windows veya Linux'ta çalışmaz. Şifre anahtarlığı uygulamamız için, iki komut sunan bir File menü öğesi eklemeliyiz:

• Şifre Oluştur : Cmd (veya Ctrl) + N ile ekleme görünümünü açın
• Çık : Cmd (veya Ctrl) + Q ile uygulamadan tamamen çıkın

 ... { 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!!! } ] } ...

Anahtar noktaları:

• type özelliği separator olarak ayarlanmış diziye bir öğe ekleyerek görsel bir ayırıcı ekleyebiliriz.
• CmdOrCtrl hızlandırıcı hem Mac hem de PC klavyeleriyle uyumludur
• selector özelliği yalnızca OSX uyumludur!

Uygulamamızı Şekillendirme

Muhtemelen çeşitli kod örnekleri boyunca mdl- ile başlayan sınıf adlarına yapılan referansları fark etmişsinizdir. Bu eğitimin amacı için Material Design Lite UI çerçevesini kullanmayı seçtim, ancak istediğiniz herhangi bir UI çerçevesini kullanmaktan çekinmeyin.

HTML5 ile yapabileceğimiz her şey Electron'da yapılabilir; sadece uygulamanın ikili dosyalarının büyüyen boyutunu ve çok fazla üçüncü taraf kitaplığı kullanırsanız ortaya çıkabilecek performans sorunlarını aklınızda bulundurun.

Dağıtım için Elektron Uygulamalarını Paketleme

Bir Electron uygulaması yaptınız, harika görünüyor, e2e testlerinizi Selenium ve WebDriver ile yazdınız ve dünyaya dağıtmaya hazırsınız!

Ancak yine de onu kişiselleştirmek, varsayılan "Elektron" dışında özel bir ad vermek ve belki de hem Mac hem de PC platformları için özel uygulama simgeleri sağlamak istiyorsunuz.

Gulp ile Bina

Bu günlerde aklımıza gelebilecek her şey için bir Gulp eklentisi var. Tek yapmam gereken Google'a gulp electron yazmak ve kesinlikle bir yudum elektron eklentisi var!

Bu öğreticinin başında ayrıntılı olarak açıklanan klasör yapısı korunduğu sürece, bu eklentinin kullanımı oldukça kolaydır. Değilse, işleri biraz hareket ettirmeniz gerekebilir.

Bu eklenti, diğer herhangi bir Gulp eklentisi gibi kurulabilir:

 $ npm install gulp-electron --save-dev

Ardından Gulp görevimizi şu şekilde tanımlayabiliriz:

 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("")); });

Anahtar noktaları:

• src/ klasörü, Gulpfile.js dosyasının bulunduğu klasörle veya dağıtım klasörüyle aynı klasör olamaz.
• platforms dizisi üzerinden ihracat yapmak istediğimiz platformları tanımlayabiliriz.
• Uygulamamızla paketlenebilmeleri için Electron ikili dosyalarının indirileceği bir cache klasörü tanımlamalıyız.
• Uygulamanın package.json dosyasının içeriğinin packageJson özelliği aracılığıyla gulp görevine iletilmesi gerekir.
• Oluşturulan uygulamaların zip arşivlerini de oluşturmamıza izin veren isteğe bağlı bir packaging özelliği vardır.
• Her platform için tanımlanabilecek farklı bir “platform kaynakları” seti vardır.

Uygulama Simgeleri Ekleme

platformResources özelliklerinden biri, uygulamamız için özel bir simge tanımlamamıza izin veren icon özelliğidir:

 "icon": "keychain.ico"

OS X, .icns dosya uzantısına sahip simgeler gerektirir. .png dosyalarını ücretsiz olarak .ico ve .icns dönüştürmemize izin veren birden fazla çevrimiçi araç vardır.

Çözüm

Bu makalede, Electron'un gerçekte neler yapabileceğinin yalnızca yüzeyini çizdik. Bu araçla gidebileceğiniz bir ilham kaynağı olarak Atom veya Slack gibi harika uygulamaları düşünün.

Umarım bu öğreticiyi faydalı bulmuşsunuzdur, lütfen yorumlarınızı bırakmaktan ve deneyimlerinizi Electron ile paylaşmaktan çekinmeyin!