關於這個系列

這是一系列關於 ChingTech OS 內部系統開發的技術分享文章。我們從零開始打造一個企業內部作業系統，涵蓋：

  • 🖥️ 無框架前端開發（Vanilla JS + IIFE 模組化）
  • 🔌 即時通訊與終端機整合
  • 🤖 AI 助手整合（Claude）
  • 📁 NAS 檔案系統存取
  • 🔐 安全認證機制
  • 🚀 開發環境與部署

總計 6 個系列、17 篇文章，適合想了解完整系統開發流程的工程師參考。

基礎知識

在閱讀系列文章之前，建議先了解以下基礎概念：

主題 文章 說明
Linux Linux 終端機入門：開發者必備指令 終端機操作、SSH、rsync
Docker Docker 基礎概念與常用指令 容器化基礎、docker-compose 入門
SDD 開發流程 SDD 規格驅動開發入門（一）：環境安裝篇 Claude Code、OpenSpec、uv 環境建置

閱讀建議

新手路線：

  1. 先閱讀「基礎知識」區塊的文章
  2. 從系列一開始，了解前端架構
  3. 依序閱讀各系列

特定需求：

  • 想做 Web Terminal → 直接看系列二
  • 想整合 AI → 直接看系列三
  • 想存取 NAS → 直接看系列四
  • 想快速建立開發環境 → 直接看系列六

系列一：無框架前端開發實戰

不用 React/Vue，用 Vanilla JS 打造完整的桌面風格 Web 應用

# 文章 重點
1 為什麼我們選擇不用 React/Vue？談 Vanilla JS 的適用場景 IIFE 模組化、框架取捨
2 視窗系統（上）：讓網頁變成桌面 - 基礎拖曳功能 拖曳事件、座標計算
3 視窗系統（中）：縮放、最大化與多視窗管理 八方向縮放、Z-index 管理
4 視窗系統（下）：Window Snap 與 Taskbar 整合 邊緣吸附、工作列同步
5 CSS 設計系統：一行程式碼切換全站主題 CSS Variables、主題切換

系列二：Web 終端機從零開始

在網頁上跑出真正的 Terminal，支援 vim、htop 等互動程式

# 文章 重點
1 什麼是 PTY？讓網頁跑出真正的 Terminal PTY 原理、ptyprocess
2 後端架構：FastAPI + Socket.IO 雙向通訊 WebSocket、即時通訊
3 前端整合：xterm.js 打造完整終端體驗 xterm.js、ANSI 色彩

系列三：在 Web 應用中整合 Claude AI

讓內部系統擁有 AI 助手，從架構到 Prompt 設計

# 文章 重點
1 架構選擇：Claude CLI 整合與對話設計 CLI vs API、對話管理
2 Token 管理：估算、警告與自動壓縮 Token 計算、對話壓縮
3 System Prompt 設計：打造專屬 AI 助手人格 Prompt 工程、角色設定

系列四：Python 存取 NAS 檔案系統

用 Python 連接公司 NAS，實作完整的檔案管理 API

# 文章 重點
1 SMB 協定入門：用 Python 連接公司 NAS SMB 協定、smbprotocol
2 檔案管理 API：FastAPI 實作上傳下載刪除 RESTful API、串流下載

系列五：Web 應用安全機制實作

不用另建帳號系統，用 NAS 帳號實現認證與追蹤

# 文章 重點
1 認證系統：用 NAS 帳號實現 SSO 效果 Session 管理、SMB 認證
2 登入追蹤：裝置指紋與地理位置記錄 裝置指紋、GeoIP

系列六：開發環境與資料庫管理

新人加入專案，五分鐘就能開始開發

# 文章 重點
1 Alembic 資料庫版本控制：讓 Schema 變更可追蹤 Migration、版本控制
2 Docker Compose 一鍵啟動開發環境 容器化、環境統一

技術棧總覽

層級 技術
前端 Vanilla JS、IIFE 模組、xterm.js、CSS Variables
後端 Python、FastAPI、Socket.IO、Uvicorn
資料庫 PostgreSQL、Alembic、asyncpg
檔案系統 SMB/CIFS、smbprotocol、smbclient
AI Claude CLI、Prompt Engineering
DevOps Docker Compose、code-server
安全 Session Token、裝置指紋、GeoIP

專案結構

ching-tech-os/
├── frontend/           # 前端程式碼
│   ├── js/            # JavaScript 模組
│   ├── css/           # 樣式表
│   └── index.html     # 主頁面
├── backend/           # 後端程式碼
│   ├── src/           # Python 原始碼
│   ├── migrations/    # Alembic migrations
│   └── alembic.ini    # Alembic 設定
├── docker/            # Docker 設定
│   ├── docker-compose.yml
│   └── .env.example
└── data/              # 資料檔案
    └── prompts/       # AI Prompt 模板

參考資源

官方文件

相關工具

Happy Coding! 🚀