เริ่มต้นใช้งาน 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. คลิกลองใช้ Gemini กับ @FirebaseDataConnect หน้าต่างGemini Code Assistแชท จะเปิดขึ้น
  3. คลิกอินเทอร์เฟซแชท แล้วเริ่มพิมพ์ @FirebaseDataConnect เพื่อกรองคำสั่งที่เกี่ยวข้อง
  4. เลือกคำสั่ง /generate_schema แล้วทำตามพรอมต์ให้เสร็จสมบูรณ์ โดยขอให้ Gemini สร้างสคีมาสำหรับแอปที่คุณกำลังพัฒนา

    เช่น

    @FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users
    
  5. หลังจากผ่านไปสักครู่ สคีมาที่แนะนำจะปรากฏขึ้น ตรวจสอบสคีมา

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

    1. คลิกปุ่มแทรกที่ด้านล่างของไฟล์
    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. คลิกลองใช้ Gemini กับ @FirebaseDataConnect หน้าต่างGemini Code Assistแชท จะเปิดขึ้น
  3. คลิกอินเทอร์เฟซแชท แล้วเริ่มพิมพ์ @FirebaseDataConnect เพื่อกรองคำสั่งที่เกี่ยวข้อง
  4. เลือกคำสั่ง /generate_operation แล้วที่พรอมต์ ให้ป้อนคำสั่ง โดยขอให้ Gemini สร้างการค้นหา

    เช่น

    @FirebaseDataConnect /generate_operation List all movies with titles start with "A".
    
  5. หลังจากนั้นไม่นาน คำค้นหาที่แนะนำจะปรากฏขึ้น ตรวจสอบคำค้นหา

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

    1. คลิกปุ่มแทรกที่ด้านล่างของไฟล์
    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 คอนโซล

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