iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
Vibe Coding

上岸用AI,看小白如何從無到有的用Vibe Codeing開發遊戲系列 第 30 篇

Day 30:30 天鐵人賽完賽總結 —— 初次參賽心得、Vibe Coding 革命與未來 Firebase 雲端架構遷移展望

  • 分享至 

  • xImage
  •  

🎉 恭喜!我們成功完成了 30 天鐵人賽的壯舉!

從第 1 天「衝動接案、小白跨界」的許諾,到第 30 天交付出一套包含了 Cocos 雙小遊戲、大廳擺設、LINE LIFF 快速登入、Ktor 後端、PostgreSQL JSONB 與綠界金流 Webhook 的完整門市遊戲平台原型,這不僅是一次技術躍進,更是 Vibe Coding 與 AI 結對編程(Pair Programming)的極致展現!


1. 完賽感言:初次參賽的心路歷程

這是我第一次參加 iThome 鐵人賽。當初因為朋友想在開店時做一個小遊戲讓顧客打發時間,諮詢我外包行情。我算了一下價格後說了句:「找外包不如我來幫你好了!」就這樣跨入了與我平時完全不同的領域。

每天下班後要抽時間寫碼、與 AI 碰撞架構、調校遊戲手感並產出高品質文章,過程無疑是艱辛的。但看到這套系統從一行行 Prompt 與規格書,最終變成完整可運行的產品原型,那份成就感無與倫比。

身為一名傳統 Android 與後端工程師,我曾對 2D 遊戲引擎(Cocos Creator)、WebGL 繪圖管線與遊戲狀態機充滿敬畏。但這 30 天證明了:工程師最核心的價值從來不是記住語法,而是「系統設計(System Design)」與「問題拆解(Problem Decomposition)」的能力。


2. Vibe Coding 與 Spec-Driven Development (SDD) 的終極體悟

這 30 天帶給我最大的收穫,是驗證了 Vibe Coding(規格驅動開發 Spec-Driven Development) 的巨大威力:

  1. 工程師的角色轉變:工程師不再是單純的寫碼機器,而是 「系統架構師(Software Architect)」。你撰寫嚴謹的 .cursorrules、spec.md 與介面規格,AI 則扮演高產能的 Pair Programmer 執行重複性的程式碼撰寫。
  2. 嚴格驗證機制:AI 雖然高效,但也可能產生「看似合理實則有 Bug」的程式碼。工程師必須建立單元測試(Unit Test)、資安簽章驗證(HMAC)與壓測(k6),作為 AI 產出品質的最後防線。

3. 全系統 30 天開發成果總對照表

┌───────────────────────────────────────────────────────────────────────────┐
│                          30 天鐵人賽全系統開發地圖                            │
├───────────────────┬───────────────────────────────────────────────────────┤
│ 階段一 (Day 01-05) │ 緣起選型:Cocos 3.8 + Kotlin Ktor + AI 藝術素材試產      │
├───────────────────┼───────────────────────────────────────────────────────┤
│ 階段二 (Day 06-13) │ 雙遊戲寫碼:青花瓷豆花怪抓捕 + 雪花冰極速計時與 Combo        │
├───────────────────┼───────────────────────────────────────────────────────┤
│ 階段三 (Day 14-20) │ 平台整合:JSONB 大廳 + LINE LIFF + HMAC 資安 + ECPay     │
├───────────────────┼───────────────────────────────────────────────────────┤
│ 階段四 (Day 21-30) │ 生產準備:Docker + Flyway + k6 壓測預演 + 模擬測試完賽     │
└───────────────────┴───────────────────────────────────────────────────────┘

4. 未來架構展望:遷移至雲端 Firebase / Firestore 藍圖

當我們的門市遊戲平台在結束預演、準備推廣至更多連鎖門市、玩家數量進入萬人級別時,現有的自建 PostgreSQL 雖然強悍,但維護成本也會隨之提升。因此,我們已經規劃了下一階段的 Firebase 雲端原生架構遷移藍圖:

[前端 Cocos Creator / LINE LIFF]
       │
       ├── (1) 匿名/社群驗證 ──> [ Firebase Authentication ]
       ├── (2) 即時大廳佈局同步 ──> [ Firebase Firestore (NoSQL) ]
       ├── (3) 離線收益與防弊邏輯 ─> [ Cloud Functions (Node.js/Kotlin) ]
       └── (4) 靜態資產 CDN ─────> [ Firebase Hosting / Cloud Storage ]

Firebase Firestore 即時大廳同步程式碼範例 (FirestoreLobbySync.ts):

import { initializeApp } from "firebase/app";
import { getFirestore, doc, onSnapshot, updateDoc } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    projectId: "your-store-game",
    appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export class FirestoreLobbySync {
    // 監聽 Firestore 文檔,實現大廳擺設跨裝置「秒級即時同步」
    public static listenRoomLayout(userId: string, onLayoutUpdate: (layout: any[]) => void) {
        const userDocRef = doc(db, "users", userId);

        return onSnapshot(userDocRef, (docSnap) => {
            if (docSnap.exists()) {
                const data = docSnap.data();
                console.log("[Firestore] 收到即時大廳佈局更新:", data.roomLayout);
                onLayoutUpdate(data.roomLayout || []);
            }
        });
    }

    // 儲存家具擺設
    public static async saveRoomLayout(userId: string, layout: any[]) {
        const userDocRef = doc(db, "users", userId);
        await updateDoc(userDocRef, {
            roomLayout: layout,
            updatedAt: Date.now()
        });
    }
}

💡 鐵人賽小知識:從 PostgreSQL 傳統 DB 遷移至 Firebase / Firestore 的架構抉擇

Tech Tip:PostgreSQL JSONB 適合單體服務快速開發;而 Firebase Firestore 具備原生的 Websocket Listener,能達到「玩家在手機改佈局,大螢幕實時同步更新」的無縫體驗,且具備毫秒級 Auto-scaling,是未來大規模商業擴展的最佳選擇!


5. 結語:跨出舒適圈,用 AI 賦能你的創意!

給所有想跨界、想實現自己點子的工程師們一句話:

「不要被未知的引擎或語言嚇到,只要你敢跨出第一步,AI 會陪你一路走到終點!」

感謝 30 天陪伴我的讀者與 AI 夥伴。這不是終點,而是我們用 AI 創造更多有趣產品的全新起點!我們下個專案見!



上一篇
Day 29:上線前的沙盤推演 —— k6 高併發壓測模擬、Ktor Coroutines / HikariCP 調優與弱網環境模擬測試
系列文
上岸用AI,看小白如何從無到有的用Vibe Codeing開發遊戲 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言