Tìm hiểu kiến thức cơ bản về Electron, khuôn khổ do GitHub xây dựng, cung cấp năng lượng cho rất nhiều ứng dụng đa nền tảng sáng tạo và rất phổ biến
Electron là một mã nguồn mở và công cụ miễn phí để xây dựngứng dụng máy tính để bàn đa nền tảngvới JS, HTML và CSS, được xây dựng bởi GitHub
Nó rất phổ biến và các ứng dụng cực kỳ thành công sử dụng nó, bao gồm VS Code, Slack, Discord và nhiều ứng dụng khác.
Electron là một dự án lớn đã cách mạng hóa việc phát triển ứng dụng dành cho máy tính để bàn gốc, bằng cách biến nó thành một quy trình dựa trên JavaScript.
Xin lưu ý rằng: có thể viết các ứng dụng máy tính để bàn dựa trên JavaScript ngay cả trước Electron, với các công cụ khác, nhưng Electron đã làm cho nó trở nên phổ biến hơn nhiều.
Và đặc biệt Electron được phép tạo các ứng dụng máy tính để bàn đa nền tảng. Trước đây, không có công cụ nào có thể cho phép bạn chạy cùng một ứng dụng ở mọi nơi.
Cho đến năm 2014, khi Electron được phát hành.
Nhìn nhanh vào bên trong Electron
Electron về cơ bản đang đóng gói thư viện kết xuất Chromium và Node.js (Chromium là dự án nguồn mở do Google thực hiện, trên đó họ xây dựng trình duyệt Chrome).
Bạn có cả quyền truy cập vào canvas được cung cấp bởi Chromium, chạy công cụ JavaScript V8 và sử dụng bất kỳ gói Node.js nào và chạy mã Node.js của riêng bạn.
Đó là một loại Node.js dành cho máy tính để bàn, nếu bạn muốn. Nó không cung cấp bất kỳ loại phần tử GUI nào, mà cho phép bạn tạo giao diện người dùng bằng HTML, CSS và JavaScript.
Electron hướng tới mục tiêu nhanh, kích thước nhỏ và mỏng nhất có thể, nhưng vẫn cung cấp các tính năng cốt lõi mà tất cả các ứng dụng có thể dựa vào.
Loại ứng dụng nào bạn có thể tạo bằng Electron
Bạn có thể tạo nhiều loại ứng dụng khác nhau, bao gồm:
- ứng dụng thông thường, có biểu tượng thanh công cụ và cửa sổ
- ứng dụng thanh menu, không có bất kỳ biểu tượng thanh công cụ nào
- daemon
- tiện ích dòng lệnh
Một bộ sưu tập tốt các ứng dụng Electron có sẵn trên trang web chính thức:https://electronjs.org/apps. Với Electron, bạn có thể tạo ứng dụng và xuất bản chúng trên Windows và Mac App Store.
Ứng dụng Electron APIs
Bạn có thểtải xuống ứng dụng Electron API Demos, là một ứng dụng dành cho máy tính để bàn mẫu chính thức được xây dựng bằng Electron.
Ứng dụng này khá thú vị và nó cho phép bạn thử nghiệm với một số tính năng của Electron. Đây là mã nguồn mở và mã có sẵn tạihttps://github.com/electron/electron-quick-start.
Cách tạo ứng dụng Electron đầu tiên của bạn
Đầu tiên, tạo một thư mục mới trên hệ thống tệp của bạn và chạy vào đó:
npm init -y
để tạo ra mộtpackage.json
tập tin:
{
"name": "testelectron",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Thêm dòng này vàoscripts
phần:
"scripts": {
"start": "electron ."
}
Bây giờ cài đặt Electron:
npm install -D electron
Electron hiện có thể được bắt đầu bằng
npm start
Tuy nhiên, nếu bạn làm vậy, bạn sẽ thấy một lỗi thông báo rằng không cóindex.js
, đó là những gì chúng tôi đã viết trongpackage.json
tệp để trở thành điểm khởi đầu chính của ứng dụng của chúng tôi:
Ứng dụng Hello World Electron GUI!
Hãy tạo một ứng dụng hiển thị Hello World trong một cửa sổ.
Tạo 2 tệp,main.js
:
const { app, BrowserWindow } = require('electron')
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
})
// and load the index.html of the app.
win.loadFile(‘index.html’)
}
app.whenReady().then(createWindow)
vàindex.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node
<script>
document.write(process.versions.node)
</script>
, Chrome
<script>
document.write(process.versions.chrome)
</script>
, and Electron
<script>
document.write(process.versions.electron)
</script>
.
</body>
</html>
Bây giờ chạy lạiyarn start
và cửa sổ này sẽ hiển thị:
Đây là ứng dụng một cửa sổ rất đơn giản và khi bạn đóng cửa sổ này, ứng dụng sẽ thoát.
Giúp cuộc sống của nhà phát triển ứng dụng dễ dàng hơn
Electron nhằm mục đích làm cho cuộc sống của nhà phát triển dễ dàng hơn. Các ứng dụng có rất nhiều vấn đề chung. Họ cần thực hiện những thứ mà các API gốc đôi khi phức tạp hơn một chút mà người ta có thể tưởng tượng.
Electron cung cấp một cách dễ dàng đểquản lý Mua hàng trong ứng dụng, Thông báo, Kéo và Thả, quản lý phím tắt và hơn thế nữa.
Nó cũng cung cấp mộtdịch vụ lưu trữ để cập nhật ứng dụng, để làm cho việc cập nhật ứng dụng của bạn đơn giản hơn nhiều so với việc bạn phải tự xây dựng dịch vụ chẳng hạn.
Các hướng dẫn khác dành cho devtools:
- Giới thiệu về Yeoman
- Bower, trình quản lý gói trình duyệt
- Giới thiệu về thử nghiệm giao diện người dùng
- Sử dụng node-webkit để tạo Ứng dụng trên máy tính để bàn
- VS Code: sử dụng cài đặt dành riêng cho ngôn ngữ
- Giới thiệu về Webpack
- Hướng dẫn ngắn gọn và đơn giản về Babel
- Giới thiệu về Yarn
- Tổng quan về Công cụ phát triển trình duyệt
- Định dạng mã của bạn với Prettier
- Giữ mã của bạn sạch sẽ với ESLint
- Danh sách các mẹo và thủ thuật thú vị dành cho Chrome DevTools
- Kiểm tra JavaScript với Jest
- Cách sử dụng mã Visual Studio
- Giới thiệu về Electron
- Bưu kiện, một gói web đơn giản hơn
- Tham chiếu Emmet cho HTML
- Công cụ JavaScript V8
- Cấu hình mã VS
- Định cấu hình dòng lệnh macOS
- Cách tắt quy tắc ESLint
- Cách mở VS Code từ dòng lệnh
- Cách thiết lập tải lại nóng trên Electron