开始使用 Flutter 中的 Firebase SQL Connect

在本快速入门中，您将创建一个小型示例数据库并进行部署，然后从 Flutter 前端访问该数据库。

前提条件

如需完成本快速入门，您需要满足以下条件：

  • 安装了以下工具的环境：
  • Google 账号。

教程

教程

1. 初始化您的项目

创建一个新目录，并在其中初始化 Firebase 项目。出现提示时， 请选择以下选项：

  • 创建新的 Firebase 项目。
  • 不使用 Gemini 创建架构（在本教程中，您将使用预构建的 示例架构）。
  • 创建新的 Cloud SQL 实例。
  • 创建 Flutter 模板。
 
mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

2. 查看示例 GraphQL 定义

在 SQL Connect 中，您可以使用 GraphQL 定义所有数据库架构和操作 。初始化项目时，Firebase CLI 会创建一些 示例定义，帮助您入门。

 dataconnect/schema/schema.gql（摘录） 
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
 dataconnect/example/queries.gql（摘录） 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

3. 部署架构和操作

每当您更改数据库架构、查询或变更时，都必须 部署这些更改，才能使更改在数据库中生效。

 
firebase deploy --only dataconnect

4. 使用示例数据为数据库植入种子数据

在测试示例应用时，您可以使用这些种子数据进行查看。请注意，在此步骤中，您将执行任意 GraphQL，这对于管理任务是允许的。

 
firebase dataconnect:execute dataconnect/seed_data.gql

5. 生成 Dart 客户端 SDK

此命令使用您的 GraphQL 定义来生成专门针对您的数据库的 Dart 库 。您可以在客户端应用中使用此库 来执行所有数据库操作。

您可以通过向 connector.yaml 添加定义，为多个平台生成库，包括适用于 Android 的 Kotlin、适用于 iOS 的 Swift 和适用于 Web 的 JavaScript。

 
firebase dataconnect:sdk:generate
 自动生成的 Dart SDK（摘录） 
class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

6. 设置 Flutter 应用

运行以下命令，将 Flutter 应用设置为使用您的 Firebase 项目。

当 flutterfire 命令提示时，选择您之前创建的 Firebase 项目 ，然后选择要面向的平台。

 
cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

7. 编写示例 Flutter 客户端

将 flutter_app/lib/main.dart 的内容替换为此简单的 Flutter 应用。

请注意，该应用使用生成的 SDK 中的函数完成必要的数据库访问。

 
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/dataconnect_generated/generated.dart';
import 'package:flutter_app/firebase_options.dart';

class MyApp extends StatelessWidget {
  late final Future<QueryResult<ListMoviesData, void>>
  _movieListFuture;

  MyApp({super.key}) {
    _movieListFuture = ExampleConnector.instance
        .listMovies()
        .execute();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _movieListFuture,
        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 ?? 0,
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

8. 试用此应用

启动开发服务器，查看示例应用的实际运行情况。

 
flutter run

后续步骤

试用 SQL Connect VS Code 扩展程序

使用 SQL Connect 进行开发时，我们强烈建议您使用 SQL Connect VS Code 扩展程序。 即使您不将 Visual Studio Code 作为主要开发 环境，该扩展程序也提供多项功能，让架构和操作 开发更加便捷：

  • GraphQL 语言服务器，提供特定于 SQL Connect的语法检查和自动补全建议
  • 与代码行内联的 CodeLens 按钮，可让您从架构 定义文件中读取和写入数据，并从操作定义中执行查询和变更。
  • 自动使生成的 SDK 与 GraphQL 定义保持同步。
  • 简化的本地模拟器设置。
  • 简化的生产环境部署。

使用 SQL Connect 模拟器进行 本地开发

虽然本教程介绍了如何将 SQL Connect 架构和操作直接部署到生产环境，但您可能不希望在积极开发 应用时更改生产数据库。相反，您应该设置 SQL Connect 模拟器 并针对该模拟器而不是生产环境执行开发工作。该模拟器 会设置一个本地 PGlite 实例，其行为与实时 PostgreSQL 实例在 Cloud SQL 上的行为类似。

了解如何为应用编写架构和 操作

使用 SQL Connect 开发应用时，架构和操作的设计 是您将完成的首批也是最重要的开发任务之一。

  • 控制台中的 Firebase Gemini 是一种 AI 工具 ，可以根据应用的自然语言SQL Connect 描述生成架构。此工具可以帮助您快速入门 ，尤其是在您之前从未接触过关系型数据库的情况下。
  • 或者，您也可以直接使用 GraphQL 编写数据库架构、查询和变更 直接使用 GraphQL。首先参阅 设计 SQL Connect 架构中的指南， 然后继续阅读后续页面，了解如何编写操作。

了解如何从 SQL Connect 获取实时更新

您可以使用 SQL Connect 编写可实时响应数据变化的客户端应用。 请参阅从 SQL Connect 获取实时更新。