ใช้ 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 เพื่อให้แน่ใจว่ามี Dependency ของ Peer นี้

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

สำหรับ 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"

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

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 โดยใช้ข้อมูลที่คุณใช้ตั้งค่า Data Connect (มีทั้งหมดในแท็บ 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"]
                              }
                   }
            }
     }
  }