[網站開發] 美股搜尋網站 Norn-StockScreener Ver1.0 Release

上次的開發心得:

[網站開發] 美股搜尋網站 (1) 後端程式開發 - 使用Azure Cosmos DB & Azure Function

在上次的開發心得提到美股資料取得&每天更新資料庫的部分, 今天這篇則是把接Cosmos DB的後端程式 & 前端第一版做完了, 完成的成果如下:

Dark mode:

Mobile:

Norn-StockScreener網站位址:

https://norn-stockscreener.zmcx16.moe/

Github (Front-End):

https://github.com/zmcx16/Norn-StockScreener

搜尋功能主要包含了45個基本參數的過濾條件, 還有串接之前做的Norn-Minehunter美股健診網站, 畢竟這網站的開發初衷就是要滿足我的個人需求, 如果只有基本參數的過濾那我用現成的Stock Screener就好, 當初會想做這網站就是每次都要分開比對搜尋結果很麻煩, 才會想做一個滿足自己所有需求的網站!

在來會分別介紹後端跟前端的開發心得:

* 後端Server程式 *

基本上就是個簡單的資料庫查詢功能, 前端把UI的setting帶下來, 後端Server做Input檢查後就動態組成SQL搜尋條件, 再直接Query Azure Cosmos DB, 第一版就是先簡單實作有滿足功能就好。 至於測試方面則是只有針對每個過濾條件寫UT, 複合條件只有靠手測測個幾條, 畢竟這種搭配組合根本不可能靠UT或手測測得完...。

另外跟以往不同的是, 原本Server程式是想照慣例放到自己的Azure VM上, 可是那個VM只是一個月500塊的Azure B1S, 記憶體只有1G, 而且上面已經塞了5個web應用程式了..., 目前測試如果直接從DB拉所有股票資料, 程式的記憶體大概會耗到幾百MB, 這樣那台VM應該很容易就廢了, 還會連帶影響其他的應用程式...。

考慮到上述原因, 決定測試一下裝在Azure Function上, 畢竟Azure Function有每個月一百萬次呼叫以及40萬GB-s記憶體用量的免費額度, 應該是不至於超標, 缺點就是變成前端直連後端的Azure Function, 這樣要是遇到惡意的DDOS或爬蟲就沒辦法處理, 這部分就決定先觀察看看, 如果真的遇到了, 就再搬到自己的Server或開個新的Azure web service上了。

[後來簡單測試了一下, 發現Azure Function第一次觸發的暖機時間太長了(大概5s~15s), 決定還是先裝在自己VM的web server上, 在視情況看要不要調整spec...。]

* 前端UI *

UI的部分是用React寫的, 這已經是第三個用React寫的side project了, 不過每次寫都還是覺得自己會踩到不少雷, 而且因為寫的都是小的side project, 所以感覺自己的技術都不太有長進, 也沒有享受到React在大型應用程式上的好處, 最大享受到的好處大概就是像Material-UI這類的UI元件庫超豐富, 讓我幾乎不會有想要手刻UI元件的想法XD

說到Material-UI, 讓我最驚豔的是Material-UI的theme直接就有支援dark mode, 如果你的UI style都是用Material-UI的調色盤跟theme, 那只要直接切換theme type從light->dark就可以直接幫你底下的元件都轉成dark mode配色, 可是如果你有元件是自己寫死css的color以及background, 因為沒有Material-UI調色盤的對比跟增強色, 他當然就沒辦法幫你轉換dark mode適用的顏色, 你就得針對這些元件處理dark mode配色。

因為我大多數都是用Material-UI的調色盤, 而少數自訂義的css部分, 因為我對色彩學不熟, 我是乾脆直接用最簡單的做法, 直接在設定顏色時就調透明度, 這樣就算轉成dark mode原本設定的顏色違和感也不會太重, 算是一種取巧的做法~。

* 接下來的計畫 *

目前還有想到不少feature是想要做的, 條列如下:

1. 將網站直接做成手機App

直接把網站搬到手機App簡單來說就是PWA, 不知道PWA的可以參考以下這篇:

30 天 Progressive Web App 學習筆記 - 為什麼需要 PWA?

基本上PWA就是網站+基本預安裝讓手機瀏覽該網站有類App的使用體驗, 而近兩年微軟跟Google則是合作推出了TWA, 讓你的網站能真正包裝成app, 並上架到Google Store上! 不過要上架得滿足不少條件, 首先就是至少你的網站要先滿足PWA的規範才行。

要確定網站是否滿足PWA規範, 可以用Lighthouse這個工具, 可以直接幫你體檢你的網站的效能跟使用者體驗, 以及是否滿足PWA的基本需求, 下面是Norn-StockScreener測試的結果:

效能的評分結果不太好, 主要原因是我的React元件太多, 畢竟光是基本過濾參數就有45組了, 這邊要改善的話, 可以把讓網站不要一口氣讀取所有元件, 把過濾參數做成Basic跟Advanced兩種, 網頁讀取時只先render basic的元件就好。 而除了效能指標之外, 再來就是PWA的需求有沒有滿足:

從上述來看, 缺的都是以在mobile app上運作需要的功能, 像是網站離線連不到時offline可運行的模式, 還有可遮罩式icon等等, 值得高興的是, 像是CreateReact的樣板或是gastby都已經有現成的套件可用, 如果沒有特殊的客製化需求, 只要安裝對應的套件在設定一下config就行了, 如果要不靠套件從頭自己搞八成又得花大把時間了, 真是萬萬歲XD  設定好以後再跑一次Lighthouse, 順利取得了PWA徽章, 完成上架Google Store的第一步了! 剩下的步驟就之後慢慢搞定吧~。

2. 增加Tag功能

目前的網站功能只有基本參數過濾以及Norn-Minehunter掃雷過濾, 再來會想做些Popular Tag的功能, 像是有產業別的tag可以選, 點擊後就能導到該產業別的美股基本&比較資料; 還有像是各大基金持股Tag這類特殊功能, 每種Tag都會導到對應功能的summary頁面, 這塊算是一個超級大的feature, 之後打算針對自己的需求慢慢implement (最近有點太操, 步調要緩一緩XD)

3. 後端Server效能改善

目前只要網頁按Query按紐, 後端Server都會去DB查詢, 可是大多數的Stock Screener網站的搜尋結果都超快, 我在想應該是他們都有做cache, 然後query等過濾條件都在memory裡做掉了, 後端Server只要大概每15分~30分鐘去跟DB拿更新的所有個股資料到記憶體就好, Query本身不需要去問DB, 這塊想之後有空就實作進去(想暫時耍廢一陣子先~)。

這次的開發經驗就分享到這, 再來工作應該會很忙, 希望有餘力能繼續完成上面的future tasks~。