Cách tạo ứng dụng máy tính để bàn đa nền tảng đầu tiên với Electron trên macOS

Electron là một khung open-souce để tạo các ứng dụng root với các công nghệ web như JavaScript, HTML và CSS. Nó kết hợp hỗ trợ xây dựng và chạy các ứng dụng đa nền tảng trên Mac, Windows và Linux. Nhiều ứng dụng máy tính để bàn phổ biến đã được xây dựng bằng Electron, chẳng hạn như Visual Studio Code, WhatsApp, Twitch, Slack và Figma.

---

Electron tạo điều kiện thuận lợi cho việc thiết kế các tính năng ứng dụng phức tạp hơn như cập nhật tự động hoặc menu root , nghĩa là các nhà phát triển có thể tập trung vào thiết kế cốt lõi của ứng dụng của họ. Hơn nữa, Electron là một dự án open-souce được GitHub duy trì với một cộng đồng những người đóng góp tích cực.

Trong hướng dẫn này, trước tiên bạn sẽ cài đặt một dự án và cài đặt Electron. Sau đó, bạn sẽ tạo “Hello World!” Đầu tiên của bạn ứng dụng sử dụng Electron và tùy chỉnh nó. Bạn sẽ thực hiện cài đặt cửa sổ duyên dáng và tạo cửa sổ mới cho ứng dụng. Sau khi làm theo tất cả các bước này, bạn sẽ có một ứng dụng máy tính để bàn đa nền tảng Electron trên macOS.

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

• Node.js được cài đặt trên máy của bạn và môi trường phát triển local trên macOS. Làm theo hướng dẫn Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS .

Lưu ý : Hướng dẫn này đã được thử nghiệm trên macOS 10.15.3.

Bước 1 - Tạo dự án

Đầu tiên, bạn sẽ cài đặt Electron vào máy của bạn và tạo folder dự án để xây dựng ứng dụng máy tính để bàn.

Để bắt đầu quá trình cài đặt Electron, hãy tạo folder dự án có tên hello-world và chuyển đến folder bằng các lệnh sau:

mkdir hello-world 
cd hello-world 

Tiếp theo, bạn sẽ bắt đầu dự án của bạn bằng cách tạo file package.json .

Tệp package.json là một phần thiết yếu của ứng dụng Node.js, nó thực hiện những việc sau:

• Liệt kê các gói mà dự án của bạn phụ thuộc vào.
• Chỉ định version gói mà dự án của bạn có thể sử dụng.

Để tạo file package.json , hãy chạy lệnh sau:

npm init 

Bạn sẽ được hỏi một loạt câu hỏi, bắt đầu với tên gói. Bạn có thể sử dụng tên ứng dụng mặc định, hello-world , làm tên gói của bạn.

Sau đó, nó yêu cầu version . Để sử dụng v1.0.0, được cài đặt mặc định, hãy nhấn ENTER .

Sau đó, nó yêu cầu mô tả. Ở đó, bạn có thể thêm mô tả về dự án của bạn , chẳng hạn như: hello world application on Electron.js .

Tiếp theo, đối với điểm nhập, hãy nhập main.js

Tệp được gọi vào thời điểm chạy ban đầu của ứng dụng được gọi là điểm vào. Trong trường hợp này, main.js là điểm nhập của file package.json .

Đối với các câu hỏi còn lại, hãy chấp nhận các giá trị mặc định với ENTER .

Lưu ý: Trong hướng dẫn này, ta để trống tác giả và giấy phép, nhưng bạn có thể sử dụng họ và tên tác giả của bạn tùy thuộc vào trạng thái dự án của bạn. Giấy phép gói của bạn chỉ định cách những người khác được phép sử dụng ứng dụng và bất kỳ hạn chế nào bạn đang đặt lên nó. Các giấy phép phổ biến nhất là: MIT , BSD-2-Khoản , và ISC . Để biết thêm chi tiết, hãy kiểm tra danh sách đầy đủ ID giấy phép SPDX . Từ đó, bạn có thể sử dụng giấy phép ưu tiên cho dự án của bạn , nhưng điều này không bắt buộc.

Sau khi làm theo dấu nhắc , bạn sẽ nhận được kết quả sau:

Output:
. . . Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (hello-world) version: (1.0.0) description: hello world application on Electron.js entry point: (index.js) main.js test command: git repository: keywords: author: license: (ISC) 

Sau đó, bạn cần xác nhận cấu hình:

Output:
About to write to /hello-world/package.json:  {   "name": "hello-world",   "version": "1.0.0",   "description": "hello world application on Electron.js",   "main": "main.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC" }  Is this OK? (yes) 

Đến đây bạn sẽ có file package.json mới được tạo bên trong folder dự án hello-world của bạn. Tiếp theo, bạn sẽ cài đặt Electron.

Bước 2 - Cài đặt Electron

Đến đây bạn sẽ triển khai cấu hình của file package.json và cài đặt Electron.

Đối với điều đó, hãy mở file package.json trong editor bạn muốn :

nano package.json 

Thêm dòng được đánh dấu sau vào bên trong đối tượng scripts :

{   "name": "hello-world",  "version": "1.0.0",   "description": "hello world application on Electron.js",   "main": "main.js",   "scripts": {     "start": "electron .",     "test": "echo \"Error: no test specified\" && exit 1"  },   "author": "",   "license": "ISC" } 

Thuộc tính scripts nhận một đối tượng có nhiều cặp khóa / giá trị như mong muốn. Mỗi một khóa trong các cặp khóa / giá trị này là tên của một lệnh có thể chạy. Giá trị tương ứng của mỗi phím là lệnh thực có thể chạy được. Tập lệnh thường được sử dụng để kiểm tra, xây dựng và sắp xếp hợp lý các lệnh cần thiết.

Trong dự án này, bạn sẽ sử dụng start làm khóa và electron . như một giá trị.

Sau khi hoàn tất, hãy lưu và thoát khỏi file .

Tiếp theo, bạn sẽ cài đặt Electron làm phụ thuộc phát triển trong dự án của bạn . Chạy lệnh sau bên trong folder dự án hello-world của bạn:

npm install --save-dev electron 

Sau khi cài đặt thành công phần phụ thuộc Electron vào dự án của bạn, file package.json sẽ tương tự như sau:

{   "name": "hello-world",   "version": "1.0.0",   "description": "hello world application on Electron.js",   "main": "main.js",   "scripts": {     "start": "electron .",     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC",   "devDependencies": {     "electron": "^8.2.1"   } } 

Thuộc tính phụ thuộc nhận một đối tượng có tên và version cho mỗi phụ thuộc.

Có hai thuộc tính phụ thuộc thuộc tính dependencies và dependencies devDependencies có thể được xác định bằng sự khác biệt chính. Thuộc tính dependencies được sử dụng để xác định các phụ thuộc mà một module cần để môi trường production (thực tế) . devDependencies tính devDependencies thường được sử dụng để xác định các phụ thuộc mà module cần chạy trong quá trình phát triển. Để cài đặt gói dưới dạng devDependencies sử dụng cờ --save-dev bằng lệnh của bạn.

Bạn đã cài đặt Electron vào máy của bạn và tạo folder dự án để xây dựng ứng dụng của bạn. Đến đây bạn sẽ viết ứng dụng hello-world đầu tiên của bạn bằng cách sử dụng khung Electron.

Bước 3 - Viết "Hello World!" Ứng dụng

Hãy bắt đầu viết ứng dụng Electron đầu tiên của bạn.

Electron hoạt động với hai loại quy trình: quy trình chính (phía server ) và quy trình kết xuất (phía client ). Quá trình chính Electron được chạy trên node.js .

Vì vậy, bạn sẽ làm việc với hai file : main.js và index.html .

main.js là quy trình chính của ứng dụng của bạn và index.html là quy trình kết xuất ứng dụng Electron của bạn.

hello-world +-- package.json +-- main.js +-- index.html 

Tiếp theo, ta tạo một cửa sổ trình duyệt thủ công và tải nội dung bằng lệnh gọi Electron API , bạn có thể sử dụng nó để thực thi HTML, CSS, JavaScript, v.v.

Đầu tiên hãy mở file main.js của bạn:

nano main.js 

Sau đó, thêm dòng mã sau để triển khai module BrowserWindow :

const { app, BrowserWindow } = require('electron') 

Điều này chứa hai nhiệm vụ cơ cấu lại được gọi là app và BrowserWindow , được yêu cầu cho một module Electron. Mô-đun Browserwindow được sử dụng để tạo một cửa sổ mới trong ứng dụng Electron của bạn.

Tiếp theo, thêm mã sau vào file main.js của bạn:

. . . function createWindow () {   const mainWindow = new BrowserWindow({     width: 800,     height: 600   })    mainWindow.loadFile('index.html') }  app.whenReady().then(createWindow) 

Bạn thêm chức năng Electron createWindow vào ứng dụng hello-world . Trong chức năng này, bạn tạo một quy trình kết xuất new BrowserWindow và chuyển các tham số width và height . Chiều rộng và chiều cao sẽ cài đặt kích thước cửa sổ ứng dụng.

Phương thức BrowserWindow mainWindow.loadFile() kết xuất một số nội dung vào BrowserWindow . Tệp index.html sẽ tải nội dung.

Quá trình chính sẽ được bắt đầu khi phương thức app.whenReady().then(windowName) đã sẵn sàng. Đến đây, tiến trình chính gọi hàm createWindow . Hàm này tạo ra một quy trình kết xuất mới, hoặc version cửa sổ trình duyệt, với chiều rộng là 800px và chiều cao là 600px. Sau đó, quá trình kết xuất sẽ tiến hành tải nội dung bằng phương thức mainWindow.loadFile('index.html') . Trong hướng dẫn này, bạn sử dụng index.html làm tên file .

Tiếp theo, thêm mã sự kiện sau vào file của bạn:

. . . app.on('window-all-closed', () => {   if (process.platform !== 'darwin') {     app.quit()   } })  app.on('activate', () => {   if (BrowserWindow.getAllWindows().length === 0) {     createWindow()   } }) 

Bạn thêm hai sự kiện hệ thống chính vào dự án— các sự kiện window-all-closed và activate :

• window-all-closed : Thoát ứng dụng khi tất cả các cửa sổ được đóng lại. Trên macOS, các ứng dụng và thanh menu của chúng thường hoạt động cho đến khi user thoát rõ ràng bằng CMD + Q
• activate : Các hành động khác nhau có thể kích hoạt sự kiện này, chẳng hạn như chạy ứng dụng lần đầu tiên, cố chạy lại ứng dụng khi ứng dụng đang chạy hoặc nhấp vào biểu tượng thanh tác vụ hoặc thanh công cụ (macOS) của ứng dụng.

Sau khi thêm các khối mã này, kết quả cuối cùng của file main.js sẽ tương tự như sau:

const { app, BrowserWindow } = require('electron')  function createWindow () {   const mainWindow = new BrowserWindow({     width: 800,     height: 600   })    mainWindow.loadFile('index.html')  }  app.whenReady().then(createWindow)  app.on('window-all-closed', () => {   if (process.platform !== 'darwin') {     app.quit()   } })  app.on('activate', () => {   if (BrowserWindow.getAllWindows().length === 0) {     createWindow()   } }) 

Sau khi hoàn tất, hãy lưu và thoát khỏi file này.

Tiếp theo, tạo và mở index.html :

nano index.html 

Thêm mã sau, mã này được gửi làm kết quả cuối cùng:

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>Hello World!</title>   </head>   <body     <h1>Hello World!</h1>   </body> </html> 

Tại đây bạn tạo một trang web HTML tĩnh. Quá trình kết xuất ứng dụng Electron hỗ trợ tất cả các cú pháp HTML vì Electron sử dụng Chromium cho quá trình kết xuất.

Đến đây bạn đã hoàn tất, bạn có thể chạy ứng dụng của bạn :

npm start 

Bạn sẽ nhận được một cửa sổ ứng dụng làm kết quả .

Bạn đã tạo ứng dụng đa nền tảng đầu tiên của bạn với khung Electron. Tiếp theo, bạn sẽ làm việc với một số tùy chỉnh mà bạn có thể thêm để tăng tính tương tác.

Bước 4 - Tùy chỉnh ứng dụng “Hello World!” “

Đến đây bạn đã hoàn thành cài đặt ban đầu của ứng dụng đa nền tảng đầu tiên của bạn bằng cách sử dụng khung Electron. Hãy xem bạn có thể làm gì khác để cải thiện hành vi root của ứng dụng.

Electron có một số tính năng tích hợp như hộp thoại, tùy chọn cửa sổ, cửa sổ mới, menu, lối tắt, thông báo, thanh cảm ứng, điều khiển phiên, v.v., giúp cải thiện trải nghiệm user đối với ứng dụng trên máy tính của bạn. Hãy thêm một số tính năng để tùy chỉnh ứng dụng hello-world .

Cài đặt cửa sổ duyên dáng của ứng dụng

Khi bạn tải trực tiếp một trang vào cửa sổ, khi khởi động ứng dụng, bạn có thể thấy trang không tải ngay lập tức. Đây không phải là một trải nghiệm tuyệt vời trong các ứng dụng root . Hãy khắc phục sự cố này trong một vài bước.

Để thực hiện việc này, bạn cần ẩn BrowserWindow bằng cách chuyển các tham số cấu hình mới tại thời điểm nó được tạo.

Đối với điều đó, hãy mở file main.js :

nano main.js 

Thêm tham số show: false vào nội dung của đối tượng BrowserWindow :

const mainWindow = new BrowserWindow({    width: 800,    height: 600,    show: false  }) 

Tiếp theo, bạn sẽ thêm một trình nghe mới vào cá thể BrowserWindow bằng cách thêm dòng mã được đánh dấu bên trong thân hàm createWindow . Bạn cũng sẽ thêm các thông số cấu hình mới vào BrowserWindow để thay đổi màu nền của cửa sổ được tạo ban đầu.

Để làm được điều đó, bạn phải thêm dòng mã sau của đối tượng backgroundColor , bên trong hàm BrowserWindow . Hãy thay đổi mã màu theo ý muốn của bạn.

backgroundColor: '#Your hex color code' 

Thêm dòng này giống như mã được đánh dấu sau vào hàm createWindow của bạn:

function createWindow () {  const mainWindow = new BrowserWindow({    width: 800,    height: 600,    show: false,    backgroundColor: '#ffff00'  })  mainWindow.loadFile('index.html')   mainWindow.once('ready-to-show', mainWindow.show)  } 

Để giảm bộ sưu tập rác, bạn cần thực thi trình nghe này một lần bằng cách sử dụng từ khóa once . Do đó, phương thức mainWindow.show chỉ thực thi một lần tại thời điểm chạy ứng dụng này.

Bây giờ hãy lưu file của bạn và chạy ứng dụng của bạn bằng terminal :

npm start 

Ứng dụng của bạn sẽ hiển thị với nền màu vàng.

Cuối cùng, bạn sẽ thấy cửa sổ ứng dụng đang tải một cách duyên dáng.

Tạo một cửa sổ mới cho ứng dụng

Việc sử dụng nhiều cửa sổ là đặc điểm chung của các ứng dụng từ cơ bản đến nâng cao. Hãy thêm tính năng đó vào ứng dụng mới tạo của bạn.

Electron có thể tạo nhiều quy trình kết xuất (nhiều cửa sổ) từ một quy trình chính duy nhất.

Đầu tiên, mở main.js :

nano main.js 

Tạo một phương thức mới gọi là secWindow và đặt các thông số width và height của cửa sổ mới tạo bằng cách thêm mã được đánh dấu:

function createWindow () { const mainWindow = new BrowserWindow({   width: 800,   height: 600,   show: false,   backgroundColor: '#ffff00' })  const secWindow = new BrowserWindow({   width: 600,   height: 400,  }) . . . } 

Bây giờ tải nội dung vào quy trình kết xuất BrowserWindow mới được tạo. Đến đây, bạn sẽ tải một số nội dung URL (Trang web) từ xa.

Trong hướng dẫn này, bạn đang sử dụng nội dung web https://www.digitalocean.com cho cửa sổ thứ hai của ứng dụng. Vì vậy, trong lần khởi tạo cửa sổ thứ hai secWindow.loadURL , bạn thêm dòng mã sau vào phần thân của hàm createWindow :

 function createWindow () {  const mainWindow = new BrowserWindow({    width: 800,    height: 600,    show: false,    backgroundColor: '#ffff00'  })  const secWindow = new BrowserWindow({    width: 600,    height: 400,  })   mainWindow.loadFile('index.html')   secWindow.loadURL('https://www.digitalocean.com/')   mainWindow.once('ready-to-show', mainWindow.show) } 

Bây giờ lưu và thoát file của bạn và chạy ứng dụng của bạn trong terminal :

npm start 

Bạn sẽ nhận được cửa sổ ban đầu của bạn với nền màu vàng và một ứng dụng mới với URL đã tải.

Bạn đã thực hiện các tùy chỉnh cho ứng dụng mới tạo của bạn để làm cho ứng dụng tương tác hơn với user . Bây giờ đã đến lúc xây dựng ứng dụng Electron của bạn.

Bước 5 - Xây dựng ứng dụng đầu tiên của bạn

Sau khi thêm một số tính năng vào ứng dụng của bạn , bạn cần xây dựng nó cho mục đích phân phối. Trong phần này, bạn sẽ học cách xây dựng ứng dụng cho các nền tảng khác nhau.

Quá trình xây dựng ứng dụng Electron được coi là hơi vất vả vì nó cần rất nhiều công cụ. Tuy nhiên, ở đây bạn sẽ sử dụng công cụ CLI của trình electron-builder cung cấp cách tốt nhất để xây dựng ứng dụng của bạn cho bất kỳ nền tảng nào.

Đầu tiên, bạn sẽ cài đặt các công cụ CLI của trình electron-builder trên phạm vi global . Để thực hiện việc này, hãy chạy lệnh sau:

sudo npm install -g electron-builder 

Lưu ý: Bạn có thể sử dụng npm hoặc yarn để cài đặt bộ tạo electron-builder — không có sự khác biệt đáng chú ý nào về hiệu suất. Nếu bạn có ý định phát triển ứng dụng của bạn trong dài hạn, các nhà production electron-builder khuyên bạn nên sử dụng yarn để tránh các vấn đề tương thích tiềm ẩn. Để cài đặt bằng yarn , bạn cần đảm bảo nó đã được cài đặt trên máy tính của bạn và sau đó chạy yarn add electron-builder --dev để cài đặt bộ tạo electron-builder với yarn .

Sau khi hoàn thành cài đặt trình tạo electron-builder , bạn có thể xác minh sự thành công của nó bằng cách chạy lệnh sau trong terminal của bạn:

electron-builder --version 

Bạn sẽ nhận được version Electron hiện tại trong kết quả của bạn .

Đến đây bạn có thể xây dựng ứng dụng đa nền tảng đầu tiên của bạn . Để thực hiện việc này, hãy mở terminal của bạn và chạy lệnh sau trong folder dự án của bạn:

electron-builder -mwl 

Bạn sử dụng cờ -mwl để tạo các ứng dụng cho macOS, Windows và Linux tương ứng.

Lưu ý: Chỉ user macOS mới có thể xây dựng cho tất cả các nền tảng. User Windows chỉ có thể xây dựng ứng dụng cho nền tảng Windows và Linux. User Linux chỉ có thể xây dựng cho nền tảng Linux. Để biết thêm chi tiết, bạn có thể tham khảo tài liệu .

Để xây dựng các ứng dụng cho các hệ điều hành riêng biệt, hãy sử dụng như sau:

Xây dựng ứng dụng cho macOS :

electron-builder --mac 

Xây dựng ứng dụng cho Windows:

electron-builder --win 

Xây dựng ứng dụng cho Linux :

electron-builder --linux 

Quá trình này mất một chút thời gian trong khi download các phụ thuộc và ứng dụng của bạn được xây dựng.

Thư mục dự án của bạn tạo một folder mới có tên là dist . Tất cả các ứng dụng đã xây dựng của bạn và các version extract của ứng dụng đều nằm trong folder đó.

Ví dụ, nếu bạn xây dựng ứng dụng của bạn cho tất cả các nền tảng, dự án của bạn dist folder tương tự như cấu trúc file sau đây:

hello-world   +-- hello-world-1.0.0-mac.zip   +-- hello-world-1.0.0.dmg   +-- hello-world Setup 1.0.0.exe   +-- win-unpacked   +-- mac   +-- linux-unpacked   +-- hello-world_1.0.0_amd64.snap 

electron-builder xây dựng ứng dụng Electron cho nền tảng hiện tại và kiến trúc hiện tại làm mục tiêu mặc định.

• macOS: DMG và ZIP cho Squirrel.Mac
• Windows: NSIS (.exe)
• Linux: Nếu bạn xây dựng trên Windows hoặc macOS, Snap và AppImage cho x64 sẽ là kết quả . Nếu không, nếu bạn xây dựng trên Linux, kết quả sẽ là file Snap và AppImage cho kiến trúc hiện tại.

Đến đây bạn đã xây dựng ứng dụng của bạn cho tất cả các nền tảng.

Kết luận

Trong hướng dẫn này, bạn đã tạo ứng dụng đa nền tảng đầu tiên của bạn bằng khung Electron, thêm các tính năng root và xây dựng nó để phân phối trên macOS.

Để tìm hiểu thêm về Electron, bạn có thể xem tài liệu của họ. Như vậy, bạn cũng có thể chia sẻ ứng dụng máy tính để bàn mới tạo của bạn với bất kỳ ai bằng cách tạo trình cài đặt .

---

---

Các tin liên quan