Electron Desktop App Development · บทเรียน

แอปพลิเคชัน Electron แรกของคุณ

ทำตามคู่มือทีละขั้นตอนเพื่อสร้างแอปพลิเคชัน Electron พื้นฐานแบบ 'Hello World' ซึ่งครอบคลุมพื้นฐานของกระบวนการหลักและกระบวนการแสดงผล

แอปพลิเคชัน Electron แรกของคุณ เป็นบทเรียน Electron Desktop App Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Electron Desktop App Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Hello, Electron World!

Time to build your first Electron app — a simple desktop "Hello World." It introduces the core files that bring web tech to the desktop.

Setting Up Your Project

First, scaffold the project: make a folder, run npm init, then install Electron as a dev dependency. The commands are below.

The Main Process (main.js)

Every app has a main process — a Node.js environment that controls the lifecycle, talks to the OS, and creates windows. It starts in main.js.

main.js: Basic Window Setup

In main.js, you import Electron modules and define how to create a window that will host your web content. Try the basic setup below.

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  // We'll load our HTML file here soon!
}

app.whenReady().then(createWindow);

// Handle closing all windows for non-macOS
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// Handle re-activating app on macOS
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

The Renderer Process (index.html)

The renderer process is where your UI lives — essentially a Chromium window rendering HTML, CSS, and JS. It loads from index.html.

index.html: Our UI Content

This index.html holds your Hello World message — just an ordinary web page, exactly like any you'd build for the browser.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Electron App</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; }
        h1 { color: #333; }
        p { color: #666; }
    </style>
</head>
<body>
    <h1>Hello from Electron!</h1>
    <p>This is your very first desktop application.</p>
</body>
</html>

Connecting Main & Renderer

Now connect the two: tell the window to display your page with win.loadFile() inside createWindow. One line wires UI to the main process.

main.js: Loading HTML

Here is main.js updated to load the page. Note how __dirname locates index.html relative to the script, no matter where it runs.

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile(path.join(__dirname, 'index.html')); // Load the HTML file
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Running Your Electron App

Add a start script to package.json so you can launch the app with one command instead of typing electron each time.

package.json: Start Script

Your package.json should look like this. "electron ." runs main.js in the current folder — save it, then run "npm start" to launch.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

Quick Check: Main Process Role

You've seen how main.js and index.html work together. Let's test your understanding of their primary roles.

Recap: Your First Electron App

You built your first Electron app: a main process for lifecycle and windows, a renderer for UI, wired together with a start script.

คำถามที่พบบ่อย

บทเรียน “แอปพลิเคชัน Electron แรกของคุณ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แอปพลิเคชัน Electron แรกของคุณ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Electron Desktop App Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แอปพลิเคชัน Electron แรกของคุณ”

ทำตามคู่มือทีละขั้นตอนเพื่อสร้างแอปพลิเคชัน Electron พื้นฐานแบบ 'Hello World' ซึ่งครอบคลุมพื้นฐานของกระบวนการหลักและกระบวนการแสดงผล คุณปฏิบัติ Electron Desktop App Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Electron Desktop App Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Electron Desktop App Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “แอปพลิเคชัน Electron แรกของคุณ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Electron Desktop App Development นี้ได้ไหม

ได้ บทเรียน Electron Desktop App Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Electron Desktop App Development