สร้าง AI ผู้ช่วยบนเดสก์ท็อปด้วย Electron: การเรียกใช้ API แบบสตรีมและการเก็บข้อมูลในเครื่อง

ยินดีต้อนรับสู่บทความสอนการสร้างโปรแกรม AI ผู้ช่วยบนคอมพิวเตอร์แบบ Step-by-Step สำหรับผู้เริ่มต้น ไม่ต้องกังวลหากคุณไม่เคยเขียนโค้ดมาก่อน เราจะเริ่มต้นจากศูนย์กัน จากประสบการณ์การพัฒนาของผู้เขียน การสร้าง AI ผู้ช่วยบนเดสก์ท็อปมีข้อดีมากกว่าใช้งานผ่านเว็บ เพราะสามารถทำงานแบบออฟไลน์ได้บางส่วน เก็บข้อมูลการสนทนาที่เคยถามไว้ และตอบสนองได้เร็วกว่ามาก ในบทความนี้เราจะใช้ Electron ซึ่งเป็นเครื่องมือยอดนิยมในการสร้างโปรแกรมคอมพิวเตอร์ด้วย JavaScript และเชื่อมต่อกับ API ของ AI ผ่าน HolySheep AI

HolySheep AI คืออะไร และทำไมต้องเลือกใช้

ก่อนจะเริ่มเขียนโค้ด มาทำความรู้จัก HolySheep AI กันก่อนนะครับ หลายคนอาจสงสัยว่าทำไมไม่ใช้ OpenAI หรือ Anthropic โดยตรง คำตอบคือ HolySheheep AI นั้นมีข้อได้เปรียบด้านราคาที่ประหยัดมากถึง 85% เมื่อเทียบกับการใช้งานโดยตรง โดยอัตราแลกเปลี่ยนอยู่ที่ ¥1 ต่อ $1 เท่านั้น รองรับการชำระเงินผ่าน WeChat และ Alipay ทำให้สะดวกมากสำหรับผู้ใช้ในเอเชีย อีกทั้งความเร็วในการตอบสนองน้อยกว่า 50 มิลลิวินาที ซึ่งเร็วมากเมื่อเทียบกับการใช้งานทั่วไป นอกจากนี้เมื่อสมัครใช้งานจะได้รับเครดิตฟรีทันที สามารถ สมัครที่นี่ ได้เลยครับ ราคาของโมเดล AI ต่างๆ ในปี 2026 ก็น่าสนใจมาก เช่น GPT-4.1 อยู่ที่ $8 ต่อล้านโทเค็น, Claude Sonnet 4.5 อยู่ที่ $15, Gemini 2.5 Flash อยู่ที่ $2.50 และ DeepSeek V3.2 อยู่ที่เพียง $0.42 เท่านั้น

เตรียมเครื่องมือก่อนเริ่มเขียนโค้ด

ติดตั้ง Node.js

ขั้นตอนแรกคือการติดตั้ง Node.js ซึ่งเป็นโปรแกรมที่จำเป็นสำหรับการรันโค้ด JavaScript ให้ไปที่เว็บไซต์ nodejs.org แล้วกดดาวน์โหลดเวอร์ชัน LTS (เวอร์ชันที่เสถียรที่สุด) ติดตั้งตามปกติเหมือนโปรแกรมอื่นๆ เมื่อติดตั้งเสร็จแล้ว ให้เปิด Command Prompt หรือ Terminal แล้วพิมพ์คำสั่ง

node --version

หากขึ้นเวอร์ชัน เช่น v20.10.0 แสดงว่าติดตั้งสำเร็จแล้ว

ติดตั้ง Electron

Electron คือ framework ที่ช่วยให้เราสร้างโปรแกรมคอมพิวเตอร์ด้วย HTML, CSS และ JavaScript ได้ การติดตั้งทำได้ง่ายๆ โดยเปิด Terminal แล้วพิมพ์

npm install -g electron

รอจนติดตั้งเสร็จ อาจใช้เวลาประมาณ 5-10 นาที

สร้างโปรเจกต์แรก

ให้สร้างโฟลเดอร์ใหม่ชื่อ ai-assistant แล้วเปิด Terminal ไปที่โฟลเดอร์นั้น จากนั้นพิมพ์คำสั่งเพื่อสร้างไฟล์ package.json

npm init -y

คำสั่งนี้จะสร้างไฟล์ package.json ซึ่งเป็นไฟล์ที่บอกรายละเอียดของโปรเจกต์ของเรา

โครงสร้างโปรเจกต์

โปรเจกต์ Electron จะประกอบด้วยไฟล์หลักๆ ดังนี้ - main.js เป็นไฟล์หลักที่ควบคุมการทำงานของโปรแกรม - index.html เป็นไฟล์แสดงผลหน้าจอ - preload.js เป็นไฟล์เชื่อมต่อระหว่าง main และหน้าจอ - renderer.js เป็นไฟล์ JavaScript ที่ทำงานในหน้าจอ มาสร้างไฟล์เหล่านี้กันเลย

เขียนไฟล์ main.js

ไฟล์ main.js เป็นหัวใจหลักของโปรแกรม ควบคุมหน้าต่างและการทำงานทั้งหมด

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

let mainWindow;

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

  mainWindow.loadFile('index.html');
  mainWindow.webContents.openDevTools();
}

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

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

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

เขียนไฟล์ preload.js

ไฟล์นี้ทำหน้าที่เป็นสะพานเชื่อมระหว่างโค้ดที่ทำงานในหน้าจอกับโค้ดหลัก ช่วยให้ปลอดภัยมากขึ้น

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.invoke('send-message', message),
  getHistory: () => ipcRenderer.invoke('get-history'),
  clearHistory: () => ipcRenderer.invoke('clear-history')
});

เขียนไฟล์ index.html

นี่คือหน้าตาของโปรแกรม AI ผู้ช่วยของเรา ออกแบบให้ใช้งานง่ายและสวยงาม

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Assistant - Electron</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
      background: #1a1a2e; 
      color: #eee;
      height: 100vh;
    }
    .container { 
      max-width: 800px; 
      margin: 0 auto; 
      padding: 20px; 
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    h1 { 
      text-align: center; 
      margin-bottom: 20px;
      color: #00d9ff;
    }
    #chat-container { 
      flex: 1; 
      overflow-y: auto; 
      border: 1px solid #333;
      border-radius: 10px;
      padding: 15px;
      background: #16213e;
      margin-bottom: 15px;
    }
    .message { 
      margin-bottom: 15px; 
      padding: 10px 15px; 
      border-radius: 10px;
      max-width: 80%;
    }
    .user { 
      background: #0f3460; 
      margin-left: auto;
      text-align: right;
    }
    .assistant { 
      background: #1a1a2e; 
      border: 1px solid #00d9ff;
    }
    .input-container { 
      display: flex; 
      gap: 10px; 
    }
    #message-input { 
      flex: 1; 
      padding: 12px; 
      border-radius: 8px; 
      border: 1px solid #333;
      background: #16213e;
      color: #fff;
      font-size: 14px;
    }
    button { 
      padding: 12px 25px; 
      background: #00d9ff; 
      color: #1a1a2e; 
      border: none; 
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }
    button:hover { background: #00b8d4; }
    button:disabled { background: #555; cursor: not-allowed; }
    .clear-btn {
      background: #ff4757;
      margin-left: 10px;
    }
    .clear-btn:hover { background: #ff3344; }
  </style>
</head>
<body>
  <div class="container">
    <h1>AI Assistant</h1>
    <div id="chat-container"></div>
    <div class="input-container">
      <input type="text" id="message-input" placeholder="พิมพ์ข้อความที่นี่...">
      <button id="send-btn">ส่ง</button>
      <button id="clear-btn" class="clear-btn">ล้าง</button>
    </div>
  </div>
  <script src="renderer.js"></script>
</body>
</html>

เขียนไฟล์ renderer.js

ไฟล์นี้จัดการการส่งข้อความและแสดงผลการสนทนา รวมถึงการเรียกใช้ API แบบสตรีม

const chatContainer = document.getElementById('chat-container');
const messageInput = document.getElementById('message-input');
const sendBtn = document.getElementById('send-btn');
const clearBtn = document.getElementById('clear-btn');

const API_KEY = 'YOUR_HOLYSHEEP_API_KEY';
const BASE_URL = 'https://api.holysheep.ai/v1';

let conversationHistory = [];

async function sendMessage() {
  const message = messageInput.value.trim();
  if (!message) return;

  addMessage('user', message);
  messageInput.value = '';
  sendBtn.disabled = true;

  conversationHistory.push({ role: 'user', content: message });

  const assistantMessage = addMessage('assistant', 'กำลังคิด...');

  try {
    const response = await fetch(${BASE_URL}/chat/completions, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': Bearer ${API_KEY}
      },
      body: JSON.stringify({
        model: 'gpt-4.1',
        messages: conversationHistory,
        stream: true
      })
    });

    if (!response.ok) {
      throw new Error(HTTP error: ${response.status});
    }

    assistantMessage.textContent = '';
    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value);
      const lines = chunk.split('\n');

      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const data = line.slice(6);
          if (data === '[DONE]') continue;

          try {
            const json = JSON.parse(data);
            const content = json.choices?.[0]?.delta?.content;
            if (content) {
              assistantMessage.textContent += content;
              scrollToBottom();
            }
          } catch (e) {}
        }
      }
    }

    conversationHistory.push({
      role: 'assistant',
      content: assistantMessage.textContent
    });

  } catch (error) {
    assistantMessage.textContent = เกิดข้อผิดพลาด: ${error.message};
    assistantMessage.style.color = '#ff4757';
  }

  sendBtn.disabled = false;
  saveHistory();
}

function addMessage(role, content) {
  const div = document.createElement('div');
  div.className = message ${role};
  div.textContent = content;
  chatContainer.appendChild(div);
  scrollToBottom();
  return div;
}

function scrollToBottom() {
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

function saveHistory() {
  localStorage.setItem('ai-chat-history', JSON.stringify(conversationHistory));
}

function loadHistory() {
  const saved = localStorage.getItem('ai-chat-history');
  if (saved) {
    conversationHistory = JSON.parse(saved);
    conversationHistory.forEach(msg => addMessage(msg.role, msg.content));
  }
}

function clearHistory() {
  conversationHistory = [];
  localStorage.removeItem('ai-chat-history');
  chatContainer.innerHTML = '';
}

sendBtn.addEventListener('click', sendMessage);
clearBtn.addEventListener('click', clearHistory);
messageInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') sendMessage();
});

loadHistory();

การเพิ่มฟังก์ชันบันทึกลงไฟล์ (Local Cache)

จากโค้ดด้านบน เราใช้ localStorage เพื่อเก็บประวัติการสนทนา ซึ่งเป็นการเก็บในเบราว์เซอร์ แต่ถ้าต้องการเก็บลงไฟล์จริงๆ บนคอมพิวเตอร์ สามารถทำได้โดยเพิ่มการจัดการผ่าน main process ให้อัปเดตไฟล์ main.js เพิ่มฟังก์ชันบันทึกไฟล์

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

let mainWindow;

const historyPath = path.join(app.getPath('userData'), 'chat-history.json');

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

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

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

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

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

ipcMain.handle('save-history', async (event, history) => {
  try {
    fs.writeFileSync(historyPath, JSON.stringify(history, null, 2));
    return { success: true };
  } catch (error) {
    return { success: false, error: error.message };
  }
});

ipcMain.handle('load-history', async () => {
  try {
    if (fs.existsSync(historyPath)) {
      const data = fs.readFileSync(historyPath, 'utf8');
      return JSON.parse(data);
    }
    return [];
  } catch (error) {
    return [];
  }
});

ipcMain.handle('clear-history', async () => {
  try {
    if (fs.existsSync(historyPath)) {
      fs.unlinkSync(historyPath);
    }
    return { success: true };
  } catch (error) {
    return { success: false, error: error.message };
  }
});

วิธีรันโปรแกรม

เมื่อเขียนโค้ดเสร็จแล้ว ให้เปิด Terminal ไปที่โฟลเดอร์โปรเจกต์ แล้วพิมพ์

electron .

โปรแกรมจะเปิดหน้าต่างใหม่ขึ้นมา คุณสามารถพิมพ์ข้อความถาม AI ได้เลย ข้อความตอบจะแสดงทีละตัวอักษรเหมือนกับการพิมพ์จริง (Streaming) หากต้องการให้รันเร็วขึ้น สามารถสร้างคำสั่งลัดในไฟล์ package.json โดยเพิ่ม

"scripts": {
  "start": "electron ."
}

จากนั้นรันด้วยคำสั่ง

npm start

หลักการทำงานของ Streaming API

Streaming API คือการที่ AI ส่งข้อมูลกลับมาทีละส่วน แทนที่จะรอจนเสร็จทั้งหมดแล้วค่อยส่งคืน ทำให้เราเห็นคำตอบปรากฏขึ้นทีละตัวอักษร สร้างความรู้สึกเหมือนกำลังคุยกับคนจริงๆ เมื่อส่งคำถามไป ระบบจะส่ง request ไปที่ API ของ HolySheep ซึ่งมี endpoint คือ https://api.holysheep.ai/v1/chat/completions โดยตั้งค่า stream: true เพื่อให้ส่งข้อมูลกลับมาแบบสตรีม ข้อดีของวิธีนี้คือความเร็วในการตอบสนอง เนื่องจาก HolySheep AI มีความเร็วน้อยกว่า 50 มิลลิวินาที ทำให้รู้สึกว่า AI ตอบเร็วมาก

การปรับแต่งเพิ่มเติม

คุณสามารถปรับแต่งโปรแกรมได้หลายอย่าง เช่น เปลี่ยนสีพื้นหลังในไฟล์ index.html, เปลี่ยนโมเดล AI เป็น Claude หรือ Gemini โดยแก้ไขค่า model ใน renderer.js โมเดลที่แนะนำสำหรับการใช้งานทั่วไปคือ DeepSeek V3.2 ซึ่งราคาถูกมากเพียง $0.42 ต่อล้านโทเค็น หรือถ้าต้องการคุณภาพสูงกว่าให้เลือก GPT-4.1 ที่ $8

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

กรณีที่ 1: แสดงข้อผิดพลาด "401 Unauthorized"

ปัญหานี้เกิดจาก API Key ไม่ถูกต้องหรือหมดอายุ ให้ตรวจสอบว่าได้ใส่ API Key ที่ถูกต้อง หากยังไม่มีให้ สมัครสมาชิก เพื่อรับ API Key ฟรี

const API_KEY = 'YOUR_HOLYSHEEP_API_KEY';

ให้แทนที่ YOUR_HOLYSHEEP_API_KEY ด้วยคีย์จริงที่ได้จาก HolySheep AI

กรณีที่ 2: ข้อความตอบไม่แสดงเลย

ปัญหานี้อาจเกิดจากการเชื่อมต่ออินเทอร์เน็ตหรือ API ขัดข้อง ให้ตรวจสอบการเชื่อมต่อและลองรีเฟรชโปรแกรมใหม่

async function sendMessage() {
  try {
    const response = await fetch(${BASE_URL}/chat/completions, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': Bearer ${API_KEY}
      },
      body: JSON.stringify({
        model: 'gpt-4.1',
        messages: conversationHistory,
        stream: true
      })
    });

    if (!response.ok) {
      throw new Error(HTTP error: ${response.status});
    }
    // รันต่อ...
  } catch (error) {
    assistantMessage.textContent = เกิดข้อผิดพลาด: ${error.message};
  }
}

กรณีที่ 3: โปรแกรมรันไม่ขึ้นหรือขาดโมดูล

ให้ตรวจสอบว่าติดตั้ง dependencies ครบถ้วนแล้ว

npm install
npm start

หากยังมีปัญหา ให้ลบโฟลเดอร์ node_modules แล้วติดตั้งใหม่

rm -rf node_modules
npm install
npm start

กรณีที่ 4: ข้อมูลไม่ถูกบันทึกหลังปิดโปรแกรม

ให้ตรวจสอบว่า app.getPath('userData') ทำงานถูกต้อง และเพิ่มการตรวจสอบ path ก่อนบันทึก

ipcMain.handle('save-history', async (event, history) => {
  try {
    if (!fs.existsSync(app.getPath('userData'))) {
      fs.mkdirSync(app.getPath('userData'), { recursive: true });
    }
    fs.writeFileSync(historyPath, JSON.stringify(history, null, 2));
    return { success: true };
  } catch (error) {
    return { success: false, error: error.message };
  }
});

สรุป

ในบทความนี้เราได้เรียนรู้การสร้าง AI ผู้ช่วยบนเดสก์ท็อปด้วย Electron ตั้งแต่การติดตั้งเครื่องมือ การเขียนโค้ดทีละไฟล์ การใช้งาน Streaming API ไปจนถึงการบันทึกข้อมูลในเครื่อง ข้อดีของการใช้ HolySheheep AI คือความเร็วที่น้อยกว่า 50 มิลลิวินาที ราคาประหยัด และรองรับการชำระเงินผ่าน WeChat/Alipay ทำให้เหมาะสำ

สร้าง AI ผู้ช่วยบนเดสก์ท็อปด้วย Electron: การเรียกใช้ API แบบสตรีมและการเก็บข้อมูลในเครื่อง

HolySheep AI คืออะไร และทำไมต้องเลือกใช้

เตรียมเครื่องมือก่อนเริ่มเขียนโค้ด

ติดตั้ง Node.js

ติดตั้ง Electron

สร้างโปรเจกต์แรก

โครงสร้างโปรเจกต์

เขียนไฟล์ main.js

เขียนไฟล์ preload.js

เขียนไฟล์ index.html

เขียนไฟล์ renderer.js

การเพิ่มฟังก์ชันบันทึกลงไฟล์ (Local Cache)

วิธีรันโปรแกรม

หลักการทำงานของ Streaming API

การปรับแต่งเพิ่มเติม

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

กรณีที่ 1: แสดงข้อผิดพลาด "401 Unauthorized"

กรณีที่ 2: ข้อความตอบไม่แสดงเลย

กรณีที่ 3: โปรแกรมรันไม่ขึ้นหรือขาดโมดูล

กรณีที่ 4: ข้อมูลไม่ถูกบันทึกหลังปิดโปรแกรม

สรุป

แหล่งข้อมูลที่เกี่ยวข้อง

บทความที่เกี่ยวข้อง

HolySheep AI คืออะไร และทำไมต้องเลือกใช้

เตรียมเครื่องมือก่อนเริ่มเขียนโค้ด

ติดตั้ง Node.js

ติดตั้ง Electron

สร้างโปรเจกต์แรก

โครงสร้างโปรเจกต์

เขียนไฟล์ main.js

เขียนไฟล์ preload.js

เขียนไฟล์ index.html

เขียนไฟล์ renderer.js

การเพิ่มฟังก์ชันบันทึกลงไฟล์ (Local Cache)

วิธีรันโปรแกรม

หลักการทำงานของ Streaming API

การปรับแต่งเพิ่มเติม

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

กรณีที่ 1: แสดงข้อผิดพลาด "401 Unauthorized"

กรณีที่ 2: ข้อความตอบไม่แสดงเลย

กรณีที่ 3: โปรแกรมรันไม่ขึ้นหรือขาดโมดูล

กรณีที่ 4: ข้อมูลไม่ถูกบันทึกหลังปิดโปรแกรม

สรุป

แหล่งข้อมูลที่เกี่ยวข้อง

บทความที่เกี่ยวข้อง

🔥 ลอง HolySheep AI