Part 2 - Flask 基礎實作
📘 FB 🎥 YT
地端與雲端串接概念

Part 2：Flask 基礎實作

建立第一個 Flask 網頁應用
理解路由與視圖函數的運作

Flask @app.route localhost:5000
📂 對應 GitHub：2.3_Flask快速入門/

🤔 Flask 是什麼？

Flask 是一個輕量級的 Python 網頁框架，用來建立網站和 API。

🍽️ 餐廳比喻

餐廳運作

  • 客人進門點餐 → 請求 (Request)
  • 廚房準備餐點 → 處理邏輯
  • 服務生送餐 → 回應 (Response)

Flask 運作

  • 使用者訪問網址 → 請求 (Request)
  • Python 程式處理 → 處理邏輯
  • 回傳網頁內容 → 回應 (Response)
💡 重點：Flask 就是那個協調餐廳運作的管理系統！

【實作 1】建立 app.py 檔案

在 ch2_local_ai_app 資料夾中建立主程式檔案。

📝 操作步驟

  1. 開啟你喜歡的文字編輯器（VS Code、記事本等）
  2. 建立新檔案
  3. 存檔為 app.py
⚠️ 注意：檔名必須是 app.py，這是 Flask 的慣例！

【實作 2】撰寫 Flask 程式

將以下程式碼複製貼上到 app.py：

# 引入 Flask 框架
from flask import Flask

# 建立 Flask 應用程式
app = Flask(__name__)

# 定義首頁路由
@app.route('/')
def home():
    return '<h1>歡迎來到 Flask 世界！</h1>'

# 啟動應用程式
if __name__ == '__main__':
    app.run(debug=True)
這就是一個完整的 Flask 應用！只有 12 行程式碼！

【實作 3】理解程式碼（上）

from flask import Flask
第 1 行
從 flask 套件中引入 Flask 類別
app = Flask(__name__)
第 4 行
建立一個 Flask 應用程式物件，取名為 app
@app.route('/')
第 7 行（裝飾器）
定義「路由」：當使用者訪問 /（首頁）時，執行下面的函數

【實作 3】理解程式碼（下）

def home():
  return '<h1>歡迎...</h1>'
第 8-9 行（視圖函數）
定義 home() 函數，回傳 HTML 內容給使用者
if __name__ == '__main__':
  app.run(debug=True)
第 11-12 行（啟動）
啟動 Flask 伺服器，debug=True 表示開發模式
💡 開發模式好處：程式碼修改後會自動重新載入，不用手動重啟！

【實作 4】執行 Flask 應用

存檔後，回到 CMD（確認有 (venv)），執行程式：

(venv) C:\...\ch2_local_ai_app> python app.py

✅ 預期結果

 * Serving Flask app 'app'
 * Debug mode: on
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
🎉 成功！看到 Running on http://127.0.0.1:5000 表示伺服器已啟動！
⚠️ 重要：這個 CMD 視窗不要關閉！伺服器需要持續運行。

【實作 4】預期畫面

Flask 運行中
你的 CMD 視窗應該顯示類似上圖的訊息。

【實作 5】在瀏覽器中測試

Flask 伺服器運行後，開啟瀏覽器測試！

📝 操作步驟

  1. 開啟瀏覽器（Chrome、Edge、Firefox 都可以）
  2. 在網址列輸入：
http://localhost:5000/

✅ 預期結果

瀏覽器會顯示：

歡迎來到 Flask 世界！

【實作 5】預期畫面

Flask 首頁
🎉 恭喜！你成功建立了第一個 Flask 網頁！

🔧 進階練習：新增 /hello 路由

試著在 app.py 中新增另一個路由：

@app.route('/hello')
def hello():
    return '<h1>Hello, World!</h1>'

儲存後，在瀏覽器訪問：

http://localhost:5000/hello
💡 發現：不同的網址路徑可以顯示不同的內容！這就是「路由」的概念。

【實作 6】停止 Flask 應用

測試完成後，可以停止伺服器。

📝 操作步驟

在運行 Flask 的 CMD 視窗中，按下：

Ctrl + C

✅ 預期結果

^C

伺服器會停止，你可以再次輸入指令。

⚠️ 提醒：停止伺服器後，瀏覽器就無法訪問 localhost:5000 了！

✅ Part 2 完成確認

你學會了：

  • ☐ Flask 的基本概念（請求-回應模式）
  • ☐ 建立 app.py 主程式
  • ☐ 使用 @app.route('/') 定義路由
  • ☐ 執行 python app.py 啟動伺服器
  • ☐ 在瀏覽器訪問 localhost:5000
  • ☐ 使用 Ctrl+C 停止伺服器

目前專案結構：

ch2_local_ai_app/
├── venv/
├── app.py             ← 新增的 Flask 主程式
├── .env
└── .gitignore
🎉 太棒了！可以進入 Part 3：建立 AI 對話 API！

← 返回課程首頁