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

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

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

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

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

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

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

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

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

তারপর:

  1. আপনার অ্যাপ স্কিমা বিকাশ করুন.
  2. JavaScript SDK , বা প্রতিক্রিয়া বা কৌণিক লাইব্রেরি দিয়ে আপনার ক্লায়েন্ট কোড শুরু করুন।
  3. প্রতিক্রিয়া এবং কৌণিক জন্য, Tanstack ক্যোয়ারী প্যাকেজ ইনস্টল করুন

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

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

  6. জাভাস্ক্রিপ্ট SDK , বা প্রতিক্রিয়া বা কৌণিকের সাহায্যে প্রশ্ন এবং মিউটেশনের কলগুলি বাস্তবায়ন করুন।

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

Firebase JavaScript SDK দিয়ে ক্লায়েন্ট কোড প্রয়োগ করুন

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

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

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

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

initializeApp({...});

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

আপনার কাছে ডেটা কানেক্ট VS কোড এক্সটেনশন ইনস্টল করা থাকলে, এটি সর্বদা জেনারেট হওয়া SDK গুলিকে আপ টু ডেট রাখবে৷

আপনি যদি ডেটা কানেক্ট VS কোড এক্সটেনশন ব্যবহার না করেন, তাহলে জেনারেট হওয়া 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';

JavaScript 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-এ একটি ফুলস্ক্রিন মান যোগ করার সিদ্ধান্ত নিয়েছেন।

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

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

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

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

JavaScript 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

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

প্রতিক্রিয়া এবং কৌণিক জন্য ক্লায়েন্ট কোড প্রয়োগ করুন

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

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

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

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

initializeApp({...});

TanStack Query Firebase প্যাকেজ ইনস্টল করুন

আপনার প্রকল্পে TanStack কোয়েরির জন্য প্যাকেজ ইনস্টল করুন।

প্রতিক্রিয়া 

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

আপনার প্রতিক্রিয়া বা কৌণিক SDK তৈরি করুন

স্ট্যান্ডার্ড ওয়েব SDK-এর মতো, যেমনটি আগে বর্ণিত হয়েছে, Firebase টুলিং আপনার স্কিমা এবং ক্রিয়াকলাপগুলির উপর ভিত্তি করে SDK-এর স্বয়ংক্রিয় প্রজন্ম পরিচালনা করে।

আপনি যদি এইমাত্র আপনার প্রোজেক্টে রিঅ্যাক্ট বা কৌণিক যোগ করেন, অতিরিক্ত ফ্রেমওয়ার্ক বাইন্ডিং অন্তর্ভুক্ত করার জন্য জেনারেট করা SDKগুলিকে পুনরায় কনফিগার করতে firebase init dataconnect:sdk পুনরায় চালান।

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

আপনার প্রতিক্রিয়া বা কৌণিক ক্লায়েন্ট কোড শুরু করার জন্য চার সেট আমদানির প্রয়োজন: সাধারণ Data Connect আমদানি, সাধারণ ট্যানস্ট্যাক আমদানি এবং আপনার JS এবং প্রতিক্রিয়া তৈরি করা 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";

আপনার প্রতিক্রিয়া বা কৌণিক ক্লায়েন্টে প্রশ্ন এবং মিউটেশন ব্যবহার করুন

সেটআপ সম্পূর্ণ হলে, আপনি জেনারেট করা SDK থেকে পদ্ধতিগুলিকে অন্তর্ভুক্ত করতে পারেন।

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

প্রতিক্রিয়া

জেনারেট করা SDK-তে এই ধরনের সমস্ত ক্রিয়াকলাপ, উভয় প্রশ্ন এবং মিউটেশন, কল TanStackQuery বাইন্ডিং:

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

প্রতিক্রিয়া এবং কৌণিক সহ অটো রিলোড প্রশ্নগুলি ব্যবহার করুন৷

ডেটা পরিবর্তিত হলে আপনি স্বয়ংক্রিয়ভাবে পুনরায় লোড করার জন্য প্রশ্নগুলি কনফিগার করতে পারেন।

প্রতিক্রিয়া 

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-তে উপস্থাপন করা হয়েছে।

ডেটা কানেক্ট টাইপ টাইপস্ক্রিপ্ট
টাইমস্ট্যাম্প স্ট্রিং
তারিখ স্ট্রিং
UUID স্ট্রিং
Int64 স্ট্রিং
ডাবল সংখ্যা
ভাসা সংখ্যা

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

আপনার কাছে ডেটা কানেক্ট VS কোড এক্সটেনশন ইনস্টল করা থাকলে, এটি সর্বদা জেনারেট হওয়া SDK গুলিকে আপ টু ডেট রাখবে৷

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

firebase dataconnect:sdk:generate --watch

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

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

firebase dataconnect:sdk:generate