ChiYu Code Journey

安安!我是 ChiYu!

三十天竟然就這樣過去了耶!回想一開始,真的只有一個超模糊的想法,就憑著一股傻勁跟對 AI 的好奇心與信任,直接衝了,開始了這趟「左手藍圖,右手魔法」的冒險。今天,我們總算成功達陣啦!

說真的,我必須要跟每一個從 Day 1 就有在看文章的夥伴,說聲「感謝!」,也謝謝身旁好友們天天提醒我發文,不要像去年一樣中斷文章。也真心恭喜大家!雖然點閱數不敢說多少,但有人看就讓我很感激了。

OK!最後一天不寫 code,放輕鬆。咱們來幹最後一件,也是最重要的一件事:好好來回顧一下這趟旅程,看看我們到底搞了些什麼。

Part 1:我們的協奏曲:從「空想」到「成品」的過程

這趟旅程,就像一首超 high 的五樂章協奏曲:

Part 2:聊聊這套方法:「左手藍圖,右手魔法」的好與壞

「好」:我們賺到了什麼?

「壞」:有什麼地方可以做得更好?

Part 3:AI 時代,我們人類開發者還能幹嘛?

AI 是超強的副駕駛,但方向盤永遠握在我們手上。我們的價值在於:

我們不再只是「碼農」,而是 「問對問題的人」、「蓋好房子的建築師」,還有「品質的守門員」

Part 4:把作品丟到世界舞台上:部署這回事

核心觀念

Part 5:我的鐵人賽心得與結語

這次是我第二次參加鐵人賽,第一次正式完賽(灑花)!!!

整個系列賽結束,我覺得自己在主題聚焦與內容深度上還有進步空間。未來我會整理內化這次的經驗,明年做好更完整的準備後再度參加!

好啦,最後真的要再謝謝大家一路上的陪伴!我是 ChiYu,咱們江湖再見啦,掰!

【完賽感言】左手藍圖,右手魔法:一趟旅程的結束與反思

發布於 2025年9月20日 (更新於 2025年9月20日) · 約 1 分鐘閱讀 · 2025iThomeIronman Gemini Conclusion Reflection Vibe Coding AI

安安!我是 ChiYu!

三十天竟然就這樣過去了耶!回想一開始,真的只有一個超模糊的想法,就憑著一股傻勁跟對 AI 的好奇心與信任,直接衝了,開始了這趟「左手藍圖,右手魔法」的冒險。今天,我們總算成功達陣啦!

說真的,我必須要跟每一個從 Day 1 就有在看文章的夥伴,說聲「感謝!」,也謝謝身旁好友們天天提醒我發文,不要像去年一樣中斷文章。也真心恭喜大家!雖然點閱數不敢說多少,但有人看就讓我很感激了。

OK!最後一天不寫 code,放輕鬆。咱們來幹最後一件,也是最重要的一件事:好好來回顧一下這趟旅程,看看我們到底搞了些什麼。

Part 1:我們的協奏曲:從「空想」到「成品」的過程

這趟旅程,就像一首超 high 的五樂章協奏曲:

  • 第一樂章:蹲馬步!(心法與基礎) 一開始,我們沒急著寫 code。反而是先坐下來,把內功練好。我們確立了「文件驅動開發」的遊戲規則,並學會了用 Git 這台「時光機」。

  • 第二樂章:畫地圖!(前後端大規劃) 我們產出了從《專案章程》到《API 規格書》的全套藍圖,把地基打得超穩。

  • 第三樂章:開秀啦!(AI 高速開發) 地圖畫好了,換「右手」上場施展魔法!我們指揮 AI 把後端的伺服器、資料庫模型,以及前端的網頁介面、按鈕互動通通變出來。

  • 第四樂章:求個穩!(品質與體驗) 我們請來了 GitHub Actions 作為自動化「品管大師」,跑自動化測試。同時也幫我們的 App 裝上「同理心」,優雅處理非同步與錯誤狀態。

  • 第五樂章:收尾!(打磨與升級) 最後,我們像個「程式碼醫生」,把 code 整理得乾乾淨淨(模組化),讓它以後更好照顧。

Part 2:聊聊這套方法:「左手藍圖,右手魔法」的好與壞

「好」:我們賺到了什麼?

  • 心裡超有底 (Certainty):先寫文件讓我們在動手前就想清楚了變化,實作時方向感超明確。
  • 又快又好 (Velocity & Quality):規劃就像是給 AI 這匹脫韁野馬裝上了「護欄」,確保產出品質。
  • 一份「活歷史」 (A Living History)docs 資料夾記錄了專案從 0 到 1 的完整心路歷程。

「壞」:有什麼地方可以做得更好?

  • 測試可以玩得更 hardcore:下次可以嘗試結合 DDDTDD,先讓 AI 根據規格書寫測試,再寫程式碼。
  • 文件與文章的扣合:如果能更細緻地解釋文件中每一句話如何影響後面的 code, DDD 的威力會更鮮明。

Part 3:AI 時代,我們人類開發者還能幹嘛?

AI 是超強的副駕駛,但方向盤永遠握在我們手上。我們的價值在於:

  • 問對問題 (Asking the Right Questions)
  • 設計好系統 (Designing Elegant Systems)
  • 扛起責任 (Taking Ultimate Responsibility)

我們不再只是「碼農」,而是 「問對問題的人」、「蓋好房子的建築師」,還有「品質的守門員」

Part 4:把作品丟到世界舞台上:部署這回事

核心觀念

  • 前端:可以使用 VercelNetlify
  • 後端:推薦 HerokuRender 等 PaaS 平台。
  • 資料庫:生產環境應升級至 PostgreSQL 等專業資料庫。
  • 安全性:使用「環境變數」存放 API Key 等敏感資訊。

Part 5:我的鐵人賽心得與結語

這次是我第二次參加鐵人賽,第一次正式完賽(灑花)!!!

整個系列賽結束,我覺得自己在主題聚焦與內容深度上還有進步空間。未來我會整理內化這次的經驗,明年做好更完整的準備後再度參加!

好啦,最後真的要再謝謝大家一路上的陪伴!我是 ChiYu,咱們江湖再見啦,掰!

Part 32 of 32
  1. 01. Day 1: 【啟程】嘿,AI!我們來做個網站,但這次,我們約法三章
  2. 02. Day 2: 【心法篇】開發者的航海圖:什麼是文件驅動開發 (DDD)?
  3. 03. Day 3: 【工具篇 #1】萬丈高樓平地起:建置本地開發環境
  4. 04. Day 4: 【工具篇 #2】程式碼的時光機:Git 與 GitHub 版本控制
  5. 05. Day 5: 【工具篇 #3】終端機裡的魔法:什麼是 Vibe Coding 與 Gemini CLI?
  6. 06. Day 6: 【文件 #1】專案的靈魂:用 Gemini CLI 生成「專案章程」
  7. 07. Day 7: 【文件 #2】使用者的旅程:用 Gemini CLI 描繪「使用者故事」
  8. 08. Day 8: 【文件 #3】系統的心臟:用 Gemini CLI 設計「軟體架構文件」
  9. 09. Day 9: 【文件 #4】數據的家:用 Gemini 規劃「資料庫綱要」
  10. 10. Day 10: 【文件 #5】溝通的契約:用 Gemini 撰寫「Web API 規格書」
  11. 11. Day 11: 【心法 #2】透過AI幫我們生成Prompt
  12. 12. Day 12: 【後端 #1】起手式:AI 代理人 生成模組化的 Flask 專案
  13. 13. Day 13: 【後端 #2】AI 建築師:依藍圖自動建構 CRUD API
  14. 14. Day 14: 【DevOps #1】AI 品管員:設定 GitHub Actions 自動化程式碼檢查
  15. 15. Day 15: 【後端 #3】API 測試:用 Gemini CLI 輔助撰寫 Pytest
  16. 16. Day 16: 【整合篇】後端竣工!回顧與展望
  17. 17. Day 17: 【前端 #0】前端世界的基石: HTML, CSS 與 JavaScript
  18. 18. Day 18: 【文件 #6】網站的風格指南:用 Gemini 定義顏色與字體
  19. 19. Day 19: 【文件 #7】頁面的骨架:用 Gemini 規劃主佈局與元件拆分
  20. 20. Day 20: 【前端 #1】Gemini Canvas 生成UI (還有新的AI建議功能)
  21. 21. Day 21: 【前端 #2】從原型到架構:拆解並整合 AI 生成的 UI 程式碼
  22. 22. Day 22: 【前端 #3】AI 一鍵生成完整 App 靜態 UI
  23. 23. Day 23: 【前端 #4】非同步的藝術:深入 Fetch API 與 Promise
  24. 24. Day 24: 【前端 #5】狀態管理的哲學:讓 UI 成為數據的鏡子
  25. 25. Day 25: 【前端 #6】核心生命週期:一天搞定習慣的「增刪改查」與「打卡」
  26. 26. Day 26: 【前端 #7】用戶體驗的最後一哩路:優雅地處理載入與錯誤
  27. 27. Day 27: 【文件 #8】數據的畫布:用 Gemini 設計「圖表元件規格書」
  28. 28. Day 28: 【前端 #8】兌現承諾:根據規格書 Vibe Coding 關聯性洞察圖表
  29. 29. Day 29: 【文件 #9】專案的守衛:用 Gemini 規劃「前端認證流程」
  30. 30. Day 30: 【前端 #9】建立大門與鑰匙:根據流程圖實現前端使用者認證
  31. 31. Day 31: 【優化篇】代碼的整形外科:JavaScript 模組化與代碼重構
  32. 32. 【完賽感言】左手藍圖,右手魔法:一趟旅程的結束與反思 Current