這是一次以 Modern Web 技術 為核心、跨越前端、AI、區塊鏈與社會倫理的挑戰。
27 天裡，我嘗試讓「數據」變得溫柔，讓「科技」回歸人性。
我是一名長照社工。
某天，一位阿嬤拿著手機問我：「這個投資群組是真的嗎？」
那一刻，我意識到：懂科技的人有責任讓科技更安全。
於是我開啟這個系列 —— 用 Modern Web 重新定義「信任」與「透明」。
| 核心概念 | 說明 | 實踐方式 |
|---|---|---|
| 即時 (Real-time) | 數據隨市場變化自動更新 | WebSocket、API 串流、Dashboard |
| 透明 (Transparency) | 資料流程可追蹤、可驗證 | 區塊鏈、智能合約、開源指標 |
| 安全 (Security) | 防駭、防詐、建立信任感 | 登入驗證分析、AI 詐欺偵測模型 |
➡ 重點：從數字到圖像，讓金融資訊更人性化。
➡ 重點：用機器學習協助早期預警、異常交易辨識。
➡ 重點：以社工視角拆解社會工程手法，結合技術做教育。
➡ 重點：從技術工具轉化為「信任架構」，強調可追溯與防偽價值。
➡ 重點：用商業數學建構量化交易策略，讓模型更貼近真實市場。
➡ 重點：用戲劇與故事反思技術倫理，讓 AI 有「人味」。
➡ 重點：從資料流到智能決策，完整串起前後端與金融邏輯。
| 範圍 | 主題摘要 |
|---|---|
| DAY 1–2 | 專案開場與社工初心：為何要談金融與區塊鏈 |
| DAY 3–6 | 即時金融資料可視化、Dashboards、Tick Data |
| DAY 7–10 | 風險指標與即時交易詐騙手法 |
| DAY 11–15 | 「巨人」系列：劇場化敘事與倫理辯證 |
| DAY 16–20 | 市場速度、公平與現代金融服務反思 |
| DAY 21–24 | 機器學習與區塊鏈應用 |
| DAY 25–27 | 登入驗證安全、分散式智慧與未來展望 |
| 維度 | 技術對應 | 社會價值 |
|---|---|---|
| 即時數據 | WebSocket, API | 快速反應、資訊透明 |
| 可視化 | Vue.js, D3.js | 讓數據可理解 |
| AI 預測 | Classification, Regression | 早期偵測詐欺與異常 |
| 區塊鏈 | Smart Contract, Hash Chain | 公開驗證與防偽 |
| 社工視角 | 案主故事與教育設計 | 科技素養與防詐教育 |
Modern Web 不只是框架，而是一種價值觀。
它讓資訊「即時」而非「焦慮」，讓科技「強大」但仍「善良」。
當前端與區塊鏈交會時，真正重要的不是速度，而是 信任。
讓資料透明、讓行為可驗證、讓人心被理解。
這，才是 Web 的未來。
將 27 天系列中的技術、概念與關鍵字整理成一張可複製的總覽表。
幫助你快速回顧每篇文章的核心觀念與實際應用。
| 名詞 | 全名/中文說明 | 在系列中的應用 |
|---|---|---|
| Modern Web | 現代網頁開發架構，結合前端框架、串流與互動設計 | 整體專案主題，強調「即時、透明、安全」 |
| Vue.js | 前端框架，用於構建使用者介面與動態組件 | Dashboard 與圖表互動式介面 |
| React | 前端框架，用於高效元件渲染與狀態管理 | 即時更新圖表、串流資料顯示 |
| WebSocket | 雙向即時資料傳輸協定 | 幣價、股價、風險指標即時更新 |
| REST API | 用於資料請求與回傳的介面標準 | 從金融資料庫與交易所取得數據 |
| Dashboard | 視覺化儀表板 | 幣價波動、VaR 模型、風險指標圖表 |
| Frontend (前端) | 使用者看到的操作介面 | Vue/React 模組化設計 |
| Backend (後端) | 負責資料處理與模型運算 | Python Flask / Node.js 模擬資料串流 |
| Data Visualization | 資料視覺化技術 | 將數據轉為折線圖、K 線圖與熱度圖 |
| 名詞 | 中文說明 | 實際應用 |
|---|---|---|
| Tick Data | 每筆成交的即時報價資料 | 畫出股市「心跳圖」，顯示市場節奏 |
| K 線圖 (Candlestick Chart) | 顯示股價開高低收變化的圖表 | 以 Python 與 Plotly 實作 |
| Volume (成交量) | 市場交易活動強度 | 用於識別投資者行為趨勢 |
| VaR (Value at Risk) | 預測在特定信心水準下的最大損失 | 建立風險圖表與警示系統 |
| Portfolio (投資組合) | 多項資產的整體配置 | 量化交易策略模擬中的基礎 |
| High-Frequency Trading | 高頻交易，利用即時數據快速下單 | 探討 AI 模型與倫理的邊界 |
| Quantitative Trading (量化交易) | 以數據與演算法為基礎的交易方式 | AI 驅動的決策模擬主軸 |
| 名詞 | 全名/中文說明 | 在系列的對應應用 |
|---|---|---|
| LP (Linear Programming) | 線性規劃：求資源最優配置 | 模擬投資組合最佳化 |
| IP (Integer Programming) | 整數規劃：限定離散決策變數 | 下單與否的二元選擇 |
| Game Theory (博弈論) | 研究策略互動與競爭的數學理論 | 模擬投資者與市場對手行為 |
| VRP (Vehicle Routing Problem) | 車輛路線問題，用於最佳化調度 | 延伸至撮合與流動性配置 |
| Classification (分類模型) | AI 模型的一種，預測類別 | 信用卡詐欺偵測 |
| Regression (迴歸分析) | 預測連續數值的統計方法 | 預測市場趨勢或價格變化 |
| Anomaly Detection (異常偵測) | 辨識非典型行為的模型 | 用於防詐欺與異常交易監測 |
| AI Ethics (AI 倫理) | 強調人工智慧的透明、公平與責任 | 系列中反覆強調的價值核心 |
| 名詞 | 中文說明 | 在系列的角色 |
|---|---|---|
| Blockchain | 分散式資料帳本技術 | 保證交易記錄不可竄改 |
| Smart Contract (智能合約) | 自動執行條件的程式化合約 | 模擬跨境交易與驗證流程 |
| Hash (雜湊) | 資料加密摘要演算法 | 保護資料完整性 |
| NFT (Non-Fungible Token) | 非同質化代幣，用於唯一數位憑證 | 延伸應用於金融教育與認證 |
| Decentralization (去中心化) | 分散權限，減少單點風險 | 確保數據透明與公平 |
| Verification (驗證) | 驗證交易、使用者或資料真偽 | 與防詐模組結合的核心概念 |
| 名詞 | 中文說明 | 實際案例 |
|---|---|---|
| Social Engineering (社會工程) | 透過心理操縱誘使受害者洩密或匯款 | 阿嬤投資群組、雷神卡詐騙 |
| QR Code Login | 掃描登入方式，常被假冒 | 在「登入迷霧」篇分析風險機制 |
| Phishing (釣魚詐騙) | 假冒網站或服務竊取資訊 | 模擬假交易平台防範教學 |
| Identity Spoofing (身分偽冒) | 冒用身分進行金融詐騙 | 串連 LINE 群組詐騙實例 |
| Elder Fraud (高齡詐騙) | 鎖定長者的詐騙行為 | 長照視角防詐教育應用 |
| 名詞 | 中文說明 | 角色與啟示 |
|---|---|---|
| Digital Ethics (數位倫理) | 探討技術的社會責任與道德邊界 | 「速度與良知」篇核心概念 |
| Transparency (透明性) | 避免黑箱決策與資訊不對稱 | AI 模型公開化與可追蹤性 |
| Accountability (問責性) | 誰為演算法錯誤負責？ | 探討企業在自動化決策下的倫理責任 |
| Data Literacy (資料素養) | 理解、解釋與應用數據的能力 | 長者金融教育的核心概念 |
| Social Impact (社會影響) | 技術對弱勢群體的影響 | 將金融科技與社工實務連結 |
| 名詞 | 中文說明 | 實際場域 |
|---|---|---|
| FinTech (金融科技) | 金融與科技的整合應用 | 系列總主題核心 |
| EduTech (教育科技) | 以科技輔助學習 | 用於防詐教育與金融素養課程 |
| CareTech (照護科技) | 高齡照護與 AI 技術融合 | 「親愛的巨人」應用延伸 |
| Data Dashboard | 數據儀表板 | 模擬幣價與股市視覺化工具 |
| Real-Time Monitoring | 即時監控系統 | 幣價警示、風險變化提示 |
| Human-Centered Design | 以人為中心的設計理念 | 長者介面優化與可讀性標註 |
| Cross-Domain Collaboration | 跨域合作（社工 × 科技 × 金融） | 專案背後的策略思維 |
Modern Web｜WebSocket｜AI｜Blockchain｜Vue.js｜React｜Dashboard｜K 線｜Tick Data｜VaR｜Classification｜Fraud Detection｜Smart Contract｜Transparency｜Ethics｜Elder Care｜Data Literacy｜Quantitative Trading｜Game Theory｜LP｜IP｜VRP｜Social Engineering｜Security｜Real-time｜Trust｜FinTech｜CareTech｜Education｜Human-centered Design
iThome鐵人賽
看影片追技術