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

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

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

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

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

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

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

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

1. เพิ่ม Firebase ลงในแอปเว็บ

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

1. พัฒนาสคีมาแอป
2. เริ่มต้นโค้ดไคลเอ็นต์ด้วย JavaScript SDK
3. ตั้งค่าการสร้าง SDK โดยทำดังนี้
   • ด้วยปุ่มเพิ่ม SDK ลงในแอปในส่วนขยาย SQL Connect VS Code
   • โดยการอัปเดต connector.yaml สำหรับ JavaScript SDK
4. นำเข้าไลบรารีและโค้ดที่สร้างขึ้นด้วย JavaScript SDK
5. ใช้การเรียกใช้การค้นหาและการเปลี่ยนแปลงด้วย JavaScript SDK
6. ทดสอบโดยตั้งค่าโปรแกรมจำลอง SQL Connect ด้วย JavaScript SDK

ติดตั้งใช้งานโค้ดฝั่งไคลเอ็นต์ด้วย SDK ของ Firebase JavaScript

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

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

เริ่มต้นแอป

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

initializeApp({...});

ติดตั้ง JavaScript SDK ที่สร้างขึ้น

ใช้ Firebase CLI เพื่อตั้งค่า SDK ที่สร้างโดย SQL Connect ในแอป คำสั่ง init ควรตรวจหาแอปทั้งหมดในโฟลเดอร์ปัจจุบันและติดตั้ง SDK ที่สร้างขึ้นโดยอัตโนมัติ

firebase init dataconnect:sdk

เชื่อมต่อแอปกับบริการ SQL Connect

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);
// [Optionally] Configure the SDK to use Data Connect local emulator.
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

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

หากคุณติดตั้งส่วนขยาย SQL Connect VS Code ไว้ ส่วนขยายนี้จะอัปเดต SDK ที่สร้างขึ้นให้เป็นเวอร์ชันล่าสุดอยู่เสมอ

หากไม่ได้ใช้ส่วนขยาย VS Code ของ SQL Connect คุณสามารถใช้ Firebase CLI เพื่ออัปเดต SDK ที่สร้างขึ้นให้เป็นเวอร์ชันล่าสุดได้

firebase dataconnect:sdk:generate --watch

สร้าง SDK ในไปป์ไลน์การสร้าง

คุณใช้ Firebase CLI เพื่อสร้าง SDK ของ SQL Connect ในกระบวนการบิลด์ CI/CD ได้

firebase dataconnect:sdk:generate

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

คุณต้องนำเข้า 2 ชุดเพื่อเริ่มต้นโค้ดไคลเอ็นต์ ได้แก่ การนำเข้าทั่วไปSQL 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 '@dataconnect/generated';

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

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

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@dataconnect/generated';

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

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

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

import { listMovies } from '@dataconnect/generated';
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);
}

สมัครรับข้อมูลการเปลี่ยนแปลง

โปรดดูหัวข้อรับข้อมูลอัปเดตแบบเรียลไทม์จาก SQL Connect

จัดการการเปลี่ยนแปลงในช่องการแจงนับ

สคีมาของแอปสามารถมีการแจงนับ ซึ่งเข้าถึงได้โดยการค้นหา GraphQL

เมื่อการออกแบบของแอปเปลี่ยนไป คุณอาจเพิ่มค่าที่รองรับ enum ใหม่ ตัวอย่างเช่น สมมติว่าในวงจรของแอปพลิเคชันในภายหลัง คุณตัดสินใจเพิ่มค่า FULLSCREEN ลงใน enum AspectRatio

ในเวิร์กโฟลว์ SQL Connect คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเครื่องเพื่ออัปเดตการค้นหาและ SDK

อย่างไรก็ตาม ก่อนที่คุณจะเผยแพร่ไคลเอ็นต์เวอร์ชันอัปเดต ไคลเอ็นต์เวอร์ชันเก่าที่ติดตั้งใช้งานอาจใช้งานไม่ได้

ตัวอย่างการใช้งานที่ยืดหยุ่น

เพิ่มสาขา default ลงในคำสั่ง switch เหนือค่า enum เสมอ หรือเพิ่มสาขา else ลงในบล็อก if/else if ที่เปรียบเทียบกับค่า enum ภาษา JavaScript/TypeScript ไม่ได้บังคับใช้สิ่งนี้ แต่เป็นวิธีทำให้โค้ดไคลเอ็นต์มีประสิทธิภาพในกรณีที่มีการเพิ่มค่า enum ใหม่

const queryResult = await getOldestMovie();

if (queryResult.data) {
  // we can use a switch statement's "default" case to check for unexpected values
  const oldestMovieAspectRatio = queryResult.data.originalAspectRatio;
  switch (oldestMovieAspectRatio) {
      case AspectRatio.ACADEMY:
      case AspectRatio.WIDESCREEN:
      case AspectRatio.ANAMORPHIC:
        console.log('This movie was filmed in Academy, widescreen or anamorphic aspect ratio!');
        break;
      default:
        // the default case will catch FULLSCREEN, UNAVAILABLE or _UNKNOWN
        // it will also catch unexpected values the SDK isn't aware of, such as CINEMASCOPE
        console.log('This movie was was NOT filmed in Academy, widescreen or anamorphic.');
        break;
  }

  // alternatively, we can check to see if the returned enum value is a known value
  if (!Object.values(AspectRatio).includes(oldestMovieAspectRatio)) {
    console.log(`Unrecognized aspect ratio: ${oldestAspectRatio}`);
  }
} else {
  console.log("no movies found!");
}

ใช้การกลายพันธุ์จาก JavaScript SDK

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

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@dataconnect/generated';

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

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

หรือจะเชื่อมต่อกับโปรแกรมจำลองโดยเรียกใช้ connectDataConnectEmulator แล้วส่งผ่านอินสแตนซ์ SQL Connect ก็ได้ ดังนี้

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

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

// Make calls from your app

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

เปิดใช้การแคชฝั่งไคลเอ็นต์

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

หากต้องการเปิดใช้การแคชฝั่งไคลเอ็นต์ ให้เพิ่มการกำหนดค่าการแคชไคลเอ็นต์ลงในการกำหนดค่าเครื่องมือเชื่อมต่อ ดังนี้

generate:
  javascriptSdk:
    outputDir: ../web/
    package: "@dataconnect/generated"
    clientCache:
      maxAge: 5s
      storage: memory

การกำหนดค่านี้มีพารามิเตอร์ 2 รายการ ซึ่งไม่บังคับทั้งคู่ ได้แก่

• maxAge: อายุสูงสุดที่การตอบกลับที่แคชไว้สามารถมีได้ก่อนที่ SDK ของไคลเอ็นต์จะดึงค่าใหม่ ตัวอย่างเช่น "0", "30s", "1h30m"

  ค่าเริ่มต้นสำหรับ maxAge คือ 0 ซึ่งหมายความว่าระบบจะแคชการตอบกลับ แต่ SDK ของไคลเอ็นต์จะดึงค่าใหม่เสมอ ระบบจะใช้ค่าที่แคชไว้เมื่อมีการระบุ CACHE_ONLY เป็น executeQuery() และผลลัพธ์เริ่มต้นที่แสดงผลจาก subscribe() เท่านั้น

• storage: คุณสามารถกำหนดค่า SDK ของไคลเอ็นต์ให้แคชการตอบกลับในพื้นที่เก็บข้อมูล persistent หรือใน memory ได้ ผลลัพธ์ที่แคชไว้ในพื้นที่เก็บข้อมูล persistent จะยังคงอยู่แม้จะรีสตาร์ทแอป ใน SDK บนเว็บ ระบบรองรับเฉพาะพื้นที่เก็บข้อมูล memory เท่านั้น

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

• ลักษณะการทำงานเริ่มต้นของ executeQuery() เป็นไปตามที่อธิบายไว้ข้างต้น กล่าวคือ หากมีการแคชผลลัพธ์สำหรับการค้นหาและค่าที่แคชไว้ไม่เก่ากว่า maxAge ระบบจะใช้ค่าที่แคชไว้ ลักษณะการทำงานเริ่มต้นนี้เรียกว่านโยบาย PREFER_CACHE

  นอกจากนี้ คุณยังระบุการเรียกใช้ executeQuery() แต่ละครั้งให้แสดงเฉพาะค่าที่แคชไว้ (CACHE_ONLY) หรือดึงข้อมูลค่าใหม่จากเซิร์ฟเวอร์โดยไม่มีเงื่อนไข (SERVER_ONLY) ได้ด้วย

  await executeQuery(queryRef, QueryFetchPolicy.CACHE_ONLY);
  

  await executeQuery(queryRef, QueryFetchPolicy.SERVER_ONLY);
  

• เมื่อคุณเรียกใช้ subscribe() ระบบจะแสดงเนื้อหาที่แคชไว้ทันทีเสมอหากมี โดยไม่คำนึงถึงการตั้งค่า maxAge การเรียก executeQuery() ครั้งต่อๆ ไปจะแจ้งเตือน Listener ตาม maxAge ที่กำหนดค่าไว้

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

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

สร้าง React และ Angular SDK ด้วย TanStack

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

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

TanStack มาพร้อมกับการติดตั้งใช้งานการแคชฝั่งไคลเอ็นต์และการสมัครใช้บริการแบบเรียลไทม์ของตัวเอง ซึ่งสามารถทำงานร่วมกับการรองรับแบบเรียลไทม์ในตัวของ SQL Connect ได้ แต่ก็ทำได้ยาก เราขอแนะนำให้ใช้การเชื่อมโยงที่อิงตาม TanStack หรือการรองรับแบบเรียลไทม์ในตัวของ SQL Connect แต่ไม่ควรใช้ทั้ง 2 อย่าง

โปรดทราบว่าการติดตั้งใช้งานแบบเรียลไทม์ของ SQL Connect มีข้อดีบางประการเหนือการเชื่อมโยง TanStack ดังนี้

• การแคชแบบปรับมาตรฐาน: SQL Connect ใช้การแคชแบบปรับมาตรฐาน ซึ่งช่วยปรับปรุงความสอดคล้องของข้อมูล รวมถึงประสิทธิภาพของหน่วยความจำและเครือข่ายเมื่อเทียบกับการแคชระดับการค้นหา เมื่อใช้การแคชแบบมาตรฐาน หากเอนทิตีอัปเดตในส่วนหนึ่งของแอป เอนทิตีนั้นจะอัปเดตในส่วนอื่นๆ ที่ใช้เอนทิตีนั้นด้วย
• การทำให้เป็นโมฆะจากระยะไกล: SQL Connect สามารถทำให้เอนทิตีที่แคชไว้ในอุปกรณ์ที่สมัครใช้บริการทั้งหมดเป็นโมฆะจากระยะไกลได้

เริ่มต้นแอป

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

initializeApp({...});

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

ติดตั้งแพ็กเกจสำหรับ 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

ng add @angular/fire

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

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

หากคุณเพิ่งเพิ่ม React หรือ Angular ลงในโปรเจ็กต์ ให้เรียกใช้ firebase init dataconnect:sdk อีกครั้งเพื่อกำหนดค่า SDK ที่สร้างขึ้นใหม่ให้รวมการเชื่อมโยงเฟรมเวิร์กเพิ่มเติม

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

คุณต้องนำเข้า 4 ชุดเพื่อเริ่มต้นโค้ดไคลเอ็นต์ React หรือ Angular ได้แก่ การนำเข้า SQL 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 '@dataconnect/generated';

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

// 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 '@dataconnect/generated';

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

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

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

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

import { useListAllMovies } from '@dataconnect/generated/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>
}

import { injectAllMovies, connectorConfig } from '@dataconnect/generated/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 });
  }
}

// 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>
    }
}

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

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

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

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

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

// 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 ขณะสร้างต้นแบบ

หากคุณติดตั้งส่วนขยาย SQL Connect VS Code ไว้ ส่วนขยายนี้จะอัปเดต SDK ที่สร้างขึ้นให้เป็นเวอร์ชันล่าสุดอยู่เสมอ

หากไม่ได้ใช้ส่วนขยาย VS Code ของ SQL Connect คุณสามารถใช้ Firebase CLI เพื่ออัปเดต SDK ที่สร้างขึ้นให้เป็นเวอร์ชันล่าสุดได้

firebase dataconnect:sdk:generate --watch

สร้าง SDK ในไปป์ไลน์การสร้าง

คุณใช้ Firebase CLI เพื่อสร้าง SDK ของ SQL Connect ในกระบวนการบิลด์ CI/CD ได้

firebase dataconnect:sdk:generate