🚀 60 小時 Python & Django 全棧營隊導覽總部

60 小時全日營隊 (每日 6 小時,共 10 天) | 從 CLI 邏輯基石邁向 Django 雲端 Web 應用發布

🎯 60 小時全日營隊設計哲學與兩階段編排

本營隊總時數為 **60 小時(每日 6 小時,共計 10 天)**。為了降低高中生初學程式的認知負荷(Cognitive Load),我們採取**漸進式拆解編排**:先在黑底白字的 CLI(控制台)中將「純程式邏輯」徹底扎根,再將完全相同的邏輯無縫銜接至 Django Web 伺服器框架中。

💻 前 5 天 (Day 1 - Day 5):CLI 邏輯扎根期

核心目標:建立純粹的程式邏輯與演算法思維。
排除 HTML/CSS 視覺美化、HTTP 網路通訊協定與伺服器設定等複雜噪訊,讓學生在終端機中專注掌握變數、資料型別、List of Dicts 二維結構、常駐 while True 迴圈與 JSON 硬碟存檔。第 5 天更手動將 CLI 腳本重構為 Model-View-Controller 職責分離模組!

🌐 後 5 天 (Day 6 - Day 10):Django Web 飛躍期

核心目標:結合舊邏輯,理解 Web 全棧運作全貌。
將前 5 天已鍛鍊成熟的邏輯直接對映至 Django MVT 框架:CLI 選單變成 urls.py 網址路由、JSON 存檔升級為 SQLite models.py、控制台印出轉化為 templates/ HTML 擺盤,最後部署至 PythonAnywhere 雲端伺服器上線!

🔗 四層互動全貌鏈結:深刻理解網路軟體的運作本質

後 5 天的學習重點,在於幫助學生打通從「寫出的程式碼」到「使用者手機螢幕」之間的完整鏈條:

1. Python 程式碼
models.py & views.py
(商業邏輯與資料庫運算)
2. Web 伺服器
Django Server & urls.py
(常駐 Listen 監聽與路由分發)
3. 網頁渲染
HTML / Bootstrap / Chart.js
(將數據打包成 HTTP Response)
4. 終端使用者
瀏覽器 / 手機連線 Client
(填寫表單 POST / 發起 Request)

🛠️ 給學生的 Django MVT 簡化對照圖

【使用者瀏覽器 (Client)】 
      │ 1. 點擊網址 或 送出表單 (HTTP Request)
      ▼
【urls.py】 (像門口警衛室:分配網址對應功能) ─── [前 5 天觀念對應: if choice == "1" 路由]
      │
      ▼
【views.py】 (像餐廳主廚:處理邏輯與運算) ─── [前 5 天觀念對應: def handle_add() 邏輯]
      │
      ├───► 2. 向【models.py】 (像倉庫管理員) 抓取/寫入 SQLite 資料庫
      │        └─── [前 5 天觀念對應: List of Dicts 結構與 expenses.json 存檔]
      │
      └───► 3. 將資料丟給【templates/】 (像擺盤設計師) 套用 HTML 樣板
               └─── [前 5 天觀念對應: f-string 排版與 view_render_list() 列印]
                │
【使用者瀏覽器 (Client)】 ◀───┘ 4. 回傳美美的 HTML 網頁 (HTTP Response)

🛠️ 三平台開發環境一鍵自動化安裝腳本

選擇您的作業系統,點擊下載或複製腳本。腳本會自動為您安裝 Python 3.11、VS Code、Git 以及必要的 VS Code 擴充套件。

📌 Windows 執行說明:
  1. 點擊下方 [下載 setup_windows.ps1] 按鈕。
  2. 開啟存放下載檔案的資料夾,對著 setup_windows.ps1右鍵 $\rightarrow$ 選擇 「使用 PowerShell 執行」
  3. 若提示安全性限制,請以管理員身份開啟 PowerShell 並輸入 Set-ExecutionPolicy RemoteSigned 允許執行。
# ==============================================================================
# 🚀 60 小時 Python & Django 全棧營隊 - Windows 自動化環境安裝腳本
# ==============================================================================

Write-Host "🚀 開始安裝 60 小時全棧營隊所需開發工具 (Windows)..." -ForegroundColor Green

# 1. 檢查並使用 Winget 自動安裝基礎工具
if (Get-Command winget -ErrorAction SilentlyContinue) {
    Write-Host "📦 正在安裝 Python 3.11..." -ForegroundColor Cyan
    winget install -e --id Python.Python.3.11 --accept-package-agreements --accept-source-agreements

    Write-Host "📦 正在安裝 VS Code..." -ForegroundColor Cyan
    winget install -e --id Microsoft.VisualStudioCode --accept-package-agreements --accept-source-agreements

    Write-Host "📦 正在安裝 Git..." -ForegroundColor Cyan
    winget install -e --id Git.Git --accept-package-agreements --accept-source-agreements
} else {
    Write-Host "⚠️ 未檢測到 Winget,請手動下載安裝 Python, VS Code 與 Git。" -ForegroundColor Yellow
}

# 2. 安裝 VS Code 開發套件
$codeCmd = Get-Command code -ErrorAction SilentlyContinue
if ($codeCmd) {
    Write-Host "🧩 安裝 VS Code Python 與 Django 套件..." -ForegroundColor Cyan
    code --install-extension ms-python.python
    code --install-extension ms-python.vscode-pylance
    code --install-extension batisteo.vscode-django
}

Write-Host "✅ 環境安裝完成!請重新啟動電腦或 PowerShell 視窗以套用環境變數。" -ForegroundColor Green
📌 macOS 執行說明:
  1. 點擊下方 [下載 setup_mac.sh] 按鈕。
  2. 開啟 Terminal (終端機),切換至下載資料夾:cd ~/Downloads
  3. 賦予執行權限並執行:chmod +x setup_mac.sh && ./setup_mac.sh
#!/bin/bash
# ==============================================================================
# 🚀 60 小時 Python & Django 全棧營隊 - macOS 自動化環境安裝腳本
# ==============================================================================

echo "🚀 開始安裝 60 小時全棧營隊所需開發工具 (macOS)..."

# 1. 檢查並安裝 Homebrew
if ! command -v brew &> /dev/null; then
    echo "📦 正在安裝 Homebrew 套件管理器..."
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
fi

# 2. 安裝 Python3, Git, VS Code
echo "📦 正在安裝 Python3, Git 與 VS Code..."
brew install python git
brew install --cask visual-studio-code

# 3. 安裝 VS Code 開發套件
if command -v code &> /dev/null; then
    echo "🧩 安裝 VS Code Python 與 Django 套件..."
    code --install-extension ms-python.python
    code --install-extension ms-python.vscode-pylance
    code --install-extension batisteo.vscode-django
fi

echo "✅ 安裝流程完成!"
📌 Ubuntu / Linux 執行說明:
  1. 點擊下方 [下載 setup_ubuntu.sh] 按鈕。
  2. 開啟 Terminal 終端機,切換至下載資料夾:cd ~/Downloads
  3. 賦予執行權限並執行:chmod +x setup_ubuntu.sh && ./setup_ubuntu.sh
#!/bin/bash
# ==============================================================================
# 🚀 60 小時 Python & Django 全棧營隊 - Ubuntu/Linux 自動化環境安裝腳本
# ==============================================================================

echo "🚀 開始安裝 60 小時全棧營隊所需開發工具 (Ubuntu/Linux)..."

# 1. 更新套件清單並安裝基礎工具
sudo apt update
sudo apt install -y python3 python3-pip python3-venv git curl

# 2. 安裝 VS Code
if ! command -v code &> /dev/null; then
    echo "📦 正在安裝 VS Code..."
    sudo snap install code --classic
fi

# 3. 安裝 VS Code 開發套件
if command -v code &> /dev/null; then
    echo "🧩 安裝 VS Code Python 與 Django 套件..."
    code --install-extension ms-python.python
    code --install-extension ms-python.vscode-pylance
    code --install-extension batisteo.vscode-django
fi

echo "✅ 安裝流程完成!"
Week 1 | Day 01
Day 1:變數、型別與模板
認識 Python 基礎語法、input() 與 print(),運用 f-string 渲染個人專屬財務警示卡。
進入單元課程 ➔
Week 1 | Day 02
Day 2:資料結構化與資料模型
掌握 List 與 Dict 組合構建(List of Dicts),學習 for 迴圈走訪與條件過濾器。
進入單元課程 ➔
Week 1 | Day 03
Day 3:流程控制與路由分發
運用 while True 常駐迴圈與 if-elif 路由,打造不閃退 CLI 選單與 try-except 防呆。
進入單元課程 ➔
Week 1 | Day 04
Day 4:資料持久化與 CRUD 觀念
解鎖 JSON 讀寫與自動存檔、實現完整的 CRUD (增刪查改) 與財務月報表導出。
進入單元課程 ➔
Week 1 | Day 05
Day 5:MVC 重構與 CLI 發布
使用 def 函式重構為 MVT 職責分離架構,加上美化排版,進行第一週 Demo Day。
進入單元課程 ➔
Week 2 | Day 06
Day 6:Web 原理與 Django 架構
理解 Request/Response 原理,建置 Django 專案與 MVT 拆解,發射第一台 Web Server。
進入單元課程 ➔
Week 2 | Day 07
Day 7:資料庫與模型設計
告別 JSON!使用 Django ORM (SQLite) 設計 models.py、執行 Migrate 與登入 Admin 後台。
進入單元課程 ➔
Week 2 | Day 08
Day 8:視圖與前端渲染
運用 render() 結合 DTL 模板,套用 Bootstrap 5 打造現代化 App 網頁首頁。
進入單元課程 ➔
Week 2 | Day 09
Day 9:使用者互動與表單提交
掌握 POST 表單、CSRF 防護、網頁一鍵刪除、分類過濾與 Messages 彈窗提醒。
進入單元課程 ➔
Week 2 | Day 10
Day 10:整合優化與專案發布
整合 Chart.js 圓餅圖、部署至雲端主機 (PythonAnywhere) 取得網址,進行最終 Demo Day!
進入單元課程 ➔