前一天已經把專案方向和架構規劃好了。
今天終於要開始真的建立檔案。
這一天的目標很單純：
先建立 Python 虛擬環境，再讓 Flask 跑起來，最後在瀏覽器看到自己的第一個頁面。
先不接 MySQL，也先不做任務 CRUD。
今天只先把最基本的開發環境和 Flask 網站跑起來。

先進入專案資料夾

前一天我們已經建立：

ai-task-manager/

所以先進入專案：

cd ai-task-manager

接下來先處理 Python 專案很常看到的一個東西：
虛擬環境。

什麼是虛擬環境？

虛擬環境可以讓每個 Python 專案使用自己的套件，不會跟其他專案混在一起。
例如：

專案 A
使用自己的 Flask 版本

專案 B
使用另一套 Python 套件

這樣不同專案就比較不容易互相影響。
這次的 ai-task-manager 也會建立自己的虛擬環境。

為什麼要用虛擬環境？

這次專案後面會陸續安裝：

Flask
Flask-SQLAlchemy
PyMySQL
python-dotenv
anthropic

如果全部直接裝在系統的 Python 環境裡，久了很容易搞不清楚哪些套件是哪個專案在用。
所以我會讓這個專案自己有一套環境。

建立虛擬環境

macOS

python3 -m venv venv

Windows

python -m venv venv

建立完成後，專案裡會多一個：

venv/

啟動虛擬環境

macOS

source venv/bin/activate

Windows PowerShell

venv\Scripts\Activate.ps1

啟動成功後，終端機前面通常會看到：

(venv)

之後安裝的 Python 套件就會放在這個虛擬環境裡。
如果之後想離開，可以輸入：

deactivate

接著啟動 Claude Code

虛擬環境準備好後，在同一個專案資料夾啟動：

claude

Day 5 已經完成整個專案的規劃。
所以今天不用再留在 Plan Mode。
這次要真的讓 Claude Code 開始建立檔案。

先跟 Claude Code 說清楚今天的範圍

我把今天要做的事情交給 Claude Code：

請先只建立最基本的 Flask 專案，
今天的目標只有：

1. 建立 app.py
2. 建立 templates/index.html
3. 建立 requirements.txt
4. Flask 可以正常啟動
5. 瀏覽器打開首頁時可以看到「AI Task Manager」

目前先不要建立：
- MySQL 連線
- model
- service
- route 分層
- 分類功能
- 任務 CRUD
- Claude API

請先告訴我你準備建立哪些檔案，
確認後再開始修改。

我還是把「不要做什麼」一起寫進 Prompt。
因為今天的目標真的很小。
先讓 Flask 跑起來就好。

Claude Code 的回答

Claude Code 最後告訴我，今天只需要建立三個檔案：

ai-task-manager/
├── app.py
├── requirements.txt
└── templates/
    └── index.html

它也確認不會建立：

.env
config.py
static/
資料庫相關檔案
model/
service/
route/

這個範圍跟我今天想做的事情差不多，所以我讓它開始建立。

第一個檔案：app.py

Claude Code 建立的 app.py：

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

這是目前整個 Flask 專案的入口。
先簡單看它的流程：

建立 Flask App
      ↓
設定首頁 /
      ↓
有人開啟首頁
      ↓
執行 index()
      ↓
讀取 index.html
      ↓
回傳給瀏覽器

今天先知道整體流程就好。
Day 7 會再把這些程式逐行拆開來看。

第二個檔案：templates/index.html

Claude Code 建立：

templates/index.html

內容是：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>AI Task Manager</title>
</head>
<body>
    <h1>AI Task Manager</h1>
</body>
</html>

目前真的很簡單。
只有一個標題：

AI Task Manager

今天沒有 CSS。
也沒有按鈕、任務清單或表單。
這些後面再慢慢加。

為什麼叫 templates？

在 app.py 裡有：

return render_template("index.html")

Flask 預設會到：

templates/

資料夾尋找 HTML 模板。
所以：

render_template("index.html")

實際上會去找：

templates/index.html

如果把 index.html 直接放在：

ai-task-manager/index.html

Flask 預設找不到它。
所以 templates 這個資料夾位置是有意義的。

第三個檔案：requirements.txt

Claude Code 也建立了：

requirements.txt

內容目前只有：

Flask

它的用途是記錄：

這個 Python 專案需要哪些套件？

今天只使用 Flask，所以只放：

Flask

後面真的需要 MySQL 或其他套件時，再慢慢加入。

安裝 requirements.txt 裡的套件

確認虛擬環境已經啟動，終端機前面應該有：

(venv)

接著執行：

pip install -r requirements.txt

這個指令會把 requirements.txt 裡列出的套件裝進目前的虛擬環境。
目前只有 Flask，所以這次就先安裝 Flask。

確認 Flask 有沒有安裝成功

可以輸入：

pip show Flask

如果成功，會看到 Flask 的版本和安裝位置。

啟動第一個 Flask Web App

接著執行：

Windows

python app.py

macOS

python3 app.py

正常的話，終端機會看到：

其中會看到：

Running on http://127.0.0.1:5000

這就代表 Flask 的開發伺服器已經跑起來了。
接著打開瀏覽器：

http://127.0.0.1:5000

如果畫面顯示：

今天最重要的目標就完成了。

終端機出現 WARNING 是不是錯誤？

啟動 Flask 後，可能會看到一段紅色文字：

WARNING: This is a development server.
Do not use it in a production deployment.

看到紅色不代表程式壞掉了。
它只是在提醒目前使用的是 Flask 內建的開發伺服器，不適合拿來當正式公開網站的伺服器。
這次的 Web App 是本地自用，而且現在還在開發，所以目前不用特別處理。

127.0.0.1 是什麼？

這個網址：

http://127.0.0.1:5000

不是公開網站。
127.0.0.1 指的是自己的電腦，也常寫成：

localhost

所以也可以使用：

http://localhost:5000

這次的 Web App 本來就是本地自用，所以目前這樣剛剛好。

5000 又是什麼？

後面的：

:5000

是 Port，也就是連接埠。
Flask 的開發伺服器預設通常會使用 5000。
可以先理解成：

瀏覽器透過 5000 這個 Port 連到本機正在執行的 Flask。

怎麼把 Flask 關掉？

執行：

python app.py

或：

python3 app.py

之後，終端機會一直停在 Flask 執行中的狀態。
這不是當機。
它是在等瀏覽器送新的請求過來。
如果要停止 Flask，不需要直接把整個終端機關掉，可以使用快捷鍵。

Windows

按：

Ctrl + C

macOS

按：

Control + C

按下之後 Flask 就會停止，終端機也會回到原本可以輸入指令的狀態。
如果之後還要繼續開發，再執行：

python app.py

或 macOS：

python3 app.py

就可以重新啟動。

debug=True 是做什麼的？

app.py 最後有：

app.run(debug=True)

debug=True 代表開啟 Flask 的除錯模式。
開發時修改程式，Flask 通常會自動重新載入。
如果發生錯誤，也會顯示比較完整的錯誤資訊。
目前是在本機開發，所以先使用它。

如果出現 ModuleNotFoundError

假設執行：

python app.py

卻看到：

ModuleNotFoundError: No module named 'flask'

先確認虛擬環境有沒有啟動。
如果沒有看到：

(venv)

就重新啟動虛擬環境。
接著確認 Flask：

pip show Flask

如果找不到，就重新執行：

pip install -r requirements.txt

今天的專案長什麼樣？

完成之後，目前的專案大概是：

ai-task-manager/
├── app.py
├── requirements.txt
├── templates/
│   └── index.html
└── venv/

跟 Day 5 規劃的完整架構相比，現在還非常小。
這是故意的。
後面真的開始需要：

models/
services/
routes/
static/

再建立就好。

今天做到這裡

今天第一次真的建立了專案檔案。
流程大概是：

建立虛擬環境
      ↓
安裝 Flask
      ↓
建立 app.py 和 index.html
      ↓
啟動 Flask
      ↓
瀏覽器開啟 127.0.0.1:5000

現在還沒有任務功能。
沒有 MySQL，也沒有 Claude API。
但最基本的 Web App 已經可以跑起來了。
我要先把今天 Claude Code 建立的 app.py 看懂。