เริ่มต้นใช้งาน Firebase Data Connect

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

ในคอนโซล Firebase คุณจะทำสิ่งต่อไปนี้ได้

  • เพิ่ม Firebase Data Connect ลงในโปรเจ็กต์ Firebase
  • สร้าง สคีมาสําหรับแอปด้วยการสร้างสคีมาที่ AI สนับสนุนในคอนโซล Firebase แล้วทําให้ใช้งานได้
  • จัดสรรอินสแตนซ์ Cloud SQL สําหรับแอป
  • เมื่อใช้ Gemini ใน Firebase ให้ป้อนข้อมูลข้อมูลตัวอย่างลงในฐานข้อมูล
  • สร้างการค้นหาและการกลายพันธุ์ด้วยการสร้างการดำเนินการด้วยความช่วยเหลือของ AI ซึ่งคุณนำไปใช้งานและนำไปพัฒนาโค้ดไคลเอ็นต์ในเครื่องได้

จากนั้นคุณจะทําสิ่งต่อไปนี้ในสภาพแวดล้อมการพัฒนาซอฟต์แวร์ในเครื่อง

  • ตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งรวมถึงส่วนขยาย Visual Studio Code เพื่อทํางานกับอินสแตนซ์เวอร์ชันที่ใช้งานจริง
  • ซิงค์สภาพแวดล้อมในเครื่องกับชิ้นงานที่สร้างขึ้นในคอนโซล
  • สร้าง SDK แบบประเภทที่แน่นอน และใช้ในแอป

ขั้นตอนในคอนโซล: ใช้ความช่วยเหลือจาก AI ในการออกแบบสคีมา จากนั้นนำไปใช้งานในฐานข้อมูล

  1. สร้างโปรเจ็กต์ Firebase หากยังไม่ได้สร้าง
    1. ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ
  2. ไปที่ส่วน Data Connect ของคอนโซล Firebase
  3. คลิกปุ่มเริ่มต้นใช้งาน Gemini
  4. ในแผงเวิร์กโฟลว์ของ Schema Generator ที่ปรากฏขึ้น ให้อธิบายแอปเพื่อให้ Gemini ช่วยสร้างสคีมา GraphQL กับคุณ
  5. ตรวจสอบสคีมา GraphQL แล้วคลิกอัปเกรดและทำให้ใช้งานได้
  6. อัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ซึ่งจะช่วยให้คุณสร้างอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL ได้

  7. เลือกสร้างอินสแตนซ์ Cloud SQL ใหม่ ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกตำแหน่งและการตั้งชื่อฐานข้อมูล Cloud SQL สำหรับ PostgreSQL

    ระบบจะติดตั้งใช้งานสคีมาแอปของคุณพร้อมกับฐานข้อมูล PostgreSQL ที่สอดคล้องกัน

ขั้นตอนในคอนโซล: ใช้ความช่วยเหลือจาก AI เพื่อสร้างการดำเนินการสำหรับลูกค้า

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

เครื่องมือความช่วยเหลือด้วยระบบ AI พร้อมช่วยเหลือคุณ

  1. เมื่อได้รับข้อความแจ้ง ให้คลิกปุ่มสร้างการดำเนินการด้วย Gemini

  2. หลังจากผ่านไป 2-3 นาที ในแผงเวิร์กโฟลว์สร้างการดำเนินการที่ปรากฏขึ้น ให้ตรวจสอบรายการการค้นหาและการดัดแปลงที่ Gemini ระบุตามสคีมาของคุณ

  3. คลิกแถวการดำเนินการแต่ละแถวเพื่อตรวจสอบโค้ด GraphQL ที่กําหนดการดำเนินการนั้น หากจำเป็น ให้ใช้ตัวควบคุมถังขยะเพื่อลบการดำเนินการที่ไม่ต้องการ

  4. หากต้องการเพิ่มการดำเนินการ ให้คลิกปุ่ม + เพิ่ม จากนั้นให้ทำดังนี้

    1. อธิบายการดำเนินการเป็นภาษาพูดง่ายๆ

      เช่น

      List all products
      
    2. ตรวจสอบ GraphQL ที่สร้างขึ้น

    3. หากการดำเนินการยอมรับได้ ให้คลิกแทรกเพื่อเพิ่มการดำเนินการนั้นลงในรายการการดำเนินการ

  5. นำการดำเนินการออกและเพิ่มการดำเนินการต่อไปจนกว่าชุดการดำเนินการจะยอมรับได้

  6. หากต้องการทำให้รายการการดำเนินการนี้เป็นชุดคอนเน็กเตอร์ที่เรียกใช้ได้จากไคลเอ็นต์ ให้เลือกชื่อคอนเน็กเตอร์ แล้วคลิกทำให้ใช้งานได้

ขั้นตอนในคอนโซล: ใช้ Gemini ใน Firebase เพื่อสร้างการดัดแปลงและป้อนข้อมูลในฐานข้อมูล

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

หากต้องการป้อนข้อมูลฐานข้อมูล คุณสามารถใช้ Gemini ใน Firebase เพื่อช่วยในการป้อนข้อมูลเป็นภาษาที่เป็นธรรมชาติเพื่อกำหนด Mutation ของ GraphQL เพื่ออัปเดตตารางรายการใดรายการหนึ่งและ Query เพื่อยืนยันการอัปเดต

  1. เปิดแท็บข้อมูล

  2. คลิกไอคอนช่วยฉันเขียน GraphQL pen_spark แล้วพิมพ์ข้อมูลในช่องที่ปรากฏขึ้น

    เช่น

    Add data for three sample products to my app.
    
  3. คลิกสร้าง ระบบจะแสดงการกลายพันธุ์

  4. ตรวจสอบเอาต์พุต หากจำเป็น ให้คลิกแก้ไขเพื่อปรับแต่งพรอมต์ แล้วคลิกสร้างใหม่

  5. จากนั้นคลิกแทรกเพื่อแทรกการกลายพันธุ์ลงในเครื่องมือแก้ไขข้อมูล

  6. คลิกเรียกใช้

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

  1. ทำตามขั้นตอนก่อนหน้าซ้ำโดยใช้ ช่วยฉันเขียน GraphQL pen_sparkเพื่อสร้างการค้นหา

  2. พิมพ์ข้อมูลในช่องที่ปรากฏขึ้น

    เช่น

    Query data for all sample products in my app.
    
  3. คลิกสร้าง แล้วคลิกเรียกใช้

ขั้นตอนในเครื่อง: เลือกเครื่องมือสำหรับการพัฒนา

เมื่อคุณมีข้อมูลในฐานข้อมูลที่ติดตั้งใช้งานแล้ว และติดตั้งใช้งานตัวเชื่อมต่อแล้ว คุณจะพัฒนาสคีมาและตัวเชื่อมต่อในสภาพแวดล้อมการพัฒนาในเครื่องต่อได้

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

ข้อกำหนดเบื้องต้น

หากต้องการใช้การเริ่มต้นใช้งานอย่างรวดเร็วนี้ คุณจะต้องมีสิ่งต่อไปนี้

  • Visual Studio Code
  • การติดตั้ง Node.js โดยจะใช้ nvm-windows สำหรับ Windows หรือ nvm สำหรับ macOS หรือ Linux
  • โปรเจ็กต์ Firebase หากยังไม่ได้สร้าง ให้สร้างในคอนโซล Firebase

ขั้นตอนในเครื่อง: ตั้งค่าสภาพแวดล้อมการพัฒนา

  1. สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง
  2. เปิด VS Code ในไดเรกทอรีใหม่
  3. ติดตั้งส่วนขยาย Firebase Data Connect จาก Visual Studio Code Marketplace

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

หากต้องการตั้งค่าโปรเจ็กต์ในเครื่อง ให้เริ่มต้นไดเรกทอรีโปรเจ็กต์ ในหน้าต่าง IDE ให้คลิกไอคอน Firebase ในแผงด้านซ้ายมือเพื่อเปิด UI ของส่วนขยาย Data Connect ใน VS Code

  1. คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
  2. คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase แล้วเลือกโปรเจ็กต์ที่คุณสร้างขึ้นก่อนหน้านี้ในคอนโซล
  3. คลิกปุ่ม Run firebase init แล้วทําตามขั้นตอนให้เสร็จสมบูรณ์

  4. คลิกปุ่มเริ่มโปรแกรมจำลอง

ขั้นตอนในเครื่อง: ค้นหาสคีมาและตัวเชื่อมต่อในสภาพแวดล้อมในเครื่อง

ขั้นตอนที่ firebase init ในส่วนก่อนหน้าจะซิงค์ชิ้นงานกับสภาพแวดล้อมการพัฒนาในเครื่อง

  • โดยจะซิงค์สคีมาที่คุณติดตั้งใช้งาน
    • ค้นหาสคีมา: สคีมาอยู่ในไดเรกทอรีโปรเจ็กต์ Firebase ในไฟล์ /dataconnect/schema/schema.gql
  • โดยจะซิงค์การค้นหาและการกลายพันธุ์ในเครื่องมือเชื่อมต่อที่คุณติดตั้งใช้งาน
    • ค้นหาตัวเชื่อมต่อ: การดำเนินการจะอยู่ในไดเรกทอรีโปรเจ็กต์ Firebase ในไดเรกทอรี /dataconnect/connector/

ขั้นตอนในร้าน: ทําความเข้าใจสคีมา

ตัวอย่างสคีมา: ภาพยนตร์

ใน Data Connect ระบบจะแมปฟิลด์ GraphQL กับคอลัมน์ Movie ประเภทหนึ่งๆ อาจมี id, title, imageUrl และ genre Data Connect รู้จักประเภทข้อมูลพื้นฐาน String และ 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
}

ตัวอย่างสคีมาตาราง 1:1: MovieMetadata

สำหรับภาพยนตร์ คุณจะจําลองข้อมูลเมตาของภาพยนตร์ได้

ตัวอย่างเช่น ใน schema.gql คุณอาจเพิ่มข้อมูลโค้ดต่อไปนี้หรือโค้ดการตรวจสอบที่ Gemini สร้างขึ้น

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

โปรดทราบว่าช่อง movie แมปกับประเภท Movie Data Connect เข้าใจว่านี่เป็นความสัมพันธ์ระหว่าง Movie กับ MovieMetadata และจะจัดการความสัมพันธ์นี้ให้คุณ

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

ขั้นตอนในร้าน: เพิ่มข้อมูลลงในตาราง

ในแผงเครื่องมือแก้ไข IDE คุณจะเห็นปุ่ม CodeLens ปรากฏเหนือประเภท GraphQL ใน /dataconnect/schema/schema.gql คุณสามารถสร้างการดัดแปลงเพื่อเพิ่มข้อมูลลงในฐานข้อมูลเวอร์ชันที่ใช้งานจริงได้เช่นเดียวกับในคอนโซล

วิธีเพิ่มข้อมูลลงในตารางเมื่อทํางานในเครื่อง

  1. ใน schema.gql ให้คลิกปุ่มเพิ่มข้อมูลเหนือประกาศสำหรับประเภทใดประเภทหนึ่ง (เช่น Movie, Product, Account โดยขึ้นอยู่กับลักษณะของแอป)
    ปุ่มเพิ่มข้อมูลของ Code Lens สําหรับ Firebase Data Connect
  2. ระบบจะเพิ่มไฟล์ใหม่ชื่อ <type>_insert.qgl ลงในไดเรกทอรีการทำงาน เช่น Movie_insert.gql หรือ Product_insert.gql เขียนข้อมูลลงในช่องสำหรับประเภทนั้น
  3. คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง)
    ปุ่มเรียกใช้เลนส์โค้ดสําหรับ Firebase Data Connect
  4. ทำขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตารางอื่นๆ

วิธีตรวจสอบอย่างรวดเร็วว่าเพิ่มข้อมูลแล้ว

  1. กลับไปที่ schema.gql แล้วคลิกปุ่มอ่านข้อมูลเหนือประกาศประเภท
  2. ในไฟล์ <type>_read.gql ที่สร้างขึ้น เช่น Product_read.gql ให้คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง) เพื่อเรียกใช้การค้นหา

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกลายพันธุ์ของ Data Connect ในเอกสารประกอบ

ขั้นตอนในเครื่อง: สร้าง SDK

ระบบจะซิงค์สคีมาและการดำเนินการของคอนเน็กเตอร์ในเครื่อง ตอนนี้คุณใช้เครื่องมือในเครื่องเพื่อสร้าง SDK ของไคลเอ็นต์เพื่อเริ่มใช้การเรียกใช้การค้นหาและการดัดแปลงในแอป iOS, Android, เว็บ และ Flutter ได้แล้ว

  1. คลิกปุ่มเพิ่ม SDK ลงในแอป
  2. ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกไดเรกทอรีที่มีโค้ดสําหรับแอปของคุณ ระบบจะสร้างและบันทึกโค้ด Data Connect SDK ไว้ที่นั่น

  3. เลือกแพลตฟอร์มแอป แล้วโปรดทราบว่าระบบจะสร้างโค้ด SDK ในไดเรกทอรีที่คุณเลือกทันที

ขั้นตอนในเครื่อง: ใช้ SDK เพื่อเรียกคําค้นหาจากแอป

เมื่อสคีมาเวอร์ชันอัปเดต (หากมี) และคำค้นหาของคุณได้ติดตั้งใช้งานในระบบแล้ว คุณจะใช้ SDK ที่ Data Connect สร้างขึ้นเพื่อเรียกใช้คำค้นหา ListMovies ได้

เว็บ

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

    • นําเข้า SDK ที่สร้างขึ้น
    • เรียกใช้เมธอด 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. เพิ่ม Firebase ไปยังแอป iOS
  2. หากต้องการใช้ SDK ที่สร้างขึ้น ให้กําหนดค่าเป็นทรัพยากรใน Xcode

    ในแถบนำทางด้านบนของ Xcode ให้เลือกไฟล์ > เพิ่ม Package Dependency > เพิ่มในเครื่อง แล้วเลือกโฟลเดอร์ที่มี Package.swift ที่สร้างขึ้น

  3. ในตัวรับมอบสิทธิ์หลักของแอป

    • นําเข้า SDK ที่สร้างขึ้น
    • เรียกใช้เมธอด 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 สำหรับ Android

  1. เพิ่ม Firebase ไปยังแอป Android
  2. หากต้องการใช้ SDK ที่สร้างขึ้น ให้กําหนดค่า Data Connect เป็น Dependency ใน 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 ที่สร้างขึ้น
    • เรียกใช้เมธอด 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. เพิ่ม Firebase ไปยังแอป Flutter
  2. ติดตั้ง flutterfire CLI dart pub global activate flutterfire_cli
  3. เรียกใช้ flutterfire configure
  4. ในฟังก์ชันหลักของแอป ให้ทำดังนี้
    • นําเข้า SDK ที่สร้างขึ้น
    • เรียกใช้เมธอด 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();
            }),
      )
    ])));
  }
}

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

ตรวจสอบโปรเจ็กต์ที่ติดตั้งใช้งานและดูเครื่องมือเพิ่มเติม

  • เพิ่มข้อมูลลงในฐานข้อมูล ตรวจสอบและแก้ไขสคีมา รวมถึงตรวจสอบบริการData Connectในคอนโซล Firebase

ดูข้อมูลเพิ่มเติมในเอกสารประกอบ ตัวอย่างเช่น เมื่อคุณทําตามการเริ่มต้นใช้งานอย่างรวดเร็วเสร็จแล้ว