Electron: Aplikasi Desktop Lintas Platform Menjadi Mudah

Awal tahun ini, Github merilis Atom-Shell, inti dari editor open-source terkenal Atom, dan menamainya menjadi Electron untuk acara khusus.

Electron, tidak seperti pesaing lain dalam kategori aplikasi desktop berbasis Node.js, membawa sentuhan tersendiri ke pasar yang sudah mapan ini dengan menggabungkan kekuatan Node.js (io.js hingga rilis terbaru) dengan Chromium Engine untuk menghadirkan kami yang terbaik dari kedua server dan sisi klien JavaScript.

Bayangkan sebuah dunia di mana kita dapat membangun aplikasi desktop lintas platform yang berkinerja tinggi, berbasis data, didukung tidak hanya oleh repositori modul NPM yang terus berkembang, tetapi juga seluruh registri Bower untuk memenuhi semua kebutuhan sisi klien kami.

Masukkan Elektron.

Dalam tutorial ini, kita akan membangun aplikasi keychain kata sandi sederhana menggunakan Electron, Angular.js dan Loki.js, database yang ringan dan dalam memori dengan sintaks yang familiar untuk pengembang MongoDB.

Kode sumber lengkap untuk aplikasi ini tersedia di sini.

Tutorial ini mengasumsikan bahwa:

• Pembaca telah menginstal Node.js dan Bower di mesin mereka.
• Mereka akrab dengan sintaks kueri seperti Node.js, Angular.js dan MongoDB.

Mendapatkan Barang

Hal pertama yang pertama, kita perlu mendapatkan binari Electron untuk menguji aplikasi kita secara lokal. Kita dapat menginstalnya secara global dan menggunakannya sebagai CLI, atau menginstalnya secara lokal di jalur aplikasi kita. Saya sarankan untuk menginstalnya secara global, sehingga kita tidak perlu melakukannya berulang-ulang untuk setiap aplikasi yang kita kembangkan.

Nanti kita akan belajar bagaimana mengemas aplikasi kita untuk distribusi menggunakan Gulp. Proses ini melibatkan penyalinan binari Electron, dan oleh karena itu tidak masuk akal untuk menginstalnya secara manual di jalur aplikasi kita.

Untuk menginstal Electron CLI, kita dapat mengetikkan perintah berikut di terminal kita:

 $ npm install -g electron-prebuilt

Untuk menguji instalasi, ketik electron -h dan itu akan menampilkan versi Electron CLI.

Pada saat artikel ini ditulis, versi Electron adalah 0.31.2 .

Menyiapkan Proyek

Mari kita asumsikan struktur folder dasar berikut:

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

… di mana: - cache/ akan digunakan untuk mengunduh binari Electron saat membangun aplikasi. - dist/ akan berisi file distribusi yang dihasilkan. - src/ akan berisi kode sumber kita. - src/app.js akan menjadi titik masuk aplikasi kita.

Selanjutnya, kita akan menavigasi ke folder src/ di terminal kita dan membuat file package.json dan bower.json untuk aplikasi kita:

 $ npm init $ bower init

Kami akan menginstal paket yang diperlukan nanti dalam tutorial ini.

Memahami Proses Elektron

Elektron membedakan antara dua jenis proses:

• Proses Utama : Titik masuk aplikasi kita, file yang akan dieksekusi setiap kali kita menjalankan aplikasi. Biasanya, file ini mendeklarasikan berbagai jendela aplikasi, dan secara opsional dapat digunakan untuk menentukan pendengar acara global menggunakan modul IPC Electron.
• Proses Renderer : Pengontrol untuk jendela tertentu dalam aplikasi kita. Setiap jendela membuat Proses Renderernya sendiri.

Untuk kejelasan kode, file terpisah harus digunakan untuk setiap Proses Renderer. Untuk menentukan Proses Utama untuk aplikasi kami, kami akan membuka src/app.js dan menyertakan modul app untuk memulai aplikasi, dan modul browser-window untuk membuat berbagai jendela aplikasi kami (keduanya merupakan bagian dari inti Electron), Dengan demikian:

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

Saat aplikasi benar-benar dimulai, aplikasi akan mengaktifkan acara ready , yang dapat kita ikat. Pada titik ini, kita dapat membuat instance jendela utama aplikasi kita:

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

Poin kunci:

• Kami membuat jendela baru dengan membuat instance baru dari objek BrowserWindow .
• Dibutuhkan objek sebagai argumen tunggal, memungkinkan kita untuk menentukan berbagai pengaturan, di antaranya lebar dan tinggi default jendela.
• Instance jendela memiliki metode loadUrl() , yang memungkinkan kita memuat konten file HTML aktual di jendela saat ini. File HTML dapat berupa lokal atau jarak jauh .
• Instance jendela memiliki metode openDevTools() opsional, yang memungkinkan kita membuka instance Chrome Dev Tools di jendela saat ini untuk tujuan debugging.

Selanjutnya, kita harus mengatur kode kita sedikit. Saya sarankan membuat folder windows/ di folder src/ kita, dan di mana kita dapat membuat subfolder untuk setiap jendela, seperti:

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

… di mana main.controller.js akan berisi logika “sisi server” dari aplikasi kita, dan main.view.js akan berisi logika “sisi klien” dari aplikasi kita.

File main.html hanyalah halaman web HTML5, jadi kita bisa memulainya seperti ini:

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

Pada titik ini, aplikasi kita harus siap dijalankan. Untuk mengujinya, kita cukup mengetikkan yang berikut di terminal kita, di root folder src :

 $ electron .

Kita dapat mengotomatiskan proses ini dengan mendefinisikan skrip start dari file package.son.

Membangun Aplikasi Desktop Rantai Kunci Kata Sandi

Untuk membangun aplikasi gantungan kunci kata sandi, kita membutuhkan: - Cara untuk menambah, membuat, dan menyimpan kata sandi. - Cara mudah untuk menyalin dan menghapus kata sandi.

Membuat dan Menyimpan Kata Sandi

Formulir sederhana sudah cukup untuk memasukkan kata sandi baru. Demi mendemonstrasikan komunikasi antara beberapa jendela di Electron, mulailah dengan menambahkan jendela kedua di aplikasi kita, yang akan menampilkan formulir "sisipkan". Karena kita akan membuka dan menutup jendela ini beberapa kali, kita harus membungkus logika dalam sebuah metode sehingga kita dapat memanggilnya saat dibutuhkan:

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

Poin kunci:

• Kita perlu menyetel properti show ke false di objek opsi dari konstruktor BrowserWindow, untuk mencegah jendela terbuka secara default saat aplikasi dimulai.
• Kita perlu menghancurkan instance BrowserWindow setiap kali jendela menjalankan event tertutup .

Membuka dan Menutup Jendela "Sisipkan"

Idenya adalah untuk dapat memicu jendela "masukkan" ketika pengguna akhir mengklik tombol di jendela "utama". Untuk melakukan ini, kita perlu mengirim pesan dari jendela utama ke Proses Utama untuk menginstruksikannya untuk membuka jendela penyisipan. Kita dapat mencapai ini dengan menggunakan modul IPC Electron. Sebenarnya ada dua varian dari modul IPC:

• Satu untuk Proses Utama, memungkinkan aplikasi untuk berlangganan pesan yang dikirim dari windows.
• Satu untuk Proses Renderer, memungkinkan aplikasi mengirim pesan ke proses utama.

Meskipun saluran komunikasi Electron sebagian besar uni-directional, dimungkinkan untuk mengakses modul IPC Proses Utama dalam Proses Renderer dengan memanfaatkan modul jarak jauh. Selain itu, Proses Utama dapat mengirim pesan kembali ke Proses Renderer tempat kejadian berasal dengan menggunakan metode Event.sender.send() .

Untuk menggunakan modul IPC, kami hanya memerlukannya seperti modul NPM lainnya di skrip Proses Utama kami:

 var ipc = require('ipc');

… dan kemudian ikat ke acara dengan metode on() :

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

Poin Utama:

• Kita bisa menamai event sesuka kita, contohnya sembarang.
• Jangan lupa untuk memeriksa apakah instance BrowserWindow sudah dibuat, jika belum, buat instance.
• Instance BrowserWindow memiliki beberapa metode yang berguna:
  • isClosed() mengembalikan boolean, apakah jendela saat ini dalam keadaan closed atau tidak.
  • isVisible() : mengembalikan boolean, terlepas dari apakah jendela saat ini terlihat atau tidak.
  • show() / hide() : metode praktis untuk menampilkan dan menyembunyikan jendela.

Sekarang kita benar-benar perlu memecat acara itu dari Proses Renderer. Kami akan membuat file skrip baru bernama main.view.js , dan menambahkannya ke halaman HTML kami seperti yang kami lakukan dengan skrip normal:

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

Memuat file skrip melalui tag script HTML memuat file ini dalam konteks sisi klien. Ini berarti, misalnya, variabel global tersedia melalui window.<varname> . Untuk memuat skrip dalam konteks sisi server, kita dapat menggunakan metode require() langsung di halaman HTML kita: require('./main.controller.js'); .

Meskipun skrip dimuat dalam konteks sisi klien , kami masih dapat mengakses modul IPC untuk Proses Renderer dengan cara yang sama seperti yang kami dapat untuk Proses Utama, dan kemudian mengirim acara kami sebagai berikut:

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

Ada juga metode sendSync() yang tersedia, jika kita perlu mengirim acara kita secara sinkron.

Sekarang, yang tersisa untuk kita lakukan untuk membuka jendela "insert" adalah membuat tombol HTML dengan direktif Angular yang cocok di atasnya:

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

Dan tambahkan arahan itu sebagai ketergantungan pengontrol Angular jendela utama:

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

Menghasilkan Kata Sandi

Untuk mempermudah, kita bisa menggunakan modul NPM uuid untuk menghasilkan ID unik yang akan bertindak sebagai kata sandi untuk tujuan tutorial ini. Kami dapat menginstalnya seperti modul NPM lainnya, memintanya di skrip 'Utils' kami dan kemudian membuat pabrik sederhana yang akan mengembalikan ID unik:

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

Sekarang, yang tersisa untuk kita lakukan adalah membuat tombol di tampilan sisipan, dan melampirkan arahan ke sana yang akan mendengarkan acara klik pada tombol dan memanggil metode create():

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

Menyimpan Kata Sandi

Pada titik ini, kami ingin menyimpan kata sandi kami. Struktur data untuk entri kata sandi kami cukup sederhana:

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

Jadi yang benar-benar kita perlukan adalah semacam database dalam memori yang secara opsional dapat menyinkronkan ke file untuk cadangan. Untuk tujuan ini, Loki.js sepertinya kandidat yang ideal. Itu melakukan persis apa yang kita butuhkan untuk tujuan aplikasi ini, dan menawarkan di atasnya fitur Tampilan Dinamis , memungkinkan kita untuk melakukan hal-hal yang mirip dengan modul Agregasi MongoDB.

Tampilan Dinamis tidak menawarkan semua fungsi yang dilakukan modul Agregasi MongodDB. Silakan merujuk ke dokumentasi untuk informasi lebih lanjut.

Mari kita mulai dengan membuat formulir HTML sederhana:

 <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>

Dan sekarang, mari tambahkan logika JavaScript untuk menangani pengeposan dan penyimpanan konten formulir:

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

Poin Utama:

• Pertama kita perlu menginisialisasi database. Proses ini melibatkan pembuatan instance baru dari Objek Loki, menyediakan jalur ke file database sebagai argumen, mencari apakah file cadangan itu ada, membuatnya jika diperlukan (termasuk koleksi 'Keychain'), dan kemudian memuat konten dari file ini di memori.
• Kita dapat mengambil koleksi tertentu dalam database dengan metode getCollection() .
• Objek koleksi memperlihatkan beberapa metode, termasuk metode insert() , memungkinkan kita untuk menambahkan dokumen baru ke koleksi.
• Untuk mempertahankan konten database ke file, objek Loki mengekspos metode saveDatabase() .
• Kami perlu mengatur ulang data formulir dan mengirim acara IPC untuk memberi tahu Proses Utama untuk menutup jendela setelah dokumen disimpan.

Kami sekarang memiliki formulir sederhana yang memungkinkan kami membuat dan menyimpan kata sandi baru. Mari kembali ke tampilan utama untuk membuat daftar entri ini.

Mencantumkan Kata Sandi

Beberapa hal perlu terjadi di sini:

• Kita harus bisa mendapatkan semua dokumen dalam koleksi kita.
• Kami perlu menginformasikan tampilan utama setiap kali kata sandi baru disimpan sehingga dapat menyegarkan tampilan.

Kita dapat mengambil daftar dokumen dengan memanggil metode getCollection() pada objek Loki. Metode ini mengembalikan objek dengan properti yang disebut data , yang hanya merupakan larik dari semua dokumen dalam koleksi itu:

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

Kami kemudian dapat memanggil getDocs() di pengontrol Angular kami dan mengambil semua kata sandi yang disimpan dalam database, setelah kami menginisialisasinya:

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

Sedikit templating Angular, dan kami memiliki daftar kata sandi:

 <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> 

Fitur tambahan yang bagus adalah menyegarkan daftar kata sandi setelah memasukkan yang baru. Untuk ini, kita dapat menggunakan modul IPC Electron. Seperti disebutkan sebelumnya, modul IPC Proses Utama dapat dipanggil dalam Proses Renderer untuk mengubahnya menjadi proses pendengar, dengan menggunakan modul jarak jauh. Berikut adalah contoh cara mengimplementasikannya di main.view.js :

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

Poin Utama:

• Kita perlu menggunakan modul jarak jauh melalui metode require() sendiri untuk meminta modul IPC jarak jauh dari Proses Utama.
• Kami kemudian dapat mengatur Proses Renderer kami sebagai pendengar acara melalui metode on() , dan mengikat fungsi panggilan balik ke acara ini.

Tampilan sisipan kemudian akan bertanggung jawab untuk mengirimkan acara ini setiap kali dokumen baru disimpan:

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

Menyalin Kata Sandi

Biasanya bukan ide yang baik untuk menampilkan kata sandi dalam teks biasa. Sebagai gantinya, kami akan menyembunyikan dan memberikan tombol kenyamanan yang memungkinkan pengguna akhir untuk menyalin kata sandi secara langsung untuk entri tertentu.

Sekali lagi, Electron datang untuk menyelamatkan kami dengan menyediakan modul clipboard dengan metode mudah untuk menyalin dan menempel tidak hanya konten teks, tetapi juga gambar dan kode HTML:

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

Karena kata sandi yang dihasilkan akan berupa string sederhana, kita dapat menggunakan metode writeText() untuk menyalin kata sandi ke clipboard sistem. Kami kemudian dapat memperbarui HTML tampilan utama kami, dan menambahkan tombol salin dengan arahan copy-password di atasnya, memberikan indeks array kata sandi:

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

Menghapus Kata Sandi

Pengguna akhir kami mungkin juga ingin dapat menghapus kata sandi, jika kata sandi menjadi usang. Untuk melakukan ini, yang perlu kita lakukan hanyalah memanggil metode remove() pada koleksi gantungan kunci. Kita perlu menyediakan seluruh dokumen ke metode 'remove()', seperti:

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

Dokumentasi Loki.js menyatakan bahwa kami juga dapat menghapus dokumen dengan id-nya, tetapi tampaknya tidak berfungsi seperti yang diharapkan.

Membuat Menu Desktop

Electron terintegrasi secara mulus dengan lingkungan desktop OS kami untuk memberikan tampilan & nuansa pengalaman pengguna "asli" ke aplikasi kami. Oleh karena itu, Electron dibundel dengan modul Menu, yang didedikasikan untuk membuat struktur menu desktop yang kompleks untuk aplikasi kita.

Modul menu adalah topik yang luas dan hampir layak mendapatkan tutorialnya sendiri. Saya sangat menyarankan Anda membaca tutorial Integrasi Lingkungan Desktop Electron untuk menemukan semua fitur modul ini.

Untuk cakupan tutorial saat ini, kita akan melihat cara membuat menu kustom, menambahkan perintah kustom ke dalamnya, dan menerapkan perintah berhenti standar.

Membuat & Menetapkan Menu Kustom ke Aplikasi Kami

Biasanya, logika JavaScript untuk menu Elektron akan berada di file skrip utama aplikasi kami, tempat Proses Utama kami ditentukan. Namun, kami dapat mengabstraksikannya ke file terpisah, dan mengakses modul Menu melalui modul jarak jauh:

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

Untuk mendefinisikan menu sederhana, kita perlu menggunakan metode buildFromTemplate() :

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

Item pertama dalam array selalu digunakan sebagai item menu "default".

Nilai properti label tidak terlalu menjadi masalah untuk item menu default. Dalam mode dev akan selalu menampilkan Electron . Kita akan melihat nanti bagaimana menetapkan nama kustom ke item menu default selama fase build.

Terakhir, kita perlu menetapkan menu kustom ini sebagai menu default untuk aplikasi kita dengan metode setApplicationMenu() :

 Menu.setApplicationMenu(appMenu);

Memetakan Pintasan Keyboard

Electron menyediakan "akselerator", satu set string yang telah ditentukan sebelumnya yang memetakan ke kombinasi keyboard yang sebenarnya, misalnya: Command+A atau Ctrl+Shift+Z .

Akselerator Command tidak berfungsi di Windows atau Linux. Untuk aplikasi gantungan kunci kata sandi kami, kami harus menambahkan item menu File , menawarkan dua perintah:

• Create Password : buka tampilan insert dengan Cmd (atau Ctrl) + N
• Keluar : keluar dari aplikasi sama sekali dengan Cmd (atau Ctrl) + Q

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

Poin Utama:

• Kita dapat menambahkan pemisah visual dengan menambahkan item ke array dengan properti type disetel ke separator .
• Akselerator CmdOrCtrl kompatibel dengan keyboard Mac dan PC
• Properti selector hanya kompatibel dengan OSX!

Menata Aplikasi Kami

Anda mungkin memperhatikan berbagai referensi contoh kode untuk nama kelas yang dimulai dengan mdl- . Untuk tujuan tutorial ini saya memilih untuk menggunakan framework UI Material Design Lite, tetapi jangan ragu untuk menggunakan framework UI pilihan Anda.

Apa pun yang dapat kita lakukan dengan HTML5 dapat dilakukan di Electron; hanya perlu diingat ukuran binari aplikasi yang semakin besar, dan masalah kinerja yang mungkin terjadi jika Anda menggunakan terlalu banyak perpustakaan pihak ketiga.

Pengemasan Aplikasi Elektron untuk Distribusi

Anda membuat aplikasi Electron, itu tampak hebat, Anda menulis tes e2e Anda dengan Selenium dan WebDriver, dan Anda siap untuk mendistribusikannya ke seluruh dunia!

Tetapi Anda tetap ingin mempersonalisasikannya, memberinya nama khusus selain "Electron" default, dan mungkin juga menyediakan ikon aplikasi khusus untuk platform Mac dan PC.

Membangun dengan Gulp

Saat ini, ada plugin Gulp untuk apa pun yang dapat kita pikirkan. Yang harus saya lakukan adalah mengetik gulp electron di Google, dan tentu saja ada plugin gulp-electron!

Plugin ini cukup mudah digunakan selama struktur folder yang dirinci di awal tutorial ini dipertahankan. Jika tidak, Anda mungkin harus memindahkan barang sedikit.

Plugin ini dapat diinstal seperti plugin Gulp lainnya:

 $ npm install gulp-electron --save-dev

Dan kemudian kita dapat mendefinisikan tugas Gulp kita sebagai berikut:

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

Poin Utama:

• folder src/ tidak boleh sama dengan folder tempat Gulpfile.js berada, atau folder yang sama dengan folder distribusi.
• Kita dapat menentukan platform yang ingin kita ekspor melalui array platforms .
• Kita harus menentukan folder cache , tempat binari Electron akan diunduh sehingga dapat dikemas dengan aplikasi kita.
• Isi file package.json aplikasi harus diteruskan ke tugas gulp melalui properti packageJson .
• Ada properti packaging opsional, yang memungkinkan kami juga membuat arsip zip dari aplikasi yang dihasilkan.
• Untuk setiap platform, ada kumpulan “sumber daya platform” yang berbeda yang dapat ditentukan.

Menambahkan Ikon Aplikasi

Salah satu properti platformResources adalah properti icon , yang memungkinkan kita untuk menentukan ikon kustom untuk aplikasi kita:

 "icon": "keychain.ico"

OS X memerlukan ikon dengan ekstensi file .icns . Ada beberapa alat online yang memungkinkan kita mengonversi file .png menjadi .ico dan .icns secara gratis.

Kesimpulan

Pada artikel ini kami hanya menggores permukaan dari apa yang sebenarnya dapat dilakukan oleh Electron. Pikirkan aplikasi hebat seperti Atom atau Slack sebagai sumber inspirasi tempat Anda dapat menggunakan alat ini.

Saya harap Anda menemukan tutorial ini bermanfaat, silakan tinggalkan komentar Anda dan bagikan pengalaman Anda dengan Electron!