在本快速入门中,您将学习如何使用生产 SQL 实例在应用中构建 Firebase Data Connect。
在 Firebase 控制台中,您将:
- 将 Firebase Data Connect 添加到您的 Firebase 项目。
- 在 Firebase 控制台中使用 AI 辅助架构生成功能为应用创建架构,并进行部署。
- 为您的应用预配 Cloud SQL 实例。
- 使用 Gemini in Firebase 将示例数据填充到数据库中。
- 借助 AI 辅助操作生成功能,创建查询和更改,并将其部署并用于在本地开发客户端代码。
然后,在本地开发环境中,您将执行以下操作:
- 设置开发工具(包括 Visual Studio Code 扩展程序),以便与您的生产实例搭配使用。
- 将本地环境与您在控制台中创建的资源同步。
- 生成强类型 SDK 并在应用中使用它们。
控制台流程:使用 AI 协助设计架构,然后将其部署到数据库
- 如果尚未创建,请创建一个 Firebase 项目。
- 在 Firebase 控制台中,点击添加项目,然后按照屏幕上的说明操作。
- 前往 Firebase 控制台的 Data Connect 部分。
- 点击 Get started with Gemini(开始使用 Gemini)按钮。
- 在随即显示的 Schema Generator 工作流面板中,描述一个应用,以便 Gemini 帮助您创建 GraphQL 架构。
- 查看 GraphQL 架构,然后点击升级并部署。
将您的项目升级到 Blaze 方案。这样,您就可以创建 Cloud SQL for PostgreSQL 实例了。
选择创建新的 Cloud SQL 实例。在随即显示的对话框中,为 Cloud SQL for PostgreSQL 数据库选择位置和命名方式。
系统会部署您的应用架构以及与该架构对应的 PostgreSQL 数据库。
控制台流程:使用 AI 协助为客户创建操作
部署架构后,您可以创建查询和更改的连接器,将其部署到后端,然后从客户端调用,从而让客户端应用能够访问这些数据。
我们的 AI 辅助工具可随时为您提供帮助。
出现提示时,点击 Generate operations with Gemini(使用 Gemini 生成操作)按钮。
几分钟后,在随即显示的生成操作工作流面板中,查看 Gemini 根据您的架构提供的查询和更改列表。
点击每个操作行可查看定义该操作的 GraphQL 代码。如有必要,请使用回收站控件删除不需要的操作。
如需添加操作,请点击 + 添加按钮。然后:
用自然语言描述您的操作。
例如:
List all products
查看生成的 GraphQL。
如果您接受该操作,请点击插入将其添加到操作列表中。
继续移除和添加操作,直到操作集可接受为止。
如需将此操作列表部署为可供客户端调用的连接器集,请选择连接器的名称,然后点击部署。
控制台流程:使用 Firebase 中的 Gemini 创建更改并填充数据库
通过完成前面的步骤,您创建了一个由相关实体类型组成的 Data Connect 架构,并将其部署到了生产环境,这意味着还创建并部署了一个包含相应表的 PostgreSQL 数据库。
如需填充数据库,您可以使用 Firebase 中的 Gemini 来帮助您根据自然语言输入来定义 GraphQL 变更以更新其中一个表,以及定义查询以确认更新。
打开数据标签页。
点击帮我写 GraphQL pen_spark 图标,然后在随即显示的框中输入您的输入内容。
例如:
Add data for three sample products to my app.
点击生成。系统会返回该更改。
查看输出。如有必要,请点击修改以优化提示,然后点击重新生成。
接下来,点击插入将更改插入到数据编辑器中。
点击运行。
运行更改时,系统会将数据写入 PostgreSQL 数据库中的适用表。您可以在控制台中创建查询以查看存储的数据:
重复上述步骤,使用帮我写 GraphQL pen_spark 创建查询。
在随即显示的框中,输入您的输入内容。
例如:
Query data for all sample products in my app.
依次点击生成和运行。
本地流程:选择开发工具
现在,您已在已部署的数据库中存储数据,并部署了连接器,接下来可以在本地开发环境中继续开发架构和连接器。
首先,您需要设置本地环境。Data Connect 提供了两种安装开发工具的方法。
本地流程:设置开发环境
- 为您的本地项目创建一个新目录。
在您创建的新目录中运行以下命令。
curl -sL https://firebase.tools/dataconnect | bash
此脚本会尝试为您设置开发环境并启动基于浏览器的 IDE。此 IDE 提供了一些工具(包括预捆绑的 VS Code 扩展程序),可帮助您管理架构,定义要在应用中使用的查询和更改,以及生成强类型 SDK。
alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'
本地流程:设置项目目录
如需设置本地项目,请初始化项目目录。在 IDE 窗口的左侧面板中,点击 Firebase 图标以打开 Data Connect VS Code 扩展程序界面:
- 点击使用 Google 账号登录按钮。
- 点击关联 Firebase 项目按钮,然后在控制台中选择您之前创建的项目。
点击 Run firebase init 按钮,然后完成相应流程。
点击启动模拟器按钮。
本地流程:在本地环境中查找架构和连接器
上一部分中的 firebase init
步骤会将资源同步到您的本地开发环境:
- 它会同步您部署的架构
- 找到您的架构:它位于 Firebase 项目目录中的
/dataconnect/schema/schema.gql
文件中。
- 找到您的架构:它位于 Firebase 项目目录中的
- 它会同步您部署的连接器中的查询和更改操作
- 找到您的连接器:操作位于 Firebase 项目目录的
/dataconnect/connector/
目录中。
- 找到您的连接器:操作位于 Firebase 项目目录的
本地流程:了解架构
架构示例:电影
在 Data Connect 中,GraphQL 字段会映射到列。Movie
类型可能具有 id
、title
、imageUrl
和 genre
。Data Connect 可以识别基元数据类型 String
和 UUID
。
# File `/dataconnect/schema/schema.gql`
# By default, a UUID id key will be created by default as primary key.
type Movie @table {
id: UUID! @default(expr: "uuidV4()")
title: String!
imageUrl: String!
genre: String
}
架构示例 1:1 表:MovieMetadata
对于电影,您可以对电影元数据进行建模。
例如,在 schema.gql
中,您可以添加以下代码段或查看由 Gemini 生成的代码。
# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
# This time, we omit adding a primary key because
# you can rely on Data Connect to manage it.
# @unique indicates a 1-1 relationship
movie: Movie! @unique
# movieId: UUID <- this is created by the above reference
rating: Float
releaseYear: Int
description: String
}
请注意,movie
字段已映射到 Movie
类型。Data Connect 了解这是 Movie
与 MovieMetadata
之间的关系,并会为您管理这项关系。
本地流程:向表中添加更多数据
在 IDE 编辑器面板中,您会看到 CodeLens 按钮显示在 /dataconnect/schema/schema.gql
中的 GraphQL 类型上方。就像在控制台中一样,您可以创建更改以将数据添加到生产数据库。
在本地工作时,如需向表中添加数据,请执行以下操作:
- 在
schema.gql
中,点击某个类型(例如Movie
、Product
、Account
,具体取决于应用的性质)声明上方的添加数据按钮。
- 系统会向您的工作目录(例如
Movie_insert.gql
或Product_insert.gql
)添加一个新文件<type>_insert.qgl
。在相应类型的字段中对数据进行硬编码。 - 点击运行(生产环境)按钮。
- 重复上述步骤,将记录添加到其他表。
如需快速验证是否添加了数据,请执行以下操作:
- 返回
schema.gql
,点击类型声明上方的 Read data 按钮。 - 在生成的
<type>_read.gql
文件(例如Product_read.gql
)中,点击 Run (Production) 按钮以执行查询。
本地流程:生成 SDK
您的架构和连接器操作会在本地同步。现在,您可以使用本地工具生成客户端 SDK,以便开始在 iOS、Android、Web 和 Flutter 应用中实现对查询和更改的调用。
- 点击将 SDK 添加到应用按钮。
在随即显示的对话框中,选择包含应用代码的目录。Data Connect SDK 代码将生成并保存到该目录中。
选择您的应用平台,然后请注意,SDK 代码会立即在您选择的目录中生成。
本地流程:使用 SDK 从应用调用查询
现在,更新后的架构(如果适用)和查询已部署到生产环境,您可以使用 Data Connect 生成的 SDK 实现对 ListMovies
查询的调用。
Web
- 将 Firebase 添加到您的Web 应用。
在 React 应用的主文件中:
- 导入生成的 SDK
- 调用 Data Connect 方法。
import React from 'react'; import ReactDOM from 'react-dom/client'; // Generated queries. // Update as needed with the path to your generated SDK. import { listMovies, ListMoviesData } from '@movie-app/movies'; function App() { const [movies, setMovies] = useState<ListMoviesData['movies']>([]); useEffect(() => { listMovies.then(res => setMovies(res.data)); }, []); return ( movies.map(movie => <h1>{movie.title}</h1>); ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
Swift
- 将 Firebase 添加到您的 iOS 应用。
如需使用生成的 SDK,请在 Xcode 中将其配置为依赖项。
在 Xcode 顶部导航栏中,依次选择 File(文件)> Add Package Dependencies(添加软件包依赖项)> Add Local(添加本地内容),然后选择包含生成的
Package.swift
的文件夹。在应用的主要委托中:
- 导入生成的 SDK
- 调用 Data Connect 方法。
import SwiftUI import FirebaseDataConnect // Generated queries. // Update as needed with the package name of your generated SDK. import <CONNECTOR-PACKAGE-NAME> let connector = DataConnect.moviesConnector struct ListMovieView: View { @StateObject private var queryRef = connector.listMovies.ref() var body: some View { VStack { Button { Task { do { try await refresh() } catch { print("Failed to refresh: \(error)") } } } label: { Text("Refresh") } // use the query results in a view ForEach(queryRef.data?.movies ?? []) { movie in Text(movie.title) } } } @MainActor func refresh() async throws { _ = try await queryRef.execute() } struct ContentView_Previews: PreviewProvider { static var previews: some View { ListMovieView() } }
Kotlin Android
- 将 Firebase 添加到您的 Android 应用。
如需使用生成的 SDK,请在 Gradle 中将 Data Connect 配置为依赖项。
更新
app/build.gradle.kts
中的plugins
和dependencies
。plugins { // Use whichever versions of these dependencies suit your application. // The versions shown here were the latest as of March 14, 2025. // Note, however, that the version of kotlin("plugin.serialization") must, // in general, match the version of kotlin("android"). id("com.android.application") version "8.9.0" id("com.google.gms.google-services") version "4.4.2" val kotlinVersion = "2.1.10" kotlin("android") version kotlinVersion kotlin("plugin.serialization") version kotlinVersion } dependencies { // Use whichever versions of these dependencies suit your application. // The versions shown here were the latest versions as of March 14, 2025. implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04") implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1") implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3") // These dependencies are not strictly required, but will very likely be used // when writing modern Android applications. implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0") implementation("androidx.appcompat:appcompat:1.7.0") implementation("androidx.activity:activity-ktx:1.10.1") implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7") implementation("com.google.android.material:material:1.12.0") }
在应用的主 activity 中:
- 导入生成的 SDK
- 调用 Data Connect 方法。
import android.os.Bundle import android.widget.TextView import androidx.appcompat.app.AppCompatActivity import androidx.lifecycle.Lifecycle import androidx.lifecycle.lifecycleScope import androidx.lifecycle.repeatOnLifecycle import kotlinx.coroutines.launch private val connector = com.myapplication.MoviesConnector.instance class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val textView: TextView = findViewById(R.id.text_view) lifecycleScope.launch { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { val result = connector.listMovies.runCatching { execute { } } val newTextViewText = result.fold( onSuccess = { val titles = it.data.movies.map { it.title } "${titles.size} movies: " + titles.joinToString(", ") }, onFailure = { "ERROR: ${it.message}" } ) textView.text = newTextViewText } } } }
Flutter
- 将 Firebase 添加到您的 Flutter 应用。
- 安装 flutterfire CLI
dart pub global activate flutterfire_cli
。 - 运行
flutterfire configure
。 - 在应用的 main 函数中:
- 导入生成的 SDK
- 调用 Data Connect 方法。
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
// Generated queries.
// Update as needed with the path to your generated SDK
import 'movies_connector/movies.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(children: [
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: FutureBuilder(
future: MoviesConnector.instance.listMovies().execute(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) => Card(
child: Text(
snapshot.data!.data.movies[index].title,
)),
itemCount: snapshot.data!.data.movies.length,
);
}
return const CircularProgressIndicator();
}),
)
])));
}
}
后续步骤
查看已部署的项目并探索更多工具:
- 在 Firebase 控制台中向数据库添加数据、检查和修改架构,以及监控 Data Connect 服务。
如需了解详情,请参阅相关文档。例如,既然您已完成快速入门,请执行以下操作:
- 探索更多 AI 辅助工具和指南,帮助您生成架构、查询和更改。AI 辅助指南介绍了关于撰写提示的最佳实践。
- 详细了解架构、查询和更改开发
- 了解如何为 Web、Android、iOS 和 Flutter 生成客户端 SDK,以及如何从客户端代码调用查询和更改。