← 課程總覽

🚀 第10堂課:綜合專案:個人網站

程式學習第十堂課:Flask 後端 + HTML/CSS 前端整合、留言板 API、Cloud Run 部署、作品集網站完整實戰
含語音講解(約 60 分鐘),附互動小測驗

📖 第一階段:專案規劃(約 20 分鐘)

1. 作品集網站架構

⏱ 15 分鐘

整合所有技能成一個完整的作品集網站

  • 前端:HTML + CSS + JS
  • 後端:Flask(Python)
  • 功能:個人介紹、專案展示、留言板
portfolio/
├── app.py              # Flask 主程式
├── templates/          # HTML 模板
├── static/             # CSS/JS
├── data/projects.json  # 專案資料
└── requirements.txt

📖 第二階段:核心實作(約 25 分鐘)

2. Flask 後端 + 模板

⏱ 20 分鐘
from flask import Flask, render_template, request, jsonify
import json
from datetime import datetime

app = Flask(__name__)

def load_projects():
    with open("data/projects.json", "r", encoding="utf-8") as f:
        return json.load(f)

@app.route("/")
def index():
    projects = load_projects()
    return render_template("index.html",
        name="丁丁", projects=projects[:3],
        year=datetime.now().year)

# 留言 API
messages = []
@app.route("/api/messages", methods=["GET", "POST"])
def handle_messages():
    if request.method == "POST":
        data = request.get_json()
        messages.append({
            "name": data["name"],
            "text": data["text"],
            "time": datetime.now().strftime("%Y-%m-%d %H:%M")
        })
        return jsonify({"status": "ok"})
    return jsonify(messages[-20:])

📖 第三階段:部署 + 下一步(約 15 分鐘)

3. 部署上線 + 持續成長

⏱ 10 分鐘

部署步驟:pip freeze > requirements.txt → Dockerfile → gcloud run deploy → 公開網址!

持續成長路徑:

  • 做 side project:用程式解決生活問題
  • 讀開源程式碼:GitHub 有無數專案
  • 學第二語言:JavaScript、Go、SQL
  • 加入社群:Python Taiwan、Stack Overflow

🐍 寫程式的目的不是讓電腦聽懂,而是讓讀懂。

🧪 小測驗:你學會了嗎?

5 題選擇題,選完按「交卷」看成績
第 1 / 5 題
Flask 的 render_template() 做什麼?
第 2 / 5 題
Jinja2 是 Flask 預設的什麼?
第 3 / 5 題
部署 Flask 時為什麼需要 gunicorn?
第 4 / 5 題
作品集網站應該包含什麼?
第 5 / 5 題
寫程式的終極目標是什麼?
你的得分
0/5

🎯 第10堂課,你學會了什麼?

Flask 後端Jinja2 模板留言板 APICloud Run 部署

十堂課,從 print("Hello World") 到部署完整網站。你已經是獨立的 Python 開發者了。🐍🚀

🎉 恭喜完成全部十堂課!你已經是獨立的 Python 開發者了 🚀