查看 2022 年 Google I/O 大会上介绍的 Firebase 新动态。了解详情

หน้านี้ได้รับการแปลโดย Cloud Translation API

เริ่มต้นใช้งาน Firebase Data Connect ในพื้นที่

หมายเหตุ: Firebase Data Connect อยู่ในเวอร์ชันตัวอย่างแบบสาธารณะ Data Connect จะเป็นไปตาม "ข้อกำหนดเกี่ยวกับข้อเสนอก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไป" ในส่วนข้อกำหนดเฉพาะบริการของข้อกำหนดในการให้บริการ Google Cloud Platform ฟีเจอร์ก่อน GA พร้อมให้ใช้งาน"ตามที่เป็นอยู่" และอาจมีการรองรับที่จำกัด ดูข้อมูลเพิ่มเติมได้ที่คำอธิบายระยะการเปิดตัว

หมายเหตุ: ทำตามคู่มือเริ่มต้นใช้งานฉบับย่อในเครื่องนี้หากต้องการลองใช้ Data Connect กับโปรเจ็กต์ในแพ็กเกจ Spark ในคู่มือนี้ คุณจะได้สร้างต้นแบบในเครื่องด้วยโปรแกรมจำลองและฐานข้อมูลในเครื่อง หากพร้อมที่จะเพิ่ม Data Connect ลงในโปรเจ็กต์แพ็กเกจ Blaze และตั้งค่าบริการและฐานข้อมูล Cloud SQL ให้ลองเริ่มต้นใช้งานเวอร์ชันที่ใช้งานจริง

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

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

เลือกขั้นตอนการพัฒนาในเครื่อง

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

ข้อกำหนดเบื้องต้น

หากต้องการใช้การเริ่มต้นใช้งานอย่างรวดเร็วนี้ คุณจะต้องมีสิ่งต่อไปนี้

โปรเจ็กต์ Firebase หากยังไม่ได้สร้าง ให้สร้างในคอนโซล Firebase

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

สร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ในเครื่อง
เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีใหม่ที่สร้างขึ้น
```
  curl -sL https://firebase.tools/dataconnect | bash
```
สคริปต์นี้จะพยายามตั้งค่าสภาพแวดล้อมการพัฒนาให้คุณและเปิด IDE บนเบราว์เซอร์ IDE นี้มีเครื่องมือต่างๆ รวมถึงส่วนขยาย VS Code ที่รวมไว้ล่วงหน้า เพื่อช่วยคุณจัดการสคีมา รวมถึงกำหนดการค้นหาและการดัดแปลงที่จะใช้ในแอปพลิเคชัน และสร้าง SDK แบบประเภทที่แน่นอน

หมายเหตุ: หากคุณติดตั้ง VS Code เวอร์ชันเดสก์ท็อปไว้แล้ว สคริปต์จะเปิด VS Code โดยอัตโนมัติ
หมายเหตุ: หากสคริปต์ไม่ทำงาน ให้ทำตามขั้นตอนการติดตั้งด้วยตนเอง

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

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

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

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

หมายเหตุ: ใน Terminal ที่ผสานรวม ให้ตรวจสอบว่าโปรแกรมจำลองที่คุณกำหนดค่าไว้เริ่มทำงาน เมื่อทํางานแล้ว คุณควรเห็น UI ของส่วนขยายอัปเดตพร้อมรายละเอียดโปรแกรมจําลอง

สร้างสคีมา

ในไดเรกทอรีโปรเจ็กต์ Firebase ให้เริ่มกำหนดสคีมา GraphQL เกี่ยวกับภาพยนตร์ในไฟล์ /dataconnect/schema/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 ช่อง
คลิกปุ่มเรียกใช้ (ในเครื่อง)
ทำตามขั้นตอนก่อนหน้าซ้ำเพื่อเพิ่มระเบียนลงในตาราง MovieMetadata โดยระบุ id ของภาพยนตร์ในช่อง movieId ตามข้อความแจ้งในการเปลี่ยน MovieMetadata_insert ที่สร้างขึ้น

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

กลับไปที่ schema.gql แล้วคลิกปุ่มอ่านข้อมูลเหนือประกาศประเภท Movie
ในไฟล์ 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 ที่อยู่ใกล้เคียง

ฟีเจอร์ที่น่าตื่นเต้นมากคือความสามารถในการจัดการความสัมพันธ์ของฐานข้อมูลเหมือนกราฟ เนื่องจากระเบียน MovieMetadata มีฟิลด์ movie ที่อ้างอิงถึงภาพยนตร์ คุณจึงฝังลงในฟิลด์นั้นและรับข้อมูลเกี่ยวกับภาพยนตร์กลับมาได้ ลองเพิ่มประเภท movieMetadata_on_movie ที่สร้างขึ้นลงในข้อความค้นหา ListMovies

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
    movieMetadata_on_movie {
        rating
    }
  }
}

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

สร้าง SDK และใช้ SDK นั้นในแอป

ในแผงด้านซ้ายของ IDE ให้คลิกไอคอน Firebase เพื่อเปิด UI ของส่วนขยาย Data Connect ใน VS Code

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

หมายเหตุ: หากยังไม่มีไดเรกทอรีแอป คุณสามารถสร้างและเลือกไดเรกทอรีใหม่สําหรับโค้ด 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 ที่สร้างขึ้น ให้กําหนดค่าเป็นทรัพยากรใน Xcode

ในแถบนำทางด้านบนของ Xcode ให้เลือกไฟล์ > เพิ่ม Package Dependency > เพิ่มในเครื่อง แล้วเลือกโฟลเดอร์ที่มี 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 ?? [], id: \.self.id) { 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 December 03, 2024.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.7.3"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.0"
  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 December 03, 2024.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta03")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.9.0")
  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.9.3")
  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 ช่วงทดลองใช้ฟรี

หมายเหตุ: การจัดสรรอินสแตนซ์ Cloud SQL สำหรับ PostgreSQL อาจใช้เวลาสูงสุด 15 นาที คุณจะไม่สามารถทำให้ใช้งานได้จนกว่าอินสแตนซ์จะพร้อมใช้งาน
หมายเหตุ: หากต้องการใช้คีย์การเข้ารหัสที่จัดการโดยลูกค้า (CMEK) โปรดตรวจสอบว่าคุณได้เลือกใช้อินสแตนซ์ Cloud SQL ที่มีอยู่และเลือกฐานข้อมูล Cloud SQL ที่มีอยู่ซึ่งมี CMEK
ในเทอร์มินัลที่ผสานรวมกับ IDE ให้เรียกใช้ firebase init dataconnect และเลือกรหัสภูมิภาค/บริการที่คุณเพิ่งสร้างในคอนโซล
เลือก "Y" เมื่อได้รับข้อความแจ้งว่า "ไฟล์ dataconnect/dataconnect.yaml มีอยู่แล้ว ต้องการเขียนทับไหม"
ในหน้าต่าง IDE ให้คลิกปุ่มทำให้ใช้งานได้จริงใน UI ของส่วนขยาย VS Code
เมื่อทำให้ใช้งานได้แล้ว ให้ไปที่คอนโซล Firebase เพื่อยืนยันว่าสคีมา การดำเนินการ และข้อมูลได้รับการอัปโหลดไปยังระบบคลาวด์แล้ว คุณควรดูสคีมาและดำเนินการต่างๆ ในคอนโซลได้ อินสแตนซ์ Cloud SQL สำหรับ PostgreSQL จะอัปเดตสคีมาและข้อมูลที่สร้างขึ้นซึ่งได้นำไปใช้งานแล้วในขั้นสุดท้าย

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

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

เพิ่มข้อมูลลงในฐานข้อมูล ตรวจสอบและแก้ไขสคีมา รวมถึงตรวจสอบบริการเชื่อมต่อข้อมูลในคอนโซล Firebase

ดูข้อมูลเพิ่มเติมในเอกสารประกอบ ตัวอย่างเช่น เมื่อคุณทําตามการเริ่มต้นใช้งานอย่างรวดเร็วเสร็จแล้ว

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