使用 AI 代理開始使用 Firebase SQL Connect

本快速入門導覽課程說明如何搭配使用 Firebase SQL Connect 和 AI 程式碼編寫工具，快速建構全端關聯式應用程式。為代理程式配備 Firebase Agent Skills 後，您就不需要編寫樣板資料庫程式碼或手動設定端點。您將瞭解如何設定本機專案、設定 AI 助理，以及使用單一提示生成安全的 PostgreSQL 結構定義、GraphQL 作業和完整的 React 前端。您可以使用這裡學到的內容，為 Firebase SQL Connect 支援的任何平台建構前端。

事前準備

如要完成這項快速入門指南，請確保環境已設定下列項目。如需特定作業系統的逐步說明，請參閱標準設定指南：

  • Node.js：安裝 Node.js，執行 Firebase CLI 並為產生的 React 前端提供支援。

  • Firebase CLI：全域安裝 Firebase CLI：

    npm install -g firebase-tools

  • AI 編碼工具：安裝新式 AI 輔助編輯器 (例如 Antigravity、Android Studio、Cursor 或 Windsurf)。

設定工作區

首先，開啟偏好的 AI 程式設計工具，並建立新的專案目錄。 開啟工具的整合式終端機，然後執行初始化指令：

firebase init dataconnect

這個指令會引導您初始化專案。系統提示時，請選擇下列選項：

  • 建立新的 Firebase 專案
  • 略過 Gemini 結構定義生成
  • 建立新的 Cloud SQL 執行個體
  • 建立 React 範本
  • 選取「是」，安裝 Firebase 適用的 Agent Skills

使用 AI 生成應用程式

安裝 Firebase Agent Skills 後，AI 助理就能直接根據高階提示，生成 SQL Connect 結構定義、作業和前端程式碼。

將下列其中一個提示複製並貼到 AI 助理中，即可生成後端、資料庫關係和 React 前端：

範例 1：電影評論應用程式

提示：

Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.

範例 2：電子商務店面

提示：

Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.

範例 3：多位作者的網誌

提示：

Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.

AI 助理可建立的內容

執行這些提示時，AI 助理會自動處理繁重的技術工作：

  • 資料庫結構定義 (dataconnect/schema/schema.gql)：使用 @table 指令將需求轉換為關聯式資料表，自動管理外鍵和主鍵。
  • GraphQL 作業 (dataconnect/[connector_name]/*.gql)：生成應用程式所需的確切查詢和異動，並透過 @auth 指令確保安全。
  • 產生的 SDK (src/dataconnect/)：使用 Firebase CLI 根據您的結構定義和作業，立即產生嚴格型別的用戶端 SDK。
  • React 前端 (src/)：連結完整且樣式美觀的 React 應用程式，該應用程式會使用產生的 SDK 與新後端通訊。

部署至正式環境

如要將結構定義、查詢和異動部署至正式環境，請在終端機中執行下列指令：

firebase deploy --only dataconnect

部署完成後，請前往 Firebase 控制台查看即時結構定義，並直接對 Cloud SQL 執行個體執行作業。

後續步驟

您已完成快速入門導覽課程，接下來可以採取下列行動：

  • 探索快速入門應用程式存放區，並按照程式碼研究室的指示建構 SQL Connect 應用程式。
  • 將資料新增至資料庫，並在 Firebase 控制台中監控 SQL Connect 服務。
  • 進一步瞭解結構定義、查詢和突變開發作業。
  • 進一步瞭解用戶端 SDK 和 Admin SDK。