Flask 專案 · Python · OpenWeatherMap API

Weather
Intelligence

以 Flask 建構的智慧天氣應用程式,整合全球天氣 API,以精美且響應式的介面呈現多城市即時氣象資料。

Python 3.x Flask 框架 OpenWeatherMap Jinja2 模板 多城市支援 7 天預報
127.0.0.1:5000 — Weather Intelligence

Weather Intelligence

姓名:陳文慶寧 | 學號:1111310013

🌤
15:36 · 今天
台北市
22°
多雲
💧 20%💨 15km/h

19–22°

20–24°

19–25°
🌧
14:36 · 今天
胡志明市
32°
烈日高照
💧 60%💨 10km/h

24–34°

27–35°

26–33°
☀️
16:36 · 今天
東京
15°
有雨
💧 85%💨 20km/h

10–14°

12–18°

11–16°
08:35 · 今天
巴黎
12°
🌫
輕霧 · 濕度 78%
學習過程

專案開發歷程 🛤️

01

初始化 Flask 與專案架構

從建立基本 Flask 應用程式開始,定義路由 @app.route('/'),並設置 templates/static 目錄結構。這是整個專案最重要的基礎步驟。

app.py flask import os
02

整合 OpenWeatherMap API

使用 flask_weather 函式庫連接 OpenWeatherMap API,即時取得多個城市的溫度、濕度與風速資料。

flask_weather render_template API Key
03

以 Jinja2 + CSS 設計介面

使用 Jinja2 建構 HTML 模板——透過 {% for %} 迴圈動態渲染內容。搭配 CSS Grid 版型,讓介面在各種螢幕尺寸上都能完美呈現。

Jinja2 index.html CSS Grid weather.css
04

新增多城市與天氣預報功能

擴展應用程式以同時支援多個城市——台北、胡志明市、東京、巴黎。新增 7 天預報功能,顯示每日最高/最低溫,並實作新增城市的功能。

weather.forecasts multi-city 7-day forecast
每張畫面的故事

心得 · 學習感想

1
Flask 後端首次成功運行

第一次看到 Flask 伺服器成功跑起來,顯示台北和胡志明市兩個城市的資料,心情非常興奮。後端 app.py 的迴圈正確處理天氣資料,溫度也如實渲染出來。

「最難的部分是處理各城市不同的時區——需要為每個城市計算 UTC 偏移量。」
2
Jinja2 模板 + CSS 樣式

這張畫面展示了撰寫 index.html 的過程——使用 {% for d in weather.forecasts %} 迴圈遍歷預報資料。CSS 引入 Google Fonts「Jakarta Sans」,搭配藍色漸層背景,打造出專業質感的介面。

「Jinja2 模板非常強大——寫一次,就能渲染各種不同的資料!」
3
HTML 結構與 CSS 基礎建設

建立完整的 HTML 骨架,包含 DOCTYPE、標準 meta 標籤、引入 Google Fonts,並設定 CSS 變數。背景使用 linear-gradient 打造美觀的天氣介面,Body 樣式的字型與配色保持一致性。

「CSS 變數讓色彩維護變得輕鬆——只改一處,整個 App 的顏色全部更新!」
4
最終成果——多城市完整版

最終成果:App 完整運行 4 個城市——台北(22°)、胡志明市(32°)、東京(15°)、巴黎(12°)。新增城市功能正常運作,介面簡潔並採用響應式 Grid 版型,成功部署於 localhost:5000。

「從零 Flask 知識出發 → 完成多城市天氣 App。對這個成果感到非常自豪!🎉」
使用技術

技術棧

🐍
Python 3
後端語言
⚗️
Flask
Web framework
🌐
Jinja2
Template engine
🌦
OpenWeatherMap
Weather API
🎨
CSS3
Styling & layout
📝
VS Code
開發編輯器
4
支援城市數
7
天氣預報天數
獲得的知識