Giới thiệu về Electron

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.

Electron app demo

Ứ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.

Electron app demo

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.jsontậ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àoscriptsphầ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.jsontệ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 startvà cửa sổ này sẽ hiển thị:

Activity monitor

Đâ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.