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

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

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

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

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

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

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

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

1. আপনার ওয়েব অ্যাপে ফায়ারবেস যুক্ত করুন।

তারপর:

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

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

   • আমাদের Data Connect VS Code এক্সটেনশনে থাকা Add SDK to app বাটনটির মাধ্যমে
   • JavaScript SDK , React বা Angular-এর জন্য আপনার connector.yaml আপডেট করার মাধ্যমে।

5. জাভাস্ক্রিপ্ট এসডিকে , অথবা রিয়্যাক্ট বা অ্যাঙ্গুলার ব্যবহার করে লাইব্রেরি এবং জেনারেটেড কোড ইম্পোর্ট করুন।

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

7. জাভাস্ক্রিপ্ট এসডিকে , রিয়্যাক্ট বা অ্যাঙ্গুলার ব্যবহার করে Data Connect এমুলেটর সেট আপ করে পরীক্ষা করুন।

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

এই অংশে আলোচনা করা হয়েছে কিভাবে আপনি Firebase JavaScript এসডিকে ব্যবহার করে ক্লায়েন্ট বাস্তবায়ন করতে পারেন।

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

আপনার অ্যাপটি চালু করুন

প্রথমে, ফায়ারবেসের প্রচলিত পদ্ধতি অনুসরণ করে আপনার অ্যাপটি চালু করুন।

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 আপডেট করুন।

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

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

firebase dataconnect:sdk:generate --watch

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

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

firebase dataconnect:sdk:generate

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

আপনার ক্লায়েন্ট কোড ইনিশিয়ালাইজ করার জন্য দুই ধরনের ইম্পোর্ট প্রয়োজন: সাধারণ Data Connect ইম্পোর্ট এবং নির্দিষ্ট, জেনারেটেড এসডিকে ইম্পোর্ট।

সাধারণ ইম্পোর্টগুলোর অন্তর্ভুক্ত 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';

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

জেনারেট করা কোডটিতে আগে থেকেই পূর্বনির্ধারিত কোয়েরি রেফ (Query Refs) থাকবে। আপনাকে শুধু সেগুলো ইম্পোর্ট করে এক্সিকিউট (execute) কল করতে হবে।

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 ওয়ার্কফ্লোতে, আপনি আপনার কোয়েরি এবং এসডিকে আপডেট করার জন্য স্থানীয় ডেভেলপমেন্ট টুলিং ব্যবহার করতে পারেন।

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

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

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

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

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

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 একটি জেনারেটেড SDK প্রদান করে, যাতে আমাদের পার্টনার Invertase, TanStack Query Firebase-এর লাইব্রেরি ব্যবহার করে React এবং Angular-এর জন্য হুকস অন্তর্ভুক্ত রয়েছে।

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

আপনার অ্যাপটি চালু করুন

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

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

আপনার React বা Angular ক্লায়েন্ট কোড ইনিশিয়ালাইজ করার জন্য চার ধরনের ইম্পোর্ট প্রয়োজন: সাধারণ Data Connect ইম্পোর্ট, সাধারণ TanStack ইম্পোর্ট, এবং আপনার 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-এর জন্য use -prefixed মেথড useListAllMovies এবং Angular-এর জন্য inject -prefixed মেথড injectListAllMovies লক্ষ্য করুন।

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 সার্ভারটি প্রচলিত GraphQL ডেটা টাইপগুলো উপস্থাপন করে। SDK-তে এগুলো নিম্নরূপে প্রদর্শিত হয়।

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

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

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

firebase dataconnect:sdk:generate --watch

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

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

firebase dataconnect:sdk:generate