การเริ่มต้นอย่างรวดเร็วนี้จะช่วยให้คุณเริ่มต้นใช้งาน Firebase Data Connect เพื่อเชื่อมต่อเว็บและแอปบนอุปกรณ์เคลื่อนที่กับฐานข้อมูล PostgreSQL ได้ คุณจะได้รับสิ่งต่อไปนี้
- ตั้งค่าFirebase Data Connectไดเรกทอรีโปรเจ็กต์ในเครื่องด้วย VS Code และ Firebase CLI
- สร้างสคีมา การค้นหา และการเปลี่ยนแปลง Data Connect โดยอิงตามไอเดียแอปของคุณในภาษาง่ายๆ
- ใช้ SDK ที่มีการพิมพ์อย่างเข้มงวดในแอปเพื่อเรียกใช้Data Connect การค้นหาและการเปลี่ยนแปลง
- จัดสรรอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL, สคีมา Data Connect, การค้นหา และการเปลี่ยนแปลง (ต้องใช้แพ็กเกจ Blaze)
ตั้งค่าไดเรกทอรีโปรเจ็กต์ในเครื่อง
คุณติดตั้งเครื่องมือพัฒนาในเครื่องสำหรับ Data Connect ได้ 2 วิธี
ติดตั้งข้อกำหนดเบื้องต้นต่อไปนี้
Node.js โดยใช้ nvm-windows สำหรับ Windows หรือ nvm สำหรับ macOS หรือ Linux
สร้างไดเรกทอรีโปรเจ็กต์และเปิดใน Visual Studio Code
ติดตั้งส่วนขยาย Firebase Data Connect จาก VS Code Marketplace
คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase
คลิกปุ่มเรียกใช้ firebase init
คลิกปุ่มเริ่มโปรแกรมจำลองเพื่อเรียกใช้โปรแกรมจำลอง Data Connect ด้วยฐานข้อมูล PGlite ในเครื่อง
สคีมารีวิว
Firebase Data Connect ใช้ GraphQL เพื่อกำหนดโมเดลข้อมูล คำสั่ง
@table จะแมปประเภท GraphQL กับตาราง PostgreSQL ฟิลด์ในแผนที่ประเภทจะแมปกับคอลัมน์ PostgreSQL
คุณกําหนดความสัมพันธ์ระหว่างตารางได้โดยใช้ฟิลด์ที่อ้างอิงถึง@tableประเภทอื่นๆ รวมถึงความสัมพันธ์แบบกลุ่มต่อกลุ่มโดยใช้ตารางรวมที่มีคีย์หลักแบบรวม
ในการตั้งค่าเริ่มต้น คุณจะเห็นไฟล์สคีมา Data Connect ในไดเรกทอรี dataconnect/schema/ ต่อไปนี้คือตารางตัวอย่าง 2 ตารางจากสคีมาเทมเพลตภาพยนตร์
สคีมาของคุณอาจแตกต่างออกไปหากคุณใช้ Gemini เพื่อสร้างสคีมา
type Movie @table {
# Every table has an implicit primary key field that looks something like:
# id: UUID! @default(expr: "uuidV4()")
title: String!
imageUrl: String!
genre: String
}
type Review @table(key: ["movie", "user"]) {
user: User!
movie: Movie!
rating: Int
reviewText: String
reviewDate: Date! @default(expr: "request.time")
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับสคีมา Data Connect
พัฒนาการค้นหาและการเปลี่ยนแปลง
Firebase Data Connect ใช้ GraphQL สำหรับการค้นหาและการเปลี่ยนแปลง คุณกำหนด
สิ่งเหล่านี้ในไฟล์ .gql และเรียกใช้ตามชื่อจากแอปของคุณ ไวยากรณ์ GraphQL
มี SDK ที่มีการพิมพ์อย่างเข้มงวดและ API ที่ยืดหยุ่นเพื่อดึงข้อมูลที่แน่นอนซึ่งแอปของคุณ
ต้องการ
ข้อมูลเริ่มต้นในฐานข้อมูล
เมื่ออีมูเลเตอร์ทำงาน คุณจะเริ่มต้นด้วยข้อมูลเริ่มต้นได้ คุณสามารถใช้ไฟล์ dataconnect/seed_data.gql ที่
ระบุไว้หรือเขียนการเปลี่ยนแปลงของคุณเองก็ได้
ใช้ปุ่ม Code Lens Run (local) ใน VS Code เพื่อเรียกใช้การเปลี่ยนแปลงและ ป้อนข้อมูลลงในฐานข้อมูล PGlite ในเครื่อง

ตรวจสอบการค้นหาและการเปลี่ยนแปลง
ในการตั้งค่าเริ่มต้น คุณจะดูการค้นหาและการเปลี่ยนแปลงของ Data Connect ได้ในไดเรกทอรี dataconnect/example/
คุณค้นหาข้อมูลเชิงสัมพันธ์ได้อย่างแม่นยำด้วยการค้นหาที่ซ้อนกัน
query ListMovies @auth(level: PUBLIC, insecureReason: "Anyone can list all movies and their reviews.") {
movies {
title imageUrl genre
reviews_on_movie {
rating reviewDate
user { username }
}
}
}
Data Connect ช่วยให้คุณสร้างการค้นหาและการเปลี่ยนแปลงที่ปลอดภัยด้วย Firebase Auth
เว็บแอปและแอปบนอุปกรณ์เคลื่อนที่จะเข้าถึงได้เฉพาะ
Data Connect การค้นหาและการเปลี่ยนแปลงที่มี
@auth
คำสั่งเท่านั้น เพื่อรักษาความปลอดภัยของแอป การค้นหาและการเปลี่ยนแปลงจะเข้าถึง UID ของ Firebase Auth ได้อย่างปลอดภัย
โดยใช้การแสดงผล เช่น {field}_expr: "auth.uid"
mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!) @auth(level: USER) {
review_upsert(
data: {
userId_expr: "auth.uid"
movieId: $movieId
rating: $rating
reviewText: $reviewText
}
)
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับคำค้นหา Data Connect ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลง Data Connect ดูข้อมูลเพิ่มเติมเกี่ยวกับ Data Connect Auth
สร้างการค้นหาและการเปลี่ยนแปลง
คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญด้าน GraphQL เพื่อใช้ Data Connect อย่างมีประสิทธิภาพ คุณสามารถสร้างData Connectการค้นหาและการเปลี่ยนแปลงจากคำอธิบายภาษาธรรมชาติ ได้
ในไฟล์ .gql ให้พิมพ์ # เพื่อเริ่มความคิดเห็นและอธิบายการค้นหาหรือ
การเปลี่ยนแปลง จากนั้นใช้ปุ่ม Code Lens Generate/Refine Operation เพื่อ
สร้างการดำเนินการ GraphQL

ใช้ SDK ที่สร้างขึ้นในแอป
firebase init dataconnect จะตั้งค่า SDK ที่ปลอดภัยต่อประเภทสำหรับแอปใน
โปรเจ็กต์ของคุณโดยอัตโนมัติ หากจำเป็น คุณสามารถเพิ่ม SDK ด้วยตนเองโดยใช้ปุ่มเพิ่ม SDK ไปยัง
แอปในส่วนขยาย VS Code หรือโดยการเรียกใช้ firebase init
dataconnect:sdk
เว็บ
- เพิ่ม Firebase ไปยังแอปเว็บ
ในไฟล์หลักของแอป React ให้ทำดังนี้
- นำเข้า SDK ที่สร้างขึ้น
// Update as needed with the path to your generated SDK. import { listMovies, ListMoviesData } from '@dataconnect/generated';- ติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง Data Connect โดยทำดังนี้
import { connectDataConnectEmulator } from 'firebase/data-connect'; const dataConnect = getDataConnect(connectorConfig); connectDataConnectEmulator(dataConnect, 'localhost', 9399);- วิธีการโทร Data Connect
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
- เพิ่ม Firebase ไปยังแอป iOS
หากต้องการใช้ SDK ที่สร้างขึ้น ให้กำหนดค่าเป็นทรัพยากร Dependency ใน Xcode
ในแถบนำทางด้านบนของ Xcode ให้เลือก File > Add Package Dependencies > Add Local แล้วเลือกโฟลเดอร์ ที่มี
Package.swiftที่สร้างขึ้นในตัวแทนหลักของแอป ให้ทำดังนี้
นำเข้า Data Connect SDK และ SDK ที่สร้างขึ้น
import FirebaseDataConnect // Generated queries. // Update as needed with the package name of your generated SDK. import <CONNECTOR-PACKAGE-NAME> let connector = DataConnect.moviesConnectorติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง Data Connect โดยทำดังนี้
// 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)โทรหาData Connectวิธีต่อไปนี้
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
- เพิ่ม Firebase ไปยังแอป Android
หากต้องการใช้ SDK ที่สร้างขึ้น ให้กำหนดค่า Data Connect เป็นการขึ้นต่อกันใน Gradle
อัปเดต
pluginsและdependenciesในapp/build.gradle.ktsplugins { // 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") }ในกิจกรรมหลักของแอป ให้ทำดังนี้
- รับอินสแตนซ์ตัวเชื่อมต่อจาก SDK ที่สร้างขึ้นโดยทำดังนี้
private val connector = com.myapplication.MoviesConnector.instance- ติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง Data Connect โดยทำดังนี้
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) }- วิธีการโทร Data Connect
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
- เพิ่ม Firebase ไปยังแอป Flutter
- ติดตั้ง FlutterFire CLI
dart pub global activate flutterfire_cli - เรียกใช้
flutterfire configure ในฟังก์ชันหลักของแอป ให้ทำดังนี้
- นำเข้า SDK ที่สร้างขึ้น
// Generated queries. // Update as needed with the path to your generated SDK import 'movies_connector/movies.dart';- ติดตั้งเครื่องมือในแอปเพื่อเชื่อมต่อกับโปรแกรมจำลอง Data Connect โดยทำดังนี้
void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); MoviesConnector.instance.dataConnect .useDataConnectEmulator(Uri.base.host, 443, isSecure: true); runApp(const MyApp()); }- วิธีการโทร Data Connect
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(); }), ) ]))); } }
ติดตั้งใช้งานในเวอร์ชันที่ใช้งานจริง
วิธีนำ Schema, การค้นหา และการเปลี่ยนแปลงไปใช้ในเวอร์ชันที่ใช้งานจริง
อัปเกรดโปรเจ็กต์ Firebase เพื่อใช้แพ็กเกจ Blaze
คลิกปุ่มนำไปใช้งานจริงใน ส่วนขยาย Data Connect VS Code หรือเรียกใช้ในเทอร์มินัล
firebase deploy --only dataconnectหลังจากติดตั้งใช้งานแล้ว ให้ไปที่คอนโซล Firebase เพื่อดูสคีมา และเรียกใช้การค้นหาและการเปลี่ยนแปลง
ดูข้อมูลเพิ่มเติมเกี่ยวกับ dataconnect.yaml ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Data Connect ทำงานร่วมกับ Cloud SQL
ขั้นตอนถัดไป
เมื่อทำตามคู่มือเริ่มต้นฉบับย่อเสร็จแล้ว ขั้นตอนต่อไปมีดังนี้
- สำรวจที่เก็บแอป Quickstart และสร้างแอป Data Connect ที่มีฟีเจอร์ครบถ้วนโดยทำตามCodelab สำหรับเว็บ Codelab สำหรับ iOS หรือ Codelab สำหรับ Android
- เพิ่มข้อมูลลงในฐานข้อมูล ตรวจสอบสคีมา และตรวจสอบบริการ Data Connect ในคอนโซล Firebase
- ตั้งค่าเซิร์ฟเวอร์ MCP ของ Firebase ด้วยเครื่องมือพัฒนาที่ทำงานด้วยระบบ AI เช่น Gemini Code Assist
- ดูข้อมูลเพิ่มเติมเกี่ยวกับสคีมา การค้นหาและ การเปลี่ยนแปลง
- ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Data Connect จัดการสคีมา PostgreSQL
- ดูข้อมูลเพิ่มเติมเกี่ยวกับ Client SDK สำหรับ Web Android iOS และ Flutter รวมถึง Admin SDK สำหรับ Node.js