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

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

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

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

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

আপনার ওয়েব 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 ইনস্টল করুন।

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

ওয়েব 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 ব্যবহার করুন।

ক্লায়েন্ট কোড সেট আপ করুন

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

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

initializeApp({...});

Data Connect ওয়েব SDK চালু করুন

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

ConnectorConfig অবজেক্ট

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

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

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

আপনার ক্লায়েন্ট কোড, সাধারণ 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 এমুলেটর ব্যবহার করতে পারেন, ডেটা কানেক্ট VS কোড এক্সটেনশন থেকে হোক বা 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

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

একটি উদাহরণ পেয়ে

যদি আপনি Data Connect এমুলেটরের সাথে সংযোগ করতে চান তবে getDataConnect কল করা প্রয়োজন। অন্যথায় জেনারেট করা SDK স্বয়ংক্রিয়ভাবে আপনার জন্য DataConnect অবজেক্টের একটি উদাহরণ তৈরি করবে।

ক্লায়েন্ট পক্ষের প্রশ্ন ব্যবহার করে

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

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 সার্ভার সাধারণ গ্রাফকিউএল ডেটা প্রকারের প্রতিনিধিত্ব করে। এগুলিকে নিম্নরূপ SDK-তে উপস্থাপন করা হয়েছে।

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

কৌণিক

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

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