Day 1: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章
Day 0: 【啟程】嘿，AI！我們來做個網站，但這次，我們約法三章 嘿，大家好啊！我是 ChiYu，也可以叫我 Eric。 寫了五年的 Code，平常都在跟 .Net 還有 Azure 打交道。簡單說，就是個靠鍵盤吃飯的工程師啦。去年有參 …
系列文章
2025 iThome 鐵人賽
Day 2: 【心法篇】開發者的航海圖：什麼是文件驅動開發 (DDD)？
嘿，大家好啊！我是 ChiYu。 昨天聊到 AI 開發，一不小心就把小小的「腳踏車」專案搞成一艘「航空母艦」，超頭痛的對吧？這種「AI 太能幹」造成的失控，在 Vibe Coding 的浪潮下，只會越來越常見。這不只是個笑話，它反映了一個深 …
Day 3: 【工具篇 #1】萬丈高樓平地起：建置本地開發環境
安安，我是 ChiYu！ 昨天，我們在腦中畫好了宏偉的建築藍圖 (DDD)，確立了「文件驅動開發」這個核心心法。今天，理論課結束，我們要開始動手了！我們將扮演「技師與軍火官」的角色，為接下來的開發大戰，準備好我們最精良的「施工機具」與「建 …
Day 4: 【工具篇 #2】程式碼的時光機：Git 與 GitHub 版本控制
安安，我是 ChiYu！ 昨天，我們扮演了「技師與軍火官」的角色，把我們的駕駛艙 (VS Code) 從毛胚屋打造成了精裝房，並備妥了所有核心的建材與燃料 (Python & Node.js)。 我們的開發環境已經準備就緒，但在我們 …
Day 5: 【工具篇 #3】終端機裡的魔法：什麼是 Vibe Coding 與 Gemini CLI？
安安，我是 ChiYu！ 昨天，我們完成了技師的工作，為我們的專案蓋好了雲端機棚 (GitHub)，也把駕駛艙 (VS Code) 裝潢得舒適又專業。硬體設施全部到位，現在，是時候為我們的專案注入真正的「靈魂」了。 今天，我們將迎來本系列第 …
Day 6: 【文件 #1】專案的靈魂：用 Gemini CLI 生成「專案章程」
安安，我是 ChiYu！ 經過了五天的「前置作業」，我們的駕駛艙 (VS Code)、引擎 (Python)、魔法法杖 (Gemini CLI) 全都準備就緒了。是不是已經手癢難耐，準備大展身手了？ 別急！還記得我們的核心心法嗎？先有藍圖， …
Day 7: 【文件 #2】使用者的旅程：用 Gemini CLI 描繪「使用者故事」
安安，我是 ChiYu！ 昨天，我們確立了專案的「北極星」——專案章程，並在 GitHub 上留下了第一個不可磨滅的印記。如果說昨天的「專案章程」是我們的**「戰略地圖」，告訴我們為何而戰、要攻下哪座城池。那今天，我們就要化身為「戰場指揮 …
Day 8: 【文件 #3】系統的心臟：用 Gemini CLI 設計「軟體架構文件」
安安，我是 ChiYu！ 前兩天，我們完成了專案的「出生證明」(專案章程) 和「使用者地圖」(使用者故事)。我們現在非常清楚「為誰而做」以及「他們想做什麼」。 今天，我們要戴上「工程安全帽」，從使用者的世界暫時抽離，化身為擘劃未來的 「系統 …
Day 9: 【文件 #4】數據的家：用 Gemini 規劃「資料庫綱要」
安安，我是 ChiYu！ 昨天，我們化身為架構師，完成了專案的**「系統藍圖」**(軟體架構文件)，釐切了前台、後台、API 與資料庫之間的分工合作關係。 我們的餐廳藍圖畫好了，下一步，就是要來仔細規劃我們儲放所有食材的「食材庫」。在軟體世 …
Day 10: 【文件 #5】溝通的契約：用 Gemini 撰寫「Web API 規格書」
安安，我是 ChiYu！ 昨天，我們完成了餐廳的「食材倉庫」設計圖——資料庫綱要。至此，我們專案的願景、使用者需求、系統架構、數據儲存方式，都已經有了明確的定義。 我們的餐廳藍圖（架構）和食材倉庫（資料庫）都設計好了。下一步，就是要交給「服 …
Day 11: 【心法 #2】透過AI幫我們生成Prompt
安安，我是 ChiYu！ 昨天，我們終於完成了上半部分的最後一份文件！可以正式進入開發的環節！但在進入開發環節前，我想要回頭再詳細聊一下 Ai Prompt Engineering。 我相信大家在經歷了前面五天、一連串燒腦的文件生成後，肯定 …
Day 12: 【後端 #1】起手式：AI 代理人 生成模組化的 Flask 專案
安安，我是 ChiYu！歡迎來到歷史性的一刻！ 過去一週，我們是專案的「規劃師」，用文字和圖表描繪著未來。從今天起，我們是「建築師」與「魔法師」，要將那些平面的藍圖，用程式碼，一行一行地「召喚」到這個世界上！ 今天，我們不打算一個檔案一個檔 …
Day 13: 【後端 #2】AI 建築師：依藍圖自動建構 CRUD API
安安，我是 ChiYu！歡迎來到 Vibe Coding 協奏曲的第一個最大的開發項目！ 昨天，我們用一個指令召喚出了整個專案骨架。今天，我們要進行一次令人振奮的專案升級。我們將扮演一位「專案總建築師」，把詳細的「 …
Day 14: 【DevOps #1】AI 品管員：設定 GitHub Actions 自動化程式碼檢查
安安，我是 ChiYu！ 我們前幾天火力全開，後端 API 核心功能都搞定了。我們的後端架構現在什麼功能都做得出來！但問題來了，我們怎麼保證每個工程師（當然也包括幾週後的你自己！）在添加新功能時，都遵守一樣的編碼標準跟架構美學？ 光靠口頭約 …
Day 15: 【後端 #3】API 測試：用 Gemini CLI 輔助撰寫 Pytest
安安，我是 ChiYu！ 昨天，我們的 CI 品管員 (GitHub Actions) 成功上崗，確保了所有程式碼的「風格」都符合最高標準。 但是，一本語法完全正確的食譜，不代表按照它做出來的菜就一定好吃。我們的專案，即使程式碼風格再優雅， …
Day 16: 【整合篇】後端竣工！回顧與展望
安安，我是 ChiYu！ 走到這一步，請先放下鍵盤，靠在椅背上，深呼吸，然後給自己一個最真誠、最響亮的掌聲！你真的非常、非常了不起！ 今天，是我們「左手藍圖，右手魔法」協奏曲的上半場終章。我們將暫時放下後端的程式碼，為過去兩週緊湊而充實的奮 …
Day 17: 【前端 #0】前端世界的基石： HTML, CSS 與 JavaScript
安安，我是 ChiYu！ 昨天，我們為精彩的後端開發之旅，畫下了一個完美的句點。我們現在擁有一個性能強大、穩定可靠的「專案引擎」，一顆強壯、默默跳動的心臟，但它還沒有形體，等待著被賦予生命。 從今天起，我們將正式開啟一個全新的篇章： 前端開 …
Day 18: 【文件 #6】網站的風格指南：用 Gemini 定義顏色與字體
安安，我是 ChiYu！ 昨天，我們扮演了「造物主」，理解了構成數位生命的三大基本元素：HTML (骨骼)、CSS (皮囊) 與 JavaScript (肌肉)。 我們的生命體現在有了基本的構造，但它還沒有「氣質」與「個性」。它的膚色、瞳孔 …
Day 19: 【文件 #7】頁面的骨架：用 Gemini 規劃主佈局與元件拆分
安安，我是 ChiYu！ 昨天，我們扮演了「首席視覺設計師」，為我們的數位生命，定義了一套獨一無二的「基因圖譜 (DNA)」——我們的 風格指南。現在，我們有了調色盤、有了字體，知道了這個生命體該有的氣質。 但光有這些還不夠。在我們開始為它 …
Day 20: 【前端 #1】Gemini Canvas 生成UI (還有新的AI建議功能)
安安，我是 ChiYu！ 昨天，我們完成了前端開發的最後一份規劃文件。至此，我們所有的「左手藍圖」工作，全部大功告成！ 從今天起，我們將正式拿起工具，戴上安全帽，開始 Vibe Coding 的前端實作！但… 我們真的要像傳統 …
Day 21: 【前端 #2】從原型到架構：拆解並整合 AI 生成的 UI 程式碼
安安，我是 ChiYu！ 昨天那場「視覺魔法秀」是不是超震撼的？才幾分鐘，AI 就「咻」一下變出一個又美又能動的 UI 原型，真的太扯了！這證明 AI 拿來做 prototype 根本是開外掛啊。 不過，身為一個有格調的工程師，光是「能動」 …
Day 22: 【前端 #3】AI 一鍵生成完整 App 靜態 UI
安安，我是 ChiYu！ 昨天，我們扮演了一位冷靜而專業的「結構工程師」，成功地將 AI 生成的華麗原型，重構成為一個結構清晰、職責分明的專業前端專案。我們的 index.html, style.css, script.js 現在各司其職， …
Day 23: 【前端 #4】非同步的藝術：深入 Fetch API 與 Promise
安安，我是 ChiYu！ 昨天，我們扮演了一位「創世神」，指揮 AI 在一天之內，為我們建構出了 App 完整、精美的靜態 UI。我們現在手上，有了一個外觀完美，但沒有靈魂的「App 蠟像館」。 它很美，但它是靜默的。它無法感知外界，也無法 …
Day 24: 【前端 #5】狀態管理的哲學：讓 UI 成為數據的鏡子
安安，我是 ChiYu！ 昨天，我們的 App 經歷了一次歷史性的飛躍。我們為它安裝了「神經系統」，成功地讓前端的「身體」與後端的「大腦」進行了第一次對話。我們的 App 不再是離線的空殼，它擁有了「記憶」。 但是，這些寶貴的記憶，現在還只 …
Day 25: 【前端 #6】核心生命週期：一天搞定習慣的「增刪改查」與「打卡」
安安，我是 ChiYu！ 昨天，我們的 App 經歷了一次質的飛躍。我們為它植入了「靈魂」——一個中央的狀態 (state) 和一個渲染引擎 (render)。它學會了如何「思考」（管理數據）並「表達」（渲染畫面），成功地將從後端獲取的真實 …
Day 26: 【前端 #7】用戶體驗的最後一哩路：優雅地處理載入與錯誤
安安，我是 ChiYu！ 昨天，我們的 App 經歷了一次完全體的進化！我們在一天之內，火力全開，搞定了核心的 CRUD 功能。我們的 App 不僅能思考、能表達，現在更擁有了完整的 行動能力。 但是，一個專業的產品，不只需要考慮「成功」的 …
Day 27: 【文件 #8】數據的畫布：用 Gemini 設計「圖表元件規格書」
安安，我是 ChiYu！ 昨天，我們的 App 學會了「同理心」，能夠優雅地處理載入與錯誤，大幅提升了使用者體驗。至此，我們 App 的基礎建設與核心互動功能，都已相當完備。 現在，是時候兌現我們在《專案章程》中許下的最終承諾， …
Day 28: 【前端 #8】兌現承諾：根據規格書 Vibe Coding 關聯性洞察圖表
安安，我是 ChiYu！ 昨天，我們再次實踐了「文件驅動開發」的核心精神。我們沒有直接衝進複雜的圖表程式碼中，而是先退一步，將一個模糊的「想法」，轉化為了一份清晰、具體、可執行的「技術規格」。 我們手上現在握著一份像素級精密的「零件設計 …
Day 29: 【文件 #9】專案的守衛：用 Gemini 規劃「前端認證流程」
安安，我是 ChiYu！ 昨天，我們成功地兌現了對使用者的最終承諾，將冰冷的數據轉化為了富有情感的、能啟發洞察的視覺化故事。我們的 App 核心價值已然確立。 但是，我們的 App 現在還像是一個 沒有門鎖的豪宅。雖然內部裝潢精美、功能強 …
Day 30: 【前端 #9】建立大門與鑰匙：根據流程圖實現前端使用者認證
說在前頭！！！ 有些部分多花費了些時間在講，所以雖然今天已經滿30天了， 但我還沒有正式完成這次鐵人賽系列文！！！ 我後面還是會繼續更新到正式完結。畢竟還是要有頭有尾有始有終！ 以下正文開始！ 安安，我是 ChiYu！ 昨天，我們為 App …
Day 31: 【優化篇】代碼的整形外科：JavaScript 模組化與代碼重構
說在前頭～ 既然已經達成30天了，乾脆把庫存一次全部PO完好了～ 安安，我是 ChiYu！ 昨天，我們為 App 裝上了堅固的大門與門鎖，成功地實現了完整的使用者認證流程。至此，我們 MVP (最小可行產品) 的所有核心功能，已全部開發完 …
【完賽感言】左手藍圖，右手魔法：一趟旅程的結束與反思
安安！我是 ChiYu！ 三十天竟然就這樣過去了耶！回想一開始，真的只有一個超模糊的想法，就憑著一股傻勁跟對 AI 的好奇心與信任，直接衝了，開始了這趟「左手藍圖，右手魔法」的冒險。今天，我們總算成功達陣啦！ 說真的， …