沒錯，我又重來了。近期又重新享受了一波，沈浸在程式開發的快樂。好像已過 20 年想做的事，又重新濃縮式的跑了一遍，速度是幾十倍速的飛快
1-啓後必有承先
因著對資訊技術的愛好，五年來我得到充分的自由，可以天馬行空的嘗試探索。雖然沒有企業或團隊資源的支持，但可玩的東西已經很多了。
記得那個自由的起點，就從自己熟悉的本業開始吧，畢竟這些技術是真真實實的換取了 20 幾年的薪水，應該是有價值的，吧。當然為了特定企業打造的，拿到外面是否有用？多少必須打點折扣。有些技術，離了企業就變廢物了，但資訊的東西，透過無遠弗屆的網路，大多可以帶著走的。用 python 做資料分析，存取 azure 雲端資料庫；再用 angular 做前端網站，配合 dotent 開發的後台 api，前後端網站都可以佈署到 azure app service，全天候 7*24 小時的服務就上線了。因著雲端資源大部分有免費額度，所以開發階段幾乎花不到什麼錢，憑藉一己之力單兵作戰，就可以打造軟體產品，用軟體即服務 (SaaS) 的方式提供給全世界。
這想法太棒了，曾令我興奮很久，但是，...，好一個但是，但我真的感謝我遇到的所有但是。因為現實總是比想像中的殘酷好幾倍，...，萬倍億倍好了，總之，太難了。我是什麼鬼？誰理我啊！
雖然乏人問津，三不五時我自己會去「緬懷」一下，曾經很興奮的用心製作的「官網」，歷經菜菜的 logo，到最近才找到一點 feel，用我喜歡的「隸書」，滿有飄逸感，和有大大的耳朵的 N 草寫字母開頭的 Newman，這個 logo 不錯吧，我很滿意：
有了網站，「理論上」我已經向全世界曝光了，感覺自己好像快要成為風靡全世界的「商業人士」，哈哈，有些美好，留在想像中也不錯。
2-第一個商業構想
第一個商業構想是，製作自動化報表，每日發送給客戶，因為這是我在企業中最熟練的事。好，那寫什麼報表呢？從前只要抓一抓企業資料庫，庫存，訂單，產線資料，成本會計等等資料，要嗎鉅細彌遺的資訊量爆炸的大表，要嗎適度的配色設計的圖表，就很受歡迎了。使用者每天等我的報表，整合到他們的日常工作，就有了基本的成就感。一方面可能我做得還不錯，一方面使用者也「沒得選」了，非用不可！哈哈，資料庫和系統權限都掌握在我們這邊。都就是企業 IT 容易產生官僚氣息的原因。
那現在呢？最容易取得的公開資料，就是股市了。搭配多年來亂七八糟的先期知識，把大盤，期現貨價差，外資籌碼，融資融券，選擇權 OI，Put/Call Ratio 等等，做成還可以的圖文並茂的報表。因為年代久遠，經歷了 n 次的砍掉重練，這些「歷史遺跡」已經大部分消失不見了，很努力的「挖掘」到一些殘骸，在此做一下紀念：
然後，就沒有然後了。現在看來，這就是個小玩具，沒有什麼具體用處。雖然市面上也很多無用的產品，也會熱賣，但人家有其他的強項，比如說有某種「情緒價值」之類的，...，總之我除了沒有實用價值，也沒有情緒價值，做出一個廢物，沈在浩瀚網路的深淵中，也是理所當然的事。
3-物聯網之想像
之後，乘著「物聯網」的風潮，覺得這種「純軟」的服務，可能不夠酷，也不夠有獨特性。既然技術沒辦法最強，設計沒辦法最強，商業模式也沒辦法最強，反正一個個體戶，不可能在任何既定領域跟人家「硬碰硬」，只能「靈活跨界」，用獨特的排列組合方式，設計成獨一無二的應用模式。沒錯，當時的物聯網具備這種性質，所以開始我「玩板子」的旅程。
以上，PM2.5 感測器，arduino，濕度感測器，抽水馬達，...，夠了，發現再回憶下去，會沒完沒了，以下精簡為之即可。比如說，我也曾想說，好好練好 iOS App 開發技能，就去接案好了，不用那麼困難的構思自己的產品。這種想法大概活了半年左右，過程太瑣碎，也不想再挖了。
4-聚焦風險管理
之後繼續深化我在量化分析領域方面的能力，成果就是現在還活著的「精明管家」。因為涉及股票投資，市場過於混亂，應該被歸類為「類詐騙」網站吧！其實經過多年金融市場的蹂躪，已經對任何「預測」功能，完全喪失信心，只留下一項亙古不變，且真實的需求，就是「風險管理」。所有預測都有失準的時候，不如我們就來發展一種方法，
可以盡可能的因應所有極端的狀況。因此此系統走向，完全與金融分析與預測沒有關係，那不是我能做的事，我也沒有證照或資格，只能做好資產管理工作而已，這裡斷絕所有預測的意圖。也許我的朋友們，或所有路過的人，至今也都沒有理解過！現在可以再更新一下認知。
這已經是近期的事了，印象也比較深刻，表面上似乎也沒啥變化，但本質上的改變已經加速。因著風險管理，牽涉到非常私密的個人資料，包含銀行帳戶餘額，證券庫存，交易歷史等等，用公開網站的方式，若沒有做到滴水不漏的安全控管，很難讓使用者信任吧。一方面，維護公開網站那麼久，用「多人使用」架構去開發，卻永遠只有我一人使用，這維持的也夠心酸的了，索幸就轉為開發 desktop app 版本吧。所有程式跑在本機，憑證，密碼，都存在本機，這樣總可以了吧？這樣又度過一段快樂的開發歷程，至今穩定應用在自己的日常交易工作中。然後因產品化的夢想其實還未死透，再度嘗試「包裝成產品」看看，覺得我離市場又更接近了。我第一次驕傲的公開「展品簡報」，安裝程式，說明文件，甚至價格都標上去了。這是大約兩個月前的事。
5-再度重新開始
兩個月，乏人問津，應該也是可以宣判死刑了。好，我沒有停止成長，我自己也發現很多不足之處，的確不夠好。其一，要使用者 download 安裝程式，這也太難了吧！然後要設定憑證和證券戶的帳密，這門檻也非常高，尤其是在信任度全無的其況下，幾乎不可能！然後還有，這半年來股市狂飆，風險控管一點也不討喜。
每次失敗，總是蒸發一些或許多泡沫，但也會留下一些價值。風險控管難道不重要嗎？當然重要。怎麼做？用「投資組合」啊。這就是我現在還可以留住的東西。根據各標的的價格特性，配置適合的比例，說穿了就只有這一句話。配置好的投資組合，就算過年長假也不需要大幅去變動，不再緊張的殺進殺出，這套方法才是可以陪伴我長長久久的。
所謂價格特性，主要是指波動性，而投資組合代表有多標的，他們之間的「關聯性」，也成為重要元素。而用不同比例配方起來，又可以呈現整個投資組合的波動性，整個搭配起來成為風險控管的基本範疇。更進一步考慮，是關鍵且重要的，但卻是所有使用者最難面對的或揭露的，就是在整個投資組合「之外」的現金部位。因為再好的投資組合，都不能沒有額外夠寬裕的緩衝區，緩衝區夠不夠大，攸關著生死存亡，這就是「槓桿倍數」的管理。這些都是重要的，只是要一步一步來。
重來吧，讓使用者親和度最高的，還是非網站莫屬。點下去就呈現基本的資料，這一步還是要先做到一定的吸引力。待一段時間的信任度培養，也許使用者可以選擇「登入」，成為一個可識別的實體，這時還不是會員，或稱免費會員，再多享受一些功能。再過一段時間，才可能讓使用者願意付出他口袋了的一塊錢，升級成為付費用戶！這旅程沒有一步驟是容易的。
6-技術架構
前端網站，我已經學了 angular，多年來似乎就被綁定了！在那個時代，同時要精通多項技能很不容易，但現在時代也很不一樣了，到了該徹底放下重新評估的時候了。經過評估 React 的親和性和流通性有所勝出。在百般無聊的剩餘人生中，再給自己學習新東西的機會吧，也許會增添許多樂趣。若是從前的我，可能會覺得 angular 白學了，很可惜；但現在好像完全沒有這種感覺了。一方面其實我也學得不怎麼好，丟掉就沒那的可惜了，哈哈；另一方面，學習新技能的門檻，已經大幅降低了。這是基於自己的知識基礎的提升，和 ai 工具的進步，所以，擁抱新科技吧，什麼疑慮捆綁，全都可以掙脫了。
後端呢，前述的 dotnet 已經早就丟的無影無蹤了，以 python 語言為基礎的 flask 架構，已經成為後台主力很久了，現在也是可以繼續前行，不需畫地自限。評估過後 FastAPI 是更好的選擇，就從善如流吧。就這樣，前後端技術都是全新的，用全新的工具打造全新的產品，太酷了。
7-從 UI Layout 開始
本身並無設計或美工背景，做出來的網站，要到一定的質感水準，一直是我很大的挑戰。bootstrap 大概陪了我十年吧，運用的程度，也只能勉強達到「不醜」而已。據說現在又有新的工具出來了，tailwind 似乎更受推崇，那就從善如流囉。用 React + Taiwind 先做一個簡單的架構出來，有側邊欄選單，頂端要有工具列。想法確認後，瞬間就完成了：
質感還不錯。這次開發還有一個重點，就是要顧到「手機端」操作模式，我現有的舊網站，一用手機開啟，畫面慘不忍睹，已經不舒服很久了。taiwind 在 responsive web 支援的不錯，可以設定任何 ui 元素，在特定解析度以上才顯現。如以下：
<button
onClick={() => setOpen(!open)}
className="md:hidden fixed top-4 left-4 z-50 p-2 bg-gray-800 text-white rounded-lg shadow"
>
一個按鈕，掛上屬性 md:hidden，代表只在 medium screen and jarger 必須隱藏。因此以上截圖沒有出現此按鈕，只在手機模式才顯示。以下兩按鈕在手機模式就跑出來了：
當按鈕按下，才跑出側邊欄，或是用下拉選單顯示原本在工具列的元件：
這樣 ui 的底層佈局就差不多了。
8-試一些 charting 元件
圖表是必要的，據說與 React 搭配最順的元件是 rechats。先來一碟拼盤吧，把全部支援的圖表類型都做出來看看效果：
以上，缺了金融資料最常用的 candlestick。查了一下，有類 bloomberg 風格，由 tradingview 所開發貢獻的 lightweight-charts，很快就試成功了：
看了這些流行的元件，想起我已經使用許久的老朋友 highcharts，似乎也不遜色，甚至還有過之呢。呼叫老朋友，繼續用 highcharts 吧：
9-接通資料吧
ui 大致搞定後，當然就要用即時，真的資料，讓網頁活起來啊，那就需要呼叫 api 了。React 的語法非常親和，很快就測通了，且把它獨立成一個元件，可以在任何頁面呼叫了：
const API_BASE = "http://127.0.0.1:8000";
function getToken() {
return localStorage.getItem("newman-react-token");
}
async function apiFetch(endpoint, options = {}) {
const token = getToken();
const headers = {
"Content-Type": "application/json",
...(token ? { Authorization: `Bearer ${token}` } : {}),
...options.headers,
};
const response = await fetch(`${API_BASE}${endpoint}`, {
...options,
headers,
});
if (!response.ok) {
const err = await response.text();
throw new Error(`API Error ${response.status}: ${err}`);
}
return await response.json();
}
// Expose CRUD helpers
export const apiService = {
get: (url) => apiFetch(url, { method: "GET" }),
post: (url, data) =>
apiFetch(url, { method: "POST", body: JSON.stringify(data) }),
put: (url, data) =>
apiFetch(url, { method: "PUT", body: JSON.stringify(data) }),
del: (url) => apiFetch(url, { method: "DELETE" }),
};
export default apiService;
以上精簡的語法，真是充滿美感啊！我先做一個獲取一年歷史的 candles 資料，網頁就活起來了。以下按某個按鈕，立刻顯示某個標的一年 K 線。
10-把一套投資組合存起來
儲存是個敏感的動作，當使用者不認識我，預設是不會透露任何個資的，我想這是今時代資訊安全的基本素養，非常合理。所以我先不動用任何資料庫，只存在使用者個人的電腦裡面，最方便的地方就是瀏覽器的 localStorage 了。其實每個人都可以在瀏覽器中按下 F12 看到以下：
儲存的格式是 key-value，只接受字串。我們需要儲存 object，用 json 序列化即可。當一個不認識的訪客蒞臨遊玩時，我就用 newman-react-guest 為 key 來儲存，預留將來使用者登入時，可以用 email 為 key；這樣使用者可以自由自在的玩我的系統了。但我也很怕此網站突然「爆紅」，幾萬人一起來 request，那我的後台就會死掉。所以預設會用一個特殊的 token 來讓後台識別，若遇到「那一天」，可以緊急擋住，不至於讓雲端費用爆表。
11-開始提供附加價值
K 線，現在可以說唾手可得，若只有這樣，使用者完全沒有理由繼續造訪我的網站，所以要來點不一樣的東西了。首先是「年化報酬」，搭配「Drawdown」，這一步可以說是開始摸到量化分析的邊了。風險相關的還有「年化波動」，sharpe 等等，這些基本功的基本價值先擺出來吧，畫成以下的圖表：
到這一步，開始展現我的獨特性，請看看市面上許多很專業的財經網站，都很難找到這些資料吧。我沒辦法跟人家拼基本面分析，或即時快速的財經新聞，但玩數字我是可以的。
12-Show 一點主菜吧
我的主菜是圍繞在「投資組合」打轉，若剛剛的單個標的量化指標，已經拉開市場的區隔性，那投資組合的屬性，就是開始拉開差距了。單一標的有的量化指標，整體的 portfolio 都有，利用打群架的方式，優化風險和報酬。
為了計算投資組合的屬性，還有一個重要元素，就是每個標的的「曝險額度」，這超重要的。就算一般人不頻繁的買賣進出，時有同樣數量的證券，其價值也會隨著市場報價而起伏，對於重押的標的，甚至會甩很大！而對有些較積極的投資者，滿手幾十檔標的，每一檔都在那邊震來震去，每天加總彙整損益或評估風險，就會變得非常麻煩。我的系統來了，就是來解決這痛點的，只要維護持有數量，市值就可以自動計算了。而對於終於肯信賴我的使用者，甚至也可以連結帳戶去更新庫存！這會節省非常多的日常管理負擔。我自己已經天天在享用這些功能了，就等有緣的使用者來一起獲益。
基本的維護工作已經做好，點選任一標的，輸入庫存，然後打包儲存，介面已經做得非常流暢。連同新增標的，刪除標的，操作流程非常流暢：
適當配置的 portfolio，可以降低波動，提高 sharpe，基本上只要資金到一定規模的個人，家庭，或機構，都是必須學習的必要功課。portfolio 管理可淺可深，先放出一個具有代表性的功能，也是我近期開發工作中最得意的作品，可以稱為「風險分布圖」。
具體邏輯如下：先取得各標的歷史每日收盤價，計算每日報酬率，若是半年就是大約 125 維度的向量；再計算搭們彼此的「cosine 距離矩陣」，輸入 kernel PCA 演算法，降維成平面向量。然後把它們用 bubble chart 畫出來，其中還有泡泡大小，就是反應片險金額大小。這樣可以一目瞭然是否有任何「風險集中」之處。以下舉例說明之：
紅色泡泡為空方，藍色泡泡為多方，有沒有看到兩個紅泡泡靠得很近？這就是風險集中處，尤其是它們又很大顆，那就要特別注意了。經常出現這種狀況：好像買的標的很多個，似乎很分散了，但在此圖的照妖鏡之下，可以輕易地顯示出「哪些標的其實很像」，所謂很像就是漲跌方向趨於一致。這就是使用 cosine 距離的重要意義。對原理不清楚沒關係，會看圖就好了。在市場待久了一定會遇到，行情走勢不如預期，然後又剛好在某個重押的標的，那就 GG 了！盯緊此圖，維持 portfolio 風險充分分散，這是在判斷失準時還能保命的關鍵。
使用者可以輸入自己的真實資料，只會存在本機請放心，或是模擬各種狀況，為自己的投資組合做個健康檢查。
13-後台的分工
前述的功能只是按一下就瞬間完成了，豈知其中牽涉到多少向量計算嗎？這些計算若用前端的 javascript 一定會寫到昏倒，且也會慢很多，後台的 python 則擅長此類計算。所以我們的做法，就是把 portfolio 的組成，包含各標的的代號和數量，打包成參數丟到後台再解開，執行快速的向量計算：包含取得所有標的的一年歷史行情，轉換成報酬率，計算兩兩之間的 cosine 距離，降維，等所有動作。最後回傳精簡的 bubble chart 所需資料。
14-後台必要的 cache
在計算 portfolio 相關統計特性時，有一項原始資料不斷被用到，若每次都重新向資料庫業者，或外部專業網站去爬取，那會浪費許多時間，許多網路成本一直重複發生。這時 cache 就要派上用場了。經過研究，python dataFrame 具有的原生功能，就能高效的存成 parquet 二進位格式的檔案，可以存在 server 本地的儲存空間。因為以半年的週期來計算，一天的差別影響不大，所以可以設定 cache 過期的時間為一天；如此可以大幅提升整體計算效率。
15-Login 一下吧
當一位陌生人在此遊玩了一陣子，覺得嗯，好用。那我們來好好培養感情吧，共同邁向下一步。天底下真正有價值的服務，都是需要耗用資源的：我的經驗，能力，技術，雲端空間，計算資源，網路資源等等都需要成本，若要服務能夠持續，合理的利潤是需要的。免費仔，只能獲得非常受限制的服務。目前初步規劃，對於路過的陌生人，只能建立五個標的的投資組合，login 者，可能可以建立十個，或者用功能性去限制耗用得資源；將來我會發展出值得使用者付費升級的高價值服務。
Login 機制有其複雜性，畢竟這是牽涉到安全，用 email 和密碼的認證方式我覺得不優，還是把這種工作外包給 google 吧，公信力足夠。找到專為 React 開發的套件 「@react-oauth/google」，摸索了一下就成功了。後台呢，要去找 python 的套件來執行驗證。
嚴謹的認證流程如下，還真的很麻煩：在前端提供按鈕，連到 google 驗證介面，返回 idToken。此 idToken 可以用 jwt 相觀套件解開，得到 email, picture 等等，可以把頭像顯在右上角表示 login 成功，確認執行軟體者的身份。這樣雖然解開使用者資訊，但不算完成驗證。必須將 idToken 傳到後台，用 google 官方套件驗證 client_id 和有效期限等等，才算驗證通過。之後由 application 產生 accessToken 給前端保存，accessToken 為應用程式自己定義，以控制效期和授權範圍，比如說設定一整個禮拜均有效，就不用一直去呼叫 google login，呼叫 api 也是透過 accessToken 驗證。我自己應用時，做了適度的簡化，但還是無損於安全性。總之，login 機制已經完成了。
16-完成階段性任務
以上從無到有，幾乎完成了一個軟體服務 (Software As A Service) 的所有元素，就在短短的一周內發生了！感謝這個時代，提供了包羅萬象的工具和資源，讓願意的人永遠有機會從頭開始。分享技術細節或鉅細彌遺的程式碼已經沒有意義了，因為已經唾手可得，但這種產品規劃的 know-how 還是很有價值的。在沒多久，大約一兩年以前，這是不可能發生的這麼快的，可能要非常努力的日以繼夜努力半年才可以達到，現在濃縮了數十年來累積的技術和經驗，在短時間內大量輸出。
17-與使用者相見歡
網站要見人，就要部署到雲端。因著資源的拮据，一直是免費仔，這實在讓我吃盡苦頭。堂堂 azure 大平台，管理介面和 deploy 程序都慢到不行，實在太浪費時間了。卡在這裡讓我開發的好東西，無法展現好效果，那還真是可惜，就憑信心大膽的往前跨一小步吧，乖乖升級付錢。燒了五年的時間，現在有點緊迫感，又加上一點燒錢的感覺了。希望有機會遇到乾爹，讓有價值的服務可以持續下去。
網站在這兒：
https://newman-portfolio.azurewebsites.net/
尚未登入的訪客，可以新增五個標的；登入的朋友，可以新增十個標的。可以把自己的投資標的輸入看看，台股上市請加 .TW，如 2330.TW 代表台積電；上櫃類股請加 .TWO，如 6488.TWO 代表環球晶，依此類推。
目前資料只存在 localStorage，請放心，不會有人知道你買了什麼股票。擁有多少庫存也可輸入，系統會用最新市價自動計算市值，畫出泡泡圖。泡泡圖就是風險健檢，可以觀察是否有過度集中的情形。為即時反應標的屬性，歷史資料只取半年，且會暫存快取一天，也就是有可能落後一天，但不影響風險計算；本系統目前尚未顧及即時性，首要訴求是建構穩健的投資組合。最終成品的上線網站呈現如下：
此圖已經提供目前市場稀有的服務，當成給新朋友的禮物，此外我還會很多，有人支持才能持續開發下去，衷心期望。
Newman 2025/11/19
導覽頁：紐曼的技術筆記-索引
導覽頁：精明管家
