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

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

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

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

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

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

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

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

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

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

initializeApp({...});

আপনার জাভাস্ক্রিপ্ট SDK তৈরি করুন

বেশিরভাগ ফায়ারবেস প্রজেক্টের মতো, আপনার Firebase Data Connect ক্লায়েন্ট কোডের কাজ স্থানীয় প্রজেক্ট ডিরেক্টরিতে হয়। ডেটা কানেক্ট ভিএস কোড এক্সটেনশন এবং Firebase সিএলআই উভয়ই ক্লায়েন্ট কোড তৈরি ও পরিচালনার জন্য গুরুত্বপূর্ণ স্থানীয় টুল।

SDK জেনারেশনের অপশনগুলি dataconnect.yaml ফাইলের বেশ কয়েকটি এন্ট্রিতে চাবি করা হয় যখন আপনি আপনার প্রকল্প শুরু করেন।

SDK জেনারেশন শুরু করুন

generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir উত্পন্ন SDK কোথায় আউটপুট করা উচিত তা নির্দিষ্ট করে।

package প্যাকেজের নাম নির্দিষ্ট করে।

packageJsonDir প্যাকেজটি কোথায় ইনস্টল করতে হবে তা নির্দিষ্ট করে।

এই ক্ষেত্রে, এই পিয়ার নির্ভরতা পূর্ণতা নিশ্চিত করতে firebase@latest ইনস্টল করুন।

জাভাস্ক্রিপ্ট SDK শুরু করুন

ডেটা কানেক্ট সেট আপ করার জন্য আপনি যে তথ্য ব্যবহার করেছেন তা ব্যবহার করে আপনার Data Connect ইনস্ট্যান্স শুরু করুন ( Firebase কনসোল ডেটা কানেক্ট ট্যাবে সমস্ত উপলব্ধ)।

ConnectorConfig অবজেক্ট

SDK-এর জন্য একটি সংযোগকারী কনফিগারেশন অবজেক্ট প্রয়োজন।

এই বস্তুটি dataconnect.yaml এ serviceId এবং location থেকে এবং connector.yaml এ connectorId থেকে স্বয়ংক্রিয়ভাবে তৈরি হয়।

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

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

JavaScript SDK থেকে প্রশ্ন ব্যবহার করুন

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

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`

JavaScript SDK থেকে মিউটেশন ব্যবহার করুন

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

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';

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

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

ঐচ্ছিকভাবে, আপনি connectDataConnectEmulator কল করে এবং তারপর Data Connect ইন্সট্যান্সে পাস করে এমুলেটরের সাথে সংযোগ করতে পারেন, যেমন:

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

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

প্রতিক্রিয়ার জন্য ক্লায়েন্ট কোড প্রয়োগ করুন

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

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

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

আপনার প্রকল্পের জন্য একটি প্রতিক্রিয়া SDK তৈরি করতে, আপনার connector.yaml কনফিগারেশন ফাইলে একটি react কী যোগ করুন।

generate:
  javascriptSdk:
    react: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

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

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

// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@myorg/connector/react";

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

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

নিচের স্নিপেটে, জেনারেট করা React SDK থেকে use -প্রিফিক্সড মেথড useListAllMovies লক্ষ্য করুন। জেনারেট করা SDK-তে এই ধরনের সমস্ত use অপারেশন, উভয় প্রশ্ন এবং মিউটেশন, কল ট্যানস্ট্যাক কোয়েরি বাইন্ডিং:

• প্রশ্ন কল করুন এবং TanStack useDataConnectQuery হুক ফেরত দিন
• মিউটেশন কল করে ট্যানস্ট্যাক useDataConnectMutation হুক ফেরত দেয়

import { useListAllMovies } from '@movies-app/movies/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>
}

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

ঐচ্ছিকভাবে, আপনি connectDataConnectEmulator কল করে এমুলেটরের সাথে সংযোগ করতে পারেন এবং তারপরে আপনার তৈরি করা হুকে Data Connect ইনস্ট্যান্স পাস করতে পারেন, যেমন:

import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@movies-app/movies';
import { useListAllMovies } from '@movies-app/movies/react';

const dc = getDataConnect(connectorConfig);
connectDataConnectEmulator(dc, 'localhost', 9399);

function App() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

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

SDK-এ ডেটার ধরন

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

SDK প্রজন্মের জন্য বিশেষ বিবেচনা

node_modules এর সাথে সম্পর্কিত পাথ কনফিগার করুন

JavaScript SDK-এর জন্য, যেহেতু Data Connect আপনার SDK ইনস্টল করার জন্য npm link ব্যবহার করে, আপনার জেনারেট করা SDK-কে আপনার node_modules পাথের মতো একই স্তরে বা node_modules অ্যাক্সেস করতে পারে এমন একটি চাইল্ড ডিরেক্টরিতে আউটপুট করতে হবে।

অন্য কথায়, সঠিকভাবে কাজ করার জন্য আপনার জেনারেট করা SDK-এর firebase নোড মডিউলে অ্যাক্সেস থাকতে হবে।

উদাহরণ স্বরূপ, আপনার যদি my-app/ এ আপনার node_modules থাকে, তাহলে আপনার আউটপুট ডিরেক্টরি 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 আপডেট করুন

আপনি যদি ডেটা কানেক্ট VS কোড এক্সটেনশন এবং এর Data Connect এমুলেটরের সাথে ইন্টারেক্টিভভাবে প্রোটোটাইপ করে থাকেন, SDK সোর্স ফাইলগুলি স্বয়ংক্রিয়ভাবে তৈরি এবং আপডেট হয় যখন আপনি .gql ফাইলগুলিকে সংজ্ঞায়িত করে স্কিমা, ক্যোয়ারী এবং মিউটেশনগুলি পরিবর্তন করেন। গরম (পুনরায়) লোডিং ওয়ার্কফ্লোতে এটি একটি দরকারী বৈশিষ্ট্য হতে পারে।

বিকল্পভাবে, যখনই .gql ফাইলগুলি পরিবর্তন করা হয় তখন আপনি SDK পুনরুদ্ধার করতে CLI ব্যবহার করতে পারেন:

firebase dataconnect:sdk:generate --watch

ইন্টিগ্রেশন এবং প্রোডাকশন রিলিজের জন্য SDK তৈরি করুন

কিছু পরিস্থিতিতে, যেমন CI পরীক্ষার জন্য জমা দেওয়ার জন্য প্রকল্পের উত্স প্রস্তুত করা, আপনি একটি ব্যাচ আপডেটের জন্য Firebase CLI-কে কল করতে পারেন।

এই ক্ষেত্রে, firebase dataconnect:sdk:generate ব্যবহার করুন।

অন্যান্য ফ্রেমওয়ার্ক বিবেচনা

কৌণিক

কোড তৈরি করার সময়, Angular CLI তার নির্ভরতা অপ্টিমাইজেশন কোডের কারণে নতুন পরিবর্তনগুলি গ্রহণ করবে না। এটি ঠিক করার জন্য, আপনাকে আপনার angular.json পরিবর্তন করতে হবে।

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