การเริ่มต้นอย่างรวดเร็วนี้จะช่วยให้คุณเริ่มต้นใช้งาน 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 วิธี
เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีโปรเจ็กต์
สคริปต์จะติดตั้ง Firebase CLI และส่วนขยาย Data Connect VS Code รวมถึงแนะนำ
firebase init dataconnectในการตั้งค่าโปรเจ็กต์ หากคุณไม่ได้ติดตั้ง VS Code บนเดสก์ท็อป สคริปต์จะเปิดในเบราว์เซอร์curl -sL https://firebase.tools/init/dataconnect | editor=true bashเปิดหน้าจอส่วนขยาย Data Connect VS Code โดยคลิกไอคอน Firebase ในแผงด้านซ้ายของ Visual Studio Code
คลิกเริ่มโปรแกรมจำลองเพื่อเรียกใช้โปรแกรมจำลองกับฐานข้อมูล 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