🧋 不會寫程式? 用 Claude AI + GitHub + Firebase 打造即時茶飲點餐系統

如何透過 AI 協助快速建立一個支援多人協作、即時同步的點餐網站

專案背景：解決真實痛點

相信大家都有過這樣的經驗：公司要訂飲料，負責人在群組裡貼了菜單，然後大家開始接龍，結果…

• 接龍接到被別人刪到訂單
• 忘記打甜度冰塊
• 知道想喝甚麼，但還要去看菜單多少錢
• 要接龍的時候，被別人搶先
• 不知道總共有幾杯，還要慢慢算

即使大家都乖乖地照格式打，還是必須手動整理、算錢，這樣的混亂又麻煩的場面是否很熟悉？身為一個工程師，我決定用技術來解決這個日常問題，減少沒有飲料喝的日子。

我不會寫網頁所以我用Claude來開發。總共花了3個小時就從構思到部屬完成。

AI 輔助開發：從想法到實現

第一次對話：需求分析與架構建議

我的需求：

我想要一個網頁，大家可以點飲料，有很多選項像甜度冰塊那些，然後大家都能看到其他人點了什麼，最後可以統計總金額”

Claude 的技術建議：

Claude 主動分析需求並建議了最適合的技術架構：

• GitHub Pages（免費網站託管）
• Firebase Firestore（即時資料庫）
• 純前端架構（簡化部署）

第二次對話：成本考量與安全防護

我的關切：

這樣會不會需要付費？有什麼成本風險？

Claude 的解決方案：

1. 詳細的免費額度分析：計算實際使用量 vs 免費限制
2. 成本控制建議：密碼保護限制使用者、用量監控設定
3. 多層防護方案：Firebase 安全規則 + 前端限制

第三次對話：功能優化

持續迭代需求：

可以加上甜度、冰塊選項嗎？還有加料的價格計算？

Claude 立即：

• 擴展菜單資料結構
• 實作動態價格計算
• 優化使用者體驗流程

AI 協作的關鍵優勢：上下文理解

整個開發過程中，Claude 始終記得：

• 專案的技術選型原因
• 之前討論的成本考量
• 每次功能迭代的背景
• 用戶體驗的優先級考量

工程師視角的 AI 協作指南

💡 高效的 AI 協作技巧

✅ 清晰的需求描述：

❌ 「幫我做個網站」 ✅ 「我想做一個點飲料的網頁，需要有菜單選擇、客製化選項、多人即時協作功能」

❌ 「加個功能」  ✅ 「我希望加入密碼保護，只有知道密碼的人才能使用系統」

❌ 「有問題」 ✅ 「我按照步驟設定但出現『permission denied』錯誤，這是 Firebase 規則設定的問題嗎？」

🎯 善用 AI 在開發流程中的價值：

1. 快速原型開發：從想法到 MVP 的快速實現
2. 技術選型建議：基於需求推薦合適的技術棧
3. 程式碼生成：減少重複性的 boilerplate 代碼
4. 問題診斷：快速定位和解決開發中的問題 5.最佳實踐指導：安全性、效能、維護性的建議

🔄 敏捷的迭代開發流程

第一版：基本功能 → AI 協助生成 MVP 第二版：安全防護 → AI 設計密碼和規則  第三版：體驗優化 → AI 改善 UI/UX 第四版：功能擴展 → AI 實現新需求

核心優勢：快速迭代，即時反饋，持續改進！

技術架構：AI 推薦的完美組合

GitHub Pages：免費的靜態網站託管

AI 推薦理由：

• ✅ 完全免費：無須任何費用
• ✅ 自動部署：Push 代碼即自動更新
• ✅ HTTPS 支援：內建 SSL 憑證
• ✅ 對新手友善：網頁介面操作，無需命令行

Firebase Firestore：即時資料庫

AI 推薦理由：

• ✅ 即時同步：多人協作無衝突
• ✅ 慷慨的免費額度：日常使用綽綽有餘
• ✅ NoSQL 靈活性：無需預先定義表結構
• ✅ 內建安全規則：AI 可以幫忙設計規則

純前端架構：簡化部署流程

AI 推薦理由：

• ✅ 無需後端：降低架構複雜度
• ✅ 易於維護：單一 HTML 檔案
• ✅ 快速迭代：修改即時生效
• ✅ AI 友善：適合 AI 生成和修改

核心功能實現：AI 輔助的完整解決方案

以下展示 Claude AI 如何協助快速實現複雜功能

🔐 密碼保護系統

// AI 建議的安全防護方案
const SYSTEM_PASSWORD = 'tea2025';
function checkPassword() {
 if (inputPassword === SYSTEM_PASSWORD) {
 localStorage.setItem('teaOrderAuth', 'true');
 showMainPage();
 }
}

設計背景： 基於成本控制的考量，Claude 建議加入密碼保護：

• 限制使用者範圍，控制 Firebase 用量
• LocalStorage 記住登入狀態，優化體驗
• 可隨時修改密碼重新部署
• 提供了多種安全等級供選擇

🧋 完整的點餐流程

const menuData = {
 "原萃小茶館": {
 "夜韻紅茶": 35,
 "金萱蜜香紅茶": 35,
 // … 更多品項
 },
 // … 更多分類
};

功能亮點：

• 分類式菜單結構，易於管理
• 甜度、冰塊、加料客製化選項
• 自動價格計算（基本價 + 加料費）
• 即時表單驗證

⚡ 即時資料同步

// Firebase 即時監聽
const q = query(ordersRef, orderBy('timestamp', 'desc'));
unsubscribe = onSnapshot(q, (querySnapshot) => {
 const orders = [];
 querySnapshot.forEach((doc) => {
 orders.push({ id: doc.id, …doc.data() });
 });
 updateOrderTable(orders);
});

技術重點：

• 使用 onSnapshot 實現即時更新
• 任何人新增訂單，所有人立即看到
• 自動處理網路中斷重連

Firebase 安全規則：平衡安全與易用

rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
 match /orders/{orderId} {
 // 營業時間限制
 allow read: if isWithinBusinessHours();
 
 // 資料驗證
 allow create: if isWithinBusinessHours() && 
 isValidOrder(request.resource.data);
 
 allow delete: if isWithinBusinessHours();
 allow update: if false; // 不允許修改
 }
 
 function isWithinBusinessHours() {
 let hour = request.time.hours() + 8; // UTC+8
 return hour >= 9 && hour <= 22;
 }
 
 function isValidOrder(data) {
 return data.customerName is string &&
 data.quantity <= 10 &&
 data.subtotal <= 500;
 }
 }
}

安全考量：

• 營業時間限制（9:00–22:00）
• 資料格式驗證
• 數量與金額合理性檢查
• 禁止修改已提交訂單

部署流程：跟著 AI 一步步完成

我的實際操作經驗

Step 1: 建立 GitHub Repository

我的困惑：「GitHub 是什麼？怎麼用？」Claude 的指導：

1. 前往 GitHub.com 註冊帳號
2. 點擊 “New repository”
3. 命名：tea-order-system 
4. 設定為 Public（重要！）
5. 點擊 “Create repository”

**結果：**5 分鐘完成，比想像中簡單！

Step 2: 上傳程式碼

我的困惑：「程式碼怎麼上傳？」Claude 的指導：

1. 複製 AI 生成的完整程式碼
2. 貼到記事本，儲存為 index.html
3. 在 GitHub 點擊 “uploading an existing file”
4. 拖曳檔案上傳

結果：3 分鐘完成，完全不需要命令行！

Step 3: 啟用 GitHub Pages

我的困惑：「網站怎麼上線？」 Claude 的指導：

Settings → Pages → Source: Deploy from a branch Branch: main → Save 等待 2–3 分鐘即可訪問

結果：網址自動生成 [https://myusername.github.io/tea-order-system](https://myusername.github.io/tea-order-system`)

Step 4: Firebase 設定

我的困惑：「Firebase 設定看起來很複雜…」 Claude 的解決方案：

• 提供了詳細的圖文教學
• 自動生成 Firebase 設定代碼
• 甚至幫我寫好了安全規則

總耗時：第一次設定 30 分鐘，之後更新只需 1 分鐘！

實際使用體驗

使用者角度

1. 簡單登入：輸入密碼即可使用
2. 直觀操作：選分類 → 選品項 → 客製化 → 確認
3. 即時反饋：看到其他人的訂單即時出現
4. 手機友善：響應式設計，手機使用無障礙

管理者角度

1. 即時監控：統計面板顯示訂單數量、金額
2. 一鍵匯出：CSV 格式，方便後續處理
3. 靈活管理：可刪除錯誤訂單、清空重來

成本分析：真的完全免費嗎？

GitHub Pages

• 費用：$0
• 限制：100GB 流量/月，100GB 儲存空間
• 評估：對於內部使用綽綽有餘

Firebase Firestore

• 免費額度：  — 50,000 次讀取/天  — 20,000 次寫入/天  — 1GB 儲存空間
• 實際用量（50人團隊）：  — 讀取：~500 次/天  — 寫入：~50 次/天  — 儲存：~10KB
• 評估：完全在免費範圍內

遇到的挑戰與 AI 協助解決

挑戰 1：Firebase 權限錯誤

問題描述：「出現 permission-denied 錯誤」

提供給 Claude 的資訊：錯誤截圖 + 具體操作步驟

Claude 的診斷與解決：

這是 Firebase 安全規則的問題，原因是… 建議的解決方案：

1. 前往 Firebase Console → 規則
2. 替換為以下規則：[提供具體程式碼]
3. 點擊發佈

挑戰 2：成本控制需求

我的考量：「Firebase 的用量計費讓我有點擔心」

Claude 的回應：

• 詳細分析免費額度 vs 預期使用量
• 設計多層防護機制（密碼 + 安全規則）
• 提供用量監控和預算警告設定方法 結果：完整的成本控制策略

AI 協作的技術優勢

傳統除錯流程： 發現問題 → Google 搜尋 → 閱讀文檔 → 嘗試解決 → 測試驗證

AI 協助流程： 描述問題 → AI 分析診斷 → 提供解決方案 → 直接實施

效率提升：問題解決速度提升 5-10 倍

專案成果：AI 協作的開發效率

開發時間分析

傳統獨立開發預估：

• 技術選型研究：2-4 小時
• 架構設計：2-3 小時
• 前端開發：8-12 小時
• Firebase 整合：3-5 小時
• 安全規則設計：2-4 小時
• 測試與除錯：4-6 小時 總計：21-34 小時

AI 協作實際：

• 需求討論與架構設計：30 分鐘
• AI 程式碼生成與調整：1.5 小時
• 部署與設定：1 小時
• 功能測試與優化：30 分鐘 總計：3 小時

給非技術人員的 AI 開發建議

💡 與 AI 協作的黃金原則

1. 詳細描述需求

❌ 「做個網站」 ✅ 「我想做一個內部點飲料的系統，需要有密碼保護、即時同步、手機友善，大概40人使用」

2. 提供具體的使用場景

✅ 「我們公司每週五會集體訂飲料，之前都在LINE群組統計很麻煩，希望有個系統可以讓大家直接選擇，最後自動統計總金額和數量」

3. 不要害怕問細節

✅ 「你剛剚提到 Firebase，可以詳細解釋一下是什麼嗎？」 ✅ 「這個步驟我不太懂，可以更詳細一點嗎？」 ✅ 「有沒有更簡單的方法？」

4. 及時反饋問題

✅ 貼出錯誤截圖 ✅ 描述具體的操作步驟 ✅ 說明期望的結果 vs 實際結果

🚀 AI 開發的未來可能性

這次經驗讓我看到，AI 正在降低技術門檻：

1. 人人都能是創造者：想到就做，執行力跟想法比擁有技術更重要
2. 快速原型驗證：幾小時內從想法到產品
3. 持續迭代改進：隨時提出新需求，AI 立即實現
4. 學習成本極低：邊做邊學，無需預先投資

📈 適合 AI 輔助開發的專案類型

✅ 高度適合：

• 內部工具（如點餐系統、投票系統）
• 個人專案（如記帳、待辦清單）
• 原型驗證（快速測試想法）
• 靜態網站（如作: 結語：AI 協作的工程實踐)

三個重要體悟：

1. AI 加速了從想法到實現的過程：讓我們能更快驗證技術方案
2. 人機協作創造了新的開發模式：AI 負責執行，人類負責決策和創意
3. 工程師的價值在於系統思維：技術實現變簡單了，架構設計變更重要

對工程實踐的啟發

短期影響：

• 提高開發效率，縮短產品迭代週期
• 降低重複性工作，增加創新時間
• 改善代碼品質，減少低級錯誤

長期趨勢：

• 工程師角色從「實現者」轉向「設計者」
• 跨領域協作變得更加重要
• 持續學習和適應能力成為核心競爭力

最重要的是，這個專案讓訂飲料變得不再那麼麻煩。看到同事們不再為統計訂單而嫌麻煩時，那種成就感提醒我：技術的價值始終在於解決真實問題，讓生活變得更美好。

在 AI 時代，我們有了更強大的工具，但工程師的本質沒有改變：用技術創造價值，用代碼改變世界。

網頁截圖

2025/6/5上線後的Firebase使用量