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

ใช้ SDK ของเว็บที่สร้างขึ้น

Firebase Data Connect SDK ไคลเอ็นต์ช่วยให้คุณเรียกใช้การค้นหาและการเปลี่ยนแปลงฝั่งเซิร์ฟเวอร์ได้โดยตรงจากแอป Firebase คุณสร้าง SDK ไคลเอ็นต์ที่กำหนดเองแบบคู่ขนานไปกับการออกแบบสคีมา การค้นหา และการเปลี่ยนแปลงที่คุณนําไปใช้กับData Connectบริการ จากนั้นผสานรวมเมธอดจาก SDK นี้เข้ากับตรรกะไคลเอ็นต์

ดังที่เราได้กล่าวไว้ในที่อื่นๆ สิ่งสำคัญที่ต้องทราบคือData Connect โค้ดฝั่งไคลเอ็นต์ไม่ได้ส่งการค้นหาและการเปลี่ยนแปลง และไม่ได้ดำเนินการบนเซิร์ฟเวอร์ แต่เมื่อมีการติดตั้งใช้งาน ระบบจะจัดเก็บการดำเนินการ Data Connect ไว้ในเซิร์ฟเวอร์ เช่น Cloud Functions ซึ่งหมายความว่าคุณต้องติดตั้งใช้งานการเปลี่ยนแปลงฝั่งไคลเอ็นต์ที่เกี่ยวข้องเพื่อหลีกเลี่ยงไม่ให้ผู้ใช้เดิมใช้งานไม่ได้ (เช่น ในแอปเวอร์ชันเก่า)

ด้วยเหตุนี้ Data Connect จึงมีสภาพแวดล้อมสำหรับนักพัฒนาแอปและเครื่องมือที่ช่วยให้คุณสร้างต้นแบบของสคีมา คำค้นหา และการเปลี่ยนแปลงที่ใช้งานในเซิร์ฟเวอร์ได้ นอกจากนี้ยังสร้าง SDK ฝั่งไคลเอ็นต์โดยอัตโนมัติขณะที่คุณสร้างต้นแบบ

เมื่ออัปเดตบริการและแอปไคลเอ็นต์ซ้ำแล้ว การอัปเดตทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ก็พร้อมใช้งาน

เวิร์กโฟลว์การพัฒนาลูกค้าคืออะไร

หากทำตามเริ่มต้นใช้งาน คุณจะได้รับ ข้อมูลเกี่ยวกับขั้นตอนการพัฒนาโดยรวมสำหรับ Data Connect ในคำแนะนำนี้ คุณจะเห็นข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการสร้าง Web SDK จากสคีมาของคุณ และการทำงานกับการค้นหาและการเปลี่ยนแปลงของไคลเอ็นต์

โดยสรุปแล้ว หากต้องการใช้ Web SDK ที่สร้างขึ้นในแอปไคลเอ็นต์ คุณจะต้องทำตามขั้นตอนเบื้องต้นต่อไปนี้

เพิ่ม Firebase ไปยังแอปเว็บ

จากนั้นให้ทำดังนี้

พัฒนาสคีมาแอป
เริ่มต้นโค้ดฝั่งไคลเอ็นต์ด้วย JavaScript SDK หรือ ไลบรารี React หรือ Angular
สำหรับ React และ Angular ให้ติดตั้งแพ็กเกจ Tanstack Query
ตั้งค่าการสร้าง SDK โดยทำดังนี้
- ด้วยปุ่มเพิ่ม SDK ลงในแอปใน ส่วนขยาย Data Connect VS Code
- โดยการอัปเดต connector.yaml สำหรับ JavaScript SDK หรือ React หรือ Angular
นำเข้าไลบรารีและโค้ดที่สร้างขึ้นด้วย JavaScript SDK หรือ React หรือ Angular
ใช้การเรียกไปยังการค้นหาและการเปลี่ยนแปลงด้วย JavaScript SDK หรือ React หรือ Angular
ทดสอบโดยการตั้งค่าData Connectโปรแกรมจำลองด้วย JavaScript SDK หรือ React หรือ Angular

ใช้โค้ดฝั่งไคลเอ็นต์กับ Firebase JavaScript SDK

ส่วนนี้จะครอบคลุมวิธีติดตั้งใช้งานไคลเอ็นต์โดยใช้ Firebase JavaScript SDK

หากใช้ React หรือ Angular โปรดดูวิธีการตั้งค่าและลิงก์สำรองไปยัง เอกสารเพิ่มเติมเกี่ยวกับการสร้าง Data Connect SDK สำหรับเฟรมเวิร์ก

เริ่มต้นแอป

ก่อนอื่น ให้เริ่มต้นแอปโดยใช้ลําดับ Firebase มาตรฐาน

initializeApp({...});

สร้าง JavaScript SDK

เช่นเดียวกับโปรเจ็กต์ Firebase ส่วนใหญ่ การทำงานกับFirebase Data Connectโค้ดฝั่งไคลเอ็นต์ จะเกิดขึ้นในไดเรกทอรีโปรเจ็กต์ในเครื่อง ทั้งส่วนขยาย Data Connect VS Code และ Firebase CLI เป็นเครื่องมือในเครื่องที่สำคัญสำหรับการสร้างและจัดการโค้ดฝั่งไคลเอ็นต์

ตัวเลือกการสร้าง SDK จะเชื่อมโยงกับรายการต่างๆ ในdataconnect.yaml ไฟล์ที่สร้างขึ้นเมื่อคุณเริ่มต้นโปรเจ็กต์

เริ่มต้นการสร้าง SDK

ใน connector.yaml ให้เพิ่ม outputDir, package และ (สำหรับ SDK เว็บ) packageJsonDir

generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir ระบุตำแหน่งที่ควรส่งออก SDK ที่สร้างขึ้น

package ระบุชื่อแพ็กเกจ

packageJsonDir ระบุตำแหน่งที่จะติดตั้งแพ็กเกจ

ในกรณีนี้ ให้ติดตั้ง firebase@latest เพื่อให้มั่นใจว่ามีการปฏิบัติตามข้อกำหนดของ Peer Dependency นี้

เริ่มต้น JavaScript SDK

เริ่มต้นอินสแตนซ์ Data Connect โดยใช้ข้อมูลที่คุณใช้ตั้งค่า Data Connect (ทั้งหมดอยู่ในแท็บ Data Connect ของคอนโซล Firebase)

ออบเจ็กต์ ConnectorConfig

SDK ต้องมีออบเจ็กต์การกำหนดค่าตัวเชื่อมต่อ

ออบเจ็กต์นี้สร้างขึ้นโดยอัตโนมัติจาก serviceId และ location ใน dataconnect.yaml และ connectorId ใน connector.yaml

นำเข้าไลบรารี

คุณต้องนำเข้า 2 ชุดเพื่อเริ่มต้นใช้งานโค้ดฝั่งไคลเอ็นต์ ได้แก่ การนำเข้าทั่วไป Data Connectและการนำเข้า SDK ที่เฉพาะเจาะจงซึ่งสร้างขึ้น

โปรดสังเกตออบเจ็กต์ ConnectorConfig ที่รวมอยู่ในการนำเข้าทั่วไป

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@myorg/myconnector';

ใช้การค้นหาจาก JavaScript SDK

โค้ดที่สร้างขึ้นจะมี Query Ref ที่กำหนดไว้ล่วงหน้าอยู่แล้ว สิ่งที่คุณต้องทำ ก็คือการนำเข้าและเรียกใช้ฟังก์ชัน execute

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';

const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);

เรียกใช้เมธอดการค้นหา SDK

ตัวอย่างการใช้ฟังก์ชันแป้นพิมพ์ลัดการดำเนินการเหล่านี้มีดังนี้

import { listMovies } from '@movie-app/movies';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out
// to the server.
  listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}

ติดตามการเปลี่ยนแปลง

คุณสามารถติดตามการเปลี่ยนแปลง (ซึ่งจะอัปเดตทุกครั้งที่คุณเรียกใช้คําค้นหา)

const listRef = listAllMoviesRef();

// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
 updateUIWithMovies(data.movies);
});

await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`

ใช้การเปลี่ยนแปลงจาก JavaScript SDK

คุณเข้าถึงการเปลี่ยนแปลงได้ในลักษณะเดียวกับการค้นหา

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';

const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));

เชื่อมต่อกับโปรแกรมจำลอง Data Connect

คุณเลือกเชื่อมต่อกับโปรแกรมจำลองได้โดยเรียกใช้ connectDataConnectEmulator แล้วส่งอินสแตนซ์ Data Connect ดังนี้

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);`

// Make calls from your app

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

ใช้โค้ดฝั่งไคลเอ็นต์สำหรับ React และ Angular

Firebase Data Connect มี SDK ที่สร้างขึ้นพร้อม Hook สำหรับ React และ Angular โดยใช้ไลบรารีจากพาร์ทเนอร์ของเราที่ Invertase TanStack Query Firebase

ไลบรารีนี้มีชุดฮุกที่ช่วยให้การจัดการงานแบบไม่พร้อมกันกับ Firebase ในแอปพลิเคชันของคุณง่ายขึ้นมาก

เริ่มต้นแอป

ก่อนอื่น ให้เริ่มต้นแอปโดยใช้ลําดับ Firebase มาตรฐานเช่นเดียวกับเว็บแอป Firebase อื่นๆ

initializeApp({...});

ติดตั้งแพ็กเกจ Firebase ของ TanStack Query

ติดตั้งแพ็กเกจสำหรับ TanStack Query ในโปรเจ็กต์

โต้ตอบ

npm i --save @tanstack/react-query @tanstack-query-firebase/react
npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0

Angular

ng add @angular/fire

สร้าง SDK ของ React หรือ Angular

เช่นเดียวกับ SDK เว็บมาตรฐานตามที่อธิบายไว้ก่อนหน้านี้ เครื่องมือของ Firebase จะจัดการการสร้าง SDK โดยอัตโนมัติตามสคีมาและการดำเนินการของคุณ

หากต้องการสร้าง React SDK สำหรับโปรเจ็กต์ ให้เพิ่มคีย์ react ลงในไฟล์การกำหนดค่า connector.yaml

โต้ตอบ

generate:
  javascriptSdk:
    react: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

Angular

generate:
  javascriptSdk:
    angular: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

นำเข้าไลบรารี

คุณต้องนำเข้า 4 ชุดเพื่อเริ่มต้นใช้งานโค้ดไคลเอ็นต์ React หรือ Angular ได้แก่ การนำเข้าทั่วไป Data Connect การนำเข้า TanStack ทั่วไป และการนำเข้าที่เฉพาะเจาะจงสำหรับ SDK ที่สร้างขึ้นสำหรับ JS และ React

โปรดสังเกตประเภท ConnectorConfig ที่รวมอยู่ในการนําเข้าทั่วไป

โต้ตอบ

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@myorg/myconnector';

// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@myorg/connector/react";

Angular

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@myorg/myconnector';

// generated React hooks from SDK
import { injectListAllMovies, injectCreateMovie } from "@myorg/connector/angular";

ใช้การค้นหาและการเปลี่ยนแปลงในไคลเอ็นต์ React หรือ Angular

เมื่อตั้งค่าเสร็จแล้ว คุณจะรวมวิธีการจาก SDK ที่สร้างขึ้นได้

ในข้อมูลโค้ดต่อไปนี้ ให้สังเกตเมธอดที่นำหน้าด้วย useuseListAllMovies สำหรับ React และเมธอดที่นำหน้าด้วย injectinjectListAllMovies สำหรับ Angular ซึ่งทั้ง 2 เมธอดมาจาก SDK ที่สร้างขึ้น

โต้ตอบ

การดำเนินการดังกล่าวทั้งหมดใน SDK ที่สร้างขึ้น ทั้งการค้นหาและการเปลี่ยนแปลง จะเรียกใช้การเชื่อมโยง TanStackQuery

การค้นหาจะเรียกใช้และส่งคืนฮุก TanStack useDataConnectQuery
การเรียกใช้การเปลี่ยนแปลงและส่งคืนฮุก TanStack useDataConnectMutation

import { useListAllMovies } from '@movies-app/movies/react';

function MyComponent() {
  const { isLoading, data, error } = useListAllMovies();
  if(isLoading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div> An Error Occurred: {error} </div>
  }
}

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';

function App() {
  const queryClient = new QueryClient();
  return <QueryClientProvider client={queryClient}>
    <MyComponent />
  </QueryClientProvider>
}

Angular

import { injectAllMovies, connectorConfig } from '@movies-app/movies/angular';
import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";
const queryClient = new QueryClient();
...
providers: [
  ...
  provideTanStackQuery(queryClient),
  provideDataConnect(() => {
    const dc = getDataConnect(connectorConfig);
    return dc;
  })
]

ใช้การค้นหาที่โหลดซ้ำอัตโนมัติกับ React และ Angular

คุณกำหนดค่าคิวรีให้โหลดซ้ำโดยอัตโนมัติเมื่อข้อมูลมีการเปลี่ยนแปลงได้

โต้ตอบ

export class MovieListComponent {
  movies = useListAllMovies();
}

export class AddPostComponent {
  const mutation = useCreateMovie({ invalidate: [listAllMoviesRef()] });
  addMovie() {
    // The following will automatically cause Tanstack to reload its listAllMovies query
    mutation.mutate({ title: 'The Matrix });
  }
}

Angular

// class
export class MovieListComponent {
  movies = injectListAllMovies();
}

// template
@if (movies.isPending()) {
    Loading...
}
@if (movies.error()) {
    An error has occurred: {{  movies.error() }}
}
@if (movies.data(); as data) {
    @for (movie of data.movies; track movie.id) {
    <mat-card appearance="outlined">
        <mat-card-content>{{movie.description}}</mat-card-content>
    </mat-card>
    } @empty {
        <h2>No items!</h2>
    }
}

เชื่อมต่อกับโปรแกรมจำลอง Data Connect

คุณเลือกเชื่อมต่อกับโปรแกรมจำลองได้โดยการเรียกใช้ connectDataConnectEmulator แล้วส่งอินสแตนซ์ Data Connect ไปยัง Hook ที่สร้างขึ้น ดังนี้

โต้ตอบ

import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@movies-app/movies';
import { useListAllMovies } from '@movies-app/movies/react';

const dc = getDataConnect(connectorConfig);
connectDataConnectEmulator(dc, 'localhost', 9399);

class AppComponent() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

Angular

// app.config.ts
import { provideDataConnect } from '@angular/fire/data-connect';
import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
provideDataConnect(() => {
  const dc = getDataConnect(connectorConfig);
  connectDataConnectEmulator(dc, 'localhost', 9399);
  return dc;
}),

ประเภทข้อมูลใน SDK

เซิร์ฟเวอร์ Data Connect แสดงประเภทข้อมูล GraphQL ทั่วไป โดยจะแสดงใน SDK ดังนี้

ประเภทการเชื่อมต่อข้อมูล	TypeScript
การประทับเวลา	สตริง
วันที่	สตริง
UUID	สตริง
Int64	สตริง
เตียงคู่	ตัวเลข
ทศนิยม	ตัวเลข

ข้อควรพิจารณาเป็นพิเศษสำหรับการสร้าง SDK

กำหนดค่าเส้นทางที่เกี่ยวข้องกับ `node_modules`

สำหรับ JavaScript SDK เนื่องจาก Data Connect ใช้ npm link เพื่อ ติดตั้ง SDK ของคุณ SDK ที่สร้างขึ้นจึงต้องส่งออกไปยังไดเรกทอรีที่ ระดับเดียวกับเส้นทาง node_modules หรือในไดเรกทอรีย่อยที่เข้าถึง node_modules ได้

กล่าวคือ SDK ที่สร้างขึ้นต้องมีสิทธิ์เข้าถึงโมดูล firebase Node เพื่อให้ทำงานได้อย่างถูกต้อง

เช่น หากคุณมี node_modules ใน my-app/ ไดเรกทอรีเอาต์พุตควรเป็น my-app/js-email-generated เพื่อให้ js-email-generated นำเข้าจากโฟลเดอร์ node_modules ระดับบนสุดได้

my-app/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  js-email-generated/

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@myapp/my-connector"

หรือหากคุณมี Monorepo ที่โฮสต์โมดูลไว้ที่รูท คุณจะวางไดเรกทอรีเอาต์พุตไว้ในโฟลเดอร์ใดก็ได้ใน Monorepo

my-monorepo/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  my-app/
    js-email-generated/
  package.json

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated

อัปเดต SDK ขณะสร้างต้นแบบ

หากคุณกำลังสร้างต้นแบบแบบอินเทอร์แอกทีฟด้วยส่วนขยาย Data Connect VS Code และData Connectโปรแกรมจำลอง SDK ไฟล์ต้นฉบับของ SDK จะได้รับการสร้างและอัปเดตโดยอัตโนมัติขณะที่คุณแก้ไขไฟล์ .gql ที่กำหนดสคีมา การค้นหา และการเปลี่ยนแปลง ซึ่งเป็นฟีเจอร์ที่มีประโยชน์ในเวิร์กโฟลว์การโหลดซ้ำด่วน

ในสถานการณ์อื่นๆ หากคุณใช้Data Connectโปรแกรมจำลองจาก CLI ของ Firebase คุณจะตั้งค่าการตรวจสอบการอัปเดต .gql และยังให้ระบบอัปเดตแหล่งที่มาของ SDK โดยอัตโนมัติได้ด้วย

หรือจะใช้ CLI เพื่อสร้าง SDK ใหม่ทุกครั้งที่มีการเปลี่ยนแปลงไฟล์ .gql ก็ได้

firebase dataconnect:sdk:generate --watch

สร้าง SDK สำหรับการผสานรวมและสำหรับรุ่นที่ใช้งานจริง

ในบางกรณี เช่น การเตรียมแหล่งที่มาของโปรเจ็กต์เพื่อส่งสำหรับการทดสอบ CI คุณ สามารถเรียกใช้ Firebase CLI เพื่ออัปเดตแบบเป็นกลุ่มได้

ในกรณีเหล่านี้ ให้ใช้ firebase dataconnect:sdk:generate

ใช้ SDK ของเว็บที่สร้างขึ้น

เวิร์กโฟลว์การพัฒนาลูกค้าคืออะไร

ใช้โค้ดฝั่งไคลเอ็นต์กับ Firebase JavaScript SDK

เริ่มต้นแอป

สร้าง JavaScript SDK

เริ่มต้นการสร้าง SDK

เริ่มต้น JavaScript SDK

ออบเจ็กต์ ConnectorConfig

นำเข้าไลบรารี

ใช้การค้นหาจาก JavaScript SDK

เรียกใช้เมธอดการค้นหา SDK

ติดตามการเปลี่ยนแปลง

ใช้การเปลี่ยนแปลงจาก JavaScript SDK

เชื่อมต่อกับโปรแกรมจำลอง Data Connect

ใช้โค้ดฝั่งไคลเอ็นต์สำหรับ React และ Angular

เริ่มต้นแอป

ติดตั้งแพ็กเกจ Firebase ของ TanStack Query

โต้ตอบ

Angular

สร้าง SDK ของ React หรือ Angular

โต้ตอบ

Angular

นำเข้าไลบรารี

โต้ตอบ

Angular

ใช้การค้นหาและการเปลี่ยนแปลงในไคลเอ็นต์ React หรือ Angular

โต้ตอบ

Angular

ใช้การค้นหาที่โหลดซ้ำอัตโนมัติกับ React และ Angular

โต้ตอบ

Angular

เชื่อมต่อกับโปรแกรมจำลอง Data Connect

โต้ตอบ

Angular

ประเภทข้อมูลใน SDK

ข้อควรพิจารณาเป็นพิเศษสำหรับการสร้าง SDK

กำหนดค่าเส้นทางที่เกี่ยวข้องกับ node_modules

อัปเดต SDK ขณะสร้างต้นแบบ

สร้าง SDK สำหรับการผสานรวมและสำหรับรุ่นที่ใช้งานจริง

กำหนดค่าเส้นทางที่เกี่ยวข้องกับ `node_modules`