Learning path
2025 iThome 鐵人賽
這個系列把同一條技術路徑集中整理，適合依順序讀，也適合回頭查特定段落。
Start here
從這篇開始
先讀這篇建立共同語言，再往下看完整閱讀順序。
Recommended path
建議先讀
先讀核心文章，再依需求往下查完整列表。
2025-08-20
Day 1: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章
2025 iThome 鐵人賽 Day 1：開啟文件驅動開發 (DDD) 與 Vibe Coding 的旅程。介紹本系列文章的核心目標，以及如何透過 AI 輔助來構建「習慣養成與心情日誌」專案。
2025-08-21 Day 2: 【心法篇】開發者的航海圖：什麼是文件驅動開發 (DDD)？2025 iThome 鐵人賽 Day 2：深入探討文件驅動開發 (DDD) 的心法。了解如何透過清晰的規格文件駕馭 AI，避免 Vibe Coding 失控，實現「左手藍圖，右手魔法」的高效開發。
2025-08-22 Day 3: 【工具篇 #1】萬丈高樓平地起：建置本地開發環境2025 iThome 鐵人賽 Day 3：手把手帶你建立專業的本地開發環境。安裝 VS Code、Python、Node.js 及必備擴充套件，為接下來的 AI 輔助開發做好萬全準備。
Full archive
完整閱讀順序
- 01 Day 1: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章 2025 iThome 鐵人賽 Day 1：開啟文件驅動開發 (DDD) 與 Vibe Coding 的旅程。介紹本系列文章的核心目標，以及如何透過 AI 輔助來構建「習慣養成與心情日誌」專案。
- 02 Day 2: 【心法篇】開發者的航海圖：什麼是文件驅動開發 (DDD)？ 2025 iThome 鐵人賽 Day 2：深入探討文件驅動開發 (DDD) 的心法。了解如何透過清晰的規格文件駕馭 AI，避免 Vibe Coding 失控，實現「左手藍圖，右手魔法」的高效開發。
- 03 Day 3: 【工具篇 #1】萬丈高樓平地起：建置本地開發環境 2025 iThome 鐵人賽 Day 3：手把手帶你建立專業的本地開發環境。安裝 VS Code、Python、Node.js 及必備擴充套件，為接下來的 AI 輔助開發做好萬全準備。
- 04 Day 4: 【工具篇 #2】程式碼的時光機：Git 與 GitHub 版本控制 深入軟體開發中最最最重要的觀念——版本控制，並親手設定我們專案的雲端保險庫與時光機總部：Git 與 GitHub。
- 05 Day 5: 【工具篇 #3】終端機裡的魔法：什麼是 Vibe Coding 與 Gemini CLI？ 我們將迎來本系列第一個令人心跳加速的轉捩點。我們不只要安裝「引擎」，我們還要學會詠唱「魔法的咒語」，真正地與 AI 對話，把我們的意念灌注到終端機之中！
- 06 Day 6: 【文件 #1】專案的靈魂：用 Gemini CLI 生成「專案章程」 今天，我們就要正式啟動專案，打響「左手藍圖」的第一槍！我們將完全在 VS Code 終端機內，為我們的太空船，設定好最初也最重要的航行座標。
- 07 Day 7: 【文件 #2】使用者的旅程：用 Gemini CLI 描繪「使用者故事」 今天，我們將完全在終端機內，描繪這張地圖，產出兩份從「使用者視角」出發的關鍵文件：使用者故事與使用者流程圖。
- 08 Day 8: 【文件 #3】系統的心臟：用 Gemini CLI 設計「軟體架構文件」 今天，我們要戴上「工程安全帽」，化身為系統架構師，規劃未來系統穩定、高效、可擴展的基石。
- 09 Day 9: 【文件 #4】數據的家：用 Gemini 規劃「資料庫綱要」 今天，我們將化身為「數據的守護者」——資料庫管理員 (DBA)，與 Gemini 一同規劃我們專案的「資料庫綱要 (Database Schema)」！
- 10 Day 10: 【文件 #5】溝通的契約：用 Gemini 撰寫「Web API 規格書」 今天，我們要交給「服務生 (API)」一份精準的「菜單」，讓他知道如何跟廚房溝通，這就是後端藍圖的最後一塊拼圖——Web API 規格書。
- 11 Day 11: 【心法 #2】透過AI幫我們生成Prompt 今天我們暫時不推進度，要來一場「魔法師的幕後揭秘」，聊聊如何讓 AI 幫我們生成高品質的 Prompt。
- 12 Day 12: 【後端 #1】起手式：AI 代理人 生成模組化的 Flask 專案 今天我們將命令 AI 代理人，根據設計好的「模組化專案結構」，一步到位地為我們生成整個後端專案的基礎架構。
- 13 Day 13: 【後端 #2】AI 建築師：依藍圖自動建構 CRUD API 今天我們將扮演「專案總建築師」，把詳細的「設計藍圖 (API_SPEC.yml)」交給 AI 首席工程師，命令它根據藍圖建構完整的 Habits 資源模組。
- 14 Day 14: 【DevOps #1】AI 品管員：設定 GitHub Actions 自動化程式碼檢查 今天我們就要來幫專案請一位 24 小時不休息的稽查員—— GitHub Actions ，順便設定好我們的第一條自動化品管流程 (CI)！
- 15 Day 15: 【後端 #3】API 測試：用 Gemini CLI 輔助撰寫 Pytest 今天我們將引入自動化測試，指揮 Gemini 化身為測試工程師，為我們撰寫測試案例，並直接升級 CI 流程。
- 16 Day 16: 【整合篇】後端竣工！回顧與展望 今天，是我們「左手藍圖，右手魔法」協奏曲的上半場終章。我們將回顧我們走了多遠，沉澱我們學到了什麼，並展望未來。
- 17 Day 17: 【前端 #0】前端世界的基石： HTML, CSS 與 JavaScript 今天，我們將回歸本心，認識一下構成生命的三大基本元素：HTML, CSS, 與 JavaScript。
- 18 Day 18: 【文件 #6】網站的風格指南：用 Gemini 定義顏色與字體 今天我們將化身為「首席視覺設計師」，與我們的 AI 夥伴 Gemini 深度對談，為我們的 App 定義一套獨一無二的視覺風格。
- 19 Day 19: 【文件 #7】頁面的骨架：用 Gemini 規劃主佈局與元件拆分 今天我們將化身為「UI 架構師」，指揮 Gemini 設計出網站的主要佈局，並將介面拆解成清晰的元件清單。
- 20 Day 20: 【前端 #1】Gemini Canvas 生成UI (還有新的AI建議功能) 今天我們將使用 Gemini Canvas 功能，直接從「建築工人」升級成「魔法建築師」，瞬間召喚出一棟功能完整、外觀精美的 UI 原型！
- 21 Day 21: 【前端 #2】從原型到架構：拆解並整合 AI 生成的 UI 程式碼 今天我們將扮演「結構工程師」，將昨天生成的 UI 原型進行專業級的「大改造」，落實關注點分離原則。
- 22 Day 22: 【前端 #3】AI 一鍵生成完整 App 靜態 UI 今天我們將繼續指揮 AI 助手，根據所有設計藍圖，在現有專案基礎上，將 MVP 所需的所有靜態 UI 元素全部建造完成。
- 23 Day 23: 【前端 #4】非同步的藝術：深入 Fetch API 與 Promise 今天我們將深入前端開發中最核心的觀念——非同步程式設計，並學習如何使用 Fetch API 讓前後端進行對話。
- 24 Day 24: 【前端 #5】狀態管理的哲學：讓 UI 成為數據的鏡子 今天我們將深入探討狀態管理的心法，並引入一個輕量的狀態中心模式，讓我們的 UI 成為數據最忠實的鏡子。
- 25 Day 25: 【前端 #6】核心生命週期：一天搞定習慣的「增刪改查」與「打卡」 今天我們將火力全開，搞定所有習慣的「增、刪、改、查」與「打卡」功能，讓 App 真正地動起來。
- 26 Day 26: 【前端 #7】用戶體驗的最後一哩路：優雅地處理載入與錯誤 今天我們將為 App 注入「同理心」，教它如何與使用者溝通，優雅地處理「載入中」和「錯誤」狀態。
- 27 Day 27: 【文件 #8】數據的畫布：用 Gemini 設計「圖表元件規格書」 今天我們將重拾文件驅動開發，為最複雜的「關聯性洞察」功能，撰寫一份清晰、專業的「圖表元件規格書」。
- 28 Day 28: 【前端 #8】兌現承諾：根據規格書 Vibe Coding 關聯性洞察圖表 今天我們將正式拿起工具，嚴格依據昨天的這份《圖表元件規格書》，指揮 AI 和 Chart.js，將這幅數據的畫布，變成真實、可互動的前端程式碼！
- 29 Day 29: 【文件 #9】專案的守衛：用 Gemini 規劃「前端認證流程」 今天我們將進行第二個前端的 DDD 循環，扮演「資安架構師」，為專案撰寫一份清晰、專業的「前端認證流程規格書」。
- 30 Day 30: 【前端 #9】建立大門與鑰匙：根據流程圖實現前端使用者認證 今天我們將迎來前端整合的最終章！嚴格依據流程圖實現認證系統，為 App 裝上大門與門鎖。
- 31 Day 31: 【優化篇】代碼的整形外科：JavaScript 模組化與代碼重構 今天我們將為原本臃腫的 script.js 進行一次徹底的「整形手術」，引入專業的 JavaScript 模組化結構。
- 32 【完賽感言】左手藍圖，右手魔法：一趟旅程的結束與反思 這三十天不僅僅是開發一個 App，更是一場關於如何在 AI 時代重新定義開發者價值的探索之旅。