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

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

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

สร้างโปรเจ็กต์ Firebase และฐานข้อมูล Cloud SQL

  1. สร้างโปรเจ็กต์ Firebase หากยังไม่ได้สร้าง
    1. ในFirebaseคอนโซล ให้คลิกเพิ่มโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ
  2. ไปที่ส่วน Data Connect ของคอนโซล Firebase แล้วทำตามเวิร์กโฟลว์การตั้งค่าผลิตภัณฑ์

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

  4. เลือกตำแหน่งสำหรับฐานข้อมูล Cloud SQL for PostgreSQL

  5. จดชื่อและรหัสโปรเจ็กต์ บริการ และฐานข้อมูลไว้เพื่อใช้ยืนยันในภายหลัง

  6. ทําตามขั้นตอนการตั้งค่าที่เหลือ แล้วคลิกเสร็จสิ้น

เลือกขั้นตอนการพัฒนา

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

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

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

  2. เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีใหม่ที่สร้างขึ้น

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

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

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

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

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

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

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

สร้างสคีมา

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

ภาพยนตร์

ใน 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
}

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 ในเอกสารประกอบ

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

คุณต้องติดตั้งใช้งานสคีมาก่อนดำเนินการต่อ

ใน UI ของส่วนขยาย ภายในแผง Firebase Data Connect ให้คลิกทำให้ใช้งานได้จริง

หลังจากติดตั้งสคีมาลงในฐานข้อมูลเวอร์ชันที่ใช้งานจริงแล้ว คุณควรจะดูสคีมาในคอนโซล Firebase ได้

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

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

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

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

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

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

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

กำหนดข้อความค้นหา

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

เริ่มแก้ไขไฟล์ /dataconnect/connector/queries.gql หากต้องการดูภาพยนตร์ทั้งหมด ให้ใช้ข้อความค้นหาเช่นนี้

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

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

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

สร้าง SDK

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

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

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

ติดตั้งใช้งานสคีมาและคําค้นหาในเวอร์ชันที่ใช้งานจริง

คุณได้ทําการพัฒนาซ้ำแล้วซ้ำเล่า ตอนนี้คุณจึงสามารถทำให้สคีมา ข้อมูล และการค้นหาใช้งานได้ในเซิร์ฟเวอร์ด้วย UI ของส่วนขยาย Firebase หรือ Firebase CLI เช่นเดียวกับที่ทำกับสคีมา

ในหน้าต่าง IDE ให้คลิกปุ่มทำให้ใช้งานได้จริงใน UI ของส่วนขยาย VS Code

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

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

ใช้ 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 ที่สร้างขึ้น ให้กําหนดค่า 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();
            }),
      )
    ])));
  }
}

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

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

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

  • ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนาสคีมา การค้นหา และการเปลี่ยนรูปแบบ

  • ดูข้อมูลเกี่ยวกับการสร้าง SDK ของไคลเอ็นต์และการเรียกใช้การค้นหาและการดัดแปลงจากโค้ดไคลเอ็นต์สําหรับเว็บ, Android, iOS และ Flutter