XML 氣象
資料實作
各式資料連結與 XML 氣候資料呈現 · 阮文孟 1111310035
Python Flask
XML · RSS
Chart.js
CSS Animation
Bootstrap 5
Regex
中央氣象署 CWA
PREVIEW
專案成果預覽
🔍 ZOOM
天氣預報網頁完整成果 — 格狀表格 + 雙圖表 · IMG 00
◆ PART 01 ◆
PART 01
環境設定與專案結構
- ▸在 VS Code 開啟新資料夾，Terminal 執行
pip install flask requests - ▸建立
app.py後端主程式 +templates/index.html前端介面 - ▸修正
TypeError：key 名稱items與 Python dict 內建函式衝突 → 更名為forecasts
🔍 ZOOM
VS Code 環境設定 · IMG 01
🔍 ZOOM
專案結構與錯誤修正 · IMG 02
◆ PART 02 ◆
PART 02
Flask 後端 + CWA XML 解析
- ▸使用
requests.get()抓取 CWA RSS XML 資料 - ▸使用
xml.etree.ElementTree解析<item>節點 - ▸
render_template()將資料傳入 Jinja2 模板渲染前端頁面
🔍 ZOOM
app.py — XML 解析流程 · IMG 03
🔍 ZOOM
天氣卡片基礎介面 · IMG 04
◆ PART 03 ◆
PART 03
CSS 動態天氣圖示
- ▸☀️ 太陽 —
box-shadow呼吸 + 8 道光芒 - ▸☁️ 雲朵 —
::before/::after疊加 +translateX漂浮 - ▸⛅ 晴時多雲 — 太陽與雲朵組合動畫
- ▸🌧️ 降雨 — 4 個雨滴
animation-delay錯位落下 - ▸⛈️ 雷陣雨 — 閃電
@keyframes flash閃爍效果
🔍 ZOOM
動態圖示展示 · IMG 05
🔍 ZOOM
卡片整合動態圖示 · IMG 06
◆ PART 04 ◆
PART 04
Chart.js 數據視覺化
- ▸新增
parse_weekly_temps()— 使用 Regex 解析每日高低溫 - ▸新增
build_chart_data()— 合併白天／夜晚資料 - ▸折線圖：🔴 最高溫 / 🔵 最低溫，新增
parse_rain_prob()解析降雨機率 - ▸長條圖依機率自動變色：淺藍 <40%、中藍 40–69%、深藍 ≥70%
🔍 ZOOM
七天氣溫折線圖 · IMG 07
🔍 ZOOM
降雨機率長條圖 · IMG 08
📈 DEMO — 七天氣溫折線圖（示範資料）
最高溫 (°C)
最低溫 (°C)
🌧️ DEMO — 七天降雨機率長條圖（示範資料）
<40%
40–69%
≥70%
◆ PART 05 ◆
PART 05
七天格狀天氣表（仿 CWA 樣式）
- ▸白天 列 — 動態圖示 + 白天氣溫範圍
- ▸晚上 列 — 深色雲動畫 / 🌙 + 夜間氣溫
- ▸降雨機率 列 — 依等級自動顯示深淺色彩徽章
- ▸今日欄位以橘紅色突顯，新增
parse_weekly_rows()+WEEKDAYS顯示星期
🔍 ZOOM
格狀天氣預報表（整體） · IMG 09
🔍 ZOOM
今日欄位橘紅色標示 · IMG 10
🔍 ZOOM
降雨機率徽章顏色 · IMG 11
🔍 ZOOM
完整報告頁面截圖 · IMG 12
◆ REFLECTION ◆
PART 06
課程心得 — CWA 氣象資料實作
今天的學習對我來說是一場跨越技術門檻的驚喜旅程！🚀 從最基礎的 VS Code 環境設定開始，我逐步掌握了如何利用 Python Flask 框架結合 Bootstrap 5，將 中央氣象署 (CWA) 的 RSS XML 資料轉化為現代化的網頁介面。
實作過程中，最令我難忘的是解決問題的過程。🔍 面對一開始的 No such file or directory 路徑錯誤，以及解析 XML 時遇到的 TypeError 挑戰，我學會了如何耐心地檢查程式邏輯。當我成功利用 Regex（正規表示式）拆解出複雜的氣溫與降雨機率字串時，那種「撥雲見日」的成就感真的難以言喻！✨
最讓我自豪的突破是加入了 Chart.js 數據視覺化。📈 透過 parse_weekly_temps()，我將枯燥的文字轉換成直觀的七天氣溫折線圖，紅藍曲線交織出溫度的變化；而降雨機率長條圖則能根據機率自動切換深淺藍色，讓天氣資訊一目了然。最後，仿照 CWA 樣式重建的格狀天氣預報表，配合玻璃擬態 (Glassmorphism) 的深藍風格，讓整個專案顯得既專業又美觀。🌙🌡️