از وب SDK های تولید شده استفاده کنید

SDK های مشتری Firebase Data Connect به شما امکان می دهند پرس و جوها و جهش های سمت سرور خود را مستقیماً از یک برنامه Firebase فراخوانی کنید. همزمان با طراحی طرحواره ها، پرس و جوها و جهش هایی که در سرویس Data Connect خود مستقر می کنید، یک SDK مشتری سفارشی ایجاد می کنید. سپس، شما متدها را از این SDK در منطق کلاینت خود ادغام می کنید.

همانطور که در جاهای دیگر ذکر کردیم، توجه به این نکته مهم است که کوئری‌ها و جهش‌های Data Connect توسط کد مشتری ارسال نمی‌شوند و روی سرور اجرا نمی‌شوند. در عوض، هنگام استقرار، عملیات Data Connect مانند توابع ابری در سرور ذخیره می شود. این بدان معناست که شما باید تغییرات سمت کلاینت مربوطه را برای جلوگیری از شکستن کاربران موجود (مثلاً در نسخه‌های قدیمی‌تر برنامه) اعمال کنید.

به همین دلیل است که Data Connect یک محیط توسعه‌دهنده و ابزاری را در اختیار شما قرار می‌دهد که به شما امکان می‌دهد طرح‌واره‌ها، پرسش‌ها و جهش‌های مستقر در سرور خود را نمونه‌سازی کنید. همچنین در حالی که شما نمونه سازی می کنید، SDK های سمت سرویس گیرنده را به طور خودکار تولید می کند.

هنگامی که به‌روزرسانی‌های سرویس و برنامه‌های سرویس گیرنده خود را تکرار کردید، به‌روزرسانی‌های سمت سرور و سرویس گیرنده آماده اجرا هستند.

وب 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 نصب کنید تا اطمینان حاصل کنید که این وابستگی به همتایان برآورده شده است.

مسیرها را نسبت به 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"

یا اگر یک 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 به‌طور خودکار تولید و به‌روزرسانی می‌شوند در حالی که فایل‌های .gql را که طرح‌واره‌ها، پرسش‌ها و جهش‌ها را تعریف می‌کنند، تغییر می‌دهید. این می تواند یک ویژگی مفید در بارگذاری مجدد جریان های کاری داغ باشد.

در سناریوهای دیگر، اگر از شبیه‌ساز Data Connect از Firebase CLI استفاده می‌کنید، می‌توانید ساعتی را روی به‌روزرسانی‌های .gql تنظیم کنید و همچنین منابع SDK را به‌طور خودکار به‌روزرسانی کنید.

همچنین، می‌توانید هر زمان که فایل‌های .gql تغییر می‌کنند، از CLI برای بازسازی SDK‌ها استفاده کنید:

firebase dataconnect:sdk:generate --watch

SDK ها را برای ادغام و برای انتشار تولید ایجاد کنید

در برخی از سناریوها، مانند آماده کردن منابع پروژه برای ارسال برای آزمایش‌های CI، می‌توانید برای به‌روزرسانی دسته‌ای Firebase CLI تماس بگیرید.

در این موارد، از firebase dataconnect:sdk:generate استفاده کنید.

کد مشتری را تنظیم کنید

برنامه Data Connect خود را راه اندازی کنید

ابتدا، برنامه خود را با استفاده از دنباله استاندارد Firebase مقداردهی کنید.

initializeApp({...});

Data Connect وب SDK را راه اندازی کنید

نمونه Data Connect خود را با استفاده از اطلاعاتی که برای راه اندازی Data Connect استفاده کردید (همه در تب Data Connect کنسول Firebase موجود است) راه اندازی کنید.

شی ConnectorConfig

SDK به یک شی پیکربندی رابط نیاز دارد.

این شی به طور خودکار از serviceId و location در dataconnect.yaml و connectorId در connector.yaml تولید می شود.

واردات کتابخانه ها

دو مجموعه واردات برای مقداردهی اولیه کد کلاینت شما مورد نیاز است، واردات کلی 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.

ابزار دقیق برنامه برای اتصال به شبیه ساز برای هر دو سناریو یکسان است.

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 را برای شما ایجاد می کند.

استفاده از پرس و جو در سمت مشتری

کد تولید شده از قبل با Query Refs از پیش تعریف شده همراه خواهد بود. تنها کاری که باید انجام دهید این است که آن ها را وارد کرده و اجرا کنید.

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 به شرح زیر نشان داده شده است.

نوع اتصال داده	TypeScript
مهر زمان	رشته
تاریخ	رشته
UUID	رشته
Int64	رشته
دوبل	شماره
شناور	شماره

ملاحظات چارچوب

زاویه ای

هنگام تولید کد، Angular CLI به دلیل کد بهینه‌سازی وابستگی، تغییرات جدید را دریافت نمی‌کند. برای رفع این مشکل، باید angular.json خود را تغییر دهید.

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