以 Flask 建構的智慧天氣應用程式,整合全球天氣 API,以精美且響應式的介面呈現多城市即時氣象資料。
姓名:陳文慶寧 | 學號:1111310013
從建立基本 Flask 應用程式開始,定義路由 @app.route('/'),並設置 templates/static 目錄結構。這是整個專案最重要的基礎步驟。
使用 flask_weather 函式庫連接 OpenWeatherMap API,即時取得多個城市的溫度、濕度與風速資料。
使用 Jinja2 建構 HTML 模板——透過 {% for %} 迴圈動態渲染內容。搭配 CSS Grid 版型,讓介面在各種螢幕尺寸上都能完美呈現。
擴展應用程式以同時支援多個城市——台北、胡志明市、東京、巴黎。新增 7 天預報功能,顯示每日最高/最低溫,並實作新增城市的功能。
第一次看到 Flask 伺服器成功跑起來,顯示台北和胡志明市兩個城市的資料,心情非常興奮。後端 app.py 的迴圈正確處理天氣資料,溫度也如實渲染出來。
這張畫面展示了撰寫 index.html 的過程——使用 {% for d in weather.forecasts %} 迴圈遍歷預報資料。CSS 引入 Google Fonts「Jakarta Sans」,搭配藍色漸層背景,打造出專業質感的介面。
建立完整的 HTML 骨架,包含 DOCTYPE、標準 meta 標籤、引入 Google Fonts,並設定 CSS 變數。背景使用 linear-gradient 打造美觀的天氣介面,Body 樣式的字型與配色保持一致性。
最終成果:App 完整運行 4 個城市——台北(22°)、胡志明市(32°)、東京(15°)、巴黎(12°)。新增城市功能正常運作,介面簡潔並採用響應式 Grid 版型,成功部署於 localhost:5000。