> 關鍵技術：FastAPI、React、yfinance、Tavily API、SQLite

你有沒有想過，如果能「回到過去」練習股票交易該有多好？這次我打造了一個台股交易模擬訓練平台，讓你可以在歷史資料上練習交易決策，並且查看當時的真實新聞！

為什麼要做這個專案？

交易最難的不是技術分析，而是決策時的心態。但真金白銀下去總是讓人猶豫不決，模擬盤又缺少真實感。這個平台的核心理念是：

> 「用歷史資料重現真實的交易情境，讓你在沒有風險的環境下練習交易決策」

你可以：

• 📊 逐日回放歷史 K 線
• 📰 查看當天的真實新聞（工商時報）
• 💰 模擬買賣，追蹤損益
• 🔍 搜尋股票（支援中文名稱和代碼）

核心功能設計

1. 歷史回放機制

不同於傳統的回測系統直接顯示完整圖表，我設計的是「時間機器」模式：

• 逐日播放：像影片播放一樣，一天一天往前走
• 視覺遮蔽：只顯示目前日期之前的資料，避免「未來資訊洩漏」
• 播放控制：可以暫停、調整速度、跳轉特定日期

這樣的設計讓使用者真的像在當下做決策，而不是事後諸葛。

2. 新聞整合：最重要的功能

股價漲跌背後通常有原因。我整合了 Tavily API 來抓取工商時報的歷史新聞：

技術亮點：

• 智能查詢優化：自動從 Yahoo 股市抓取中文公司名稱，讓查詢更精準

  • 例如：8033.TW → 搜尋「8033 雷虎」而不是只搜尋「8033」
  • 大幅提升新聞相關性

• URL 日期解析：工商時報 URL 包含日期資訊（/YYYYMMDD 格式）

  • 解決 Tavily API 對台灣新聞不返回 published_date 的問題
  • 精準匹配歷史新聞與交易日期

• 智能快取機制：

首次查詢 1 個月 → 快取到資料庫
再查詢 3 個月 → 自動補足缺少的 2 個月

• 使用 SQLite 儲存新聞快取
• 支援部分快取補足，只抓取缺少的日期範圍
• 大幅減少 API 呼叫次數和等待時間

為什麼選工商時報？

測試過多個新聞來源後，發現工商時報是最穩定的：

• URL 格式統一，容易解析日期
• 財經新聞品質高
• 台股報導覆蓋率廣

3. 股票搜尋：中文友善的設計

台灣人習慣用公司名稱討論股票，而不是只記代號。所以我實作了雙向搜尋：

技術架構：

• 預建資料庫：

  • 從 TWSE（台灣證券交易所）和 TPEx（櫃買中心）抓取完整股票清單
  • 自動爬取每支股票的中文名稱
  • 儲存為 JSON 檔案（200+ 支股票）

• 快取機制：

  • 啟動時載入到記憶體，建立名稱索引
  • 支援模糊搜尋（子字串匹配）
  • 找不到的股票才即時查詢

• 搜尋邏輯：

輸入「2330」→ 搜尋代號 → 返回「2330.TW - 台積電」
輸入「台積電」→ 搜尋中文名 → 返回「2330.TW - 台積電」
輸入「雷虎」→ 搜尋中文名 → 返回「8033.TW - 雷虎」

使用體驗：

• 在搜尋框輸入時，即時顯示候選清單
• 300ms 防抖動，避免頻繁查詢
• 支援鍵盤操作（上下鍵選擇、Enter 確認）

技術挑戰與解決方案

挑戰 1：週末新聞怎麼辦？

問題：股市週末不開盤，但新聞週末還在發布。使用者回放到週一，應該顯示週末的新聞嗎？

解決方案：

• 設計「交易日對照表」API：回傳每個交易日對應的新聞日期範圍
• 週末新聞對應到下一個交易日
• 例如：週六日的新聞都會在週一顯示

挑戰 2：新聞載入太慢

問題：查詢 3 個月的新聞需要好幾分鐘，使用者體驗很差。

解決方案：

1. 漸進式進度回饋：

   • 顯示百分比進度（0% → 100%）
   • 顯示目前狀態（「搜尋 2024-08-01 ~ 2024-08-31」）

2. 智能快取策略：

   • 首次查詢：完整抓取並快取
   • 再次查詢：檢查已有範圍，只補足缺少的
   • 大幅減少重複查詢時間（從數分鐘降至數秒）

3. 後端日誌優化：

[fetch_and_cache_news] Cache status: 32 cached / 61 missing / 93 total days
[fetch_and_cache_news] Need to fetch 2 missing ranges

方便 debug 和了解快取效率

挑戰 3：跨域和環境配置

問題：開發時前後端分離，CORS 設定、API Key 管理容易出錯。

解決方案：

• 統一 Makefile：一鍵啟動前後端（make run）
• 環境變數簡化：只保留 8 個必要設定，移除冗餘配置
• CORS 自動配置：開發環境自動允許 localhost:5173
• 清晰的 README：非技術人員也能輕鬆啟動

前端設計：Cyber 風格的考量

選擇 Cyber 風格不只是為了好看，而是為了營造「駭入時間」的氛圍：

• 單色調配色：青藍色 (Cyan) 主調，降低長時間使用的疲勞
• 等寬字體：數字清晰易讀，像真實的交易終端
• 模糊背景：backdrop blur 提升視覺層次
• 流暢動畫：過場自然，不會太花俏

關鍵是功能大於形式，每個視覺元素都有目的。

實際應用場景

這個平台適合：

1. 交易新手：在安全環境下練習，培養盤感
2. 策略測試：驗證你的交易策略在歷史資料上的表現
3. 心理訓練：體驗面對虧損時的決策壓力
4. 教學用途：講師可以用歷史案例教學

技術棧總覽

技術	用途	特色
FastAPI	後端框架	高效能、自動 API 文件
yfinance	股價資料源	免費、穩定的 Yahoo Finance 資料
Tavily API	新聞搜尋	高品質的網路搜尋 API
SQLite	新聞快取	輕量級、零配置的資料庫
React + TypeScript	前端框架	型別安全、開發體驗佳
TradingView Charts	K 線圖表	專業級圖表庫
Tailwind CSS	樣式框架	快速開發、易於維護

開發心得

1. 先做最小可行產品（MVP）

一開始只實作了基本的股價回放，確認核心功能可行後才加入新聞整合。這樣的策略讓我避免過度設計，專注在真正重要的功能上。

2. 快取是關鍵

新聞查詢是最耗時的操作。實作智能快取機制後，使用者體驗大幅提升。好的快取策略 = 更好的用戶體驗。

3. 日誌很重要

後端加入詳細的日誌輸出（快取狀態、查詢範圍、錯誤訊息），讓 debug 效率提升 10 倍。不要省略日誌，未來的你會感謝現在的自己。

4. 文件勝過記憶

寫了詳細的 README 和 .env.example，幾個月後回來看專案時，5 分鐘就能重新上手。好文件是給未來的自己最好的禮物。

未來展望

這個專案還有很多可以改進的地方：

• [ ] 加入技術指標（MA、MACD、RSI）
• [ ] 交易策略回測引擎
• [ ] 多支股票同時監控
• [ ] 交易日誌和績效分析
• [ ] AI 輔助決策建議
• [ ] 社群功能（分享交易策略）

結語

打造這個平台最大的收穫不是技術本身，而是理解使用者需求的過程：

• 為什麼要逐日播放而不是一次顯示完整圖表？
• 為什麼新聞比技術指標更重要？
• 為什麼中文搜尋是必要功能？

這些問題的答案來自於實際使用和不斷改進。好的工具不是功能最多的，而是最符合使用者習慣的。

如果你也對股票交易或系統設計有興趣，歡迎到 GitHub 看看原始碼，或是實際試用看看！

---

專案連結：https://github.com/jason8745/llm\-stock\-trader\-trainer

技術標籤：#FastAPI #React #TaiwanStock #TradingSimulator #Tavily #yfinance #SQLite #Python #TypeScript

---

快速開始

想試用的話，只需要三個步驟：

# 1. 安裝依賴
make install

# 2. 設定 Tavily API Key（可選）
cd backend
cp .env.example .env
# 編輯 .env 填入你的 API Key

# 3. 啟動系統
make run

然後打開 http://localhost:5173 就能開始練習交易了！

祝你交易順利！📈