專案資訊

專案名稱

XAUUSD Spread Comparison｜多券商帳戶成本比較頁

專案簡介

XAUUSD Spread Comparison 是一個以資料比較為核心的 Web 頁面，將不同券商與帳戶的 XAUUSD 點差、往返手續費，以及每手總成本整理在同一個介面中。

這個專案的重點不是只找出一個最小的點差數字，而是讓使用者可以同時查看點差、手續費、觀察模式與資料時間，理解不同帳戶的成本差異。

開發狀態

Beta 測試中，持續改善資料驗證、平均值與當日最新資料的切換、歷史資料顯示，以及多語言頁面的帳戶設定。

必要連結

專案頁面：https://copi-tools.com/zh-hant/xauusd-spread-comparison/

技術實作內容

1. 開發動機

只比較 spread，可能會忽略帳戶另外收取的往返手續費。

例如，某個帳戶的點差較窄，但手續費較高；另一個帳戶的點差較寬，但手續費較低。若只看點差，使用者可能無法理解實際每手成本為什麼不同。

因此，這個頁面將比較拆成幾個部分：

• 點差
• 往返手續費
• 每手總成本
• 30 日平均資料
• 當日最新資料

比較頁也需要避免把某個時間點的數值描述成永久不變的條件。資料會隨來源、時間與帳戶設定變動，畫面需要同時提供觀察模式與更新時間。

2. 技術架構

這個專案以 WordPress plugin 作為主要的資料顯示層，並由前端 JavaScript 增加切換與排序功能：

• WordPress plugin：產生伺服器端 HTML 表格、處理 shortcode 與 REST API。
• 資料處理層：依照商品、券商與帳戶設定整理 spread、commission 與 total cost。
• REST API：提供指定商品的結構化比較資料。
• JavaScript：切換商品、切換平均／最新模式、重新排序資料列，並更新排名區塊。
• 多語言設定：分別管理英文、繁體中文與越南文頁面的帳戶清單與顯示文字。

目前使用的 shortcode 概念如下：

[spread_compare symbol="xauusd" mode="average"]

REST API 則使用統一的商品 key 取得資料：

/wp-json/tr-spread/v1/compare?symbol=xauusd

頁面第一次載入時先由伺服器輸出基本表格，JavaScript 載入後再提供互動功能。即使圖表或次要請求失敗，使用者仍然可以閱讀主要比較表。

3. 核心邏輯與技術挑戰

先將商品名稱統一

不同資料來源可能使用不同的 symbol 名稱表示同一個商品。例如，XAUUSD 可能被寫成 XAUUSD、GOLD 或 GOLDUSD。

因此，資料進入比較流程後，會先轉換成統一的內部 key：

XAUUSD / GOLD / GOLDUSD → xauusd

統一後，再由商品設定決定：

• 顯示名稱
• 小數位數
• spread 的換算方式
• 可顯示的帳戶
• 資料的新鮮度規則

這樣可以避免在 PHP、JavaScript 和資料處理程式中各自加入不同的 symbol 判斷。

分開保存平均值與最新值

每一筆帳戶資料不能只保存一個模糊的 total_cost。後端需要清楚區分不同觀察模式，例如：

{
  "key": "example-account",
  "spread_average": "0.040",
  "spread_realtime": "0.035",
  "average_total": "15.02",
  "realtime_total": "14.52",
  "commission_label": "$11",
  "time": "2026-08-04T09:00:00Z"
}

30 日平均適合用來觀察較長期間的成本狀態；當日最新則反映最近一次取得的資料。兩者用途不同，不能只在前端把同一個欄位重新命名。

確保總成本計算使用正確的帳戶規則

每手總成本可以概念化為：

每手總成本 = 點差成本 + 往返手續費

實際換算時，還需要考慮商品規格、點差單位、小數位數與帳戶手續費設定。因此，計算邏輯不能直接套用所有外匯商品的固定公式。

如果手續費設定錯誤，最後的排序結果也會錯誤。這也是為什麼帳戶設定需要與資料顯示邏輯分開管理，並在輸出前進行檢查。

表格與排序必須使用同一種模式

頁面顯示 30 日平均時，排序也必須依照平均總成本；切換成當日最新後，排序則應改用最新總成本。

如果畫面顯示平均值，卻用最新值排序，使用者會看到數字與排名互相矛盾的結果。

因此，平均／最新模式需要同時控制：

• 點差欄位
• 每手總成本欄位
• 排序欄位
• 排名區塊
• 模式標籤與更新時間

4. 解決方案

目前採用以下方式處理資料流程：

1. 將不同來源的商品名稱轉換成統一的 asset key。
2. 依照帳戶設定取得 spread 與 commission 資料。
3. 分別保存 30 日平均與當日最新的數值。
4. 在伺服器端先驗證數值、必要欄位與時間戳記。
5. 由 WordPress 輸出可直接閱讀的初始表格。
6. 由 JavaScript 依目前模式重新排序與更新顯示。
7. 如果最新資料無法通過驗證，保留上一筆可用資料並標示狀態。

這個流程的重點是，前端不需要自行猜測每個券商帳戶的資料規則，而是接收已經整理過的結構化資料。

5. 多語言頁面的資料驗證

英文、繁體中文與越南文頁面的帳戶清單不一定完全相同。因此，不能把某個語言頁面的排名、帳戶數量或「最低成本」結論直接複製到其他語言頁面。

每個頁面都需要確認：

• 顯示的帳戶確實存在於該語言版本
• 券商與帳戶名稱翻譯正確
• 手續費設定與數值相符
• 截圖與貼文內容使用同一批資料
• 30 日平均與當日最新沒有混用

這部分不只是翻譯問題，也屬於資料設定與產品介面的一部分。

目前的限制與後續方向

目前仍有幾個部分需要改善：

• 為每個 REST response 增加更嚴格的 schema 檢查
• 統一不同語言頁面的狀態訊息與更新時間格式
• 增加帳戶設定變更的檢查紀錄
• 測試部分帳戶缺少最新資料時的排序行為
• 避免無效數值被納入排名
• 增加資料延遲與快取狀態的顯示

這個頁面是交易成本資料的整理與比較工具，不提供交易訊號、自動下單、投資建議或獲利保證。顯示數據可能因時間、資料來源與帳戶條件而變動。

結語

XAUUSD 點差比較不只是把多個數字放進同一張表。要讓比較結果值得理解，還需要處理商品名稱統一、點差與手續費的換算、平均值與最新值的分離、資料驗證，以及不同語言頁面的帳戶設定。

目前的核心原則是：先在資料邊界統一格式，保存前先驗證，顯示時清楚標示觀察模式與時間，排序時使用與畫面相同的資料模式。

如果你也在開發需要比較多個資料來源的工具，想請教大家：

• 你會把平均值還是最新值設為預設顯示？
• 比較表中最重要的是 spread、手續費，還是每手總成本？
• 當其中一個帳戶資料延遲時，你會保留舊值、暫停排名，還是直接隱藏該列？