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

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

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

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

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

สร้าง SDK ของเว็บ

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

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

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

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

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

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

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

ในกรณีนี้ ให้ติดตั้ง firebase@latest เพื่อให้แน่ใจว่ามีการพึ่งพา Peer นี้

กําหนดค่าเส้นทางที่สัมพันธ์กับ node_modules

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

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

เช่น หากคุณมี 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"

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

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 โดยอัตโนมัติขณะที่คุณแก้ไขไฟล์ .gql ที่กําหนดสคีมา การค้นหา และการดัดแปลง ซึ่งอาจเป็นฟีเจอร์ที่มีประโยชน์ในเวิร์กโฟลว์การโหลด (ซ้ำ) อย่างรวดเร็ว

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

firebase dataconnect:sdk:generate --watch

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

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

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

ตั้งค่ารหัสไคลเอ็นต์

เริ่มต้นแอป Data Connect

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

initializeApp({...});

เริ่มต้นใช้งาน Data Connect web SDK

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

ออบเจ็กต์ ConnectorConfig

SDK ต้องใช้ออบเจ็กต์การกําหนดค่าของเครื่องมือเชื่อมต่อ

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

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

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

// 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';

สร้างต้นแบบและทดสอบเว็บไคลเอ็นต์ของคุณ

ไคลเอ็นต์ที่จะใช้โปรแกรมจำลองภายในเครื่อง

คุณสามารถใช้โปรแกรมจำลอง Data Connect ได้จากส่วนขยาย Data Connect ใน VS Code หรือจาก CLI

การวัดคุมแอปเพื่อเชื่อมต่อกับโปรแกรมจำลองจะเหมือนกันในทั้ง 2 สถานการณ์

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

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

การรับอินสแตนซ์

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

การใช้การค้นหาฝั่งไคลเอ็นต์

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

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`

การใช้การกลายพันธุ์ฝั่งไคลเอ็นต์

คุณสามารถเข้าถึงการกลายพันธุ์ได้เช่นเดียวกับการค้นหา

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

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

ประเภทข้อมูลใน SDK ของเว็บ

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

ข้อควรพิจารณาเกี่ยวกับเฟรมเวิร์ก

Angular

เมื่อสร้างโค้ด Angular CLIจะไม่รับการเปลี่ยนแปลงใหม่เนื่องจากโค้ดการเพิ่มประสิทธิภาพการพึ่งพา ในการแก้ไขปัญหานี้ คุณจะต้องแก้ไข angular.json

  "projects": {
      "myproject": {
         "architect": {
                 "serve:": {
                            "prebundle": {
                                         "exclude": ["@movie-app/movies"]
                              }
                   }
            }
     }
  }