Hướng dẫn đầy đủ và tài nguyên học tập
JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất. Thực tế là nó có thể được sử dụng cho cả phát triển phụ trợ và giao diện người dùng đã khiến nó trở thành con cưng của nhiều người.
JavaScript có nhiều thư viện và khung mở rộng các trường hợp sử dụng của nó ngoài JavaScript thuần túy (đơn giản).
Electron.js là một khung nguồn mở mạnh mẽ mang đến cho các nhà phát triển web khả năng phát triển các ứng dụng gốc bằng các kỹ năng hiện có của họ. Bài viết này sẽ hướng dẫn bạn về Electron.js và cách sử dụng nó để thúc đẩy ý tưởng tuyệt vời tiếp theo của bạn.
điện tử JS
Electron JS là một khung mà các nhà phát triển có thể sử dụng để tạo các ứng dụng dành cho máy tính để bàn bằng HTML, CSS và JavaScript. Electron JS được tạo và duy trì bởi GitHub.
Khung này là sự pha trộn giữa Node.JS và Chromium, cho phép người dùng duy trì một cơ sở mã JavaScript và phát triển các ứng dụng máy tính để bàn đa nền tảng có thể hoạt động trên Windows, macOS và Linux.
Câu chuyện về Electron.js bắt đầu vào tháng 1 năm 2013. Ý tưởng ban đầu là tạo một trình soạn thảo văn bản đa nền tảng có thể hoạt động với JavaScript, HTML và CSS.
Electron.js ban đầu được đặt tên là Atom Shell và trở thành nguồn mở vào năm 2014. Sau đó, dự án được đổi tên thành Electron vào tháng 4 năm 2015 và API đầu tiên của nó được phát hành vào năm 2016.
Các tính năng của ElectronJS
- Tương thích với tất cả các thư viện và khung JavaScript. Vue.js, Angular và React.js chỉ là những ví dụ về khung JavaScript mà các nhà phát triển có thể sử dụng cùng với Electron JS. Khả năng tương thích này giúp bạn dễ dàng sử dụng các tính năng/chức năng của các thư viện và khung này khi tạo ứng dụng Electron.
- Khung tái sử dụng. Phục vụ cho các nhu cầu khác nhau của khách hàng có thể tốn kém. Điểm hay của Electron JS là nó có thể được sử dụng cho cả ứng dụng web và máy tính để bàn. Cơ sở mã duy nhất có nghĩa là nó cũng có thể được sử dụng trên các hệ điều hành khác nhau.
- Có quyền truy cập vào các API gốc. Các nhà phát triển làm việc trên Electron JS có quyền truy cập vào các API gốc của hệ điều hành mà họ đang vận hành. Do đó, các nhà phát triển có thể tạo các ứng dụng dành cho máy tính để bàn có quyền truy cập tương tự vào chức năng cấp thấp, chẳng hạn như hiển thị thông báo.
- Hỗ trợ công nghệ web. Electron JS có thể thích ứng, vì các nhà phát triển không cần học một ngôn ngữ lập trình mới để phát triển ứng dụng. Do đó, điều đó có nghĩa là nếu bạn hiểu một gói ngôn ngữ nhất định mà bạn đã sử dụng để tạo các ứng dụng web, thì bạn cũng có thể sử dụng nó để tạo một ứng dụng dành cho máy tính để bàn.
- Mã và quản lý ứng dụng. Bạn không cần duy trì các nhóm khác nhau để duy trì các ứng dụng và mã cho các hệ điều hành khác nhau. Electron JS cho phép bạn duy trì cùng một cơ sở mã cho các hệ điều hành Linux, Windows và Mac.
- Dễ dàng xây dựng/triển khai. Trình quản lý gói Electron giúp các nhà phát triển đóng gói thành các gói tương ứng. Do đó, bạn có thể phát hành ứng dụng máy tính để bàn Linux, Mac và Windows từ cùng một cơ sở mã bằng trình quản lý gói này.
Kiến trúc Electron JS
Kiến trúc của Electron rất giống với kiến trúc của một trình duyệt web hiện đại vì nó kế thừa kiến trúc đa tiến trình từ Chromium.
Kiến trúc của Electron bao gồm Công cụ JavaScript V8, Node.JS và Libchromiumcontent.
- Node.JS– một thời gian chạy JavaScript mã nguồn mở chạy trên công cụ JavaScript V8. Node.JS cho phép các nhà phát triển chạy JavaScript bên ngoài cửa sổ trình duyệt. Node.JS cũng cho phép người dùng thực thi mã JavaScript thô thông qua trình bao tương tác của nó.
- Libchromiumcontent- thư viện kết xuất Chromium là mã nguồn mở và được duy trì bởi Google Chrome. Chrome có giao diện người dùng tối giản và sử dụng nháy mắt làm công cụ bố cục và V8 làm công cụ JavaScript.
- V8 JavaScript Engine– một công cụ JavaScript mã nguồn mở được viết bằng C++ và JavaScript và được phát triển bởi Google.
#1. Node.js
Để bắt đầu với Electron JS, bạn cần cài đặt Node.js trên máy cục bộ của mình.
Chọn phiên bản nút phù hợp tùy thuộc vào hệ điều hành bạn đang chạy trên máy tính của mình.
Kiểm tra xem Node.js đã được cài đặt đúng chưa bằng cách chạy các lệnh này;
node -v
npm -v
Nếu được cài đặt chính xác, các lệnh này sẽ hiển thị phiên bản nút và npm tương ứng.
#2. Dòng lệnh
Cách bạn truy cập dòng lệnh sẽ phụ thuộc vào hệ điều hành của bạn.
- Linux sẽ phụ thuộc vào bản phân phối.
- Windows: PowerShell hoặc Dấu nhắc lệnh.
- macOS: Thiết bị đầu cuối.
Một số trình chỉnh sửa mã, chẳng hạn như Visual Studio Code, đi kèm với một thiết bị đầu cuối tích hợp.
#3. Trình chỉnh sửa mã
Bạn cần một trình chỉnh sửa mã để viết mã Electron JS của mình. Visual Studio Code là một trong những thứ tốt nhất bạn có thể dùng thử.
Cách cài đặt ElectronJS
Bước 1: Tạo dự án node.js.
Sử dụng các lệnh này để bắt đầu;
mkdir my-electron-app && cd my-electron-app
npm init
Lệnh npm init sẽ nhắc bạn điền vào một số trường, chẳng hạn như tên, điểm vào và mô tả của ứng dụng.
Bạn có thể chọn tên mặc định của thư mục làm tên ứng dụng của mình. Tuy nhiên, hãy nhớ đặt điểm vào ứng dụng của bạn là main.js.
Các trường như tác giả và mô tả có thể nhận bất kỳ giá trị nào. Gói.json của bạn sẽ trông giống như thế này sau khi bạn hoàn thành các bước sau:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
Bước 2: Cài đặt điện tử
Sử dụng lệnh này;
npm install --save-dev electron
Bước 3: Thêm lệnh ‘bắt đầu’ vào gói.json của bạn
{
"scripts": {
"start": "electron ."
}
}
Bước 4: Bắt đầu ứng dụng của bạn
Sử dụng lệnh này để khởi động ứng dụng của bạn ở chế độ phát triển
npm start
Quy trình làm việc của Electron JS
Chúng tôi sẽ tiếp tục xây dựng ứng dụng từ thiết lập mà chúng tôi vừa thực hiện ở trên. Một ứng dụng Electron có hai loại quy trình; chính và trình kết xuất.
Quy trình chính
Tập lệnh chính là điểm vào của bất kỳ ứng dụng điện tử nào. Ứng dụng sẽ chạy trong môi trường Node.js đầy đủ. Electron sẽ tìm tập lệnh chính trong tệp pack.json mà bạn đã định cấu hình trong quá trình giàn giáo ứng dụng.
Tạo main.js trong thư mục gốc để khởi tạo tập lệnh chính. Bạn có thể thực hiện thủ công hoặc sử dụng lệnh này;
touch main.js
Bạn có thể thêm đoạn mã sau vào main.js
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Các trang web trong Electron có thể được tải từ một địa chỉ web từ xa hoặc tệp HTML cục bộ. Chúng tôi sẽ sử dụng tệp HTML cục bộ cho mục đích trình diễn.
Tạo một tệp index.html trong thư mục gốc của bạn. Mã cho index.html luôn được cung cấp nhưng bạn có thể lấy mã này làm mã khởi đầu của mình;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer!</h1> <p>👋</p> <p id="info"></p> </body> <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script> </html>
quy trình kết xuất
Trình kết xuất hiển thị nội dung web. Tập lệnh tải trước đi kèm với mã thực thi trong quy trình kết xuất trước khi cần bắt đầu tải nội dung web.
Tạo preload.js trên thư mục gốc của bạn và thêm mã này;
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Chạy máy chủ phát triển bằng cách sử dụng npm start và đây là những gì sẽ được hiển thị
Ứng dụng ví dụ: Electron JS
#1. Ứng dụng máy tính để bàn Slack
Slack là một trong những công cụ cộng tác từ xa phổ biến nhất. Người dùng có thể gửi và nhận tin nhắn, thực hiện cuộc gọi và chia sẻ tệp bằng ứng dụng này. Slack có cả ứng dụng dựa trên web và máy tính để bàn trên hệ điều hành Mac, Linux và Windows. Ứng dụng dành cho máy tính để bàn của Slack sử dụng công cụ Chromium và Node.js để hiển thị mã chất lượng cao.
#2. Ứng dụng máy tính để bàn WordPress
WordPress là hệ thống quản lý nội dung lớn nhất. Việc bạn có thể khởi chạy một trang web ngay cả khi không có kỹ năng viết mã cơ bản đã thu hút nhiều người dùng. WordPress có thể được truy cập qua trình duyệt và thông qua các ứng dụng dành cho máy tính để bàn trên Mac, Linux và Windows. Máy tính để bàn WordPress được tân trang lại sử dụng Electron JS.
#3. Ứng dụng máy tính để bàn WhatsApp
WhatsApp là một trong những ứng dụng nhắn tin phổ biến nhất trong thế giới hiện đại, vì nó được sử dụng bởi hơn 2 tỷ người. WhatsApp ban đầu được thiết kế như một ứng dụng dành cho thiết bị di động nhưng hiện đã chuyển đổi thành một nền tảng thiết bị chéo. Máy tính để bàn WhatsApp sử dụng Electron JS và có sẵn trên các hệ điều hành chính.
#4. Mã phòng thu trực quan
Visual Studio Code, thuộc sở hữu của Microsoft, là một trong những trình soạn thảo mã phổ biến nhất. Visual Studio Code hỗ trợ HTML, CSS và mã được viết bằng nhiều ngôn ngữ lập trình khác nhau như JavaScript, Python, PHP, Java và Ruby, có thể kể đến một số ngôn ngữ. Ứng dụng dành cho máy tính để bàn, được tạo bằng Electron JS, có sẵn cho các hệ điều hành Windows, Mac và Linux.
Tài nguyên học tập: Electron JS
#1. Tài liệu chính thức của Electronjs
Tài liệu Electronjs được tạo và duy trì bởi Electronjs.org. Bạn sẽ tìm hiểu Electron JS là gì, cách thiết lập ứng dụng Electron đầu tiên của mình và cách xây dựng ứng dụng máy tính để bàn đa nền tảng bằng các công nghệ khác nhau. Tài liệu luôn được cập nhật bất cứ khi nào một cải tiến hoặc một tính năng mới được giới thiệu.
#2. Master Electron: Ứng dụng dành cho máy tính để bàn với HTML, JavaScript & CSS
Master Electron là khóa học trả phí trên Udemy giới thiệu cho bạn về Electron JS. Bạn sẽ tìm hiểu cách tạo ứng dụng máy tính để bàn cho các hệ điều hành khác nhau, chẳng hạn như Mac, Linux và Windows. Master Electron cũng là tài nguyên hoàn hảo nếu bạn muốn hiểu toàn bộ quy trình API Electron.
#3. Hướng dẫn phản ứng điện tử
Electron React là khóa học trả phí trên Udemy hướng dẫn các nhà phát triển cách tạo ứng dụng Electron bằng React.js. React là một trong những thư viện JavaScript nổi tiếng nhất và được tạo bởi Meta (trước đây là Facebook).
kết thúc
Electron JS là một thư viện JavaScript tuyệt vời để tạo các ứng dụng dành cho máy tính để bàn trong một thế giới hiện đại, nơi các ứng dụng đa nền tảng phải được chấp nhận. Thực tế là bạn có thể sử dụng HTML, CSS và JavaScript có nghĩa là các nhà phát triển không cần phải học các công nghệ mới để tạo các ứng dụng như vậy. Sự hiện diện của một cộng đồng lớn và hỗ trợ cũng là một điểm cộng, vì bạn luôn được đảm bảo hỗ trợ.
Bạn cũng có thể khám phá một số khung JavaScript tốt nhất để xây dựng một ứng dụng hiện đại trong thời gian ngắn hơn.
