×

Cài đặt thư viện Electron trong JavaScript

Avatar of admin
admin 0 Views

Giới thiệu về Electron

Electron là gì?

Electron là một framework mã nguồn mở, phát triển bởi GitHub, cho phép bạn xây dựng các ứng dụng desktop đa nền tảng bằng cách sử dụng các công nghệ web như HTML, CSS, và JavaScript. Electron kết hợp Chromium và Node.js để cho phép bạn duyệt web và truy cập các API hệ thống nguồn mở từ ứng dụng của bạn.

Lợi ích của việc sử dụng Electron

  • Đa nền tảng: Có thể xây dựng một lần và chạy trên Windows, macOS, và Linux.
  • Chạy độc lập: Electron tạo ra ứng dụng tự chứa tất cả những gì nó cần, không cần phụ thuộc vào các trình duyệt như các ứng dụng web thông thường.
  • Dùng cùng công nghệ web: Sử dụng HTML, CSS, và JavaScript, tức là nhà phát triển web có thể nhanh chóng làm quen và bắt đầu viết ứng dụng desktop.

Cài đặt môi trường phát triển

Cài đặt Node.js và npm

Electron yêu cầu Node.js và npm (Node Package Manager). Nếu bạn chưa cài đặt Node.js, bạn có thể vào trang web chính thức nodejs.org để tải và cài đặt phiên bản mới nhất.

Tạo dự án mới và cài đặt Electron

Đầu tiên, bạn cần tạo một thư mục cho dự án của mình và khởi tạo nó như một dự án npm:

mkdir my-electron-app
cd my-electron-app
npm init -y

Lệnh npm init -y sẽ tạo một tệp package.json với cấu hình mặc định. Tiếp theo, bạn cần cài đặt Electron như một phụ thuộc phát triển:

npm install electron --save-dev

Hoặc, nếu bạn muốn Electron được cài đặt như một phụ thuộc tiêu chuẩn:

npm install electron

Tạo tập tin khởi động Electron

Tạo tập tin main.js

Trong thư mục gốc của dự án, tạo một tập tin mới có tên là main.js. Đây sẽ là tập tin phụ trách khởi động ứng dụng Electron của bạn.

Nội dung của main.js

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

function createWindow () {
  // Tạo một cửa sổ trình duyệt mới.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // Tải tệp index.html của ứng dụng.
  win.loadFile('index.html');
}

// Gọi hàm createWindow khi Electron đã khởi động xong.
app.whenReady().then(createWindow);

// Đảm bảo rằng ứng dụng thoát khi tất cả các cửa sổ đều đã đóng (trừ macOS).
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // Trên macOS, tạo một cửa sổ mới nếu ứng dụng đang hoạt động nhưng không có cửa sổ nào hiện tại.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Tạo tập tin index.html

Tạo một tập tin mới có tên là index.html trong thư mục gốc của dự án. Đây sẽ là tập tin HTML được tải khi Electron khởi động.

Nội dung của index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello Electron</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <p>Welcome to your first Electron app.</p>
</body>
</html>

Cập nhật package.json

Đảm bảo rằng tệp package.json của bạn đánh dấu tập tin main.js là tập tin khởi động. Bạn cần thêm hoặc cập nhật thuộc tính "main" và thêm một script mới để chạy ứng dụng:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^13.0.0"
  }
}

Chạy ứng dụng Electron

Để chạy ứng dụng của bạn, bạn chỉ cần sử dụng lệnh sau trong terminal:

npm start

Sau khi chạy lệnh này, một cửa sổ hiển thị ứng dụng của bạn sẽ xuất hiện với nội dung như trong tệp index.html.

Các thành phần cơ bản trong Electron

1. Main Process và Renderer Process

  • Main Process: Đây là process chính của ứng dụng; nó có quyền truy cập điều khiển các cửa sổ và các mô đun của Node.js.

  • Renderer Process: Mỗi cửa sổ trình duyệt trong Electron chạy trong một renderer process độc lập. Renderer có thể giao tiếp với main process thông qua IPC (Inter-Process Communication).

2. BrowserWindow

BrowserWindow là đối tượng trong main process để tạo giao diện người dùng. Nó có vai trò như cửa sổ trình duyệt tương tự như các tab trong trình duyệt web.

const { BrowserWindow } = require('electron');

// Tạo cửa sổ chính của ứng dụng
let win = new BrowserWindow({ width: 800, height: 600 });
win.loadFile('index.html');

3. IPC (Inter-Process Communication)

IPC cho phép giao tiếp giữa các process bằng việc gửi và nhận thông điệp. Sử dụng ipcMain trong main process và ipcRenderer trong renderer process.

Main Process (ipcMain)

const { ipcMain } = require('electron');
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg); // message from renderer
  event.reply('asynchronous-reply', 'pong');
});

Renderer Process (ipcRenderer)

const { ipcRenderer } = require('electron');
ipcRenderer.send('asynchronous-message', 'ping');
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg); // pong
});

Xử lý sự kiện và tương tác trong ứng dụng

Sử dụng Menu

Bạn có thể tạo các menu ứng dụng tuỳ chỉnh bằng cách sử dụng API Menu. Ví dụ, bạn có thể tạo một menu đơn giản như sau:

const { Menu } = require('electron')

const template = [
  {
    label: 'File',
    submenu: [
      { role: 'quit' }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Thay đổi cài đặt cửa sổ

Bạn có thể thay đổi cài đặt của BrowserWindow khi tạo hoặc sau khi tạo bằng cách truy cập các tùy chọn như:

const win = new BrowserWindow({
  width: 800,
  height: 600,
  backgroundColor: '#2e2c29',
  show: false  // cửa sổ ẩn ban đầu
});

win.once('ready-to-show', () => {
  win.show()
});

Tính năng nâng cao

Tương tác với hệ thống tập tin

Sử dụng mô-đun fs của Node.js để tương tác với hệ thống tập tin:

const fs = require('fs');

fs.readFile('/path/to/file', (err, data) => {
  if (err) throw err;
  console.log(data.toString());
});

Gửi thông báo hệ thống

Electron cho phép bạn gửi thông báo hệ thống:

const { Notification } = require('electron')

new Notification({ title: 'Title', body: 'Notification body' }).show()

Sử dụng các mô-đun khác của Node.js

Bạn có thể sử dụng đa dạng các mô-đun khác của Node.js ngay trong ứng dụng Electron của mình.

const os = require('os');

console.log(`Bạn đang sử dụng hệ điều hành ${os.type()}`);

Đóng gói ứng dụng

Electron cung cấp các công cụ để bạn có thể đóng gói ứng dụng của mình thành các file thực thi độc lập cho các nền tảng khác nhau. Một trong những công cụ phổ biến nhất là electron-packager.

Cài đặt electron-packager

Bạn có thể cài đặt electron-packager thông qua npm:

npm install electron-packager --save-dev

Đóng gói ứng dụng

Ví dụ, để đóng gói ứng dụng của bạn cho Windows:

npx electron-packager . MyApp --platform=win32 --arch=x64 --out=out

Lệnh này sẽ tạo ra một thư mục out chứa ứng dụng của bạn đã được đóng gói cho Windows.

Kết luận

Electron là một lựa chọn tuyệt vời để phát triển các ứng dụng desktop đa nền tảng bằng các công nghệ web thông dụng. Bằng cách kết hợp sức mạnh của Chromium và Node.js, Electron cung cấp các API mạnh mẽ và linh hoạt giúp bạn dễ dàng phát triển và triển khai ứng dụng của mình mà không cần phải lo lắng về sự khác biệt giữa các hệ điều hành.

Hy vọng hướng dẫn này đã cung cấp cho bạn cái nhìn tổng quan và các bước cần thiết để bắt đầu với Electron trong dự án JavaScript của bạn. Chúc bạn thành công!

Comments

Bài viết liên quan