在前兩篇文章中，我已經介紹了我如何透過 Firebase 提供的服務，建立並配置好運作環境，讓專案可以開始使用 Firestore 來實作資料存取功能。
接下來，我要分享我在平台中處理的第一個核心功能 行程管理。

行程管理的規劃

在我的設計中，行程相關的功能會分成兩個主要頁面：行程管理 和 今日行程。

行程管理

這個頁面主要給家長使用，用來協助小孩規劃每日的任務與活動清單，並且設定每個任務的時間段。

今日行程

這是小孩主要操作的頁面，希望設計得有趣、直覺，最好能讓他們主動使用。
例如地圖式的呈現，或時間軸結合動畫的方式。
但最重要的還是清楚明瞭、操作方便。

由於 「行程管理」 是整個系統的基礎，我先從這裡下手。

新增任務功能的實作

我首先請 AI 幫我完成 新增任務 的功能，包含：

• 新增任務按鈕
• 新增任務視窗
• 可選擇任務類型與設定細節

結果讓我非常驚喜，幾乎一次就搞定！
AI 不僅快速生成了完整可用的新增任務流程，還能直接讓任務資料寫入資料庫。
接著，我透過提示詞（Prompt）持續優化 UI，例如卡片樣式的調整、時間設定功能，以及任務資料的編輯與刪除，都能迅速完成。

以下是我常用的提示詞範例：

在行程管理頁面右上角，增加一個新增任務按鈕，按下後跳出新增任務視窗...(更多細節)，儲存後會將任務資料儲存到 Firebase 資料庫中，並在頁面下方顯示新增的任務卡片。

在行程管理頁面中的任務卡上，增加編輯按鈕，按下後彈出與新增任務視窗一致的介面，可以編輯任務內容並儲存。

在行程管理頁面中的任務卡上，星星顯示要有動畫效果。

在整體專案結構與命名有做控管的前提下，甚至不需要特別指定檔案位置，AI 也能準確找到並修改目標程式碼，大大提升了開發效率。

早期遇到的資料結構問題

開發初期，一切看似順利，但仔細測試後才發現一個嚴重問題 —— 任務資料並沒有依照兒童帳號做區分。
換句話說，不論哪個兒童登入，看到的都是同一份任務清單，完全沒有做到資料隔離。

這讓我意識到，在多使用者系統中，資料庫結構必須從一開始就設計好，否則後續若要補救，不僅費時費力，還可能造成資料錯亂，甚至產生安全風險。

今日行程的 UI 設計挑戰

解決了行程管理的基礎功能後，我開始進行 「今日行程」 的設計。
這個頁面是小孩每天會使用的主介面，對於提升使用意願至關重要。
我與 AI 討論後，決定採用 時間軸 + 泡泡任務 的呈現方式，讓畫面更活潑有趣。

不得不說，AI 在 UI 和 動畫設計 上的能力真的很強。
原本我以為很複雜的互動與動畫效果，AI 幾乎是信手拈來，直接生成出可以運作的版本。

不過，這裡也遇到了一個現實問題 —— 效能瓶頸。
當泡泡數量太多時，在效能較差的裝置上，畫面常常無法完整顯示。
雖然經過數次優化，還是沒辦法完全避免。

因此我後來新增了 清單模式，讓小孩可以直接一覽所有任務列表，並依需求在不同模式間切換，既保留了趣味性，也兼顧了實用性。

關於資料結構與開發流程的心得

這次的開發經驗讓我更深刻地體會到一件事：

AI 很擅長 UI 與動畫的快速生成，但資料庫結構與邏輯設計必須由自己把關。

在使用 Firebase 開發時，最好在初期就先規劃好大致的資料結構，並且隨時透過 Firebase Console 檢查資料是否符合設計，這樣可以避免錯誤的資料結構影響後續開發與維護。

另外，Firebase Console 也能隨時查看與修改資料，非常方便測試和調整。

Vibe Coding 中的重要習慣 —— 審核與紀錄

在這次的開發過程中，我一直堅持一個步驟：
每次修改完程式碼後，我都會先依之前提到的方式，對 AI 生成的程式碼與總結 進行大致的審核。
確定沒有明顯問題後，再實際操作看看是否符合需求。
如果和預期差異不大，就立即用 Git 保存當前版本。

原因很簡單：

• 不要期望 AI 一次改到「完美」再紀錄
• 如果自己對程式碼不是完全了解，很可能在追求完美的過程中，把原本快完成的功能改壞，甚至需要全部重來

總結

這次的行程管理與今日行程功能開發，不僅讓我感受到 AI 在 UI 設計 上的強大，也再次提醒我 資料結構設計的重要性。
Vibe Coding 的確能讓功能落地的速度快很多，但開發者本身的規劃與把關，才是讓專案穩定前進的關鍵。

下一篇文章，我將重點介紹 今日行程 中的設計細節，分享如何打造一個適合小孩自行操作的介面，讓他們更主動地使用平台。

此外，也會介紹除了任務管理外的第二個核心功能 獎勵商店。

敬請期待下一篇：《AI助攻：讓孩子主動完成作業的關鍵設計》