https://copper-actor-379315.firebaseapp.com/

widget website design

網站形式的整合型桌面小工具，包含時鐘、天氣、to-do list、計算機、股票查詢、儲存網頁連結，其中有dark mode和google的登入系統，登入後可儲存小工具設定的資訊。

各功能使用技術

總覽

• 使用 React 框架製作網頁，並根據功能使用不同 hook 開發
• 調用各種 third-part API 取得各種所需資訊
• 使用 style components module 撰寫 CSS 與實作 RWD

登入系統

• 使用 firebase 的 Authentication 服務來讓使用者登入 google 帳號
• 再使用 firebase 的 realtime database 服務來讓使用者儲存在小工具中記錄的資料
• 修改 firebase 控制台 rules 限制 realtime database 只有登入的使用者才能讀取並新增自己的資料，並限制每一項小工具新增資料上限不然我流量會爆掉

天氣

• 進入網頁會請求 local 端的位置資訊，使用者同意取用後，使用 openweather 的API，獲取當地天氣與溫度資訊，並呈現於網頁中
• 讀取 API 中的天氣碼，並根據各個天氣替換自製天氣 icon

待辦事項

• 使用 useReducer hook 來管理所有待辦事項的狀態，包括新增、刪除、換行、完成等
• 登入後所有代辦事項的修改會儲存至 firebase 的 realtime database ，等下次登入後會顯示之前所儲存的資料
• 使用 useEffect hook 偵測參數變化，並使用 useRef hook 即時改變網頁元素，例如:當按下 Enter 鍵時新增新的待辦事項，useEffect 偵測到待辦事項的值改變後使用 useRef hook 讓網頁中待辦事項的 onfocus 換到新的待辦事項

計算機

• 使用 useReducer hook 管理所有計算機的算術邏輯

股票查詢

• 用臺灣證券交易所 OpenAPI 抓取所有股票代號和股票名稱(遇到 CORS 問題會轉為讀取預留的 json 檔資料)
• 用富果即時行情 API 讀取股價即時報價資訊
• 使用 useState hook & useEffect hook 管理使用者新增的股票觀察清單
• 使用 firebase 的 realtime database 即時儲存已登入使用者的股票觀察清單資料

連結收藏

• 使用 my.faviconkit API 來抓取所有連結的 favicon
• 使用 firebase 的 realtime database 即時儲存已登入使用者儲存的連結

相關連結

• github