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

Trong phần hướng dẫn nhanh này, bạn sẽ tìm hiểu cách tạo Firebase Data Connect trong ứng dụng bằng một phiên bản SQL chính thức.

Trong bảng điều khiển Firebase, bạn sẽ:

  • Thêm Firebase Data Connect vào dự án Firebase.
  • Tạo một giản đồ cho ứng dụng có tính năng tạo giản đồ được hỗ trợ AI trong bảng điều khiển Firebase và triển khai giản đồ đó.
  • Cung cấp một phiên bản Cloud SQL cho ứng dụng của bạn.
  • Với Gemini trong Firebase, hãy điền dữ liệu mẫu vào cơ sở dữ liệu.
  • Tạo cụm từ tìm kiếm và đột biến bằng tính năng tạo thao tác do AI hỗ trợ. Bạn có thể triển khai và sử dụng tính năng này để phát triển mã ứng dụng cục bộ.

Sau đó, trong môi trường phát triển cục bộ, bạn sẽ:

  • Thiết lập công cụ phát triển, bao gồm cả tiện ích Visual Studio Code để hoạt động với phiên bản phát hành chính thức.
  • Đồng bộ hoá môi trường cục bộ với các thành phần bạn đã tạo trong bảng điều khiển.
  • Tạo SDK có kiểu mạnh và sử dụng các SDK đó trong ứng dụng.

Quy trình trên bảng điều khiển: Sử dụng tính năng hỗ trợ AI để thiết kế giản đồ, sau đó triển khai giản đồ đó cho cơ sở dữ liệu

  1. Nếu chưa có, hãy tạo một dự án Firebase.
    1. Trong bảng điều khiển Firebase, hãy nhấp vào Thêm dự án, sau đó làm theo hướng dẫn trên màn hình.
  2. Chuyển đến phần Data Connect của bảng điều khiển Firebase.
  3. Nhấp vào nút Bắt đầu sử dụng Gemini.
  4. Trong bảng điều khiển quy trình công việc Trình tạo giản đồ xuất hiện, hãy mô tả một ứng dụng để Gemini có thể giúp bạn tạo giản đồ GraphQL.
  5. Xem lại giản đồ GraphQL, sau đó nhấp vào Nâng cấp và triển khai.

  6. Nâng cấp dự án lên gói Blaze. Thao tác này cho phép bạn tạo một phiên bản Cloud SQL cho PostgreSQL.

  7. Chọn Tạo phiên bản Cloud SQL mới. Trong hộp thoại xuất hiện, hãy chọn vị trí và đặt tên cho cơ sở dữ liệu Cloud SQL cho PostgreSQL.

    Giản đồ ứng dụng của bạn được triển khai cùng với cơ sở dữ liệu PostgreSQL tương ứng với giản đồ đó.

Quy trình trên bảng điều khiển: Sử dụng tính năng hỗ trợ AI để tạo thao tác cho ứng dụng

Sau khi triển khai giản đồ, bạn có thể thực hiện các bước đầu tiên để cung cấp dữ liệu này cho các ứng dụng khách bằng cách tạo một trình kết nối các truy vấn và đột biến để triển khai cho phần phụ trợ, sau đó gọi từ các ứng dụng khách.

Các công cụ hỗ trợ dựa trên AI của chúng tôi luôn sẵn sàng trợ giúp.

  1. Khi được nhắc, hãy nhấp vào nút Tạo thao tác bằng Gemini.

  2. Sau vài phút, trong bảng điều khiển quy trình công việc Tạo thao tác xuất hiện, hãy xem lại danh sách truy vấn và đột biến do Gemini cung cấp dựa trên giản đồ của bạn.

  3. Nhấp vào từng hàng thao tác để xem mã GraphQL xác định thao tác đó. Nếu cần, hãy sử dụng thành phần điều khiển thùng rác để xoá các thao tác bạn không cần.

  4. Để thêm toán tử, hãy nhấp vào nút + Thêm. Sau đó:

    1. Mô tả thao tác của bạn bằng ngôn ngữ tự nhiên.

      Ví dụ:

      List all products

    2. Xem lại GraphQL đã tạo.

    3. Nếu phép toán đó được chấp nhận, hãy nhấp vào Chèn để thêm phép toán đó vào danh sách phép toán.

  5. Tiếp tục xoá và thêm các toán tử cho đến khi tập hợp toán tử của bạn được chấp nhận.

  6. Để triển khai danh sách thao tác này dưới dạng một tập hợp trình kết nối có thể gọi được từ ứng dụng, hãy chọn tên của trình kết nối, sau đó nhấp vào Triển khai.

Quy trình trên bảng điều khiển: Sử dụng Gemini trong Firebase để tạo một đột biến và điền cơ sở dữ liệu

Bằng cách hoàn thành các bước trước, bạn đã tạo một giản đồ Data Connect bao gồm các loại thực thể có liên quan và triển khai giản đồ đó cho môi trường sản xuất, nghĩa là cơ sở dữ liệu PostgreSQL với các bảng tương ứng cũng được tạo và triển khai.

Để điền sẵn cơ sở dữ liệu, bạn có thể sử dụng Gemini trong Firebase để giúp bạn nhập dữ liệu bằng ngôn ngữ tự nhiên nhằm xác định sự thay đổi GraphQL để cập nhật một trong các bảng và truy vấn để xác nhận nội dung cập nhật.

  1. Mở thẻ Dữ liệu.

  2. Nhấp vào biểu tượng Giúp tôi viết GraphQL pen_spark và nhập nội dung bạn muốn trong hộp xuất hiện.

    Ví dụ:

    Add data for three sample products to my app.

  3. Nhấp vào Tạo. Phương thức này sẽ trả về kết quả đột biến.

  4. Xem lại kết quả. Nếu cần, hãy nhấp vào Chỉnh sửa để tinh chỉnh câu lệnh rồi nhấp vào Tạo lại.

  5. Tiếp theo, hãy nhấp vào Chèn để chèn đột biến vào trình chỉnh sửa dữ liệu.

  6. Nhấp vào Chạy.

Khi bạn chạy phép biến đổi, dữ liệu sẽ được ghi vào bảng có liên quan trong cơ sở dữ liệu PostgreSQL. Bạn có thể tạo truy vấn trong bảng điều khiển để xem dữ liệu đã lưu trữ:

  1. Lặp lại các bước trước, sử dụng Giúp tôi viết GraphQL pen_spark để tạo truy vấn.

  2. Trong hộp xuất hiện, hãy nhập nội dung bạn muốn.

    Ví dụ:

    Query data for all sample products in my app.

  3. Nhấp vào Tạo, rồi nhấp vào Chạy.

Luồng cục bộ: Chọn công cụ phát triển

Giờ đây, khi đã có dữ liệu trong cơ sở dữ liệu đã triển khai và đã triển khai một trình kết nối, bạn có thể tiếp tục phát triển giản đồ và trình kết nối trong môi trường phát triển cục bộ.

Trước tiên, bạn cần thiết lập môi trường cục bộ. Data Connect cung cấp cho bạn hai cách để cài đặt các công cụ phát triển.

Quy trình cục bộ: Thiết lập môi trường phát triển

  1. Tạo một thư mục mới cho dự án cục bộ.

  2. Chạy lệnh sau trong thư mục mới mà bạn đã tạo.

      curl -sL https://firebase.tools/dataconnect | bash

    Tập lệnh này sẽ cố gắng thiết lập môi trường phát triển cho bạn và khởi chạy IDE dựa trên trình duyệt. IDE này cung cấp các công cụ, bao gồm cả các tiện ích VS Code được đóng gói sẵn, để giúp bạn quản lý giản đồ và xác định các truy vấn và đột biến sẽ được sử dụng trong ứng dụng, cũng như tạo các SDK có kiểu mạnh.

  alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

Quy trình cục bộ: Thiết lập thư mục dự án

Để thiết lập dự án cục bộ, hãy khởi chạy thư mục dự án. Trong cửa sổ IDE, trong bảng điều khiển bên trái, hãy nhấp vào biểu tượng Firebase để mở giao diện người dùng của tiện ích Data Connect VS Code:

  1. Nhấp vào nút Đăng nhập bằng Google.
  2. Nhấp vào nút Kết nối dự án Firebase rồi chọn dự án bạn đã tạo trước đó trong bảng điều khiển.

  3. Nhấp vào nút Run firebase init (Chạy firebase init) rồi hoàn tất quy trình.

  4. Nhấp vào nút Start emulators (Bắt đầu trình mô phỏng).

Quy trình cục bộ: Tìm giản đồ và trình kết nối trong môi trường cục bộ

Bước firebase init trong phần trước sẽ đồng bộ hoá các thành phần với môi trường phát triển cục bộ:

  • Công cụ này đồng bộ hoá giản đồ mà bạn đã triển khai
    • Tìm giản đồ: giản đồ nằm trong thư mục dự án Firebase, trong tệp /dataconnect/schema/schema.gql.
  • Công cụ này đồng bộ hoá các truy vấn và đột biến trong trình kết nối mà bạn đã triển khai
    • Tìm trình kết nối: các thao tác nằm trong thư mục dự án Firebase, trong thư mục /dataconnect/connector/.

Luồng cục bộ: Tìm hiểu giản đồ

Ví dụ về giản đồ: Phim

Trong Data Connect, các trường GraphQL được liên kết với các cột. Loại Movie có thể có id, title, imageUrl và genre. Data Connect nhận dạng các kiểu dữ liệu gốc String và 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
}

Ví dụ về giản đồ bảng 1:1: MovieMetadata

Đối với phim, bạn có thể lập mô hình siêu dữ liệu của phim.

Ví dụ: trong schema.gql, bạn có thể thêm đoạn mã sau hoặc xem lại mã do Gemini tạo.

# 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
}

Lưu ý rằng trường movie được liên kết với một loại Movie. Data Connect hiểu rằng đây là mối quan hệ giữa Movie và MovieMetadata và sẽ quản lý mối quan hệ này cho bạn.

Tìm hiểu thêm về giản đồ Data Connect trong tài liệu

Luồng cục bộ: Thêm dữ liệu khác vào bảng

Trong bảng điều khiển trình chỉnh sửa IDE, bạn có thể thấy các nút CodeLens xuất hiện trên các loại GraphQL trong /dataconnect/schema/schema.gql. Tương tự như trong bảng điều khiển, bạn có thể tạo một đột biến để thêm dữ liệu vào cơ sở dữ liệu chính thức.

Khi làm việc cục bộ, để thêm dữ liệu vào bảng:

  1. Trong schema.gql, hãy nhấp vào nút Add data (Thêm dữ liệu) phía trên phần khai báo cho một trong các loại dữ liệu (như Movie, Product, Account, tuỳ thuộc vào bản chất của ứng dụng).
    Nút Thêm dữ liệu của Kính lúp mã cho Firebase Data Connect
  2. Một tệp mới, <type>_insert.qgl, được thêm vào thư mục đang hoạt động, chẳng hạn như Movie_insert.gql hoặc Product_insert.gql. Mã hoá cứng dữ liệu trong các trường cho loại đó.
  3. Nhấp vào nút Run (Production) (Chạy (Bản chính thức)).
    Nút Chạy của Code Lens cho Firebase Data Connect
  4. Lặp lại các bước trước đó để thêm bản ghi vào các bảng khác.

Cách nhanh chóng xác minh dữ liệu đã được thêm:

  1. Quay lại schema.gql, hãy nhấp vào nút Read data (Đọc dữ liệu) phía trên phần khai báo loại.
  2. Trong tệp <type>_read.gql thu được, chẳng hạn như Product_read.gql, hãy nhấp vào nút Run (Production) (Chạy (Sản xuất)) để thực thi truy vấn.

Tìm hiểu thêm về các đột biến Data Connect trong tài liệu

Quy trình cục bộ: Tạo SDK

Các thao tác của giản đồ và trình kết nối được đồng bộ hoá cục bộ. Giờ đây, bạn có thể sử dụng công cụ cục bộ để tạo SDK ứng dụng khách nhằm bắt đầu triển khai các lệnh gọi đến truy vấn và đột biến trong ứng dụng iOS, Android, web và Flutter.

  1. Nhấp vào nút Thêm SDK vào ứng dụng.

  2. Trong hộp thoại xuất hiện, hãy chọn một thư mục chứa mã cho ứng dụng của bạn. Mã SDK Data Connect sẽ được tạo và lưu tại đó.

  3. Chọn nền tảng ứng dụng, sau đó lưu ý rằng mã SDK sẽ được tạo ngay trong thư mục bạn đã chọn.

Quy trình cục bộ: Sử dụng SDK để gọi truy vấn của bạn từ một ứng dụng

Giờ đây, khi giản đồ đã cập nhật (nếu có) và truy vấn của bạn được triển khai vào môi trường phát hành chính thức, bạn có thể sử dụng SDK mà Data Connect đã tạo để triển khai lệnh gọi đến truy vấn ListMovies.

Web

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

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

    • nhập SDK đã tạo
    • gọi các phương thức 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

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

  2. Để sử dụng SDK đã tạo, hãy định cấu hình SDK đó dưới dạng 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 (Tệp) > Add Package Dependencies (Thêm phần phụ thuộc gói) > Add Local (Thêm cục bộ) rồi chọn thư mục chứa Package.swift đã tạo.

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

    • nhập SDK đã tạo
    • gọi các phương thức 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 cho Android

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

  2. Để 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")
}

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

    • nhập SDK đã tạo
    • gọi các phương thức 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

  1. Thêm Firebase vào ứng dụng Flutter.
  2. Cài đặt flutterfire CLI dart pub global activate flutterfire_cli.
  3. Chạy flutterfire configure.
  4. Trong hàm chính của ứng dụng:
    • nhập SDK đã tạo
    • gọi các phương thức 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();
            }),
      )
    ])));
  }
}

Các bước tiếp theo

Xem lại dự án đã triển khai và khám phá các công cụ khác:

  • Thêm dữ liệu vào cơ sở dữ liệu, kiểm tra và sửa đổi giản đồ cũng như theo dõi dịch vụ Data Connect trong bảng điều khiển Firebase.

Xem thêm thông tin trong tài liệu. Ví dụ: vì bạn đã hoàn tất hướng dẫn nhanh: