系統架構摘要 (Executive Summary)
本報告統整了「飆股基因探測器 (Stock Radar)」的專案開發與優化脈絡。我們將解密如何跳脫傳統「後端金融爬蟲與重度運算」的效能災難，透過「GAS 防爆快取代理」獲取報價，再將量化分析引擎大挪移至純前端 JavaScript 陣列運算。最終結合 Apache ECharts，打造出具備法人級圖表、零伺服器成本的財經 SPA。
在投資市場中，一般散戶往往被龐雜的基本面與消息面淹沒，淪為追高殺低的「韭菜」。我們設計「飆股基因探測器」的初心，是打造一款能摒除雜訊的量化過濾器——專門掃描具有「均線糾結、突破壓力、底部爆量」等起飆前兆的股票。
然而，當我們試圖在網頁上打造媲美專業券商軟體的分析工具時，立刻撞上了嚴峻的技術高牆：API 限制、算力成本與圖表效能。
一、 突破 API 封鎖：GAS 代理與前端量化引擎
本章核心：解決 CORS 阻擋與伺服器算力瓶頸
分析為何前端直連財經 API 會導致金鑰外洩，以及如何將沉重的技術分析 (Technical Analysis, TA) 轉化為前端零成本運算。
開發初期，若讓前端直接呼叫 Yahoo Finance 等免費財經 API，不僅會被瀏覽器嚴格的同源政策 (CORS) 阻擋，還必須將 API 金鑰暴露在前端代碼中。此外，如果在後端 Python/Node.js 執行四大動能特徵（如計算 20 日移動平均線、漲停判定）的運算，伺服器主機費將是一筆天文數字。
架構師決策：「後端只做搬運工，所有的腦力活全部交給使用者的瀏覽器去算！」
我們實施了完美的解耦 (Decoupling) 架構：
- GAS 雲端防爆代理：前端僅發送股號給 Google Apps Script (GAS)，由 GAS 在安全端攜帶金鑰向外部索取 30 日原始 OHLCV 報價，並利用
CacheService阻擋高頻重複查詢 (Rate Limit)。 - 純 JS 客戶端算力下放：前端收到原始陣列後，利用 JavaScript 的
reduce與map函數，在 0.01 秒內精算出 MA5/MA20，並比對出「量增突破」、「連續買盤」等四大起飆特徵。這項設計達成了真正的 0 運算成本！
1. 具備漲停 / 爆發動能
4. 成交量翻倍放大
圖 1.1：前端 JS 沙盒毫秒級運算的動能判定儀表板
二、 告別靜態表格：ECharts 互動 K 線與生態系快取
本章核心：資料視覺化與無縫生態體驗
深入探討如何導入企業級圖表庫重現專業看盤軟體體驗，並利用 LocalStorage 與短 ID 實現全站「我的最愛」跨工具同步。
傳統的網頁選股工具通常只呈現枯燥的靜態數字表格，這會迫使使用者必須「跳出網頁」去開啟其他券商 APP 查看 K 線圖，導致流程中斷與流量流失。
為了解決這個痛點，我們導入了企業級的 Apache ECharts 。透過精密的配置，我們在網頁端重現了包含雙 Y 軸聯動、滑鼠滾輪縮放 (dataZoom)、十字游標追蹤的專業 30 日 K 線與成交量圖表。這項優化將使用者的頁面停留時間大幅拉長了數倍。
此外，我們實作了**短 ID 標籤解析與 LocalStorage 自選股陣列**。當使用者將某檔股票加入「我的最愛」時，數據會以 stock-radar 為金鑰寫入本機硬碟。
這種跨工具的本機狀態共享，正是我們在 課程活動情報站的訂閱架構 中反覆打磨的最佳實踐！
圖 2.1：導入 Apache ECharts 渲染的雙 Y 軸互動 K 線與量能圖
<!-- Apache ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
三、 結語：金融微服務的最佳實踐
「飆股動能探測器」成功證明了：一個功能強大的金融分析工具，不需要砸重金打造龐大的資料庫伺服器。
透過果斷的架構解耦——由 GAS 擔任防爆搬運工，將沉重的量化分析陣列完全交給使用者的瀏覽器去算，最後輔以 ECharts 高階視覺化。我們不僅徹底解決了 API 限流與主機崩潰的痛點，更打造成一個自帶極高黏著度與頂級變現能力的財經護城河產品。