Bắt đầu sử dụng Firebase Data Connect tại địa phương

Trong 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 của mình một cách cục bộ mà không cần thiết lập một phiên bản SQL sản xuất. Bạn sẽ:

  • Thêm Firebase Data Connect vào dự án Firebase của bạn.
  • Thiết lập một môi trường phát triển, bao gồm cả các tiện ích Visual Studio Code để làm việc với một phiên bản cục bộ.
  • Sau đó, chúng tôi sẽ hướng dẫn bạn cách:
    • Sử dụng công cụ tiện ích VS Code, với Gemini Code Assist, để:
      • Tạo giản đồ cho một ứng dụng
      • Tạo truy vấn và đột biến hành chính để điền vào cơ sở dữ liệu cục bộ
      • Giúp bạn triển khai các truy vấn và đột biến cho ứng dụng của mình trong một trình kết nối có thể triển khai
    • Kiểm thử các truy vấn và đột biến bằng dữ liệu mẫu dựa trên trình mô phỏng cục bộ
    • Tạo SDK có kiểu dữ liệu mạnh và sử dụng chúng trong ứng dụng của bạn
    • Triển khai lược đồ và trình kết nối cuối cùng của bạn lên đám mây (không bắt buộc, khi nâng cấp lên gói Blaze).

Chọn một quy trình phát triển cục bộ

Data Connect cung cấp cho bạn 2 cách để cài đặt các công cụ phát triển và làm việc cục bộ.

Điều kiện tiên quyết

Để sử dụng hướng dẫn bắt đầu nhanh này, bạn cần có những thứ sau.

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ộ của bạn.
  2. Mở VS Code trong thư mục mới.
  3. Cài đặt tiện ích Firebase Data Connect từ Visual Studio Code Marketplace.

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

Để thiết lập dự án cục bộ, hãy khởi động thư mục dự án. Trong cửa sổ IDE, ở 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 một dự án Firebase rồi chọn dự án mà 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 lệnh firebase init).

  4. Nhấp vào nút Start emulators (Khởi động trình mô phỏng).

Tạo giản đồ

Trong thư mục dự án Firebase, trong tệp /dataconnect/schema/schema.gql, hãy bắt đầu xác định một giản đồ GraphQL về, chẳng hạn như các bài đánh giá phim.

Sử dụng Gemini Code Assist để tạo giản đồ

Cách tạo giản đồ ứng dụng đánh giá phim bằng Gemini Code Assist:

  1. Nhấp vào biểu tượng tiện ích Data Connect VS Code để mở thanh bên của tiện ích này.
  2. Nhấp vào Dùng thử Gemini với @FirebaseDataConnect. Cửa sổ trò chuyện Gemini Code Assist sẽ mở ra.
  3. Nhấp vào giao diện trò chuyện rồi bắt đầu nhập @FirebaseDataConnect để lọc các lệnh có liên quan.

  4. Chọn lệnh /generate_schema và tại dấu nhắc, hãy hoàn tất lệnh, yêu cầu Gemini tạo một giản đồ cho ứng dụng mà bạn đang phát triển.

    Ví dụ:

    @FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users

  5. Sau vài giây, một giản đồ được đề xuất sẽ xuất hiện. Xem lại giản đồ.

  6. Cách thêm mã vào schema.gql:

    1. Nhấp vào nút Chèn vào cuối tệp
    2. Hoặc để chèn mã tại vị trí con trỏ, hãy nhấp vào nút + ở đầu câu trả lời trong cuộc trò chuyện.

Phim

Trong Data Connect, các trường GraphQL được liên kết với các cột. Phim có id, title, imageUrl và genre. Data Connect nhận dạng các kiểu dữ liệu nguyên thuỷ: String và UUID.

Sao chép đoạn mã sau hoặc xoá dấu nhận xét ở các dòng tương ứng trong tệp.

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

Sao chép đoạn mã sau hoặc xoá dấu nhận xét ở các dòng tương ứng trong tệp.

# 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, đồng thời 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

Thêm dữ liệu vào bảng

Trong bảng điều khiển trình chỉnh sửa IDE, bạn sẽ thấy các nút CodeLens xuất hiện trên các loại GraphQL trong /dataconnect/schema/schema.gql. Bạn có thể sử dụng nút Thêm dữ liệu và Chạy (Cục bộ) để thêm dữ liệu vào cơ sở dữ liệu cục bộ.

Cách thêm bản ghi vào bảng Movie và MovieMetadata:

  1. Trong schema.gql, hãy nhấp vào nút Thêm dữ liệu phía trên khai báo kiểu Movie.
    Nút Thêm dữ liệu CodeLens cho Firebase Data Connect
  2. Trong tệp Movie_insert.gql được tạo, hãy mã hoá cứng dữ liệu cho 3 trường.
  3. Nhấp vào nút Run (Local) (Chạy (Cục bộ)).
    Nút Chạy CodeLens cho Firebase Data Connect
  4. Lặp lại các bước trước đó để thêm một bản ghi vào bảng MovieMetadata, cung cấp id của Phim trong trường movieId, như được nhắc trong đột biến MovieMetadata_insert đã tạo.

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 Đọc dữ liệu phía trên khai báo loại Movie.
  2. Trong tệp Movie_read.gql kết quả, hãy nhấp vào nút Run (Local) (Chạy (Cục bộ)) để 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

Xác định truy vấn

Giờ đến phần thú vị hơn: xác định những truy vấn bạn sẽ cần trong ứng dụng của mình. Là một nhà phát triển, bạn quen với việc viết các truy vấn SQL thay vì truy vấn GraphQL, vì vậy, ban đầu bạn có thể cảm thấy hơi khác biệt.

Tuy nhiên, GraphQL ngắn gọn và an toàn về loại hơn nhiều so với SQL thô. Ngoài ra, tiện ích VS Code của chúng tôi giúp đơn giản hoá trải nghiệm phát triển, cả cho các truy vấn và đột biến.

Cách tạo truy vấn bằng Gemini Code Assist:

  1. Nhấp vào biểu tượng tiện ích Data Connect VS Code để mở thanh bên của tiện ích này.
  2. Nhấp vào Dùng thử Gemini với @FirebaseDataConnect. Cửa sổ trò chuyện Gemini Code Assist sẽ mở ra.
  3. Nhấp vào giao diện trò chuyện rồi bắt đầu nhập @FirebaseDataConnect để lọc các lệnh có liên quan.

  4. Chọn lệnh /generate_operation rồi hoàn tất lệnh tại dấu nhắc, yêu cầu Gemini tạo một truy vấn.

    Ví dụ:

    @FirebaseDataConnect /generate_operation List all movies with titles start with "A".

  5. Sau vài giây, một cụm từ tìm kiếm được đề xuất sẽ xuất hiện. Xem lại truy vấn.

  6. Cách thêm mã vào queries.gql:

    1. Nhấp vào nút Chèn vào cuối tệp
    2. Hoặc để chèn mã tại vị trí con trỏ, hãy nhấp vào nút + ở đầu câu trả lời trong cuộc trò chuyện.

Thực thi truy vấn bằng nút CodeLens ở gần.

Tìm hiểu thêm về các truy vấn Data Connect trong tài liệu

Tạo SDK và sử dụng chúng trong ứng dụng của bạn

Trong bảng điều khiển bên trái của IDE, 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 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 ở đó.

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

Sử dụng SDK để gọi truy vấn từ một ứng dụng

Bạn có thể sử dụng SDK mà Data Connect đã tạo để triển khai một lệnh gọi đến truy vấn ListMovies của bạn. Sau đó, bạn có thể thực thi truy vấn này cục bộ bằng trình mô phỏng Data Connect.

Web

  1. Thêm Firebase vào ứng dụng web của bạn.

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

    • nhập SDK đã tạo
    • cài đặt ứng dụng để kết nối với trình mô phỏng Data Connect
    • gọi các phương thức Data Connect.
    import React from 'react';
import ReactDOM from 'react-dom/client';

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

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

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

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 của bạn.

  2. Để 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 (Tệp) > Add Package Dependencies (Thêm các phần phụ thuộc của gói) > Add Local (Thêm cục bộ), rồi chọn thư mục chứa Package.swift đã tạo.

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

    • nhập SDK đã tạo
    • cài đặt ứng dụng để kết nối với trình mô phỏng Data Connect
    • 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

// 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)

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

  1. Thêm Firebase vào ứng dụng Android của bạn.

  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
    • cài đặt ứng dụng để kết nối với trình mô phỏng Data Connect
    • 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
  .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)
  }


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 CLI flutterfire 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
    • cài đặt ứng dụng để kết nối với trình mô phỏng Data Connect
    • 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,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  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();
            }),
      )
    ])));
  }
}

Triển khai giản đồ và truy vấn của bạn vào quy trình sản xuất

Sau khi thiết lập cục bộ trên ứng dụng, giờ đây, bạn có thể triển khai lược đồ và trình kết nối lên đám mây. Bạn cần có một dự án theo gói Blaze để thiết lập một phiên bản Cloud SQL.

  1. Chuyển đến phần Kết nối dữ liệu của bảng điều khiển Firebase rồi tạo một phiên bản Cloud SQL dùng thử miễn phí.

  2. Trong Terminal được tích hợp trong IDE, hãy chạy firebase init dataconnect và chọn Region/Service ID mà bạn vừa tạo trên bảng điều khiển.

  3. Chọn "Y" khi được nhắc bằng thông báo "File dataconnect/dataconnect.yaml already exists, Overwrite?" (Tệp dataconnect/dataconnect.yaml đã tồn tại, Ghi đè?).

  4. Trong cửa sổ IDE, trong giao diện người dùng Tiện ích VS Code, hãy nhấp vào nút Triển khai cho sản xuất.

  5. Sau khi triển khai, hãy chuyển đến bảng điều khiển Firebase để xác minh rằng giản đồ, các thao tác và dữ liệu đã được tải lên đám mây. Bạn sẽ có thể xem giản đồ và chạy các thao tác trên bảng điều khiển. Phiên bản Cloud SQL cho PostgreSQL sẽ được cập nhật bằng giản đồ và dữ liệu được tạo đã triển khai cuối cùng.

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 đồ, đồng thời 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 bắt đầu nhanh: