Database Integration

核心觀念

自然語言操控：開發模式從「寫程式碼操作資料庫」轉變為「用口語指令讓 AI 去操作資料庫」，大幅降低後端開發門檻。
Agent 無關性：資料庫（如 Firebase）、筆記（Obsidian）、程式碼（GitHub）是獨立於 AI Agent 的資產。工作流的邏輯是核心，可以隨時切換到更便宜好用的 Agent 來執行。
官方 MCP 優勢：優先選擇內建官方 MCP (機器人控制協議) 的服務（如 Supabase），能讓 AI Agent 以最原生、最穩定的方式進行整合與溝通。
去識別化：在將含有個人資訊的資料交由 AI 處理並存入資料庫時，必須先進行「去識別化」（例如用座號取代姓名），確保資料隱私安全。

整合工作流

選擇與註冊資料庫：
- Supabase：對初學者友好，有官方 MCP，設定簡單，但免費版有閒置暫停風險。
- Firebase：功能更強大，容量更多，無閒置問題，但初始設定較繁瑣。建議優先考慮。
Agent 連接資料庫：
- 在 Claude Code 或 Codex 中，建立專案資料夾。
- 下載對應資料庫的「懶人包」(.md 檔案) 並拖入 Agent 對話視窗。
- 跟隨 Agent 指示完成註冊、建立專案、生成 Access Token/登入 CLI 等授權步驟。
- 關鍵：完成後需重啟 Agent 桌面版應用程式，讓連接生效。
自然語言開發：
- 驗證連接：對 Agent 下達指令，如「請列出我的 Supabase 專案」或「請測試 Firebase 連接」。
- 建立應用：用自然語言描述完整的應用需求，例如「幫我做一個文字雲生成網站，使用者輸入的文字要存到 Firebase 資料庫」。
- AI 會自動完成：建立資料表 (table)、生成前端網頁 (HTML/JS)、撰寫後端邏輯、並將兩者串接。
排程與維護 (for Supabase)：
- 為避免 Supabase 免費專案因 7 天無活動而被暫停，可在 Claude Code 中設定一個每週自動執行的排程任務，例如「每週一查詢一次 Supabase 專案列表」。

最佳金句

「你的資料AI時代就應該要這樣，從現在開始你做的任何網頁，都可以串接到你的資料庫免費的喔。」「AI時代大家要把這些觀點把建立起來。之後就是哪一家便宜、哪一家好用,我們就改用那一家Agent。工作流本身的邏輯思考模式是不變的。」「所有的網頁跟資料庫他會自動幫你串好，你只要用自然語言就可以完整的去操控資料庫，這個就是我們使用claude Code的目的。」

教學切入建議

此主題適合對網頁開發有基本概念，或想了解全端開發但苦於後端技術的學員。教學時，可以先從一個簡單的前端互動網頁（如投票、留言板）開始，點出「資料無法保存」的痛點。接著，引入 Supabase 作為「最簡單的解決方案」，帶領學員走一次懶人包安裝流程，體驗自然語言操控資料庫的魔力。最後再介紹功能更強大但設定較複雜的 Firebase 作為進階選項。

常見誤區

授權步驟卡關：在安裝懶人包過程中，對於需要手動登入、複製貼上 Token 或驗證碼的步驟感到困惑或直接跳過，導致連接失敗。
忘記重啟 Agent：完成所有設定後，沒有完全關閉並重新啟動 Claude Code / Codex 桌面應用程式，導致新的 MCP 或技能沒有載入。
資料隱私洩漏：直接將包含學生姓名、聯絡方式等敏感個資的檔案上傳，未經過去識別化處理。
混淆 Agent 與資料：認為更換 AI Agent 就等於要放棄所有專案資料，不理解資料庫、GitHub 等資產是獨立存在的。

---en---

Core Concepts

Natural Language Control: The development paradigm shifts from “writing code to operate databases” to “using verbal commands for AI to operate databases,” significantly lowering the barrier to backend development.
Agent Agnosticism: Databases (e.g., Firebase), notes (Obsidian), and code (GitHub) are assets independent of the AI Agent. The logic of the workflow is central; one can always switch to a cheaper and more effective Agent to execute it.
Official MCP Advantage: Prioritizing services with built-in official MCP (Machine Control Protocol) like Supabase enables AI Agents to integrate and communicate in the most native and stable manner.
De-identification: When AI processes data containing personal information for database storage, de-identification (e.g., replacing names with student IDs) must be performed to ensure data privacy and security.

Integrated Workflow

Select and Register Database:
- Supabase: Beginner-friendly with official MCP, simple setup, but free tier has risk of idle suspension.
- Firebase: More powerful, greater capacity, no idle issues, but initial setup is more complex. Recommended as a priority.
Agent Connects to Database:
- Create a project folder in Claude Code or Codex.
- Download the corresponding database “lazy pack” (.md file) and drag it into the Agent’s chat window.
- Follow Agent instructions to complete registration, project creation, generating Access Tokens/CLI login, and other authorization steps.
- Crucial: After completion, the Agent desktop application needs to be restarted for the connection to take effect.
Natural Language Development:
- Verify connection: Issue commands to the Agent, such as “Please list my Supabase projects” or “Please test Firebase connection.”
- Build application: Describe the complete application requirements in natural language, for example, “Please create a word cloud generation website where user input text is stored in the Firebase database.”
- AI will automatically complete: table creation, frontend webpage generation (HTML/JS), backend logic writing, and connecting both.
Scheduling and Maintenance (for Supabase):
- To prevent free Supabase projects from being suspended due to 7 days of inactivity, set up a weekly automated task in Claude Code, such as “Query Supabase project list once every Monday.”

Best Quotes

“In the AI era, your data should be like this: from now on, any webpage you create can be connected to your database for free!” “In the AI era, everyone should establish these perspectives. After this, we’ll just switch to whichever Agent is cheaper and easier to use. The logical thinking model of the workflow itself remains unchanged.” “All web pages and databases will be automatically connected by AI; you just need to use natural language to fully control the database. This is the purpose of using Claude Code.”

Teaching Entry Points

This topic is suitable for students with a basic understanding of web development or those interested in full-stack development but struggling with backend technologies. When teaching, start with a simple frontend interactive webpage (e.g., a voting system, a message board) and highlight the pain point of “data cannot be saved.” Then, introduce Supabase as “the simplest solution,” guide students through the lazy pack installation process, and let them experience the magic of natural language database control. Finally, introduce Firebase as a more powerful but complex advanced option.

Common Pitfalls

Authorization Step Stuck: During the lazy pack installation, users get confused or skip steps that require manual login, copying and pasting tokens, or verification codes, leading to failed connections.
Forgetting to Restart Agent: After completing all settings, not fully closing and restarting the Claude Code / Codex desktop application, causing new MCPs or skills not to load.
Data Privacy Leakage: Directly uploading files containing sensitive personal information like student names or contact details without prior de-identification.
Confusing Agent and Data: Believing that switching AI Agents means abandoning all project data, failing to understand that databases, GitHub, and other assets exist independently.