Kiến thức cơ bản về Electron: Cách cấu hình và chạy ứng dụng Angular Electron

Electron cho phép bạn xây dựng các ứng dụng máy tính để bàn cho Windows, Mac và Linux. Khi bạn tạo ứng dụng bằng Electron, bạn có thể xem trước và chạy ứng dụng thông qua cửa sổ ứng dụng trên máy tính để bàn.

Bạn có thể sử dụng Electron để định cấu hình ứng dụng Angular để khởi chạy trên cửa sổ máy tính để bàn, thay vì trình duyệt web thông thường. Bạn có thể thực hiện việc này bằng cách sử dụng tệp JavaScript trong chính ứng dụng.

Sau khi định cấu hình Electron, bạn có thể tiếp tục phát triển như trên ứng dụng Angular thông thường. Các phần chính của ứng dụng vẫn sẽ tuân theo cấu trúc Angular tiêu chuẩn tương tự.

Cách cài đặt Electron như một phần của ứng dụng của bạn

Để sử dụng Electron, bạn cần tải xuống và cài đặt node.js, đồng thời sử dụng npm install để thêm Electron vào ứng dụng của mình.

có đủ tuổi xác minh lừa đảo không

Tải xuống và cài đặt node.js . Bạn có thể xác nhận rằng bạn đã cài đặt nó đúng cách bằng cách kiểm tra phiên bản:
```
node -v
```
Node cũng bao gồm npm, trình quản lý gói JavaScript . Bạn có thể xác nhận rằng bạn đã cài đặt npm bằng cách kiểm tra phiên bản npm:
```
npm -v
```
Tạo một ứng dụng Angular mới bằng cách sử dụng mới yêu cầu. Thao tác này sẽ tạo một thư mục chứa tất cả những thứ cần thiết các tệp cần thiết cho một dự án Angular để làm việc.
```
ng new electron-app
```
Trong thư mục gốc của ứng dụng của bạn, hãy sử dụng npm để cài đặt Electron.
```
npm install --save-dev electron
```
Thao tác này sẽ tạo một thư mục mới cho Electron trong thư mục node_modules của ứng dụng.
Bạn cũng có thể cài đặt Electron trên toàn cầu trên máy tính của mình.
```
npm install -g electron 
```

Cấu trúc tệp của ứng dụng điện tử góc

Electron sẽ yêu cầu một tệp JavaScript chính để tạo và quản lý cửa sổ màn hình nền. Cửa sổ này sẽ hiển thị nội dung ứng dụng của bạn bên trong nó. Tệp JavaScript cũng sẽ chứa các sự kiện khác có thể xảy ra, chẳng hạn như nếu người dùng đóng cửa sổ.

Trong thời gian chạy, nội dung hiển thị sẽ đến từ tệp index.html. Theo mặc định, bạn có thể tìm thấy tệp index.html bên trong src và trong thời gian chạy, một bản sao đã xây dựng của nó sẽ tự động được tạo bên trong quận thư mục.

Vị trí thành phần ứng dụng chính trong thư mục

Tệp index.html thường trông giống như sau:

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title> ElectronApp </title> 
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <app-root> </app-root> 
</body> 
</html>

Bên trong thẻ body là thẻ . Thao tác này sẽ hiển thị thành phần ứng dụng chính cho ứng dụng Angular. Bạn có thể tìm thấy thành phần ứng dụng chính trong src / app thư mục.

Electron trong thời gian chạy trong trình duyệt

Cách sử dụng Electron để mở ứng dụng Angular trong cửa sổ máy tính để bàn

Tạo tệp main.js và định cấu hình tệp để mở nội dung của ứng dụng bên trong cửa sổ màn hình.

Tạo một tệp trong thư mục gốc của dự án của bạn có tên main.js . Trong tệp này, khởi tạo Electron để bạn có thể sử dụng nó để tạo cửa sổ ứng dụng.
```
const { app, BrowserWindow } = require('electron');
```
Tạo một cửa sổ màn hình mới có chiều rộng và chiều cao nhất định. Tải tệp chỉ mục làm nội dung để hiển thị trong cửa sổ. Đảm bảo rằng đường dẫn đến tệp chỉ mục khớp với tên ứng dụng của bạn. Ví dụ: nếu bạn đặt tên ứng dụng của mình là 'electron-app', đường dẫn sẽ là 'dist / electron-app / index.html' .
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Khi ứng dụng đã sẵn sàng, hãy gọi hàm createWindow (). Thao tác này sẽ tạo cửa sổ ứng dụng cho ứng dụng của bạn.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
bên trong src / index.html tập tin, trong cơ sở , thay đổi thuộc tính href thành './'.
```
<base href="./">
```
Trong package.json , thêm một chính và bao gồm tệp main.js làm giá trị. Đây sẽ là điểm nhập cho ứng dụng, để ứng dụng chạy tệp main.js khi nó khởi chạy ứng dụng.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```
bên trong .b Browselistrc , sửa đổi danh sách để xóa iOS safari phiên bản 15.2-15.3. Điều này sẽ ngăn lỗi tương thích hiển thị trong bảng điều khiển khi biên dịch.
```
last 1 Chrome version 
last 1 Firefox version 
last 2 Edge major versions 
last 2 Safari major versions 
last 2 iOS major versions 
Firefox ESR 
not ios_saf 15.2-15.3 
not safari 15.2-15.3 
```

Xóa nội dung mặc định trong src / app / app.component.html tập tin. Thay thế nó bằng một số nội dung mới.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

Thêm một số kiểu dáng cho nội dung trong src / app / app.component.css file.

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

Thêm một số kiểu dáng tổng thể vào src / styles.css để xóa các lề và đệm mặc định.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Cách chạy một ứng dụng điện tử

Để chạy ứng dụng của bạn trong một cửa sổ, hãy định cấu hình một lệnh trong mảng tập lệnh của package.json. Sau đó, chạy ứng dụng của bạn bằng lệnh trong thiết bị đầu cuối.

Trong package.json , bên trong mảng script, thêm lệnh để xây dựng ứng dụng Angular và chạy Electron. Đảm bảo bạn thêm dấu phẩy sau mục nhập trước trong mảng Tập lệnh.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Để chạy ứng dụng Angular mới của bạn trong cửa sổ máy tính để bàn, hãy chạy dòng lệnh sau trong thư mục gốc của dự án của bạn:
```
npm run electron
```
Chờ ứng dụng của bạn được biên dịch. Sau khi hoàn tất, thay vì ứng dụng Angular của bạn mở trong trình duyệt web, một cửa sổ trên màn hình sẽ mở ra. Cửa sổ màn hình nền sẽ hiển thị nội dung của ứng dụng Angular của bạn.
Nếu bạn vẫn muốn xem ứng dụng của mình trong trình duyệt web, bạn vẫn có thể chạy lệnh ng phục vụ.
```
ng serve
```
Nếu bạn đang sử dụng giao bóng lệnh, nội dung ứng dụng của bạn sẽ vẫn hiển thị trong trình duyệt web tại localhost: 4200.

Xây dựng ứng dụng máy tính để bàn với Electron

Bạn có thể sử dụng Electron để xây dựng các ứng dụng máy tính để bàn trên Windows, Mac và Linux. Theo mặc định, bạn có thể kiểm tra ứng dụng Angular bằng trình duyệt web thông qua lệnh ng serve. Bạn có thể định cấu hình ứng dụng Angular của mình để mở trong cửa sổ màn hình thay vì trình duyệt web.

Bạn có thể thực hiện việc này bằng cách sử dụng tệp JavaScript. Bạn cũng sẽ cần phải định cấu hình các tệp index.html và package.json của mình. Ứng dụng tổng thể sẽ vẫn tuân theo cấu trúc giống như một ứng dụng Angular thông thường.

Nếu bạn muốn tìm hiểu thêm về cách xây dựng các ứng dụng dành cho máy tính để bàn, bạn cũng có thể khám phá các ứng dụng Windows Forms. Các ứng dụng Windows Forms cho phép bạn nhấp và kéo các phần tử giao diện người dùng lên canvas đồng thời thêm bất kỳ logic mã hóa nào vào các tệp C #.