靜態資料呈現

UI / UX 設計

less 

is more

按鍵面積大

方便觸控

黑底設計

省電 護眼

技術應用

爬蟲

資料整合

- Express.js

- MongoDB Atlas

- Scrapy

- Scrapyd
- Splash

- Docker

前端介面

- React

- Redux

資料收集/整合流程

資料源

爬取範圍

- HiStock

- TWSE
- CNYES

股價

財務三報表

每月營收

上市代號

ETF 成分股

除權息資訊

擷取所需資料，並依前端需求提供整合過的資料

動態操作模型

數學模型

客製化文字編輯器

自定義資料表

為了提升使用者體驗，我們透過了design pattern中的pub/sub pattern來作為模式溝通的橋樑，分為：一般模式、數學模型編輯模式．不同的模式會造成操作上不同的效果．

客製化文字編輯器

文字編輯器將資料以行為單位作區分，使用者可以

將各行定義為四種類別：header, sub-header, line, grid, normal

這個模式中增加了marker editter的功能 讓使用者能建立更符合自己預期的筆記欄，以額外的json object將被標記的文字與其在textinput上的位置相互關聯

值得一提的是grid type：他將自定義報表與文字編輯器相互連接，讓使用者將想記錄的資料內容迅速關聯至其中

自定義資料表

優化了資料選擇與觀看的功能

以陣列的選取方式更新表格的header內容，並迅速的關聯至前頁的靜態data內容

因為是以module為單位作區別 使用者可以自己的習慣去區分與統整想觀察之靜態資料

數學模型

以pub/sub的方式去擷取使用者於自定義報表中點選之內容

mutation observer去監聽grid的hover事件 去觸發grid詳細資料pop up modal的顯示與否

會員系統

搭配前端、PaaS實做出符合客製化需求的後端API接口
利用 GrapQL 使得前端 API 使用者不受到既有 API 所可存取資料的限制

再藉由該資料庫有的關聯查詢，處理複雜的關聯資料
並且使用bcrypt加密，API間傳遞透過access token