作業完成步驟
Steps to Complete環境架設與基礎顯示
建立 Flask 伺服器並連結 app.py 與 index.html，成功讀取 Preview_Data.json 原始數據並以表格形式呈現。
數據清理與優化
在 Python 端過濾掉「總計」列，並將數據中的缺失值（如 "-"）轉換為 0，確保後續繪圖不會報錯。
整合 Chart.js 圖表
引入 Chart.js 函式庫，將 PM2.5 數據轉化為直觀的長條圖 (Bar Chart) 與趨勢線圖 (Line Chart)，並透過 parseFloat() 處理資料型別。
整合 Leaflet.js 地圖
透過 OSINT 技術搜尋台灣各縣市精確經緯度，在 Dashboard 中加入互動式地圖，以圓形標記顯示各地污染程度。
UI 優化與深色模式
根據老師指導，將介面調整為深色模式 (Dark Mode)，提升專業感與視覺舒適度，完成最終儀表板成果。
遇到的問題與解決方案
TroubleshootingUnexpected UTF-8 BOM
描述
讀取 JSON 檔案時發生編碼錯誤，導致程式無法解析第一行字元。
解決方案
在 Python 開啟檔案時，將編碼格式指定為 encoding='utf-8-sig'。
數據類型導致圖表高度為零
描述
原始 JSON 數據中的數值為字串類型，Chart.js 無法直接繪製，圖表高度為零。
解決方案
在 JavaScript 中使用 parseFloat() 函數將字串強制轉換為浮點數。
地圖標記位移
描述
部分縣市座標不精確，導致圓點顯示在海面上，影響地圖可讀性。
解決方案
利用 OSINT 技術（Google Maps API 參考）重新校對各縣市政府所在地的精確經緯度。
成果截圖
Gallery點擊任意圖片可放大檢視 🔍 click to zoom
Hệ thống theo dõi AQI thời gian thực
Live DashboardTích hợp Python Flask & Plotly
Bản đồ nhiệt hiển thị chỉ số chất lượng không khí tại các trạm quan trắc Đài Loan. Dữ liệu được cập nhật tự động từ trạm gốc qua API.
今日學習感悟
Reflection今天的課程對我來說意義非凡。作為一名國際學生，在台灣學習 IT 技術， 處理中文數據和技術文件本來就是一項充滿挑戰的任務。
在今天的實習中，我深刻體會到「數據可視化」的力量。 原本生硬、枯燥的數字，在透過 Flask、Chart.js 和 Leaflet.js 的結合後， 變成了一幅生動且具有預警意義的台灣空氣品質地圖。
從最初遇到 UTF-8 BOM 編碼障礙的挫折，到最後成功呈現出專業深色模式儀表板的成就感， 這個過程讓我學會了如何從開發者的角度進行系統性的「故障排除」(Troubleshooting)。
這不僅僅是技術上的進步，更是一種邏輯思維的鍛鍊。這堂課讓我明白， AI 工具不僅能幫我們寫程式，更能引導我們理解複雜的數據結構。 我對下週的期中考評充滿了信心，也期待能將這些技術應用到我未來的專案中。