Hướng Dẫn Cài Đặt Electron: Xây Dựng Desktop App Với JavaScript

Electron Là Gì?

Electron là một framework mã nguồn mở để xây dựng các ứng dụng desktop cross-platform sử dụng công nghệ web: JavaScript, HTML và CSS. Được phát triển bởi GitHub (nay thuộc Microsoft) và được duy trì bởi OpenJS Foundation.

Electron nhúng Chromium (rendering engine) và Node.js vào binary của nó, cho phép bạn tạo ứng dụng desktop chạy trên Windows, macOS và Linux từ cùng một codebase JavaScript - không cần kinh nghiệm native development.

Các Ứng Dụng Nổi Tiếng Được Xây Dựng Bằng Electron

Visual Studio Code - Code editor phổ biến nhất
Slack - Công cụ giao tiếp team
Discord - Nền tảng chat cho gamers
Figma - Design tool
Notion - Workspace tool
1Password - Password manager
ChatGPT Desktop - AI assistant by OpenAI
Claude Desktop - AI assistant by Anthropic
WhatsApp Desktop - Messaging app
GitHub Desktop - Git GUI
Postman - API development tool
Obsidian - Note-taking app

Ưu Điểm Của Electron

✅ Cross-platform: Một codebase chạy trên Windows, macOS và Linux
✅ Web Technologies: Sử dụng HTML, CSS, JavaScript quen thuộc
✅ Rich Ecosystem: Truy cập toàn bộ npm packages
✅ Native APIs: Tương tác với OS qua Electron APIs
✅ Auto-updates: Built-in support cho tự động cập nhật
✅ Community: Cộng đồng lớn và tài liệu phong phú
✅ Modern Web Platform: Sử dụng Chromium mới nhất với tất cả web features

Nhược Điểm Cần Lưu Ý

⚠️ Bundle Size: Ứng dụng có kích thước lớn (100MB+) do nhúng Chromium
⚠️ Memory Usage: Tiêu tốn nhiều RAM hơn native apps
⚠️ Performance: Có thể chậm hơn native apps trong một số trường hợp
⚠️ Security: Cần cẩn thận với security best practices

Yêu Cầu Hệ Thống

Trước khi cài đặt Electron, hãy đảm bảo hệ thống của bạn đáp ứng các yêu cầu sau:

Node.js và Package Manager

Electron yêu cầu Node.js để phát triển và build ứng dụng:

Node.js: Version 18.x, 20.x hoặc 22.x (LTS recommended)
npm: Version 8.x trở lên (đi kèm với Node.js)
Yarn hoặc pnpm: Package managers thay thế (optional)

Hệ Điều Hành

Platform	Supported Versions	Architecture
Windows	Windows 10/11 (64-bit)	x64, arm64
macOS	macOS 10.15+ (Catalina+)	x64, arm64 (Apple Silicon)
Linux	Ubuntu 18.04+, Fedora 32+, Debian 10+	x64, arm64, armv7l

Development Tools

Code Editor: Visual Studio Code, WebStorm, hoặc editor khác
Git: Để version control (optional nhưng recommended)
Terminal: Command line interface

Kiểm Tra Môi Trường Hiện Tại

Trước khi bắt đầu, kiểm tra xem Node.js và npm đã được cài đặt chưa:

# Kiểm tra Node.js version
node --version
# Output mong đợi: v20.x.x hoặc v22.x.x

# Kiểm tra npm version
npm --version
# Output mong đợi: 10.x.x

# Kiểm tra npx (đi kèm npm)
npx --version

Nếu chưa cài Node.js, tải và cài đặt từ:

Official Node.js website - Chọn LTS version
Hoặc sử dụng nvm (Node Version Manager) để quản lý nhiều versions

Phương Pháp 1: Sử Dụng Electron Forge (Khuyến Nghị)

Electron Forge là toolkit chính thức với đầy đủ công cụ để scaffolding, packaging và publishing Electron apps. Đây là cách đơn giản và nhanh nhất để bắt đầu.

Tạo Project Mới

# Tạo Electron app với template mặc định
npm init electron-app@latest my-electron-app

# Hoặc với Yarn
yarn create electron-app my-electron-app

# Hoặc với pnpm
pnpm create electron-app my-electron-app

Quá Trình Khởi Tạo

Khi chạy lệnh trên, bạn sẽ thấy:

✔ Locating custom template: "base"
✔ Initializing directory
✔ Preparing template
✔ Initializing template
✔ Installing template dependencies

Successfully created my-electron-app!

To get started:
  cd my-electron-app
  npm start

Chạy Ứng Dụng

cd my-electron-app
npm start

Ứng dụng Electron đầu tiên của bạn sẽ mở ra! 🎉

Templates Có Sẵn

Electron Forge cung cấp nhiều templates:

# Webpack template
npm init electron-app@latest my-app -- --template=webpack

# Webpack + TypeScript
npm init electron-app@latest my-app -- --template=webpack-typescript

# Vite template (modern & fast)
npm init electron-app@latest my-app -- --template=vite

# Vite + TypeScript
npm init electron-app@latest my-app -- --template=vite-typescript

Khuyến nghị: Sử dụng Vite template cho performance tốt nhất và development experience hiện đại.

Phương Pháp 2: Cài Đặt Từ Đầu (Manual Setup)

Nếu bạn muốn kiểm soát chi tiết hơn, có thể setup Electron manually.

Bước 1: Khởi Tạo Project

# Tạo thư mục project
mkdir my-electron-app
cd my-electron-app

# Khởi tạo npm project
npm init -y

Bước 2: Cài Đặt Electron

# Cài Electron làm dev dependency
npm install electron --save-dev
pnpm install electron --save-dev

# Hoặc cài version cụ thể
npm install electron@latest --save-dev

# pnpm approve-builds electron

Lưu ý: Luôn cài Electron làm devDependencies, không phải dependencies.

Bước 3: Tạo Cấu Trúc Project

my-electron-app/
├── package.json
├── main.js           # Main process
├── preload.js        # Preload script
└── index.html        # Renderer process

Bước 4: Tạo File Main Process (main.js)

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true,
    }
  });

  mainWindow.loadFile('index.html');
  
  // Mở DevTools (optional)
  // mainWindow.webContents.openDevTools();
}

// App ready
app.whenReady().then(() => {
  createWindow();

  // macOS: Tạo window khi click dock icon
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// Quit app khi đóng tất cả windows (trừ macOS)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Bước 5: Tạo Preload Script (preload.js)

// preload.js
const { contextBridge } = require('electron');

// Expose protected methods cho renderer process
contextBridge.exposeInMainWorld('electronAPI', {
  platform: process.platform,
  versions: {
    node: process.versions.node,
    chrome: process.versions.chrome,
    electron: process.versions.electron
  }
});

Bước 6: Tạo HTML File (index.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" 
        content="default-src 'self'; script-src 'self'">
  <title>My Electron App</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      padding: 20px;
      text-align: center;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    .version-info {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 8px;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to Electron!</h1>
    <p>Building desktop apps with web technologies</p>
    
    <div class="version-info">
      <h2>Version Information</h2>
      <p>Platform: <span id="platform"></span></p>
      <p>Node: <span id="node-version"></span></p>
      <p>Chrome: <span id="chrome-version"></span></p>
      <p>Electron: <span id="electron-version"></span></p>
    </div>
  </div>

  <script>
    // Access exposed APIs từ preload
    document.getElementById('platform').textContent = window.electronAPI.platform;
    document.getElementById('node-version').textContent = window.electronAPI.versions.node;
    document.getElementById('chrome-version').textContent = window.electronAPI.versions.chrome;
    document.getElementById('electron-version').textContent = window.electronAPI.versions.electron;
  </script>
</body>
</html>

Bước 7: Cập Nhật package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My Electron Application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron . --trace-warnings"
  },
  "keywords": ["electron"],
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "electron": "^40.2.1"
  }
}

Bước 8: Chạy Ứng Dụng

npm start

Cấu Trúc Project Chi Tiết

Project Directory

my-electron-app/
├── node_modules/          # Dependencies
├── src/                   # Source code
│   ├── main/             # Main process code
│   │   ├── main.js       # Main entry point
│   │   └── menu.js       # Application menu
│   ├── preload/          # Preload scripts
│   │   └── preload.js
│   └── renderer/         # Renderer process
│       ├── index.html
│       ├── styles.css
│       └── renderer.js
├── assets/               # Static assets
│   ├── icons/           # App icons
│   └── images/          # Images
├── package.json
├── package-lock.json
└── .gitignore

Kiến Trúc Electron

Electron có 2 loại process chính:

1. Main Process

Chạy package.json's main script
Có thể tạo web pages bằng BrowserWindow
Chỉ có một main process
Có quyền truy cập đầy đủ Node.js APIs
Quản lý application lifecycle

2. Renderer Process

Mỗi BrowserWindow tạo một renderer process
Chạy web pages (HTML/CSS/JS)
Có thể có nhiều renderer processes
Isolated từ main process vì security
Sử dụng preload.js để communicate với main process

3. Preload Scripts

Bridge giữa main và renderer processes
Chạy trước renderer process
Có quyền truy cập Node.js APIs
Expose APIs an toàn cho renderer qua contextBridge

Các Lệnh Quan Trọng

Development Commands

# Start app trong development mode
npm start

# Start với DevTools mở
npm run dev

# Start với debug logs
DEBUG=* npm start

# Clear cache và restart
npm start -- --clear-cache

Build & Package Commands (Với Electron Forge)

# Package app cho platform hiện tại
npm run package

# Create distributables
npm run make

# Publish app
npm run publish

Testing Commands

# Run tests
npm test

# Run linter
npm run lint

# Type checking (với TypeScript)
npm run type-check

Cài Đặt Dependencies Phổ Biến

UI Frameworks

# React
npm install react react-dom
npm install --save-dev @types/react @types/react-dom

# Vue
npm install vue

# Svelte
npm install svelte

Electron Builder (Alternative packaging tool)

npm install --save-dev electron-builder

Auto-updater

npm install electron-updater

State Management

# Redux
npm install @reduxjs/toolkit react-redux

# Zustand
npm install zustand

# Jotai
npm install jotai

Database

# SQLite
npm install better-sqlite3

# LevelDB
npm install level

# IndexedDB wrapper
npm install dexie

Kết Luận

Bạn đã học cách cài đặt Electron và tạo ứng dụng desktop đầu tiên! Electron mở ra cơ hội xây dựng cross-platform desktop applications với công nghệ web mà bạn đã quen thuộc.

Key Takeaways:

✅ Electron = Chromium + Node.js
✅ Sử dụng Electron Forge cho quick start
✅ Hiểu về Main và Renderer processes
✅ Security là ưu tiên hàng đầu
✅ Context isolation và preload scripts
✅ Rich ecosystem với npm packages

Hãy bắt đầu với project nhỏ, học từng bước, và dần dần xây dựng những ứng dụng phức tạp hơn. Chúc bạn thành công với Electron development! 🚀