ChatGPT 桌面端开发入门指南：从零搭建到核心功能实现

1次阅读

共计 2793 个字符，预计需要花费 7 分钟才能阅读完成。

首先需要安装 Node.js（建议 v16+）和 npm/yarn。然后通过以下步骤创建项目：

创建项目目录并初始化：

mkdir chatgpt-desktop && cd chatgpt-desktop
npm init -y

安装 Electron 和 React 相关依赖：

npm install electron electron-builder --save-dev
npm install react react-dom @types/react @types/react-dom --save

创建基础 Electron 应用结构：

// main.js (Electron 主进程)
const {app, BrowserWindow} = require('electron')

let mainWindow

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

  mainWindow.loadFile('index.html')
}

app.whenReady().then(createWindow)

Electron 采用主进程 + 渲染进程的架构：

主进程：管理应用生命周期、原生 GUI
渲染进程：显示网页内容（类似浏览器标签页）

通信方式主要有：

IPC（进程间通信）：

// 主进程
const {ipcMain} = require('electron')
ipcMain.on('message', (event, arg) => {console.log(arg) // 打印来自渲染进程的消息
  event.reply('reply', 'pong') // 回复消息
})

// 渲染进程
const {ipcRenderer} = require('electron')
ipcRenderer.send('message', 'ping')
ipcRenderer.on('reply', (event, arg) => {console.log(arg) // 打印 'pong'
})

Remote 模块（已不推荐）：

// 渲染进程中
const {remote} = require('electron')
const mainWindow = remote.getCurrentWindow()

建议封装独立的 API 服务模块：

// services/chatgpt.js
const axios = require('axios')

class ChatGPT {constructor(apiKey) {
    this.client = axios.create({
      baseURL: 'https://api.openai.com/v1',
      headers: {'Authorization': `Bearer ${apiKey}` }
    })
  }

  async sendMessage(prompt) {
    try {
      const response = await this.client.post('/completions', {
        model: 'text-davinci-003',
        prompt,
        max_tokens: 150
      })
      return response.data.choices[0].text
    } catch (error) {console.error('API Error:', error.response?.data || error.message)
      throw new Error('Failed to get response from ChatGPT')
    }
  }
}

module.exports = ChatGPT

根据数据量大小选择存储方式：

少量数据：使用 localStorage

// 渲染进程中
localStorage.setItem('apiKey', 'sk-...')
const key = localStorage.getItem('apiKey')

大量结构化数据：使用 IndexedDB

// 使用 Dexie.js 简化操作
import Dexie from 'dexie'

const db = new Dexie('ChatHistoryDB')
db.version(1).stores({chats: '++id, timestamp, content'})

// 添加记录
await db.chats.add({timestamp: Date.now(),
  content: 'Hello ChatGPT'
})

实现多窗口聊天界面：

// main.js
const path = require('path')

function createChatWindow(chatId) {
  const win = new BrowserWindow({
    width: 600,
    height: 800,
    webPreferences: {preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile(`chat.html?chatId=${chatId}`)
  return win
}

ipcMain.handle('open-new-chat', () => {const chatId = Date.now()
  createChatWindow(chatId)
  return chatId
})