Bắt đầu sử dụng Firebase Data Connect

Hướng dẫn bắt đầu nhanh này sẽ giúp bạn thiết lập và chạy Firebase Data Connect để kết nối ứng dụng web và ứng dụng di động với cơ sở dữ liệu PostgreSQL. Bạn sẽ:

Thiết lập thư mục dự án Firebase Data Connect cục bộ bằng VS Code và Firebase CLI.
Tạo lược đồ, truy vấn và đột biến Data Connect dựa trên ý tưởng về ứng dụng bằng ngôn ngữ tự nhiên.
Sử dụng SDK có kiểu dữ liệu mạnh trong ứng dụng để chạy các Data Connect truy vấn và đột biến.
Cung cấp một thực thể Cloud SQL cho PostgreSQL, một lược đồ Data Connect, các truy vấn và đột biến.

Thiết lập thư mục dự án cục bộ

Bạn có thể cài đặt các công cụ phát triển cục bộ cho Data Connect theo 2 cách.

Trong thư mục dự án, hãy chạy lệnh sau.

Tập lệnh này sẽ cài đặt Firebase CLI và tiện ích Data Connect VS Code, đồng thời hướng dẫn bạn thực hiện firebase init dataconnect để thiết lập dự án. Nếu bạn chưa cài đặt ứng dụng VS Code dành cho máy tính, tập lệnh sẽ mở ứng dụng này trong một trình duyệt.
```
curl -sL https://firebase.tools/init/dataconnect | editor=true bash
```
Mở màn hình tiện ích Data Connect VS Code bằng cách nhấp vào biểu tượng Firebase trong bảng điều khiển bên trái của Visual Studio Code.
Nhấp vào Start emulators (Bắt đầu trình mô phỏng) để chạy trình mô phỏng bằng cơ sở dữ liệu PGlite cục bộ.

Xem xét lược đồ

Firebase Data Connect sử dụng GraphQL để xác định mô hình dữ liệu. Chỉ thị @table liên kết một kiểu GraphQL với một bảng PostgreSQL. Các trường trong kiểu này liên kết với các cột PostgreSQL. Bạn có thể xác định mối quan hệ giữa các bảng bằng cách sử dụng các trường tham chiếu đến các kiểu @table khác, bao gồm cả mối quan hệ nhiều với nhiều bằng cách sử dụng các bảng kết hợp với khoá chính tổng hợp.

Trong quá trình thiết lập mặc định, bạn có thể tìm thấy các tệp lược đồ Data Connect trong thư mục dataconnect/schema/. Dưới đây là 2 bảng ví dụ từ lược đồ mẫu phim. Lược đồ của bạn có thể khác nếu bạn sử dụng Gemini để tạo lược đồ.

type Movie @table {
  # Every table has an implicit primary key field that looks something like:
  #  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

type Review @table(key: ["movie", "user"]) {
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Tìm hiểu thêm về lược đồData Connect

Phát triển các truy vấn và đột biến

Firebase Data Connect sử dụng GraphQL cho các truy vấn và đột biến. Bạn xác định các truy vấn và đột biến này trong các tệp .gql và gọi chúng theo tên từ ứng dụng. Cú pháp GraphQL cung cấp SDK có kiểu dữ liệu mạnh và một API linh hoạt để tìm nạp chính xác dữ liệu mà ứng dụng của bạn cần.

Gieo dữ liệu vào cơ sở dữ liệu

Khi trình mô phỏng đang chạy, bạn có thể gieo dữ liệu ban đầu vào trình mô phỏng. Bạn có thể sử dụng tệp dataconnect/seed_data.gql được cung cấp hoặc tự viết các đột biến.

Sử dụng nút Run (local) (Chạy (cục bộ)) Code Lens trong VS Code để thực thi các đột biến và điền dữ liệu vào cơ sở dữ liệu PGlite cục bộ.

Nút Chạy CodeLens cho Firebase Data Connect

Xem xét các truy vấn và đột biến

Trong quá trình thiết lập mặc định, bạn có thể tìm thấy các truy vấn và đột biến Data Connect trong dataconnect/example/ thư mục.

Bạn có thể truy vấn dữ liệu quan hệ một cách chính xác bằng các truy vấn lồng nhau.

query ListMovies @auth(level: PUBLIC, insecureReason: "Anyone can list all movies and their reviews.") {
  movies {
    title imageUrl genre
    reviews_on_movie {
      rating reviewDate
      user { username }
    }
  }
}

Data Connect giúp bạn xây dựng các truy vấn và đột biến an toàn bằng Firebase Auth.

Để đảm bảo an toàn cho ứng dụng, ứng dụng web và ứng dụng di động chỉ có thể truy cập vào Data Connect các truy vấn và đột biến bằng @auth chỉ thị. Các truy vấn và đột biến có thể truy cập an toàn vào UID Firebase Auth bằng một biểu thức như {field}_expr: "auth.uid".

mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!) @auth(level: USER) {
  review_upsert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
    }
  )
}

Tìm hiểu thêm về các truy vấn Data Connect Tìm hiểu thêm về các đột biến Data Connect Tìm hiểu thêm về Data Connect Auth

Tạo các truy vấn và đột biến

Bạn không cần phải là chuyên gia về GraphQL để sử dụng Data Connect một cách hiệu quả. Bạn có thể tạo các truy vấn và đột biến Data Connect từ nội dung mô tả bằng ngôn ngữ tự nhiên.

Trong bất kỳ tệp .gql nào, hãy nhập # để bắt đầu một nhận xét và mô tả một truy vấn hoặc đột biến. Sau đó, sử dụng nút Generate/Refine Operation (Tạo/Tinh chỉnh thao tác) Code Lens để tạo thao tác GraphQL.

Nút Tạo CodeLens cho Firebase Data Connect

Sử dụng SDK đã tạo trong ứng dụng

firebase init dataconnect tự động thiết lập các SDK an toàn về kiểu cho các ứng dụng trong dự án. Nếu cần, bạn có thể thêm SDK theo cách thủ công bằng nút Add SDK to app trong tiện ích Data Connect VS Code hoặc bằng cách chạy firebase init dataconnect:sdk.

Web

Thêm Firebase vào ứng dụng web.

Trong tệp chính của ứng dụng React:

Nhập SDK đã tạo:

// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@dataconnect/generated';

Đo lường ứng dụng để kết nối với trình mô phỏng Data Connect:

import { connectDataConnectEmulator } from 'firebase/data-connect';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

Gọi các phương thức Data Connect.

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

Thêm Firebase vào ứng dụng iOS.
Để sử dụng SDK đã tạo, hãy định cấu hình SDK đó làm phần phụ thuộc trong Xcode.

Trong thanh điều hướng trên cùng của Xcode, hãy chọn File > Add Package Dependencies > Add Local (Tệp > Thêm phần phụ thuộc gói > Thêm cục bộ) rồi chọn thư mục chứa Package.swift đã tạo.

Trong uỷ quyền chính của ứng dụng:

Nhập SDK Data Connect và SDK đã tạo:

import FirebaseDataConnect
// Generated queries.
// Update as needed with the package name of your generated SDK.
import <CONNECTOR-PACKAGE-NAME>

let connector = DataConnect.moviesConnector

Đo lường ứng dụng để kết nối với trình mô phỏng Data Connect:

// Connect to the emulator on "127.0.0.1:9399"
connector.useEmulator()

// (alternatively) if you're running your emulator on non-default port:
// connector.useEmulator(port: 9999)

Gọi các phương thức:Data Connect

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

Thêm Firebase vào ứng dụng Android.

Để sử dụng SDK đã tạo, hãy định cấu hình Data Connect làm phần phụ thuộc trong Gradle.

Cập nhật plugins và dependencies trong app/build.gradle.kts.

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")
}

Trong hoạt động chính của ứng dụng:

Lấy một thực thể trình kết nối từ SDK đã tạo:

private val connector = com.myapplication.MoviesConnector.instance

Đo lường ứng dụng để kết nối với trình mô phỏng Data Connect:

private val connector = com.myapplication.MoviesConnector.instance
  .apply {
    // Connect to the emulator on "10.0.2.2:9399" (default port)
    dataConnect.useEmulator()

    // (alternatively) if you're running your emulator on non-default port:
    // dataConnect.useEmulator(port = 9999)
  }

Gọi các phương thức Data Connect.

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

Thêm Firebase vào ứng dụng Flutter.
Cài đặt flutterfire CLI dart pub global activate flutterfire_cli.
Chạy flutterfire configure.

Trong hàm chính của ứng dụng:

Nhập SDK đã tạo:

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

Đo lường ứng dụng để kết nối với trình mô phỏng Data Connect:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  runApp(const MyApp());
}

Gọi các phương thức Data Connect.

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();
            }),
      )
    ])));
  }
}

Triển khai lên kênh phát hành công khai

Cách triển khai giản đồ, truy vấn và đột biến lên kênh phát hành công khai:

Xem thông tin về mức giá và gói dùng thử miễn phí trên trang Mức giá. Dự án của bạn có thể đủ điều kiện sử dụng một trong các lựa chọn dùng thử Firebase Data Connect
Nhấp vào nút Deploy to production (Triển khai lên kênh phát hành công khai) trong tiện ích Data Connect VS Code hoặc chạy trong một thiết bị đầu cuối:
```
firebase deploy --only dataconnect
```
Sau khi triển khai, hãy truy cập vào Firebase console để xem giản đồ và chạy các truy vấn và đột biến.

Mẹo: Bạn có thể định cấu hình khu vực Cloud SQL, tên thực thể và tên cơ sở dữ liệu PostgreSQL trong dataconnect.yaml trước khi triển khai.

Tìm hiểu thêm về dataconnect.yaml Tìm hiểu thêm về cách Data Connect hoạt động với Cloud SQL

Các bước tiếp theo

Bây giờ bạn đã hoàn tất hướng dẫn bắt đầu nhanh, sau đây là một số bước tiếp theo:

Khám phá kho lưu trữ ứng dụng bắt đầu nhanh và xây dựng một ứng dụng Data Connect có đầy đủ tính năng bằng cách làm theo lớp học lập trình của chúng tôi cho web, lớp học lập trình cho iOS, hoặc lớp học lập trình cho Android.
Thêm dữ liệu vào cơ sở dữ liệu, kiểm tra lược đồ và theo dõi dịch vụ Data Connect trong Firebase console.
Thiết lập máy chủ Firebase MCP bằng các công cụ phát triển dựa trên AI như Gemini Code Assist.
Tìm hiểu thêm về lược đồ, truy vấn và đột biến phát triển.
Tìm hiểu thêm về cách Data Connect quản lý lược đồ PostgreSQL.
Tìm hiểu thêm về SDK ứng dụng cho web, Android, iOS, và Flutter cũng như SDK quản trị cho Node.js.