在前兩篇測試中, 已利用 agy 完成 CLI 與 GUI 版的待辦清單專案, 本篇則是要製作網頁版的待辦清單, 並繼續使用 Coding 的王者 Claude Sonnet 4.6 模型來執行此專案.
本系列之前的文章參考 :
1. 建立專案目錄並啟動 agy :
為了將專案成果上傳到 GitHub, 我將專案工作目錄調整為與 GitHub 一致 :
PS D:\> tree antigravity_cli
列出磁碟區 新增磁碟區 的資料夾 PATH
磁碟區序號為 00000233 1258:16B8
D:\ANTIGRAVITY_CLI
└─projects
├─todo-cli-app
└─todo-gui-app
在 projects 下建立專案目錄 :
PS D:\antigravity_cli\projects> mkdir todo-web-app
PS D:\antigravity_cli\projects> cd todo-web-app
PS D:\antigravity_cli\projects\todo-web-app> agy
因為上個專案使用 Claude Sonnet, 所以登入 agy 後自動套用此底層模型, 如果要改用別的模型, 要用 /model 指令切換. 輸入下列網頁版待辦清單的提示詞 (Gemini 生成) :
請幫我建立一個全新的 Todo Web App (網頁版)
需求與技術規格：
1. 後端 (Backend)：使用 Python Flask 框架建立輕量級 Web Server。
2. 前端 (Frontend)：HTML5 / CSS3，介面設計要求現代、乾淨且具備 RWD 行動裝置響應式排版（可引進 Bootstrap 5 CDN 簡化美化）。
3. 核心功能：
- 支援完整操作：add (新增) / list (檢視) / done (標記完成) / delete (刪除)。
- 前後端互動：前端操作時，使用 AJAX (JavaScript Fetch API) 非同步與後端通訊，點擊「完成」或「刪除」時網頁不重新整理，即時更新畫面。
4. 資料持久化：
- 使用 JSON 檔案儲存資料。
- 【關鍵相容性】：資料欄位格式與邏輯，必須與之前 CLI 和 GUI 版本的 todo.json 保持完全相容。
請先不要寫程式碼。
請先為我產出這個 Web 專案的 Implementation Plan (實作計畫) 以及預計的檔案架構 (File Structure)。
Claude 開始進行規劃, 首先它先要求授權去之前的 CLI 與 GUI 版專案蒐集相關資料 (CLI 是用 Gemini 實作的, 它怎麼知道的?), 比較之後才進行規劃 :
▸ Thought for 1s
The user wants me to create an implementation plan and file structure for a Todo...
讓我先看看現有的專案結構與 todo.json 格式，以確保相容性。
● ListDir(D:/antigravity_cli/projects/todo-web-app)
● Search(Searching for todo.json)
● ListDir(D:/antigravity_cli/projects)
● ListDir(D:/antigravity_cli/projects/todo-cli-app)
● ListDir(D:/antigravity_cli/projects/todo-gui-app)
● Read(D:/antigravity_cli/projects/todo-cli-app/todo_data.json)
● ListDir(D:/antigravity_cli/projects/todo-gui-app/data)
● ListDir(D:/antigravity_cli/projects/todo-cli-app/todo)
● Read(D:/antigravity_cli/projects/todo-gui-app/data/todos.json)
● Read(D:/antigravity_cli/projects/todo-cli-app/todo/manager.py) (ctrl+o to expand)
資料已收集完畢，現在產出完整的實作計畫。
● Create(C:/Users/tony1/.gemini/antigrav...dcec356eca/todo_web_app_plan.md) (ctrl+o to expand)
以下是完整的實作計畫，請確認後點擊「Proceed」開始實作。
──────
### 🔍 調查結果摘要
在分析現有的兩個版本後，發現資料格式有一個關鍵差異：
| CLI 版 | GUI 版
------------------------------|------------------------------|-----------------------------
id 型別 | int （自動遞增） | str （UUID）
標題欄位 | title | text
Web 版將以 CLI 版為基準，使用 int id + title 欄位，因為 CLI
版設計更嚴謹且易於遞增管理。
──────
### 📐 計畫亮點
1. REST API — 4 個語意清晰的端點，標準 HTTP 動詞設計
2. 模組化後端 — storage.py + manager.py 架構沿用自 CLI 版，邏輯一致
3. AJAX 零重新整理 — 所有操作透過 Fetch API 非同步完成
4. 資料安全 — threading.Lock 防止並發寫入損毀 JSON
5. UI 設計 — Dark Mode + Glassmorphism + 微動畫，視覺震撼
如果計畫符合您的期待，請點擊「Proceed」，我將立即開始逐步建立所有檔案！
輸入 Proceed 就開始實作表演了, 共有 4 個 phase :
> Proceed
▸ Thought for 1s
The user wants to proceed with implementing the Todo Web App. Let me start build...
開始實作！我將分階段建立所有檔案。
● Requested Permission: write_file(D:\antigravity_cli\projects\todo-web-app) (ctrl+o to expand
### Phase 1 — 後端核心
建立後端所有 Python 模組：
● Create(D:/antigravity_cli/projects/todo-web-app/todo/__init__.py)
● Create(D:/antigravity_cli/projects/todo-web-app/requirements.txt)
● Create(D:/antigravity_cli/projects/todo-web-app/todo/storage.py)
● Create(D:/antigravity_cli/projects/todo-web-app/todo/manager.py)
● Create(D:/antigravity_cli/projects/todo-web-app/app.py) (ctrl+o to expand)
### Phase 2 — 前端頁面
● Create(D:/antigravity_cli/projects/todo-web-app/static/css/style.css)
● Create(D:/antigravity_cli/projects/todo-web-app/static/js/app.js)
● Create(D:/antigravity_cli/projects/todo-web-app/templates/index.html) (ctrl+o to expand)
### Phase 3 — README & 安裝、啟動
● Create(D:/antigravity_cli/projects/todo-web-app/README.md) (ctrl+o to expand)
現在安裝相依套件並啟動伺服器：
● Bash(pip install -r requirements.txt) (ctrl+o to expand)
Flask 已就緒，啟動開發伺服器：
● Bash(python app.py)
● ManageTask(Task: ca264670-3c07-430e-8a8b-48dcec356eca/task-45) (ctrl+o to expand)
伺服器已成功啟動！讓我快速預覽一下畫面：
● GenerateImage(todo_web_app_preview) (ctrl+o to expand)
──────
### 🎉 Todo Web App 完成！
所有檔案已建立完成，Flask 伺服器正在運行中。
## 📁 建立的檔案清單
檔案 | 說明
---------------------------------------------|---------------------------------------------
app.py | Flask 主程式 + REST API 路由
storage.py | Thread-safe JSON 讀寫
manager.py | 業務邏輯（add/list/done/delete）
index.html | 語義化 HTML5 主頁面
style.css | Dark Mode + Glassmorphism 主題
app.js | Fetch API AJAX 前端邏輯
requirements.txt | Python 相依套件
README.md | 專案說明文件
## 🚀 現在就開啟
→ http://localhost:5000
## ✨ 實作重點
• 資料相容性 — todo_data.json 使用與 CLI 版相同的 Schema（ id: int , title
欄位），可直接共用現有資料
• AJAX 零重整 — 完成、刪除操作全程透過 Fetch API，搭配淡入/滑出動畫
• Thread-safe — threading.Lock 保護所有 JSON 寫入操作
• 無框架前端 — 純 Vanilla JS，無 jQuery 或其他相依
───────────────────────────────────────────────────────────────────────────────────────────────
>
───────────────────────────────────────────────────────────────────────────────────────────────
● [13:04:46] python app.py running
至此便完成整個專案的實作了, 後端測試伺服器已啟動, 專案網址為 http://localhost:5000.
2. 驗收專案成果 :
用 tree 檢視專案檔案目錄 :
PS D:\antigravity_cli\projects> tree todo-web-app /f
列出磁碟區 新增磁碟區 的資料夾 PATH
磁碟區序號為 0000029A 1258:16B8
D:\ANTIGRAVITY_CLI\PROJECTS\TODO-WEB-APP
│ app.py
│ README.md
│ requirements.txt
│ todo_data.json
│
├─static
│ ├─css
│ │ style.css
│ │
│ └─js
│ app.js
│
├─templates
│ index.html
│
└─todo
│ manager.py
│ storage.py
│ __init__.py
│
└─__pycache__
manager.cpython-312.pyc
storage.cpython-312.pyc
__init__.cpython-312.pyc
用瀏覽器開啟網址 http://localhost:5000 即可看到成果 :
手動驗證功能正確.
3. 上傳 GitHub :
在 repo 根倉庫 antigravity_cli 下, 用 git add . 指令追蹤新加入的專案 :
PS D:\antigravity_cli> git add .
warning: in the working copy of 'projects/todo-web-app/README.md', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/app.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/requirements.txt', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/static/css/style.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/static/js/app.js', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/templates/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/todo/__init__.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/todo/manager.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-web-app/todo/storage.py', LF will be replaced by CRLF the next time Git touches it
這些 warning 可以忽略. 接下來用 git commit 提交變更 :
PS D:\antigravity_cli> git commit -m "feat: add todo-web-app"
[main 601e3ee] feat: add todo-web-app
9 files changed, 1103 insertions(+)
create mode 100644 projects/todo-web-app/README.md
create mode 100644 projects/todo-web-app/app.py
create mode 100644 projects/todo-web-app/requirements.txt
create mode 100644 projects/todo-web-app/static/css/style.css
create mode 100644 projects/todo-web-app/static/js/app.js
create mode 100644 projects/todo-web-app/templates/index.html
create mode 100644 projects/todo-web-app/todo/__init__.py
create mode 100644 projects/todo-web-app/todo/manager.py
create mode 100644 projects/todo-web-app/todo/storage.py
最後用 git push 推送專案至 repo :
PS D:\antigravity_cli> git push origin main
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 16 threads
Compressing objects: 100% (13/13), done.
Writing objects: 100% (18/18), 10.89 KiB | 1.56 MiB/s, done.
Total 18 (delta 2), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/tony1966/antigravity_cli.git
5efe72e..601e3ee main -> main
完成後檢視 GitHub 已有此專案 :
本專案 repo 網址如下 :
最後用 /usage 檢視 token 用量餘額 :
即使是玩具專案, 還是很吃 Claude 的 token.
沒有留言 :
張貼留言