开始使用 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 赋能的现代编辑器(例如 AntigravityAndroid Studio、Cursor 或 Windsurf)。

设置工作区

首先,打开您偏好的 AI 编码工具,然后创建一个新的项目目录。 打开工具的集成终端,然后运行初始化命令:

firebase init dataconnect

此命令会引导您完成项目初始化。出现提示时,请选择以下选项:

  • 创建新的 Firebase 项目
  • 跳过 Gemini 架构生成
  • 创建新的 Cloud SQL 实例
  • 创建 React 模板
  • 选择以安装 Agent Skills for Firebase

利用 AI 生成应用

安装 Firebase 代理技能后,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 实例运行操作。

后续步骤

您已完成快速入门,接下来可以执行以下操作:

  • 探索快速入门应用代码库,并按照我们的 Codelab 构建 SQL Connect 应用。
  • 向数据库添加数据,并在 Firebase 控制台中监控 SQL Connect 服务。
  • 详细了解架构查询变更开发。
  • 详细了解客户端 SDKAdmin SDK