ในการเริ่มต้นอย่างรวดเร็วนี้ คุณจะได้เรียนรู้วิธีสร้าง Firebase Data Connect ในแอปพลิเคชันของคุณในเครื่องโดยไม่ต้องตั้งค่าอินสแตนซ์ SQL สำหรับการใช้งานจริง คุณจะได้รับสิ่งต่อไปนี้
- เพิ่ม Firebase Data Connect ลงในโปรเจ็กต์ Firebase
- ตั้งค่าสภาพแวดล้อมการพัฒนา รวมถึงส่วนขยาย Visual Studio Code เพื่อ ทำงานกับอินสแตนซ์ในเครื่อง
- จากนั้นเราจะแสดงวิธีทำสิ่งต่อไปนี้
- ใช้เครื่องมือส่วนขยาย VS Code ด้วย Gemini Code Assist เพื่อทำสิ่งต่อไปนี้
- สร้างสคีมาสำหรับแอป
- สร้างการค้นหาและการเปลี่ยนแปลงด้านการดูแลระบบเพื่อป้อนข้อมูลลงในฐานข้อมูลในเครื่อง
- ช่วยคุณใช้การค้นหาและการเปลี่ยนแปลงสำหรับแอปในตัวเชื่อมต่อที่พร้อมใช้งาน
- ทดสอบการค้นหาและการเปลี่ยนแปลงด้วยข้อมูลตัวอย่างกับโปรแกรมจำลองในเครื่อง
- สร้าง SDK ที่มีการพิมพ์อย่างเข้มงวดและใช้ในแอป
- ติดตั้งใช้งานสคีมาและตัวเชื่อมต่อสุดท้ายในระบบคลาวด์ (ไม่บังคับเมื่ออัปเกรดเป็นแพ็กเกจ Blaze)
- ใช้เครื่องมือส่วนขยาย VS Code ด้วย Gemini Code Assist เพื่อทำสิ่งต่อไปนี้
เลือกขั้นตอนการพัฒนาในเครื่อง
Data Connect มีวิธีติดตั้งเครื่องมือพัฒนาซอฟต์แวร์และทำงานในเครื่อง 2 วิธี
ข้อกำหนดเบื้องต้น
หากต้องการใช้การเริ่มต้นอย่างรวดเร็วนี้ คุณจะต้องมีสิ่งต่อไปนี้
- โปรเจ็กต์ Firebase หากยังไม่ได้สร้าง ให้สร้างในคอนโซล Firebase
ตั้งค่าสภาพแวดล้อมในการพัฒนา
สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง
หากต้องการตั้งค่าData Connectสภาพแวดล้อมการพัฒนาและ IDE บนเบราว์เซอร์ ให้เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีใหม่ที่คุณสร้างขึ้น
curl -sL https://firebase.tools/dataconnect | bash
สคริปต์นี้จะพยายามติดตั้ง IDE ที่ติดตั้งจะมีเครื่องมือต่างๆ รวมถึงส่วนขยาย VS Code ที่มาพร้อมกับแพ็กเกจเพื่อช่วยคุณจัดการสคีมา และกำหนดการค้นหาและการเปลี่ยนแปลงที่จะใช้ในแอปพลิเคชัน
ตั้งค่าไดเรกทอรีโปรเจ็กต์
หากต้องการตั้งค่าโปรเจ็กต์ในเครื่อง ให้เริ่มต้นไดเรกทอรีโปรเจ็กต์ ในหน้าต่าง IDE ให้คลิกไอคอน Firebase ในแผงด้านซ้ายเพื่อเปิด UI ของส่วนขยาย Data Connect VS Code
- คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
- คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase แล้วเลือกโปรเจ็กต์ที่คุณสร้างไว้ก่อนหน้านี้ในคอนโซล
- คลิกปุ่มเรียกใช้ firebase init
คลิกปุ่มเริ่มโปรแกรมจำลอง
สร้างสคีมา
ในไดเรกทอรีโปรเจ็กต์ Firebase ใน/dataconnect/schema/schema.gql
ให้เริ่มกำหนดสคีมา GraphQL เกี่ยวกับรีวิวภาพยนตร์ เป็นต้น
ใช้ Gemini Code Assist เพื่อสร้างสคีมา
วิธีสร้างสคีมาแอปรีวิวภาพยนตร์โดยใช้ Gemini Code Assist
- คลิกไอคอนส่วนขยาย Data Connect VS Code เพื่อเปิดแถบด้านข้าง
- คลิกลองใช้ Gemini กับ @FirebaseDataConnect หน้าต่างGemini Code Assistแชท จะเปิดขึ้น
- คลิกอินเทอร์เฟซแชท แล้วเริ่มพิมพ์
@FirebaseDataConnect
เพื่อกรองคำสั่งที่เกี่ยวข้อง เลือกคำสั่ง
/generate_schema
แล้วทำตามพรอมต์ให้เสร็จสมบูรณ์ โดยขอให้ Gemini สร้างสคีมาสำหรับแอปที่คุณกำลังพัฒนาเช่น
@FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users
หลังจากผ่านไปสักครู่ สคีมาที่แนะนำจะปรากฏขึ้น ตรวจสอบสคีมา
วิธีเพิ่มโค้ดใน
schema.gql
- คลิกปุ่มแทรกที่ด้านล่างของไฟล์
- หรือหากต้องการแทรกรหัสที่ตำแหน่งเคอร์เซอร์ ให้คลิกปุ่ม + ที่ด้านบนของการตอบกลับแชท
ภาพยนตร์
ใน 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
- ใน
schema.gql
ให้คลิกปุ่มเพิ่มข้อมูลเหนือการประกาศประเภทMovie
- ใน
Movie_insert.gql
ไฟล์ที่สร้างขึ้น ให้ฮาร์ดโค้ดข้อมูลสำหรับ ฟิลด์ทั้ง 3 รายการ - คลิกปุ่ม Run (Local)
- ทำขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตาราง
MovieMetadata
โดยระบุid
ของภาพยนตร์ในช่องmovieId
ตามที่ได้รับแจ้งใน การเปลี่ยนแปลงMovieMetadata_insert
ที่สร้างขึ้น
วิธีตรวจสอบอย่างรวดเร็วว่าได้เพิ่มข้อมูลแล้ว
- กลับไปที่
schema.gql
แล้วคลิกปุ่มอ่านข้อมูลเหนือการประกาศประเภทMovie
- ในไฟล์
Movie_read.gql
ที่ได้ ให้คลิกปุ่มเรียกใช้ (ในเครื่อง) เพื่อ เรียกใช้การค้นหา
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลง Data Connect ในเอกสารประกอบ
กำหนดการค้นหา
มาสนุกกันต่อด้วยการกำหนดคำค้นหาที่คุณจะต้องใช้ในแอปพลิเคชัน ในฐานะนักพัฒนาซอฟต์แวร์ คุณคุ้นเคยกับการเขียนการค้นหา SQL มากกว่าการค้นหา GraphQL ดังนั้นการใช้ GraphQL อาจรู้สึกแตกต่างออกไปเล็กน้อยในช่วงแรก
อย่างไรก็ตาม GraphQL นั้นกระชับและปลอดภัยกว่า SQL ดิบมาก นอกจากนี้ ส่วนขยาย VS Code ยังช่วยให้การพัฒนาทั้งการค้นหาและการเปลี่ยนแปลงเป็นเรื่องง่าย
วิธีสร้างการค้นหาโดยใช้ Gemini Code Assist
- คลิกไอคอนส่วนขยาย Data Connect VS Code เพื่อเปิดแถบด้านข้าง
- คลิกลองใช้ Gemini กับ @FirebaseDataConnect หน้าต่างGemini Code Assistแชท จะเปิดขึ้น
- คลิกอินเทอร์เฟซแชท แล้วเริ่มพิมพ์
@FirebaseDataConnect
เพื่อกรองคำสั่งที่เกี่ยวข้อง เลือกคำสั่ง
/generate_operation
แล้วที่พรอมต์ ให้ป้อนคำสั่ง โดยขอให้ Gemini สร้างการค้นหาเช่น
@FirebaseDataConnect /generate_operation List all movies with titles start with "A".
หลังจากนั้นไม่นาน คำค้นหาที่แนะนำจะปรากฏขึ้น ตรวจสอบคำค้นหา
วิธีเพิ่มโค้ดใน
queries.gql
- คลิกปุ่มแทรกที่ด้านล่างของไฟล์
- หรือหากต้องการแทรกรหัสที่ตำแหน่งเคอร์เซอร์ ให้คลิกปุ่ม + ที่ด้านบนของการตอบกลับแชท
เรียกใช้การค้นหาโดยใช้ปุ่ม CodeLens ที่อยู่ใกล้เคียง
ดูข้อมูลเพิ่มเติมเกี่ยวกับคำค้นหา Data Connect ในเอกสารประกอบ
สร้าง SDK และใช้ในแอป
ในแผงด้านซ้ายของ IDE ให้คลิกไอคอน Firebase เพื่อเปิด UI ของส่วนขยาย Data Connect VS Code:
- คลิกปุ่มเพิ่ม SDK ลงในแอป
ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกไดเรกทอรีที่มีโค้ด สำหรับแอปของคุณ Data Connect ระบบจะสร้างโค้ด SDK และ บันทึกไว้ที่นั่น
เลือกแพลตฟอร์มแอป แล้วโปรดทราบว่าระบบจะสร้างโค้ด SDK ทันที ในไดเรกทอรีที่คุณเลือก
ใช้ SDK เพื่อเรียกการค้นหาจากแอป
คุณสามารถใช้ SDK ที่Data Connectสร้างขึ้นเพื่อใช้การเรียกไปยังคำค้นหาListMovies
ได้ จากนั้นคุณจะเรียกใช้การค้นหานี้ในเครื่องได้โดยใช้Data Connectโปรแกรมจำลอง
เว็บ
- เพิ่ม Firebase ไปยังแอปเว็บ
ในไฟล์หลักของแอป 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
- เพิ่ม Firebase ไปยังแอป iOS
หากต้องการใช้ SDK ที่สร้างขึ้น ให้กำหนดค่าเป็นทรัพยากร Dependency ใน Xcode
ในแถบนำทางด้านบนของ Xcode ให้เลือก File > Add Package Dependencies > Add Local แล้วเลือกโฟลเดอร์ ที่มี
Package.swift
ที่สร้างขึ้นในตัวแทนหลักของแอป ให้ทำดังนี้
- นำเข้า 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
- เพิ่ม Firebase ไปยังแอป Android
หากต้องการใช้ 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") }
ในกิจกรรมหลักของแอป ให้ทำดังนี้
- นำเข้า 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
- เพิ่ม Firebase ไปยังแอป Flutter
- ติดตั้ง FlutterFire CLI
dart pub global activate flutterfire_cli
- เรียกใช้
flutterfire configure
- ในฟังก์ชันหลักของแอป ให้ทำดังนี้
- นำเข้า 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
ไปที่ส่วนการเชื่อมต่อข้อมูลของ Firebase คอนโซล แล้วสร้าง อินสแตนซ์ Cloud SQL แบบทดลองใช้ฟรี
ในเทอร์มินัลที่ผสานรวม IDE ให้เรียกใช้
firebase init dataconnect
และ เลือกรหัสภูมิภาค/บริการที่คุณเพิ่งสร้างในคอนโซลเลือก "Y" เมื่อระบบแจ้งว่า "File dataconnect/dataconnect.yaml already exists, Overwrite?"
ในหน้าต่าง IDE ใน UI ของส่วนขยาย VS Code ให้คลิกปุ่ม Deploy to production
เมื่อติดตั้งใช้งานแล้ว ให้ไปที่คอนโซล Firebase เพื่อยืนยันว่าได้อัปโหลดสคีมา การดำเนินการ และข้อมูลไปยังระบบคลาวด์แล้ว คุณควรจะดูสคีมาและเรียกใช้การดำเนินการในคอนโซลได้ด้วย ระบบจะอัปเดตอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL ด้วยสคีมาและข้อมูลที่สร้างขึ้นและนำไปใช้จริงขั้นสุดท้าย
ขั้นตอนถัดไป
ตรวจสอบโปรเจ็กต์ที่ติดตั้งใช้งานแล้วและดูเครื่องมือเพิ่มเติม
- เพิ่มข้อมูลลงในฐานข้อมูล ตรวจสอบและแก้ไขสคีมา รวมถึงตรวจสอบบริการ Data Connect ในFirebase คอนโซล
ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ ตัวอย่างเช่น เนื่องจากคุณได้ ทําตามการเริ่มต้นอย่างรวดเร็วแล้ว
- ดูเครื่องมือช่วยเหลือและคำแนะนำเพิ่มเติมเกี่ยวกับ AI เพื่อช่วยคุณสร้างสคีมา การค้นหา และการเปลี่ยนแปลง คู่มือความช่วยเหลือจาก AI จะครอบคลุมวิธี ตั้งค่าและใช้เซิร์ฟเวอร์ MCP กับ IDE และ แนวทางปฏิบัติแนะนำในการเขียนพรอมต์
- ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนาสคีมา การค้นหา และการเปลี่ยนแปลง
- ดูข้อมูลเกี่ยวกับการสร้าง SDK ไคลเอ็นต์และการเรียกใช้การค้นหาและการเปลี่ยนแปลงจาก โค้ดไคลเอ็นต์สำหรับ เว็บ, Android และ iOS รวมถึง Flutter