ตำราปฏิบัติการ: การแปลงเว็บแอปพลิเคชัน ม้าเหล็กเรดิโอ เป็นไฟล์ .EXE

📚 ตำราปฏิบัติการฉบับสมบูรณ์: การสร้างโปรแกรมเดสก์ท็อป .EXE จากเว็บแอปม้าเหล็กเรดิโอ

ผู้บันทึก/ผู้พัฒนา: ลุงแจ่ม อารมณ์ดี
วัตถุประสงค์: ใช้เป็นคู่มือมาตรฐาน (Standard Operating Procedure) อ้างอิงขั้นตอนการทำโปรเจกต์ ถอดบทเรียนจากข้อผิดพลาด เพื่อใช้ทำงานในอนาคตโดยห้ามข้ามขั้นตอน

---

1. ภาพรวมสถาปัตยกรรมระบบ (Architecture)

• Frontend: ไฟล์ index.html ของเว็บแอป "ม้าเหล็กเรดิโอ" ซึ่งดึงไฟล์เสียงและรายชื่อเพลงแบบไดนามิก (Live/Dynamic Streaming) จาก Archive.org (Identifier: 005_20261024) ทำให้อัปเดตเพลงใหม่บนเว็บได้ทันทีโดยไม่ต้อง Build ตัวโปรแกรมใหม่
• Backend Framework: ใช้ Electron ควบคุมหน้าต่างแอปพลิเคชันเดสก์ท็อป
• Automation Builder: ใช้ GitHub Actions ในการคอมไพล์โค้ดบนคลาวด์ให้เป็นไฟล์ติดตั้ง `.EXE` สำหรับระบบปฏิบัติการ Windows

2. โครงสร้างไฟล์ทั้งหมดที่จำเป็นในโปรเจกต์

การเตรียมไฟล์ใน GitHub Repository (เช่น MalekRadio24Hrs) ต้องมีองค์ประกอบครบถ้วนดังนี้:

• index.html (หน้าตาแอปพลิเคชันและระบบเล่นเพลง)
• main.js (ไฟล์ควบคุมการเปิดหน้าต่างและวงจรชีวิตของแอป Electron)
• package.json (ไฟล์กำหนดค่าแพ็กเกจ ไลบรารี และเชื่อมโยงไอคอน)
• .github/workflows/build-exe.yml (ไฟล์คำสั่งรันระบบ GitHub Actions)
• icon.ico (ไฟล์ไอคอนรูปหูฟังประจำโปรแกรม)

3. รายละเอียดซอร์สโค้ดในแต่ละไฟล์

ก. ไฟล์ `main.js` (Main Process ควบคุมหน้าต่าง)

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

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    },
    autoHideMenuBar: true,
    title: "ม้าเหล็กเรดิโอ ออนไลน์ 24 ชั่วโมง"
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

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

// ⚠️ สำคัญ: ต้องใช้ app.quit() เท่านั้น ห้ามใช้ app.stop()
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

ข. ไฟล์ `package.json` (ตั้งค่าระบบและปิด Publish อัตโนมัติ)

{
  "name": "malek-radio-24hrs",
  "version": "1.0.0",
  "description": "Malek Radio 24Hrs Desktop App",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
  "build": {
    "productName": "Malek Radio 24Hrs",
    "win": {
      "icon": "icon.ico"
    },
    "publish": null
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.6.0"
  }
}

ค. ไฟล์ GitHub Actions Workflow (`.github/workflows/build-exe.yml`)

name: Build Desktop App (.exe)

on:
  push:
    branches: [ "main", "master" ]

jobs:
  build:
    runs-on: windows-latest

    steps:
    - name: Checkout Code
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 18

    - name: Install Dependencies
      run: npm install

    - name: Build Electron App
      run: npx electron-builder --win --x64

    - name: Upload Artifacts
      uses: actions/upload-artifact@v4
      with:
        name: Windows-EXE-App
        path: dist/*.exe

---

4. บันทึกข้อผิดพลาดและแนวทางแก้ไข (Troubleshooting & Lessons Learned)

❌ ข้อผิดพลาดที่ 1: ข้อจำกัดด้านขนาดความละเอียดไฟล์ไอคอน (Exit Code 1)

อาการที่พบ: ระบบ GitHub Actions แจ้งเตือนสถานะ Build ล้มเหลวในขั้นตอน Build Electron App พร้อมข้อความแสดงความผิดพลาด:

✖ image ...\icon.ico must be at least 256x256
Error: Process completed with exit code 1.

สาเหตุ: ไฟล์ภาพไอคอน `.ico` ที่อัปโหลดขึ้นไปมีความละเอียดพิกเซลต่ำกว่ามาตรฐาน 256x256 พิกเซล ซึ่งเป็นข้อกำหนดบังคับของไลบรารี electron-builder

วิธีแก้: จัดเตรียมไฟล์รูปภาพไอคอนที่มีขนาดความละเอียดสูง (256x256 หรือ 512x512 พิกเซลขึ้นไป), ตรวจสอบชื่อไฟล์ให้สะกดเป็นพิมพ์เล็กทั้งหมดว่า icon.ico ให้ตรงกับที่ระบุใน package.json แล้วอัปโหลดขึ้น GitHub ใหม่

❌ ข้อผิดพลาดที่ 2: ปัญหาตั้งชื่อไฟล์ไอคอนไม่ตรงกับ Configuration

อาการที่พบ: ระบบหาไฟล์ไอคอนไม่พบเนื่องจากตั้งชื่อไฟล์ในเครื่องหรือตอนอัปโหลดเป็นชื่ออื่น (เช่น favicon (1).ico)

วิธีแก้: บังคับตั้งชื่อไฟล์ไอคอนให้เป็น icon.ico เสมอทุกครั้งก่อนนำเข้าโปรเจกต์ เพื่อป้องกันการMismatch ของตัวแปรใน package.json

---

5. ขั้นตอนการตรวจสอบผลลัพธ์และการดาวน์โหลดโปรแกรม

1. เมื่อแก้ไขไฟล์ครบถ้วนและ Commit ขึ้น GitHub สำเร็จ ให้ไปที่แท็บ Actions บนหน้าเว็บไซต์ GitHub
2. รอจนกระทั่งกระบวนการทำงานเปลี่ยนสถานเป็นเครื่องหมายถูกสีเขียว (✅)
3. คลิกเข้าไปที่ชื่องานล่าสุด เลื่อนลงมาด้านล่างสุดในหัวข้อ Artifacts
4. คลิกดาวน์โหลดไฟล์ชื่อ Windows-EXE-App (ซึ่งเป็นไฟล์บีบอัด `.zip` บรรจุดโปรแกรมติดตั้ง `.EXE` เอาไว้)
5. แตกไฟล์ออกมา จะได้โปรแกรมเดสก์ท็อปพร้อมไอคอนหูฟังสีแดงสวยงาม พร้อมใช้งานและเผยแพร่

💡 บทสรุปสำหรับยึดถือปฏิบัติ: การแยกส่วนฐานข้อมูลเพลงให้อยู่บน Archive.org และใช้หน้าเว็บเป็นตัวกลางดึงข้อมูลสด ช่วยให้ไม่ต้องทำการ Build ไฟล์ `.EXE` ใหม่ทุกครั้งที่มีการเพิ่มเพลง ช่วยประหยัดเวลาและทำให้ระบบมีความคล่องตัวสูงสุด