เริ่มต้นใช้งาน 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. ในแผงเวิร์กโฟลว์เครื่องมือสร้างสคีมาที่ปรากฏขึ้น ให้อธิบายแอปเพื่อให้ Gemini ช่วยสร้างสคีมา GraphQL กับคุณได้
  5. ตรวจสอบสคีมา GraphQL แล้วคลิกอัปเกรดและติดตั้งใช้งาน

  6. อัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ซึ่งจะช่วยให้คุณสร้างอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL ได้

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

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

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

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

เครื่องมือความช่วยเหลือจาก AI ของเราพร้อมให้ความช่วยเหลือคุณ

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

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

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

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

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

      เช่น

      List all products

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

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

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

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

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

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

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

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

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

    เช่น

    Add data for three sample products to my app.

  3. คลิกสร้าง ระบบจะแสดงผลการเปลี่ยนแปลง

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

  5. จากนั้นคลิกแทรกเพื่อแทรกการเปลี่ยนแปลงลงในเอดิเตอร์ข้อมูล

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

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

  1. ทำขั้นตอนก่อนหน้าซ้ำโดยใช้ Help me write 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. คลิกปุ่มเรียกใช้ firebase init แล้วทําตามขั้นตอน

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

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

ขั้นตอนที่ 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. คลิกปุ่ม Run (Production)
    ปุ่มเรียกใช้ Code Lens สำหรับ Firebase Data Connect
  4. ทำขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตารางอื่นๆ

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

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

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

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

การดำเนินการกับสคีมาและตัวเชื่อมต่อจะซิงค์ในเครื่อง

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

  1. ใน UI ของส่วนขยาย ให้คลิกปุ่มเพิ่ม SDK ลงในแอป

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

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

โฟลว์ในเครื่อง: ใช้ SDK เพื่อเรียกการค้นหาจากแอป

ก่อนหน้านี้ คุณได้ติดตั้งใช้งานสคีมาและการดำเนินการในคอนโซล Firebase หากต้องการเรียกใช้การดำเนินการจากแอป คุณสามารถใช้ 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 ที่สร้างขึ้น ให้กำหนดค่าเป็นทรัพยากร Dependency ใน Xcode

    ในแถบนำทางด้านบนของ Xcode ให้เลือก File > Add Package Dependencies > Add Local แล้วเลือกโฟลเดอร์ ที่มี 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 เป็นการขึ้นต่อกันใน 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 คอนโซล

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