เมื่อต้นปีที่ผ่านมา Github ได้เปิดตัว Atom-Shell ซึ่งเป็นแกนหลักของโปรแกรมแก้ไขโอเพนซอร์สที่มีชื่อเสียง อะตอม และเปลี่ยนชื่อเป็น อิเล็กตรอน สำหรับโอกาสพิเศษ

Electron ซึ่งแตกต่างจากคู่แข่งรายอื่นในประเภทของแอปพลิเคชันเดสก์ท็อปที่ใช้ Node.js นำความแปลกใหม่มาสู่ตลาดที่มีชื่อเสียงนี้โดยการรวมพลังของ Node.js io.js จนถึงรุ่นล่าสุด) ด้วยไฟล์ Chromium Engine เพื่อนำเสนอสิ่งที่ดีที่สุดของทั้งเซิร์ฟเวอร์และ JavaScript ฝั่งไคลเอ็นต์

ลองนึกภาพโลกที่เราสามารถสร้างแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์มที่ขับเคลื่อนด้วยข้อมูลซึ่งขับเคลื่อนโดยไม่เพียง แต่พื้นที่เก็บข้อมูลที่เพิ่มขึ้นเรื่อย ๆ ของโมดูล NPM เท่านั้น แต่ยังรวมถึงรีจิสตรี Bower ทั้งหมดเพื่อตอบสนองความต้องการฝั่งไคลเอ็นต์ทั้งหมดของเรา

ป้อน อิเล็กตรอน .

การสร้างแอปเดสก์ท็อปข้ามแพลตฟอร์มด้วยอิเล็กตรอน ทวีต

ในบทช่วยสอนนี้เราจะสร้างแอปพลิเคชั่นพวงกุญแจรหัสผ่านง่ายๆโดยใช้ Electron, Angular.js และ Loki.js ซึ่งเป็นฐานข้อมูลน้ำหนักเบาและอยู่ในหน่วยความจำพร้อมไวยากรณ์ที่คุ้นเคยสำหรับ นักพัฒนา MongoDB .

มีซอร์สโค้ดแบบเต็มสำหรับแอปพลิเคชันนี้ ที่นี่ .

บทช่วยสอนนี้อนุมานว่า:

• เครื่องอ่านมี Node.js และ Bower ติดตั้งอยู่ในเครื่อง
• พวกเขาคุ้นเคยกับ Node.js, Angular.js และ MongoDB-like query syntax

การรับสินค้า

ก่อนอื่นเราจะต้องได้รับอิเล็กตรอนไบนารีเพื่อทดสอบแอปของเราในเครื่อง เราสามารถติดตั้งได้ทั่วโลกและใช้เป็น 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 ของตัวเอง

เพื่อความชัดเจนของโค้ดควรใช้ไฟล์แยกต่างหากสำหรับแต่ละกระบวนการ 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 Tools ในหน้าต่างปัจจุบันเพื่อวัตถุประสงค์ในการดีบัก

ต่อไปเราควรจัดระเบียบรหัสของเราเล็กน้อย ฉันขอแนะนำให้สร้าง 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

การสร้างแอปเดสก์ท็อปพวงกุญแจรหัสผ่าน

ในการสร้างแอปพลิเคชันพวงกุญแจรหัสผ่านเราต้องการ: - วิธีเพิ่มสร้างและบันทึกรหัสผ่าน - วิธีที่สะดวกในการคัดลอกและลบรหัสผ่าน

การสร้างและบันทึกรหัสผ่าน

แบบฟอร์มง่ายๆก็เพียงพอที่จะใส่รหัสผ่านใหม่ เพื่อประโยชน์ในการสาธิตการสื่อสารระหว่างหน้าต่างหลายบานใน 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 เมื่อใดก็ตามที่หน้าต่างเริ่มทำงาน ปิด เหตุการณ์.

การเปิดและปิดหน้าต่าง 'แทรก'

แนวคิดคือสามารถทริกเกอร์หน้าต่าง 'แทรก' ได้เมื่อผู้ใช้คลิกปุ่มในหน้าต่าง 'หลัก' ในการดำเนินการนี้เราจะต้องส่งข้อความจากหน้าต่างหลักไปยังกระบวนการหลักเพื่อสั่งให้เปิดหน้าต่างแทรก เราสามารถบรรลุสิ่งนี้ได้โดยใช้โมดูล IPC ของ Electron โมดูล IPC มีอยู่สองรูปแบบ:

• หนึ่งสำหรับ กระบวนการหลัก ทำให้แอปสมัครรับข้อความที่ส่งจาก windows
• หนึ่งสำหรับ กระบวนการ Renderer อนุญาตให้แอปส่งข้อความไปยังกระบวนการหลัก

แม้ว่าช่องทางการสื่อสารของ Electron ส่วนใหญ่จะเป็นแบบทิศทางเดียว แต่ก็สามารถเข้าถึงโมดูล IPC ของกระบวนการหลักในกระบวนการ Renderer ได้โดยใช้ประโยชน์จาก ระยะไกล โมดูล. นอกจากนี้กระบวนการหลักยังสามารถส่งข้อความกลับไปที่ Renderer Process ซึ่งเหตุการณ์เกิดขึ้นโดยใช้ไฟล์ 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 มีวิธีการที่เป็นประโยชน์:
  • ถูกปิด() ส่งคืนบูลีนไม่ว่าหน้าต่างจะอยู่ใน closed หรือไม่ สถานะ.
  • isVisible () : ส่งคืนบูลีนไม่ว่าจะมองเห็นหน้าต่างในขณะนี้หรือไม่ก็ตาม
  • แสดงซ่อน() : วิธีอำนวยความสะดวกในการแสดงและซ่อนหน้าต่าง

ตอนนี้เราจำเป็นต้องเริ่มเหตุการณ์นั้นจากกระบวนการ 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 ที่ตรงกัน:

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' ของเราจากนั้นสร้างโรงงานอย่างง่ายที่จะส่งคืน ID เฉพาะ:

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

มุมมองแบบไดนามิกไม่มีฟังก์ชันทั้งหมดที่โมดูล Aggregation ของ 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 โดยจัดเตรียมพา ธ ไปยังไฟล์ฐานข้อมูลเป็นอาร์กิวเมนต์ค้นหาว่ามีไฟล์สำรองอยู่หรือไม่สร้างขึ้นหากต้องการ (รวมถึงคอลเล็กชัน 'พวงกุญแจ') จากนั้นโหลดเนื้อหาของ ไฟล์นี้ในหน่วยความจำ
• เราสามารถดึงคอลเล็กชันเฉพาะในฐานข้อมูลด้วย 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 () ในตัวควบคุมเชิงมุมของเราและดึงรหัสผ่านทั้งหมดที่เก็บไว้ในฐานข้อมูลหลังจากที่เราเริ่มต้น:

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

Angular templating เล็กน้อยและเรามีรายการรหัสผ่าน:

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

การคัดลอกรหัสผ่าน

โดยปกติไม่ควรแสดงรหัสผ่านเป็นข้อความธรรมดา แต่เราจะซ่อนและจัดเตรียมปุ่มอำนวยความสะดวกเพื่อให้ผู้ใช้สามารถคัดลอกรหัสผ่านสำหรับรายการเฉพาะได้โดยตรง

ข้อใดไม่ใช่เครื่องมือหรือเทคนิคทั่วไปที่ใช้ในการออกแบบที่ตอบสนอง

ที่นี่อีกครั้ง 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); }; วิธีการรวบรวมพวงกุญแจ เราจำเป็นต้องให้ทั้งเอกสารกับเมธอด 'remove ()' ดังต่อไปนี้:

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

เอกสารของ Loki.js ระบุว่าเราสามารถลบเอกสารโดยใช้ id ได้ แต่ดูเหมือนจะไม่ทำงานตามที่คาดไว้

การสร้างเมนูเดสก์ท็อป

Electron ผสานรวมกับสภาพแวดล้อมเดสก์ท็อประบบปฏิบัติการของเราได้อย่างราบรื่นเพื่อมอบประสบการณ์ผู้ใช้แบบ“ เนทีฟ” ให้กับแอป ดังนั้นอิเล็กตรอนจึงมาพร้อมกับ โมดูลเมนู ทุ่มเทให้กับการสร้างโครงสร้างเมนูเดสก์ท็อปที่ซับซ้อนสำหรับแอปของเรา

โมดูลเมนูเป็นหัวข้อที่กว้างขวางและเกือบจะสมควรได้รับการสอนด้วยตัวเอง ฉันขอแนะนำให้คุณอ่าน บทแนะนำการรวมสภาพแวดล้อมเดสก์ท็อปของ Electron เพื่อค้นหาคุณสมบัติทั้งหมดของโมดูลนี้

สำหรับขอบเขตของบทช่วยสอนปัจจุบันนี้เราจะดูวิธีสร้างเมนูแบบกำหนดเองเพิ่มคำสั่งที่กำหนดเองและใช้คำสั่งเลิกมาตรฐาน

การสร้างและกำหนดเมนูแบบกำหนดเองให้กับแอปของเรา

โดยทั่วไปตรรกะของ JavaScript สำหรับเมนู Electron จะอยู่ในไฟล์สคริปต์หลักของแอปของเราซึ่งมีการกำหนดกระบวนการหลักของเรา อย่างไรก็ตามเราสามารถสรุปเป็นไฟล์แยกต่างหากและเข้าถึงโมดูลเมนูผ่านโมดูลระยะไกล:

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 สำหรับแอปพลิเคชันพวงกุญแจรหัสผ่านเราควรเพิ่ม ... { 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) + N
• เลิก : ออกจากแอปพร้อมกับ Cmd (หรือ Ctrl) + Q

type

ประเด็นสำคัญ:

• เราสามารถเพิ่มตัวคั่นภาพโดยการเพิ่มรายการลงในอาร์เรย์ด้วย separator ตั้งค่าคุณสมบัติเป็น CmdOrCtrl.
• selector ตัวเร่งความเร็วเข้ากันได้กับคีย์บอร์ดทั้ง Mac และ PC
• mdl- คุณสมบัติรองรับ OSX เท่านั้น!

จัดแต่งทรงผมแอพของเรา

คุณอาจสังเกตเห็นตัวอย่างโค้ดต่างๆที่อ้างอิงถึงชื่อคลาสที่ขึ้นต้นด้วย gulp electron สำหรับจุดประสงค์ของบทช่วยสอนนี้ฉันเลือกใช้ไฟล์ Material Design Lite เฟรมเวิร์ก UI แต่อย่าลังเลที่จะใช้เฟรมเวิร์ก UI ที่คุณเลือก

อะไรก็ตามที่เราสามารถทำได้ด้วย HTML5 สามารถทำได้ใน Electron เพียงแค่คำนึงถึงขนาดที่เพิ่มขึ้นของไบนารีของแอปและปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้นหากคุณใช้ไลบรารีของบุคคลที่สามมากเกินไป

แอพบรรจุอิเล็กตรอนสำหรับการแจกจ่าย

คุณสร้างแอพ Electron มันดูดีมากคุณเขียนการทดสอบ e2e ด้วย ซีลีเนียมและ WebDriver และคุณพร้อมที่จะแจกจ่ายให้กับโลก!

แต่คุณยังคงต้องการปรับแต่งให้เป็นชื่อที่กำหนดเองนอกเหนือจาก 'อิเล็กตรอน' เริ่มต้นและอาจมีไอคอนแอปพลิเคชันที่กำหนดเองสำหรับทั้งแพลตฟอร์ม Mac และ PC

สร้างด้วยอึก

วันนี้มี อึก ปลั๊กอินสำหรับทุกสิ่งที่เราคิดได้ สิ่งที่ฉันต้องทำคือพิมพ์ $ npm install gulp-electron --save-dev ใน Google และมีไฟล์ อึกอิเล็กตรอน เสียบเข้าไป!

ปลั๊กอินนี้เป็นธรรม ง่ายต่อการใช้ ตราบเท่าที่โครงสร้างโฟลเดอร์ที่มีรายละเอียดในตอนต้นของบทช่วยสอนนี้ยังคงอยู่ ถ้าไม่เช่นนั้นคุณอาจต้องย้ายของไปรอบ ๆ

ปลั๊กอินนี้สามารถติดตั้งได้เหมือนกับปลั๊กอิน 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 และ

|_+_|

ฟรี.

สรุป

ในบทความนี้เรามีเพียงรอยขีดข่วนบนพื้นผิวของสิ่งที่อิเล็กตรอนสามารถทำได้ ลองนึกถึงแอปดีๆอย่าง Atom หรือ หย่อน เป็นแหล่งที่มาของแรงบันดาลใจที่คุณสามารถใช้เครื่องมือนี้ได้

ฉันหวังว่าคุณจะพบว่าบทช่วยสอนนี้มีประโยชน์โปรดอย่าลังเลที่จะแสดงความคิดเห็นและแบ่งปันประสบการณ์ของคุณกับ Electron!