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

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

  • เพิ่ม Firebase Data Connect ลงในโปรเจ็กต์ Firebase
  • ตั้งค่าสภาพแวดล้อมการพัฒนา รวมถึงส่วนขยาย Visual Studio Code เพื่อ ทำงานกับอินสแตนซ์ในเครื่อง
  • จากนั้นเราจะแสดงวิธีทำสิ่งต่อไปนี้
    • ใช้เครื่องมือส่วนขยาย VS Code ด้วย Gemini Code Assist เพื่อทำสิ่งต่อไปนี้
      • สร้างสคีมาสำหรับแอป
      • สร้างการค้นหาและการเปลี่ยนแปลงระดับผู้ดูแลระบบเพื่อป้อนข้อมูลลงในฐานข้อมูลในเครื่อง
      • ช่วยคุณใช้การค้นหาและการเปลี่ยนแปลงสำหรับแอปในตัวเชื่อมต่อที่พร้อมใช้งาน
    • ทดสอบการค้นหาและการเปลี่ยนแปลงด้วยข้อมูลตัวอย่างกับโปรแกรมจำลองในเครื่อง
    • สร้าง SDK ที่มีการพิมพ์อย่างเข้มงวดและใช้ในแอป
    • ติดตั้งใช้งานสคีมาและตัวเชื่อมต่อสุดท้ายในระบบคลาวด์ (ไม่บังคับเมื่ออัปเกรดเป็นแพ็กเกจ Blaze)

เลือกขั้นตอนการพัฒนาในเครื่อง

Data Connect มีวิธีติดตั้งเครื่องมือพัฒนาซอฟต์แวร์และทำงานในเครื่อง 2 วิธี

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

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

  • โปรเจ็กต์ Firebase หากยังไม่ได้สร้าง ให้สร้างในคอนโซล Firebase

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

  1. สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง

  2. หากต้องการตั้งค่าData Connectสภาพแวดล้อมการพัฒนาและ IDE บนเบราว์เซอร์ ให้เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีใหม่ที่คุณสร้างขึ้น 

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

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

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

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

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

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

สร้างสคีมา

ในไดเรกทอรีโปรเจ็กต์ Firebase ใน/dataconnect/schema/schema.gql ให้เริ่มกำหนดสคีมา GraphQL เกี่ยวกับรีวิวภาพยนตร์ เป็นต้น

ใช้ Gemini Code Assist เพื่อสร้างสคีมา

วิธีสร้างสคีมาแอปรีวิวภาพยนตร์โดยใช้ Gemini Code Assist

  1. คลิกไอคอนส่วนขยาย Data Connect VS Code เพื่อเปิดแถบด้านข้าง
  2. คลิกสร้างสคีมาและการค้นหาด้วย AI Gemini Code Assist หน้าต่างแชทจะเปิดขึ้น
  3. ที่ด้านล่างของหน้าต่างแชท ให้ตรวจสอบว่าได้เปิดโหมดตัวแทนแล้ว
  4. คลิกช่องแชทที่ด้านล่างของหน้าต่างแชท แล้วเริ่มพิมพ์ คำอธิบายภาษาธรรมชาติเกี่ยวกับประเภทแอปที่คุณกำลังสร้าง
  5. กด Enter แล้ว Gemini จะแสดงคำสั่งเซิร์ฟเวอร์ MCP ที่จะดำเนินการ เพื่อเริ่มพัฒนาสคีมา
  6. คลิกยอมรับ หลังจากผ่านไปสักครู่ สคีมาที่แนะนำจะปรากฏขึ้น ตรวจสอบ สคีมา

  7. วิธีเพิ่มโค้ดใน schema.gql

    1. รอให้ Gemini Code Assist แจ้งให้คุณเลือกไฟล์ที่จะอัปเดต
    2. คลิกยอมรับเพื่อแก้ไขไฟล์ หรือคลิกดูการเปลี่ยนแปลงก่อนดำเนินการ

ภาพยนตร์

ใน Data Connect ฟิลด์ GraphQL จะแมปกับคอลัมน์ ภาพยนตร์มี id, title, imageUrl และ genre Data Connect รู้จักประเภทข้อมูลพื้นฐาน ได้แก่ String และ UUID

คัดลอกข้อมูลโค้ดต่อไปนี้หรือยกเลิกการแสดงความคิดเห็นในบรรทัดที่เกี่ยวข้องในไฟล์

# 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

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

# 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 คุณใช้ปุ่มเพิ่มข้อมูล และเรียกใช้ (ในเครื่อง) เพื่อเพิ่มข้อมูลลงในฐานข้อมูลในเครื่องได้

วิธีเพิ่มระเบียนลงในตาราง Movie และ MovieMetadata

  1. ใน schema.gql ให้คลิกปุ่มเพิ่มข้อมูลเหนือการประกาศประเภท Movie
    ปุ่มเพิ่มข้อมูล CodeLens สำหรับ Firebase Data Connect
  2. ในMovie_insert.gqlไฟล์ที่สร้างขึ้น ให้ฮาร์ดโค้ดข้อมูลสำหรับ ฟิลด์ทั้ง 3 รายการ
  3. คลิกปุ่ม Run (Local)
    ปุ่มเรียกใช้ CodeLens สำหรับ Firebase Data Connect
  4. ทำขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตาราง MovieMetadata โดยระบุ id ของภาพยนตร์ในช่อง movieId ตามที่ได้รับแจ้งใน การเปลี่ยนแปลง MovieMetadata_insert ที่สร้างขึ้น

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

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

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

กำหนดการค้นหา

มาสนุกกันต่อด้วยการกำหนดคำค้นหาที่คุณจะต้องใช้ในแอปพลิเคชัน ในฐานะนักพัฒนาซอฟต์แวร์ คุณคุ้นเคยกับการเขียนการค้นหา SQL มากกว่าการค้นหา GraphQL ดังนั้นการใช้ GraphQL อาจรู้สึกแตกต่างออกไปเล็กน้อยในช่วงแรก

อย่างไรก็ตาม GraphQL นั้นกระชับและปลอดภัยกว่า SQL ดิบมาก นอกจากนี้ ส่วนขยาย VS Code ยังช่วยให้ประสบการณ์การพัฒนาทั้งสำหรับการค้นหาและการเปลี่ยนแปลงเป็นเรื่องง่าย

วิธีสร้างการค้นหาโดยใช้ Gemini Code Assist

  1. คลิกไอคอนส่วนขยาย Data Connect VS Code เพื่อเปิดแถบด้านข้าง
  2. คลิกสร้างสคีมาและการค้นหาด้วย AI Gemini Code Assist หน้าต่างแชทจะเปิดขึ้น
  3. ที่ด้านล่างของหน้าต่างแชท ให้ตรวจสอบว่าได้เปิดโหมดตัวแทนแล้ว
  4. คลิกช่องแชทที่ด้านล่างของหน้าต่างแชท แล้วเริ่มพิมพ์ คำอธิบายภาษาพูดง่ายๆ เกี่ยวกับประเภทการดำเนินการที่คุณต้องการพัฒนา
  5. กด Enter แล้ว Gemini จะแสดงคำสั่งเซิร์ฟเวอร์ MCP ที่จะดำเนินการ เพื่อเริ่มพัฒนาการดำเนินการ
  6. คลิกยอมรับ หลังจากนั้นไม่นาน คำค้นหาที่แนะนำจะปรากฏขึ้น ตรวจสอบ คำค้นหา

  7. วิธีเพิ่มโค้ดใน queries.gql

    1. รอให้ Gemini Code Assist แจ้งให้คุณเลือกไฟล์ที่จะอัปเดต
    2. คลิกยอมรับเพื่อแก้ไขไฟล์ หรือคลิกดูการเปลี่ยนแปลงก่อนดำเนินการ

เรียกใช้การค้นหาโดยใช้ปุ่ม CodeLens ที่อยู่ใกล้เคียง

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

สร้าง SDK และใช้ในแอป

ในแผงด้านซ้ายของ IDE ให้คลิกไอคอน Firebase เพื่อเปิด UI ของส่วนขยาย Data Connect VS Code:

  1. คลิกปุ่มเพิ่ม SDK ลงในแอป

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

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

ใช้ SDK เพื่อเรียกการค้นหาจากแอป

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

เว็บ

  1. เพิ่ม Firebase ไปยังแอปเว็บ

  2. ในไฟล์หลักของแอป React ให้ทำดังนี้

    • นำเข้า SDK ที่สร้างขึ้น
    • วัดประสิทธิภาพแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง Data Connect
    • เรียกใช้เมธอด 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. เพิ่ม Firebase ไปยังแอป iOS

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

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

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

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

ทำให้สคีมาและการค้นหาใช้งานได้จริง

เมื่อตั้งค่าในเครื่องในแอปแล้ว คุณก็สามารถติดตั้งใช้งานสคีมาและตัวเชื่อมต่อในระบบคลาวด์ได้ คุณต้องมีโปรเจ็กต์ที่มีแพ็กเกจ Blaze เพื่อตั้งค่าอินสแตนซ์ Cloud SQL

  1. ไปที่ส่วนการเชื่อมต่อข้อมูลของ Firebase คอนโซล แล้วสร้าง อินสแตนซ์ Cloud SQL แบบทดลองใช้ฟรี

  2. ในเทอร์มินัลที่ผสานรวม IDE ให้เรียกใช้ firebase init dataconnect และ เลือกรหัสภูมิภาค/บริการที่คุณเพิ่งสร้างในคอนโซล

  3. เลือก "Y" เมื่อระบบแจ้งว่า "File dataconnect/dataconnect.yaml already exists, Overwrite?"

  4. ในหน้าต่าง IDE ใน UI ของส่วนขยาย VS Code ให้คลิกปุ่ม Deploy to production

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

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

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

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

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