เริ่มต้นใช้งาน Firebase Data Connect ในพื้นที่

การเริ่มต้นอย่างรวดเร็วนี้จะช่วยให้คุณเริ่มต้นใช้งาน Firebase Data Connect เพื่อเชื่อมต่อเว็บและแอปบนอุปกรณ์เคลื่อนที่กับฐานข้อมูล PostgreSQL ได้ คุณจะได้รับสิ่งต่อไปนี้

  • ตั้งค่าFirebase Data Connectไดเรกทอรีโปรเจ็กต์ในเครื่องด้วย VS Code และ Firebase CLI
  • สร้างสคีมา การค้นหา และการเปลี่ยนแปลง Data Connect โดยอิงตามไอเดียแอปของคุณในภาษาง่ายๆ
  • ใช้ SDK ที่มีการพิมพ์อย่างเข้มงวดในแอปเพื่อเรียกใช้Data Connect การค้นหาและการเปลี่ยนแปลง
  • จัดสรรอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL, สคีมา Data Connect, การค้นหา และการเปลี่ยนแปลง (ต้องใช้แพ็กเกจ Blaze)

ตั้งค่าไดเรกทอรีโปรเจ็กต์ในเครื่อง

คุณติดตั้งเครื่องมือพัฒนาในเครื่องสำหรับ Data Connect ได้ 2 วิธี

  1. ติดตั้งข้อกำหนดเบื้องต้นต่อไปนี้

  2. สร้างไดเรกทอรีโปรเจ็กต์และเปิดใน Visual Studio Code

  3. ติดตั้งส่วนขยาย Firebase Data Connect จาก VS Code Marketplace

  4. คลิกปุ่มลงชื่อเข้าใช้ด้วย Google

  5. คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase

  6. คลิกปุ่มเรียกใช้ firebase init

  7. คลิกปุ่มเริ่มโปรแกรมจำลองเพื่อเรียกใช้โปรแกรมจำลอง Data Connect ด้วยฐานข้อมูล PGlite ในเครื่อง

สคีมารีวิว

Firebase Data Connect ใช้ GraphQL เพื่อกำหนดโมเดลข้อมูล คำสั่ง @table จะแมปประเภท GraphQL กับตาราง PostgreSQL ฟิลด์ในแผนที่ประเภทจะแมปกับคอลัมน์ PostgreSQL คุณกําหนดความสัมพันธ์ระหว่างตารางได้โดยใช้ฟิลด์ที่อ้างอิงถึง@tableประเภทอื่นๆ รวมถึงความสัมพันธ์แบบกลุ่มต่อกลุ่มโดยใช้ตารางรวมที่มีคีย์หลักแบบรวม

ในการตั้งค่าเริ่มต้น คุณจะเห็นไฟล์สคีมา Data Connect ในไดเรกทอรี dataconnect/schema/ ต่อไปนี้คือตารางตัวอย่าง 2 ตารางจากสคีมาเทมเพลตภาพยนตร์ สคีมาของคุณอาจแตกต่างออกไปหากคุณใช้ Gemini เพื่อสร้างสคีมา

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับสคีมา Data Connect

พัฒนาการค้นหาและการเปลี่ยนแปลง

Firebase Data Connect ใช้ GraphQL สำหรับการค้นหาและการเปลี่ยนแปลง คุณกำหนด สิ่งเหล่านี้ในไฟล์ .gql และเรียกใช้ตามชื่อจากแอปของคุณ ไวยากรณ์ GraphQL มี SDK ที่มีการพิมพ์อย่างเข้มงวดและ API ที่ยืดหยุ่นเพื่อดึงข้อมูลที่แน่นอนซึ่งแอปของคุณ ต้องการ

ข้อมูลเริ่มต้นในฐานข้อมูล

เมื่ออีมูเลเตอร์ทำงาน คุณจะเริ่มต้นด้วยข้อมูลเริ่มต้นได้ คุณสามารถใช้ไฟล์ dataconnect/seed_data.gql ที่ ระบุไว้หรือเขียนการเปลี่ยนแปลงของคุณเองก็ได้

ใช้ปุ่ม Code Lens Run (local) ใน VS Code เพื่อเรียกใช้การเปลี่ยนแปลงและ ป้อนข้อมูลลงในฐานข้อมูล PGlite ในเครื่อง

ปุ่มเรียกใช้ CodeLens สำหรับ Firebase Data
Connect

ตรวจสอบการค้นหาและการเปลี่ยนแปลง

ในการตั้งค่าเริ่มต้น คุณจะดูการค้นหาและการเปลี่ยนแปลงของ Data Connect ได้ในไดเรกทอรี dataconnect/example/

คุณค้นหาข้อมูลเชิงสัมพันธ์ได้อย่างแม่นยำด้วยการค้นหาที่ซ้อนกัน

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 ช่วยให้คุณสร้างการค้นหาและการเปลี่ยนแปลงที่ปลอดภัยด้วย Firebase Auth

เว็บแอปและแอปบนอุปกรณ์เคลื่อนที่จะเข้าถึงได้เฉพาะ Data Connect การค้นหาและการเปลี่ยนแปลงที่มี @auth คำสั่งเท่านั้น เพื่อรักษาความปลอดภัยของแอป การค้นหาและการเปลี่ยนแปลงจะเข้าถึง UID ของ Firebase Auth ได้อย่างปลอดภัย โดยใช้การแสดงผล เช่น {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
    }
  )
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับคำค้นหา Data Connect ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลง Data Connect ดูข้อมูลเพิ่มเติมเกี่ยวกับ Data Connect Auth

สร้างการค้นหาและการเปลี่ยนแปลง

คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญด้าน GraphQL เพื่อใช้ Data Connect อย่างมีประสิทธิภาพ คุณสามารถสร้างData Connectการค้นหาและการเปลี่ยนแปลงจากคำอธิบายภาษาธรรมชาติ ได้

ในไฟล์ .gql ให้พิมพ์ # เพื่อเริ่มความคิดเห็นและอธิบายการค้นหาหรือ การเปลี่ยนแปลง จากนั้นใช้ปุ่ม Code Lens Generate/Refine Operation เพื่อ สร้างการดำเนินการ GraphQL

ปุ่มสร้าง CodeLens สำหรับ Firebase Data
Connect

ใช้ SDK ที่สร้างขึ้นในแอป

firebase init dataconnect จะตั้งค่า SDK ที่ปลอดภัยต่อประเภทสำหรับแอปใน โปรเจ็กต์ของคุณโดยอัตโนมัติ หากจำเป็น คุณสามารถเพิ่ม SDK ด้วยตนเองโดยใช้ปุ่มเพิ่ม SDK ไปยัง แอปในส่วนขยาย VS Code หรือโดยการเรียกใช้ firebase init dataconnect:sdk

เว็บ

  1. เพิ่ม Firebase ไปยังแอปเว็บ
  2. ในไฟล์หลักของแอป React ให้ทำดังนี้

    • นำเข้า SDK ที่สร้างขึ้น
    // Update as needed with the path to your generated SDK.
    import { listMovies, ListMoviesData } from '@dataconnect/generated';
    
    • ติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง Data Connect โดยทำดังนี้
    import { connectDataConnectEmulator } from 'firebase/data-connect';
    
    const dataConnect = getDataConnect(connectorConfig);
    connectDataConnectEmulator(dataConnect, 'localhost', 9399);
    
    • วิธีการโทร 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

  1. เพิ่ม Firebase ไปยังแอป iOS
  2. หากต้องการใช้ SDK ที่สร้างขึ้น ให้กำหนดค่าเป็นทรัพยากร Dependency ใน Xcode

    ในแถบนำทางด้านบนของ Xcode ให้เลือก File > Add Package Dependencies > Add Local แล้วเลือกโฟลเดอร์ ที่มี Package.swift ที่สร้างขึ้น

  3. ในตัวแทนหลักของแอป ให้ทำดังนี้

    • นำเข้า Data Connect SDK และ SDK ที่สร้างขึ้น

      import FirebaseDataConnect
      // Generated queries.
      // Update as needed with the package name of your generated SDK.
      import <CONNECTOR-PACKAGE-NAME>
      
      let connector = DataConnect.moviesConnector
      
    • ติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง 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)
      
    • โทรหา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

  1. เพิ่ม Firebase ไปยังแอป Android
  2. หากต้องการใช้ SDK ที่สร้างขึ้น ให้กำหนดค่า Data Connect เป็นการขึ้นต่อกันใน Gradle

    อัปเดต plugins และ dependencies ใน 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. ในกิจกรรมหลักของแอป ให้ทำดังนี้

    • รับอินสแตนซ์ตัวเชื่อมต่อจาก SDK ที่สร้างขึ้นโดยทำดังนี้
    private val connector = com.myapplication.MoviesConnector.instance
    
    • ติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง 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)
      }
    
    • วิธีการโทร 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

  1. เพิ่ม Firebase ไปยังแอป Flutter
  2. ติดตั้ง FlutterFire CLI dart pub global activate flutterfire_cli
  3. เรียกใช้ flutterfire configure
  4. ในฟังก์ชันหลักของแอป ให้ทำดังนี้

    • นำเข้า SDK ที่สร้างขึ้น
    // Generated queries.
    // Update as needed with the path to your generated SDK
    
    import 'movies_connector/movies.dart';
    
    • ติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง 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());
    }
    
    • วิธีการโทร 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();
                }),
          )
        ])));
      }
    }
    

ติดตั้งใช้งานในเวอร์ชันที่ใช้งานจริง

วิธีนำ Schema, การค้นหา และการเปลี่ยนแปลงไปใช้ในเวอร์ชันที่ใช้งานจริง

  1. อัปเกรดโปรเจ็กต์ Firebase เพื่อใช้แพ็กเกจ Blaze

  2. คลิกปุ่มนำไปใช้งานจริงใน ส่วนขยาย Data Connect VS Code หรือเรียกใช้ในเทอร์มินัล

    firebase deploy --only dataconnect
    

    หลังจากติดตั้งใช้งานแล้ว ให้ไปที่คอนโซล Firebase เพื่อดูสคีมา และเรียกใช้การค้นหาและการเปลี่ยนแปลง

ดูข้อมูลเพิ่มเติมเกี่ยวกับ dataconnect.yaml ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Data Connect ทำงานร่วมกับ Cloud SQL

ขั้นตอนถัดไป

เมื่อทำตามคู่มือเริ่มต้นฉบับย่อเสร็จแล้ว ขั้นตอนต่อไปมีดังนี้