ในการเริ่มต้นใช้งานอย่างรวดเร็วนี้ คุณจะได้เรียนรู้วิธีสร้าง Firebase Data Connect ในแอปพลิเคชันด้วยอินสแตนซ์ SQL เวอร์ชันที่ใช้งานจริง
ในคอนโซล Firebase คุณจะทำสิ่งต่อไปนี้ได้
- เพิ่ม Firebase Data Connect ลงในโปรเจ็กต์ Firebase
- สร้าง สคีมาสําหรับแอปด้วยการสร้างสคีมาที่ AI สนับสนุนในคอนโซล Firebase แล้วทําให้ใช้งานได้
- จัดสรรอินสแตนซ์ Cloud SQL สําหรับแอป
- เมื่อใช้ Gemini ใน Firebase ให้ป้อนข้อมูลข้อมูลตัวอย่างลงในฐานข้อมูล
- สร้างการค้นหาและการกลายพันธุ์ด้วยการสร้างการดำเนินการด้วยความช่วยเหลือของ AI ซึ่งคุณนำไปใช้งานและนำไปพัฒนาโค้ดไคลเอ็นต์ในเครื่องได้
จากนั้นคุณจะทําสิ่งต่อไปนี้ในสภาพแวดล้อมการพัฒนาซอฟต์แวร์ในเครื่อง
- ตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งรวมถึงส่วนขยาย Visual Studio Code เพื่อทํางานกับอินสแตนซ์เวอร์ชันที่ใช้งานจริง
- ซิงค์สภาพแวดล้อมในเครื่องกับชิ้นงานที่สร้างขึ้นในคอนโซล
- สร้าง SDK แบบประเภทที่แน่นอน และใช้ในแอป
ขั้นตอนในคอนโซล: ใช้ความช่วยเหลือจาก AI ในการออกแบบสคีมา จากนั้นนำไปใช้งานในฐานข้อมูล
- สร้างโปรเจ็กต์ Firebase หากยังไม่ได้สร้าง
- ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วทำตามวิธีการบนหน้าจอ
- ไปที่ส่วน Data Connect ของคอนโซล Firebase
- คลิกปุ่มเริ่มต้นใช้งาน Gemini
- ในแผงเวิร์กโฟลว์ของ Schema Generator ที่ปรากฏขึ้น ให้อธิบายแอปเพื่อให้ Gemini ช่วยสร้างสคีมา GraphQL กับคุณ
- ตรวจสอบสคีมา GraphQL แล้วคลิกอัปเกรดและทำให้ใช้งานได้
อัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ซึ่งจะช่วยให้คุณสร้างอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL ได้
เลือกสร้างอินสแตนซ์ Cloud SQL ใหม่ ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกตำแหน่งและการตั้งชื่อฐานข้อมูล Cloud SQL สำหรับ PostgreSQL
ระบบจะติดตั้งใช้งานสคีมาแอปของคุณพร้อมกับฐานข้อมูล PostgreSQL ที่สอดคล้องกัน
ขั้นตอนในคอนโซล: ใช้ความช่วยเหลือจาก AI เพื่อสร้างการดำเนินการสำหรับลูกค้า
เมื่อติดตั้งใช้งานสคีมาแล้ว คุณสามารถทําตามขั้นตอนแรกเพื่อทำให้ข้อมูลนี้พร้อมใช้งานจากแอปไคลเอ็นต์ได้โดยสร้างคอนเน็กเตอร์ของคําค้นหาและการดัดแปลงเพื่อติดตั้งใช้งานในแบ็กเอนด์ แล้วเรียกใช้จากไคลเอ็นต์ในภายหลัง
เครื่องมือความช่วยเหลือด้วยระบบ AI พร้อมช่วยเหลือคุณ
เมื่อได้รับข้อความแจ้ง ให้คลิกปุ่มสร้างการดำเนินการด้วย Gemini
หลังจากผ่านไป 2-3 นาที ในแผงเวิร์กโฟลว์สร้างการดำเนินการที่ปรากฏขึ้น ให้ตรวจสอบรายการการค้นหาและการดัดแปลงที่ Gemini ระบุตามสคีมาของคุณ
คลิกแถวการดำเนินการแต่ละแถวเพื่อตรวจสอบโค้ด GraphQL ที่กําหนดการดำเนินการนั้น หากจำเป็น ให้ใช้ตัวควบคุมถังขยะเพื่อลบการดำเนินการที่ไม่ต้องการ
หากต้องการเพิ่มการดำเนินการ ให้คลิกปุ่ม + เพิ่ม จากนั้นให้ทำดังนี้
อธิบายการดำเนินการเป็นภาษาพูดง่ายๆ
เช่น
List all products
ตรวจสอบ GraphQL ที่สร้างขึ้น
หากการดำเนินการยอมรับได้ ให้คลิกแทรกเพื่อเพิ่มการดำเนินการนั้นลงในรายการการดำเนินการ
นำการดำเนินการออกและเพิ่มการดำเนินการต่อไปจนกว่าชุดการดำเนินการจะยอมรับได้
หากต้องการทำให้รายการการดำเนินการนี้เป็นชุดคอนเน็กเตอร์ที่เรียกใช้ได้จากไคลเอ็นต์ ให้เลือกชื่อคอนเน็กเตอร์ แล้วคลิกทำให้ใช้งานได้
ขั้นตอนในคอนโซล: ใช้ Gemini ใน Firebase เพื่อสร้างการดัดแปลงและป้อนข้อมูลในฐานข้อมูล
เมื่อทำตามขั้นตอนก่อนหน้าเสร็จแล้ว คุณได้สร้างData Connect สคีมาที่ประกอบด้วยประเภทเอนทิตีที่เกี่ยวข้อง และนำไปใช้งานจริง ซึ่งหมายความว่าระบบได้สร้างและนำไปใช้งานฐานข้อมูล PostgreSQL ที่มีตารางที่เกี่ยวข้องด้วย
หากต้องการป้อนข้อมูลฐานข้อมูล คุณสามารถใช้ Gemini ใน Firebase เพื่อช่วยในการป้อนข้อมูลเป็นภาษาที่เป็นธรรมชาติเพื่อกำหนด Mutation ของ GraphQL เพื่ออัปเดตตารางรายการใดรายการหนึ่งและ Query เพื่อยืนยันการอัปเดต
เปิดแท็บข้อมูล
คลิกไอคอนช่วยฉันเขียน GraphQL pen_spark แล้วพิมพ์ข้อมูลในช่องที่ปรากฏขึ้น
เช่น
Add data for three sample products to my app.
คลิกสร้าง ระบบจะแสดงการกลายพันธุ์
ตรวจสอบเอาต์พุต หากจำเป็น ให้คลิกแก้ไขเพื่อปรับแต่งพรอมต์ แล้วคลิกสร้างใหม่
จากนั้นคลิกแทรกเพื่อแทรกการกลายพันธุ์ลงในเครื่องมือแก้ไขข้อมูล
คลิกเรียกใช้
เมื่อเรียกใช้การดัดแปลง ระบบจะเขียนข้อมูลลงในตารางที่เกี่ยวข้องในฐานข้อมูล PostgreSQL คุณสร้างการค้นหาในคอนโซลเพื่อดูข้อมูลที่จัดเก็บไว้ได้ ดังนี้
ทำตามขั้นตอนก่อนหน้าซ้ำโดยใช้ ช่วยฉันเขียน GraphQL pen_sparkเพื่อสร้างการค้นหา
พิมพ์ข้อมูลในช่องที่ปรากฏขึ้น
เช่น
Query data for all sample products in my app.
คลิกสร้าง แล้วคลิกเรียกใช้
ขั้นตอนในเครื่อง: เลือกเครื่องมือสำหรับการพัฒนา
เมื่อคุณมีข้อมูลในฐานข้อมูลที่ติดตั้งใช้งานแล้ว และติดตั้งใช้งานตัวเชื่อมต่อแล้ว คุณจะพัฒนาสคีมาและตัวเชื่อมต่อในสภาพแวดล้อมการพัฒนาในเครื่องต่อได้
ก่อนอื่น คุณต้องตั้งค่าสภาพแวดล้อมในเครื่อง Data Connect มีวิธีติดตั้งเครื่องมือสำหรับการพัฒนา 2 วิธี
ข้อกำหนดเบื้องต้น
หากต้องการใช้การเริ่มต้นใช้งานอย่างรวดเร็วนี้ คุณจะต้องมีสิ่งต่อไปนี้
- Visual Studio Code
- การติดตั้ง Node.js โดยจะใช้ nvm-windows สำหรับ Windows หรือ nvm สำหรับ macOS หรือ Linux
- โปรเจ็กต์ Firebase หากยังไม่ได้สร้าง ให้สร้างในคอนโซล Firebase
ขั้นตอนในเครื่อง: ตั้งค่าสภาพแวดล้อมการพัฒนา
- สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง
- เปิด VS Code ในไดเรกทอรีใหม่
- ติดตั้งส่วนขยาย Firebase Data Connect จาก Visual Studio Code Marketplace
ขั้นตอนในเครื่อง: ตั้งค่าไดเรกทอรีโปรเจ็กต์
หากต้องการตั้งค่าโปรเจ็กต์ในเครื่อง ให้เริ่มต้นไดเรกทอรีโปรเจ็กต์ ในหน้าต่าง IDE ให้คลิกไอคอน Firebase ในแผงด้านซ้ายมือเพื่อเปิด UI ของส่วนขยาย Data Connect ใน VS Code
- คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
- คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase แล้วเลือกโปรเจ็กต์ที่คุณสร้างขึ้นก่อนหน้านี้ในคอนโซล
คลิกปุ่ม Run firebase init แล้วทําตามขั้นตอนให้เสร็จสมบูรณ์
คลิกปุ่มเริ่มโปรแกรมจำลอง
ขั้นตอนในเครื่อง: ค้นหาสคีมาและตัวเชื่อมต่อในสภาพแวดล้อมในเครื่อง
ขั้นตอนที่ firebase init
ในส่วนก่อนหน้าจะซิงค์ชิ้นงานกับสภาพแวดล้อมการพัฒนาในเครื่อง
- โดยจะซิงค์สคีมาที่คุณติดตั้งใช้งาน
- ค้นหาสคีมา: สคีมาอยู่ในไดเรกทอรีโปรเจ็กต์ Firebase ในไฟล์
/dataconnect/schema/schema.gql
- ค้นหาสคีมา: สคีมาอยู่ในไดเรกทอรีโปรเจ็กต์ Firebase ในไฟล์
- โดยจะซิงค์การค้นหาและการกลายพันธุ์ในเครื่องมือเชื่อมต่อที่คุณติดตั้งใช้งาน
- ค้นหาตัวเชื่อมต่อ: การดำเนินการจะอยู่ในไดเรกทอรีโปรเจ็กต์ Firebase ในไดเรกทอรี
/dataconnect/connector/
- ค้นหาตัวเชื่อมต่อ: การดำเนินการจะอยู่ในไดเรกทอรีโปรเจ็กต์ Firebase ในไดเรกทอรี
ขั้นตอนในร้าน: ทําความเข้าใจสคีมา
ตัวอย่างสคีมา: ภาพยนตร์
ใน 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
}
ตัวอย่างสคีมาตาราง 1:1: MovieMetadata
สำหรับภาพยนตร์ คุณจะจําลองข้อมูลเมตาของภาพยนตร์ได้
ตัวอย่างเช่น ใน schema.gql
คุณอาจเพิ่มข้อมูลโค้ดต่อไปนี้หรือโค้ดการตรวจสอบที่ Gemini สร้างขึ้น
# 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
คุณสามารถสร้างการดัดแปลงเพื่อเพิ่มข้อมูลลงในฐานข้อมูลเวอร์ชันที่ใช้งานจริงได้เช่นเดียวกับในคอนโซล
วิธีเพิ่มข้อมูลลงในตารางเมื่อทํางานในเครื่อง
- ใน
schema.gql
ให้คลิกปุ่มเพิ่มข้อมูลเหนือประกาศสำหรับประเภทใดประเภทหนึ่ง (เช่นMovie
,Product
,Account
โดยขึ้นอยู่กับลักษณะของแอป)
- ระบบจะเพิ่มไฟล์ใหม่ชื่อ
<type>_insert.qgl
ลงในไดเรกทอรีการทำงาน เช่นMovie_insert.gql
หรือProduct_insert.gql
เขียนข้อมูลลงในช่องสำหรับประเภทนั้น - คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง)
- ทำขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตารางอื่นๆ
วิธีตรวจสอบอย่างรวดเร็วว่าเพิ่มข้อมูลแล้ว
- กลับไปที่
schema.gql
แล้วคลิกปุ่มอ่านข้อมูลเหนือประกาศประเภท - ในไฟล์
<type>_read.gql
ที่สร้างขึ้น เช่นProduct_read.gql
ให้คลิกปุ่มเรียกใช้ (เวอร์ชันที่ใช้งานจริง) เพื่อเรียกใช้การค้นหา
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกลายพันธุ์ของ Data Connect ในเอกสารประกอบ
ขั้นตอนในเครื่อง: สร้าง SDK
ระบบจะซิงค์สคีมาและการดำเนินการของคอนเน็กเตอร์ในเครื่อง ตอนนี้คุณใช้เครื่องมือในเครื่องเพื่อสร้าง SDK ของไคลเอ็นต์เพื่อเริ่มใช้การเรียกใช้การค้นหาและการดัดแปลงในแอป iOS, Android, เว็บ และ Flutter ได้แล้ว
- คลิกปุ่มเพิ่ม SDK ลงในแอป
ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกไดเรกทอรีที่มีโค้ดสําหรับแอปของคุณ ระบบจะสร้างและบันทึกโค้ด Data Connect SDK ไว้ที่นั่น
เลือกแพลตฟอร์มแอป แล้วโปรดทราบว่าระบบจะสร้างโค้ด SDK ในไดเรกทอรีที่คุณเลือกทันที
ขั้นตอนในเครื่อง: ใช้ SDK เพื่อเรียกคําค้นหาจากแอป
เมื่อสคีมาเวอร์ชันอัปเดต (หากมี) และคำค้นหาของคุณได้ติดตั้งใช้งานในระบบแล้ว คุณจะใช้ SDK ที่ Data Connect สร้างขึ้นเพื่อเรียกใช้คำค้นหา ListMovies
ได้
เว็บ
- เพิ่ม Firebase ไปยังแอปเว็บ
ในไฟล์หลักของแอป 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
- เพิ่ม Firebase ไปยังแอป iOS
หากต้องการใช้ SDK ที่สร้างขึ้น ให้กําหนดค่าเป็นทรัพยากรใน Xcode
ในแถบนำทางด้านบนของ Xcode ให้เลือกไฟล์ > เพิ่ม Package Dependency > เพิ่มในเครื่อง แล้วเลือกโฟลเดอร์ที่มี
Package.swift
ที่สร้างขึ้นในตัวรับมอบสิทธิ์หลักของแอป
- นําเข้า 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
- เพิ่ม Firebase ไปยังแอป Android
หากต้องการใช้ 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") }
ในกิจกรรมหลักของแอป
- นําเข้า 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
- เพิ่ม Firebase ไปยังแอป Flutter
- ติดตั้ง flutterfire CLI
dart pub global activate flutterfire_cli
- เรียกใช้
flutterfire configure
- ในฟังก์ชันหลักของแอป ให้ทำดังนี้
- นําเข้า 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();
}),
)
])));
}
}
ขั้นตอนถัดไป
ตรวจสอบโปรเจ็กต์ที่ติดตั้งใช้งานและดูเครื่องมือเพิ่มเติม
- เพิ่มข้อมูลลงในฐานข้อมูล ตรวจสอบและแก้ไขสคีมา รวมถึงตรวจสอบบริการData Connectในคอนโซล Firebase
ดูข้อมูลเพิ่มเติมในเอกสารประกอบ ตัวอย่างเช่น เมื่อคุณทําตามการเริ่มต้นใช้งานอย่างรวดเร็วเสร็จแล้ว
- ดูเครื่องมือและคำแนะนำเพิ่มเติมจาก AI เพื่อช่วยสร้างสคีมา การค้นหา และการกลายพันธุ์ คู่มือความช่วยเหลือของ AI จะกล่าวถึงแนวทางปฏิบัติแนะนำในการเขียนพรอมต์
- ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนาสคีมา การค้นหา และการกลายพันธุ์
- ดูข้อมูลเกี่ยวกับการสร้าง SDK ของไคลเอ็นต์และการเรียกใช้การค้นหาและการดัดแปลงจากโค้ดไคลเอ็นต์สําหรับเว็บ, Android, iOS และ Flutter