তৈরি ওয়েব SDK ব্যবহার করুন

Firebase Data Connect ক্লায়েন্ট SDK গুলি আপনাকে সরাসরি Firebase অ্যাপ থেকে আপনার সার্ভার-সাইড কোয়েরি এবং মিউটেশন কল করতে দেয়। আপনার Data Connect পরিষেবাতে স্থাপন করা স্কিমা, কোয়েরি এবং মিউটেশন ডিজাইন করার সময় আপনি সমান্তরালভাবে একটি কাস্টম ক্লায়েন্ট SDK তৈরি করেন। তারপর, আপনি এই SDK থেকে পদ্ধতিগুলিকে আপনার ক্লায়েন্ট লজিকের সাথে একীভূত করেন।

যেমনটি আমরা অন্যত্র উল্লেখ করেছি, এটি মনে রাখা গুরুত্বপূর্ণ যে Data Connect কোয়েরি এবং মিউটেশনগুলি ক্লায়েন্ট কোড দ্বারা জমা দেওয়া হয় না এবং সার্ভারে কার্যকর করা হয় না। পরিবর্তে, যখন স্থাপন করা হয়, তখন Data Connect অপারেশনগুলি ক্লাউড ফাংশনের মতো সার্ভারে সংরক্ষণ করা হয়। এর অর্থ হল বিদ্যমান ব্যবহারকারীদের (উদাহরণস্বরূপ, পুরানো অ্যাপ সংস্করণগুলিতে) ভাঙা এড়াতে আপনাকে সংশ্লিষ্ট ক্লায়েন্ট-সাইড পরিবর্তনগুলি স্থাপন করতে হবে।

এই কারণেই Data Connect আপনাকে একটি ডেভেলপার পরিবেশ এবং টুলিং প্রদান করে যা আপনাকে আপনার সার্ভার-স্থাপিত স্কিমা, কোয়েরি এবং মিউটেশন প্রোটোটাইপ করতে দেয়। এটি প্রোটোটাইপ করার সময় স্বয়ংক্রিয়ভাবে ক্লায়েন্ট-সাইড SDK তৈরি করে।

যখন আপনি আপনার পরিষেবা এবং ক্লায়েন্ট অ্যাপগুলিতে আপডেটগুলি পুনরাবৃত্তি করেন, তখন সার্ভার- এবং ক্লায়েন্ট-সাইড উভয় আপডেটই স্থাপনের জন্য প্রস্তুত থাকে।

ক্লায়েন্ট ডেভেলপমেন্ট ওয়ার্কফ্লো কী?

আপনি যদি "শুরু করুন" পদ্ধতি অনুসরণ করেন, তাহলে আপনাকে Data Connect সামগ্রিক উন্নয়ন প্রবাহের সাথে পরিচয় করিয়ে দেওয়া হবে। এই নির্দেশিকায়, আপনি আপনার স্কিমা থেকে ওয়েব SDK তৈরি করা এবং ক্লায়েন্ট কোয়েরি এবং মিউটেশন নিয়ে কাজ করার বিষয়ে আরও বিস্তারিত তথ্য পাবেন।

সংক্ষেপে বলতে গেলে, আপনার ক্লায়েন্ট অ্যাপগুলিতে জেনারেট করা ওয়েব SDK ব্যবহার করতে, আপনাকে এই পূর্বশর্ত পদক্ষেপগুলি অনুসরণ করতে হবে:

1. আপনার ওয়েব অ্যাপে Firebase যোগ করুন।

তারপর:

1. আপনার অ্যাপ স্কিমা তৈরি করুন।
2. আপনার ক্লায়েন্ট কোডটি জাভাস্ক্রিপ্ট SDK , অথবা React অথবা Angular লাইব্রেরি দিয়ে শুরু করুন।
3. React এবং Angular এর জন্য, Tanstack Query প্যাকেজ ইনস্টল করুন।

4. SDK জেনারেশন সেট আপ করুন:

   • আমাদের ডেটা কানেক্ট VS কোড এক্সটেনশনে "অ্যাপে SDK যোগ করুন" বোতামের সাহায্যে
   • জাভাস্ক্রিপ্ট SDK , অথবা React অথবা Angular এর জন্য আপনার connector.yaml আপডেট করে।

5. JavaScript SDK , অথবা React অথবা Angular ব্যবহার করে লাইব্রেরি এবং জেনারেট করা কোড আমদানি করুন।

6. জাভাস্ক্রিপ্ট SDK , অথবা React অথবা Angular ব্যবহার করে কল টু কোয়েরি এবং মিউটেশন বাস্তবায়ন করুন।

7. JavaScript SDK , অথবা React অথবা Angular দিয়ে Data Connect এমুলেটর সেট আপ করে পরীক্ষা করুন।

Firebase JavaScript SDK ব্যবহার করে ক্লায়েন্ট কোড বাস্তবায়ন করুন

এই বিভাগে Firebase JavaScript SDK ব্যবহার করে আপনি কীভাবে ক্লায়েন্ট বাস্তবায়ন করতে পারেন তা আলোচনা করা হয়েছে।

আপনি যদি React বা Angular ব্যবহার করেন, তাহলে বিকল্প সেটআপ নির্দেশাবলী এবং ফ্রেমওয়ার্কের জন্য Data Connect SDK তৈরি করার বিষয়ে অতিরিক্ত ডকুমেন্টেশনের লিঙ্কগুলি দেখুন।

আপনার অ্যাপটি আরম্ভ করুন

প্রথমে, স্ট্যান্ডার্ড Firebase সিকোয়েন্স ব্যবহার করে আপনার অ্যাপটি আরম্ভ করুন।

initializeApp({...});

জেনারেটেড জাভাস্ক্রিপ্ট SDK ইনস্টল করুন

আপনার অ্যাপগুলিতে Data Connect জেনারেটেড SDK সেট আপ করতে Firebase CLI ব্যবহার করুন। init কমান্ডটি বর্তমান ফোল্ডারে সমস্ত অ্যাপ সনাক্ত করবে এবং স্বয়ংক্রিয়ভাবে জেনারেটেড SDK ইনস্টল করবে।

firebase init dataconnect:sdk

আপনার অ্যাপটি Data 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 গুলি আপডেট করুন

যদি আপনার ডেটা কানেক্ট ভিএস কোড এক্সটেনশন ইনস্টল করা থাকে, তাহলে এটি সর্বদা জেনারেট করা SDK গুলিকে আপ টু ডেট রাখবে।

আপনি যদি ডেটা কানেক্ট ভিএস কোড এক্সটেনশন ব্যবহার না করেন, তাহলে জেনারেট করা SDK গুলিকে আপ টু ডেট রাখতে আপনি Firebase CLI ব্যবহার করতে পারেন।

firebase dataconnect:sdk:generate --watch

বিল্ড পাইপলাইনে SDK তৈরি করুন

CI/CD বিল্ড প্রক্রিয়ায় ডেটা কানেক্ট SDK তৈরি করতে আপনি Firebase CLI ব্যবহার করতে পারেন।

firebase dataconnect:sdk:generate

লাইব্রেরি আমদানি করুন

আপনার ক্লায়েন্ট কোড শুরু করার জন্য দুটি সেট আমদানির প্রয়োজন: সাধারণ 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 '@dataconnect/generated';

জাভাস্ক্রিপ্ট SDK থেকে কোয়েরি ব্যবহার করুন

জেনারেট করা কোডটি ইতিমধ্যেই পূর্বনির্ধারিত কোয়েরি রেফারেন্সের সাথে আসবে। আপনাকে যা করতে হবে তা হল আমদানি এবং কল এক্সিকিউট করা।

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);
}

পরিবর্তনগুলিতে সাবস্ক্রাইব করুন

আপনি পরিবর্তনগুলিতে সাবস্ক্রাইব করতে পারেন (যা আপনি যখনই কোনও কোয়েরি কার্যকর করবেন তখন আপডেট হবে)।

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`

গণনা ক্ষেত্রের পরিবর্তনগুলি পরিচালনা করুন

একটি অ্যাপের স্কিমায় গণনা থাকতে পারে, যা আপনার GraphQL কোয়েরি দ্বারা অ্যাক্সেস করা যেতে পারে।

একটি অ্যাপের ডিজাইন পরিবর্তনের সাথে সাথে, আপনি নতুন enum সমর্থিত মান যোগ করতে পারেন। উদাহরণস্বরূপ, কল্পনা করুন যে আপনার অ্যাপ্লিকেশনের জীবনচক্রের পরে আপনি AspectRatio enum-এ একটি FULLSCREEN মান যোগ করার সিদ্ধান্ত নিয়েছেন।

Data Connect ওয়ার্কফ্লোতে, আপনি আপনার প্রশ্ন এবং SDK আপডেট করার জন্য স্থানীয় ডেভেলপমেন্ট টুলিং ব্যবহার করতে পারেন।

তবে, আপনার ক্লায়েন্টদের একটি আপডেটেড সংস্করণ প্রকাশ করার আগে, পুরানো মোতায়েন করা ক্লায়েন্টগুলি ভেঙে যেতে পারে।

স্থিতিস্থাপক বাস্তবায়নের উদাহরণ

সর্বদা enum মানগুলির উপরে একটি switch স্টেটমেন্টে একটি default শাখা যোগ করুন, অথবা enum মানগুলির সাথে তুলনা করে if/else if ব্লকে একটি else শাখা যোগ করুন। এটি জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট ভাষা দ্বারা প্রয়োগ করা হয় না, তবে নতুন 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!");
}

জাভাস্ক্রিপ্ট SDK থেকে মিউটেশন ব্যবহার করুন

মিউটেশনগুলি কোয়েরির মতোই অ্যাক্সেসযোগ্য।

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

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

Data Connect এমুলেটরের সাথে সংযোগ করুন

ঐচ্ছিকভাবে, আপনি connectDataConnectEmulator কল করে এবং তারপর Data 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

উৎপাদন সংস্থানগুলিতে স্যুইচ করতে, এমুলেটরের সাথে সংযোগ স্থাপনের জন্য লাইনগুলি মন্তব্য করুন।

React এবং Angular এর জন্য ক্লায়েন্ট কোড বাস্তবায়ন করুন

Firebase Data Connect আমাদের অংশীদারদের Invertase, TanStack Query Firebase থেকে উপলব্ধ লাইব্রেরি ব্যবহার করে React এবং Angular-এর জন্য হুক সহ একটি জেনারেটেড SDK প্রদান করে।

এই লাইব্রেরিটি হুকের একটি সেট প্রদান করে যা আপনার অ্যাপ্লিকেশনগুলিতে Firebase এর সাহায্যে অ্যাসিঙ্ক্রোনাস কাজগুলি পরিচালনা করাকে ব্যাপকভাবে সহজ করে তোলে।

আপনার অ্যাপটি আরম্ভ করুন

প্রথমে, যেকোনো Firebase ওয়েব অ্যাপের মতো, স্ট্যান্ডার্ড Firebase সিকোয়েন্স ব্যবহার করে আপনার অ্যাপটি ইনিশিয়ালাইজ করুন।

initializeApp({...});

ট্যানস্ট্যাক কোয়েরি ফায়ারবেস প্যাকেজ ইনস্টল করুন

আপনার প্রকল্পে 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 যোগ করে থাকেন, তাহলে অতিরিক্ত ফ্রেমওয়ার্ক বাইন্ডিং অন্তর্ভুক্ত করার জন্য জেনারেট করা SDK গুলিকে পুনরায় কনফিগার করতে firebase init dataconnect:sdk পুনরায় চালান।

লাইব্রেরি আমদানি করুন

আপনার React অথবা Angular ক্লায়েন্ট কোড শুরু করার জন্য চারটি সেট আমদানির প্রয়োজন: সাধারণ Data Connect আমদানি, সাধারণ ট্যানস্ট্যাক আমদানি, এবং আপনার JS এবং React জেনারেটেড SDK-এর জন্য নির্দিষ্ট আমদানি।

সাধারণ আমদানিতে অন্তর্ভুক্ত 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 থেকে পদ্ধতিগুলি অন্তর্ভুক্ত করতে পারেন।

নিচের স্নিপেটে, জেনারেট করা SDK থেকে React-এর জন্য -prefixed পদ্ধতি useListAllMovies এবং Angular-এর জন্য inject -prefixed পদ্ধতি injectListAllMovies use লক্ষ্য করুন।

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

Data Connect এমুলেটরের সাথে সংযোগ করুন

ঐচ্ছিকভাবে, আপনি connectDataConnectEmulator কল করে এবং তারপর আপনার জেনারেট করা হুকে Data 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-তে ডেটা টাইপ

Data Connect সার্ভার সাধারণ গ্রাফকিউএল ডেটা টাইপগুলিকে প্রতিনিধিত্ব করে। এগুলি SDK-তে নিম্নরূপে উপস্থাপন করা হয়েছে।

প্রোটোটাইপ করার সময় SDK গুলি আপডেট করুন

যদি আপনার ডেটা কানেক্ট ভিএস কোড এক্সটেনশন ইনস্টল করা থাকে, তাহলে এটি সর্বদা জেনারেট করা SDK গুলিকে আপ টু ডেট রাখবে।

আপনি যদি ডেটা কানেক্ট ভিএস কোড এক্সটেনশন ব্যবহার না করেন, তাহলে জেনারেট করা SDK গুলিকে আপ টু ডেট রাখতে আপনি Firebase CLI ব্যবহার করতে পারেন।

firebase dataconnect:sdk:generate --watch

বিল্ড পাইপলাইনে SDK তৈরি করুন

CI/CD বিল্ড প্রক্রিয়ায় ডেটা কানেক্ট SDK তৈরি করতে আপনি Firebase CLI ব্যবহার করতে পারেন।

firebase dataconnect:sdk:generate