📖 為什麼學 these？——「理財咖啡館飛向網頁大世界」關卡冒險故事線

💡 故事情境：告別黑底白字控制台，迎向全世界瀏覽器連線！

前五天我們完成了一個功能齊全的 CLI 終端機記帳軟體，但如果朋友想用，總不能叫他們安裝 Python 跑控制台吧？今天我們要開啟 Web 網頁開發大門：將終端機選單變成網址（URL Router），把 print() 變成 HTTP 回應，並讓 Django 的經典升空火箭在瀏覽器中發射！

單元名稱	記帳程式關卡角色	為什麼這個單元不可或缺？(技術關聯)
單元 1：網頁是怎麼運作的？	🌐 咖啡館外送點餐系統 (HTTP)	理解瀏覽器 (Client) 發送請求與伺服器 (Server) 回應的原理，Web Server 底層就像永不停止的 `while True` 監聽迴圈。
單元 2：Django 環境與專案建立	🚀 打造理財咖啡館網頁總部	執行 `django-admin startproject` 建立總部檔案，並啟動本地伺服器連至 `127.0.0.1:8000` 見證火箭升空！
單元 3：MVT 架構初探與 App 建立	🧩 劃分網頁記帳部門 (expenses)	執行 `startapp expenses`，將軟體拆解為 MVT 職責分離架構，對應前一週 Day 5 的 `def` 模組化概念。
單元 4：路由分發 (URL Router)	🚪 門市服務台分機轉接 (urls.py)	編輯 `urls.py` 設定網址路徑（如 `/home/`），概念完美對應 Day 3 CLI 選單中的 `if choice == "1"`。
單元 5：第一個 View 視圖	🍳 網頁出餐主廚 (views.py)	撰寫 View 視圖函式回傳 `HttpResponse`，將點餐結果包裝成 HTTP 回應發送給瀏覽器，對應 Day 5 的 `view_header()`。
單元 6：除錯與驗收 (404 Not Found)	🔍 網頁稽核員與黃底 Debug 畫面	體驗 404 網址找不著錯誤，理解終端機控制台的 Traceback 紅字如何轉化為網頁上的黃底 Debug 友善報錯畫面。

🧩 給學習者的 Django MVT 藍圖對照指南

在開始寫 Django 之前，先建立一個重要觀念： 瀏覽器（Client） 和 Django 網頁伺服器（Server） 是兩個不同的角色。

瀏覽器負責讓使用者操作網頁，而 Django 則是在伺服器上接收請求、處理資料，再把完成的網頁送回瀏覽器。

🌐 第一步：認識瀏覽器與網頁伺服器

👨 使用者
     │
     ▼
【瀏覽器 Browser】
(Chrome、Edge、Firefox)
     │
     │ ① HTTP Request
     │    「我要看首頁」
     ▼
══════════════════════════════
      🌐 Internet 網際網路
══════════════════════════════
     │
     ▼
【Django 網頁伺服器】
     │
     │ ② 處理程式
     │
     ▼
【SQLite 資料庫】
     │
     ▲
     │
【Django 網頁伺服器】
     │
     │ ③ HTTP Response
     │    回傳 HTML 網頁
     ▼
【瀏覽器】
     │
     ▼
👨 使用者看到網頁

可以把它想成：

👨 使用者：點餐的人
🌐 瀏覽器：服務生，負責傳遞需求
🖥️ Django：廚房，負責料理資料
🗄️ SQLite：冰箱，存放食材（資料）

🧩 第二步：Django MVT 如何運作？

當 HTTP Request 到達 Django 後，就會開始進入 MVT 架構，各個檔案會依序合作完成工作：

【使用者瀏覽器 (Client)】
      │
      │ 1. 發送 HTTP Request（點網址、按按鈕、送出表單）
      ▼
【 urls.py 】────────────── (像警衛室)
判斷網址要交給哪個 View
      │
      ▼
【 views.py 】───────────── (像主廚)
處理程式邏輯、安排工作
      │
      ├────► 2. 呼叫【 models.py 】（像倉庫管理員）
      │             讀取 / 新增 / 修改 SQLite 資料
      │
      └────► 3. 將資料交給【 templates/ 】（像擺盤設計師）
                    把資料放進 HTML 樣板
                          │
                          ▼
                    【HTML 網頁】
                          │
                          │ 4. HTTP Response
                          ▼
                   【使用者瀏覽器】
                  顯示完成的網頁畫面 🎉

記住一句話：
瀏覽器只負責「顯示網頁」，真正執行 Python 程式的是 Django 網頁伺服器。

📌 課程前導與簡介說明

🎓 教師心法與教學策略 (Teacher Only)

營隊定位：Week 2 正式進入 Web 領域。今日重點是降解對 Django 龐大檔案結構的恐懼，強調 MVT 與前一週 CLI 程式碼的微觀對映。
高中生心理亮點：當學生在瀏覽器打開 http://127.0.0.1:8000/ 看到經典的小火箭升空畫面時，成就感會極大幅度爆發！
教學銜接點：不斷連結舊觀念（URL 比對 urls.py 對應 if-elif；View 視圖對應 def handle_xxx()）。

🌟 學生自主學習指引 (Student Self-Study)

歡迎來到第二週！今天我們要把前一週的終端機記帳本，變身為可以在網頁瀏覽器上運行的 Web 應用程式！請閱讀每個單元的 **故事單元說明**，點擊 **延伸閱讀** 展開深層觀念與 Google 搜尋，並善用每區塊的 **AI 協作除錯提示詞** 來練習！

💻 Day 6 專案總成果：第一個 Django 網頁回應

【教師參考解答】學生於 Day 6 結束時將完成的專案檔結構與關鍵程式碼：

1. 專案主路由設定 (`myproject/urls.py`)：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('expenses.urls')), # 將根目錄網址導向 expenses App 的路由
]

2. 記帳 App 路由設定 (`expenses/urls.py`)：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),      # 首頁路由
    path('about/', views.about, name='about'), # 關於頁面路由
]

3. View 視圖邏輯 (`expenses/views.py`)：

from django.http import HttpResponse

def home(request):
    """ 對應 CLI 的 view_header() 與首頁歡迎詞 """
    return HttpResponse("🚀 歡迎來到 Django 理財咖啡館網頁版！
這是你的第一個 Web Server 回應！")

def about(request):
    """ 關於我們頁面 """
    return HttpResponse("ℹ️ 關於本記帳系統
由 5 天全日營隊高中生親手打造！
")

【學生自主實作框架】請根據今日各單元所學，將空缺的 `____` 填入正確的 Django 關鍵字：

# 🎯 Day 6 自主挑戰：請填入空缺的 path, include, HttpResponse 與 request！

# --- [檔案: expenses/urls.py] ---
from django.urls import ____ # 提示：匯入網址路徑設定函式 path
from . import views

urlpatterns = [
    ____('', views.home, name='home'), # 提示：設定首頁路徑
]

# --- [檔案: expenses/views.py] ---
from django.http import ____ # 提示：匯入 HTTP 回應物件 HttpResponse

def home(____): # 提示：View 函式的第一個參數，代表瀏覽器傳來的請求
    return ____("🚀 歡迎來到我的第一個 Django 網站！
") # 提示：回傳文字給瀏覽器

⏰ 單元 1：網頁是怎麼運作的？（09:00 - 10:00）

🌐 故事單元說明：咖啡館外送點餐系統 (HTTP)

當你在瀏覽器輸入網址（如 http://127.0.0.1:8000/），就像是客人向理財咖啡館打電話發送 **HTTP 請求 (Request)**；而遠端的 **Web 伺服器 (Server)** 接收到點餐後，將烹調好的 HTML 網頁包裝成 **HTTP 回應 (Response)** 傳回給你。Web Server 的底層，就像是我們在 Day 3 寫的 while True: 永動迴圈，隨時保持連線、傾聽顧客點餐！

💡 深度觀念：什麼是 Client-Server 與 HTTP 請求/回應週期？

網頁通訊建構在主從式架構 (Client-Server Architecture) 上：

Client (客戶端/瀏覽器)：發起 HTTP Request，包含網址 (URL)、HTTP 動作 (GET/POST) 與標頭 (Headers)。
Server (伺服器端/Django)：處理請求並回傳 HTTP Response，包含狀態碼 (Status Code) 與網頁內容。
常見 HTTP 狀態碼：200 OK (成功)、404 Not Found (找不到網頁)、500 Internal Server Error (伺服器程式碼出錯)。

🔗 Google 搜尋關鍵字 (依相關度排序，紫羅蘭標記為進階內容，點擊開啟新分頁)：

🤖 AI 自主學習探索提示詞 (Prompt)：

探索 Prompt (點擊複製)

請向高中生詳細解釋 Client-Server 架構與 HTTP 請求 (Request) / 回應 (Response) 週期，並說明 Web Server 的常駐連線機制與 CLI while True 迴圈的異同。

🎓 教師備課手冊 (Teacher Only)

講解 Client (瀏覽器) 與 Server (伺服器)。
概念連結：Web 伺服器就像是永不停止的 while True 迴圈，持續 Event Loop 監聽網路 Port 8000。
示範網址 http://127.0.0.1:8000/ 中 IP 127.0.0.1 (Localhost 本機) 與 Port 8000 的意義。

💻 觀念對映指令與 Terminal 操作

# 本地端測試 IP 與通訊埠
Localhost (本機回環位址) : 127.0.0.1
Django 預設開發測試 Port  : 8000
完整連線網址             : http://127.0.0.1:8000/

⚠️ 常見陷阱與問題案例

無法連線到伺服器：瀏覽器顯示「無法連至這個網站」 $\rightarrow$ 通常是本地端的 Django Server 還沒有啟動或已被關閉。

🤖 單元 1 常見問題 AI 協作除錯提示詞

我在瀏覽器輸入 http://127.0.0.1:8000/ 時顯示『無法連至這個網站』。請教我如何檢查 VS Code 終端機中的 runserver 是否正在運作。

⏰ 單元 2：Django 環境與專案建立（10:00 - 11:00）

🚀 故事單元說明：打造理財咖啡館網頁總部

要蓋大樓需要先準備好工地！我們使用 pip install django 安裝 Django 工具包，並執行 django-admin startproject myproject。這指令會自動生成網頁總部的檔案結構（包含全管大腦 settings.py 與總指揮官 manage.py）。接著輸入 python manage.py runserver，前往 127.0.0.1:8000，見證你的第一台 Web Server 與經典小火箭升空發射！

💡 深度觀念：Django 專案結構導覽與管理工具

startproject 生成的目錄結構是 Django 運作的基礎：

manage.py：專案命令列管理工具，用於啟動伺服器 (runserver)、資料庫遷移 (migrate) 等。
settings.py：專案總設定檔，包含套件註冊 (INSTALLED_APPS)、資料庫設定與語言/時區。
urls.py：專案根路由設定檔，記錄網址與 View 的對應藍圖。

🔗 Google 搜尋關鍵字 (依相關度排序，紫羅蘭標記為進階內容，點擊開啟新分頁)：

🤖 AI 自主學習探索提示詞 (Prompt)：

探索 Prompt (點擊複製)

請向初學者說明執行 django-admin startproject 後自動產生的檔案結構，並解釋 manage.py 與 settings.py 各自扮演的角色。

🎓 教師備課手冊 (Teacher Only)

指導指令：pip install django 放置虛擬環境。
執行 django-admin startproject myproject 建置專案。
執行 python manage.py runserver，帶學生打開 127.0.0.1:8000 見證升空畫面。

💻 Terminal 指令段落

# 1. 安裝 Django (若未安裝)
pip install django

# 2. 建立 Django 專案總部
django-admin startproject myproject

# 3. 切換進入專案目錄
cd myproject

# 4. 啟動本地端 Web 開發伺服器
python manage.py runserver

⚠️ 常見陷阱與問題案例

django-admin 指令無效：跳出 command not found: django-admin $\rightarrow$ 通常是套件未正確安裝，或未啟用虛擬環境。
Can't open file manage.py：沒有 cd 進入包含 `manage.py` 的資料夾目錄。

🤖 單元 2 常見問題 AI 協作除錯提示詞

我在執行 python manage.py runserver 時跳出 can't open file 'manage.py': [Errno 2] No such file or directory。請教我如何用 cd 切換到含有 manage.py 的專案目錄。

⏰ 單元 3：MVT 架構初探與 App 建立（11:00 - 12:00）

🧩 故事單元說明：劃分網頁記帳部門 (expenses)

在 Django 中，一個專案 (Project) 可以包含多個功能獨立的應用程式 (App)。我們執行 python manage.py startapp expenses 建立記帳部門！這個資料夾裡包含了 MVT 的靈魂結構：掌管資料庫模型的 models.py 與掌管視圖處理邏輯的 views.py。這正是我們在 Day 5 練習的「職責分離」實體化展現！

💡 深度觀念：Django Project 與 App 的元件化設計

Django 鼓勵高度可複用 (Reusable) 的模組化架構：

Project (專案總部)：包含多個 App 的集合與全域設定 (如 settings.py, urls.py)。
App (獨立業務模組)：專注於單一功能（如 expenses 記帳模組、users 使用者模組）。
註冊 App：新建 App 後，必須將其名稱加入 settings.py 中的 INSTALLED_APPS 列表才能生效。

🔗 Google 搜尋關鍵字 (依相關度排序，紫羅蘭標記為進階內容，點擊開啟新分頁)：

🤖 AI 自主學習探索提示詞 (Prompt)：

探索 Prompt (點擊複製)

請說明 Django 專案中『Project (專案)』與『App (應用程式)』的差別，並解釋建立 startapp 後為什麼要到 settings.py 的 INSTALLED_APPS 註冊。

🎓 教師備課手冊 (Teacher Only)

執行 python manage.py startapp expenses 建立記帳 App。
帶學生檢查生成的 App 資料夾（`admin.py`, `models.py`, `views.py`）。
提醒：至 myproject/settings.py 中的 INSTALLED_APPS 加入 `'expenses'`。

💻 Terminal 指令與 settings.py 設定

# 1. Terminal 執行建立 App
python manage.py startapp expenses

# 2. 至 myproject/settings.py 註冊 App
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'expenses',  # 👈 新增你剛建立的記帳 App
]

⚠️ 常見陷阱與問題案例

忘記註冊 App：建立 App 後沒有到 `INSTALLED_APPS` 註冊，導致後續 Template 或 Model 無法被 Django 找到。

🤖 單元 3 常見問題 AI 協作除錯提示詞

我在建立 startapp expenses 後，該如何在 myproject/settings.py 的 INSTALLED_APPS 列表中正確註冊它？請告訴我寫法與注意事項。

⏰ 單元 4：路由分發 (URL Router)（13:00 - 14:00）

🚪 故事單元說明：門市服務台分機轉接 (urls.py)

當顧客訪問 http://127.0.0.1:8000/about/ 時，總部警衛室 urls.py 負責看清網址，並將請求轉接給對應的處理專員（View 函式）。這完全等同於我們 Day 3 CLI 選單中的 if choice == "1":！我們會在 myproject/urls.py 使用 include() 轉接，並在 expenses/urls.py 設定精細網址。

💡 深度觀念：Include 兩層式路由架構 (URL Dispatcher)

Django 的 URL 路由採用鬆散耦合的兩層式設計：

主路由 (myproject/urls.py)：使用 include('expenses.urls') 將包含特定字綴的網址轉交給各 App 分管。
子路由 (expenses/urls.py)：使用 path('', views.home, name='home') 設定細部相對路徑與別名 (`name`)。

🔗 Google 搜尋關鍵字 (依相關度排序，紫羅蘭標記為進階內容，點擊開啟新分頁)：

🤖 AI 自主學習探索提示詞 (Prompt)：

探索 Prompt (點擊複製)

請說明 Django 如何透過 myproject/urls.py 中的 include() 將網址請求轉發給 expenses/urls.py，並示範 path() 函式的三個參數 (route, view, name)。

🎓 教師備課手冊 (Teacher Only)

主路由 myproject/urls.py 使用 path('', include('expenses.urls'))。
在 expenses/ 目錄下手動新增 urls.py 分管子路由。
概念連結：Day 3 CLI 路由 if choice == "1": 對應網址比對。

💻 程式碼段落 (`expenses/urls.py`)

from django.urls import path
from . import views

# 子App 路由對映表
urlpatterns = [
    path('', views.home, name='home'),         # 匹配 127.0.0.1:8000/
    path('about/', views.about, name='about'), # 匹配 127.0.0.1:8000/about/
]

⚠️ 常見陷阱與問題案例

Path 遺漏斜線 `/`：寫成 path('about', ...) 導致網址匹配不精確或重導向異常。建議 path 結尾皆補上斜線 about/。

🤖 單元 4 常見問題 AI 協作除錯提示詞

我在寫 expenses/urls.py 時出現了 NameError 或 ImportError。請幫我檢查是否有正確寫出 from django.urls import path 以及 from . import views。

⏰ 單元 5：第一個 View 視圖（14:00 - 15:00）

🍳 故事單元說明：網頁出餐主廚 (views.py)

當警衛室 `urls.py` 將請求轉接過來後，View 視圖函式就像是「網頁主廚」！View 函式必須接收第一個參數 request（代表顧客點餐內容），並且**必須回傳一個 `HttpResponse` 物件**。我們可以在 `HttpResponse("

HTML內容

")` 內部寫入 HTML 標籤，直接在瀏覽器螢幕上繪製文字！這對應的就是前一週 Day 5 的 view_header() 啦！

💡 深度觀念：View 函式與 HTTP 回應封裝

Django View 視圖函式的黃金法則：

必須接受 request 參數：類型為 django.http.HttpRequest，包含 Query 參數、POST 表單與 Header。
必須回傳 HttpResponse (或其子類別)：若漏寫 return 或回傳 None，Django 會拋出 ValueError 嚴重崩潰。

🔗 Google 搜尋關鍵字 (依相關度排序，紫羅蘭標記為進階內容，點擊開啟新分頁)：

🤖 AI 自主學習探索提示詞 (Prompt)：

探索 Prompt (點擊複製)

請說明 Django views.py 中的 View 視圖函式為什麼第一個參數一定要寫 request，以及 HttpResponse 是如何將字串封裝成 HTTP 回應發送給瀏覽器的。

🎓 教師備課手冊 (Teacher Only)

在 expenses/views.py 撰寫視圖函式。
強調 View 函式第一參數必須為 request，且**必須回傳** HttpResponse。
概念連結：對應 Day 5 view_header() 輸出與控制台渲染。

💻 程式碼段落 (`expenses/views.py`)

from django.http import HttpResponse

def home(request):
    """ 首頁視圖函式 """
    return HttpResponse("🚀 歡迎來到 Django 理財咖啡館！")

def about(request):
    """ 關於視圖函式 """
    return HttpResponse("ℹ️ 關於我們
Python 記帳小助手 v2.0 Web 版
")

⚠️ 常見陷阱與問題案例

View 未回傳 HttpResponse：漏寫 `return` 導致回傳 `None` $\rightarrow$ 跳出 ValueError: The view expenses.views.home didn't return an HttpResponse object. It returned None instead. 崩潰。

🤖 單元 5 常見問題 AI 協作除錯提示詞

我在寫 views.py 時畫面跳出了 ValueError: The view didn't return an HttpResponse object. It returned None instead 錯誤。請幫我檢查 return 關鍵字是否漏寫。

⏰ 單元 6：除錯與驗收 (404 Not Found & Debug)（15:00 - 16:00）

🔍 故事單元說明：網頁稽核員與黃底 Debug 畫面

當顧客輸入了不存在的網址（如 http://127.0.0.1:8000/hello/），網頁會顯示 **404 Not Found** 錯誤！而在 Django 開發模式下 (`DEBUG = True`)，Django 會貼心地把整張網頁變成黃底報錯畫面，把出錯的程式碼行號與原因清清楚楚印出來！這與我們在前一週 Terminal 看到的紅字 Traceback 完全是同一個親兄弟！

💡 深度觀念：Django 開發者黃底報錯頁面與 404

Django 內建了強大的開發展示與除錯工具：

404 Page Not Found：當輸入的 URL 在 urlpatterns 中找不到對應匹配項時觸發。
Debug 黃底頁面 (Yellow Screen of Death)：當 DEBUG = True 時，拋出的 Exception 會附帶變數 Local Variables、Request 參數與 Traceback，非常利於快速定位 Bug。

🔗 Google 搜尋關鍵字 (依相關度排序，紫羅蘭標記為進階內容，點擊開啟新分頁)：

🤖 AI 自主學習探索提示詞 (Prompt)：

探索 Prompt (點擊複製)

請向初學者說明 Django 在開發模式下的黃底 Debug 錯誤頁面包含哪些關鍵訊息（如 Exception Type, Line Number, Local Vars），以及它與 CLI Traceback 的對映關係。

🎓 教師備課手冊 (Teacher Only)

帶學生故意輸入不存在的網址（如 127.0.0.1:8000/xyz/）觀察 404 頁面。
帶學生在 View 中寫錯變數體驗 Django 黃底 Debug 報錯頁面。
進行今日成果驗收：每人上台展示瀏覽器印出的 HttpResponse 字串。

💻 除錯體驗與驗收檢查點

# 今天必須說出的三個成果驗收點：
[✓] 1. 成功在 Terminal 啟動 python manage.py runserver 無報錯。
[✓] 2. 瀏覽器連線 http://127.0.0.1:8000/ 順利印出自訂 HttpResponse。
[✓] 3. 瀏覽器連線 http://127.0.0.1:8000/about/ 順利匹配轉接至 about View。

⚠️ 常見陷阱與問題案例

404 網頁找不到：網址輸入錯字或 `urls.py` 中的 `path` 匹配規則寫錯。

🤖 單元 6 常見問題 AI 協作除錯提示詞

我在存取特定網址時遇到了 Django 404 Page Not Found 錯誤。請幫我對照 myproject/urls.py 與 expenses/urls.py 中的 path 設定，找出匹配失敗原因。