Firebase Data Connect ক্লায়েন্ট SDK গুলি আপনাকে সরাসরি একটি Firebase অ্যাপ থেকে আপনার সার্ভার-সাইড প্রশ্ন এবং মিউটেশন কল করতে দেয়। আপনি সমান্তরালভাবে একটি কাস্টম ক্লায়েন্ট SDK তৈরি করেন যখন আপনি স্কিম, প্রশ্ন এবং মিউটেশনগুলি আপনার Data Connect পরিষেবাতে স্থাপন করেন। তারপর, আপনি আপনার ক্লায়েন্ট যুক্তিতে এই SDK থেকে পদ্ধতিগুলিকে একীভূত করুন৷
যেমনটি আমরা অন্য কোথাও উল্লেখ করেছি, এটা মনে রাখা গুরুত্বপূর্ণ যে Data Connect কোয়েরি এবং মিউটেশনগুলি ক্লায়েন্ট কোড দ্বারা জমা দেওয়া হয় না এবং সার্ভারে কার্যকর করা হয়। পরিবর্তে, যখন স্থাপন করা হয়, Data Connect অপারেশনগুলি ক্লাউড ফাংশনের মতো সার্ভারে সংরক্ষণ করা হয়। এর অর্থ হল বিদ্যমান ব্যবহারকারীদের (উদাহরণস্বরূপ, পুরানো অ্যাপ সংস্করণে) ভাঙা এড়াতে আপনাকে সংশ্লিষ্ট ক্লায়েন্ট-সাইড পরিবর্তনগুলি স্থাপন করতে হবে।
এই কারণেই Data Connect আপনাকে একটি বিকাশকারী পরিবেশ এবং টুলিং প্রদান করে যা আপনাকে আপনার সার্ভার-নিয়োজিত স্কিমা, প্রশ্ন এবং মিউটেশনের প্রোটোটাইপ করতে দেয়। আপনি প্রোটোটাইপ করার সময় এটি স্বয়ংক্রিয়ভাবে ক্লায়েন্ট-সাইড SDK তৈরি করে।
আপনি যখন আপনার পরিষেবা এবং ক্লায়েন্ট অ্যাপগুলিতে আপডেটগুলি পুনরাবৃত্তি করেন, তখন সার্ভার- এবং ক্লায়েন্ট-সাইড আপডেটগুলি স্থাপনের জন্য প্রস্তুত।
ক্লায়েন্ট ডেভেলপমেন্ট ওয়ার্কফ্লো কি?
আপনি যদি শুরু করেন অনুসরণ করেন, তাহলে আপনাকে Data Connect সামগ্রিক উন্নয়ন প্রবাহের সাথে পরিচয় করিয়ে দেওয়া হবে। এই নির্দেশিকাটিতে, আপনি আপনার স্কিমা থেকে ওয়েব SDK তৈরি করা এবং ক্লায়েন্টের প্রশ্ন এবং মিউটেশনের সাথে কাজ করার বিষয়ে আরও বিস্তারিত তথ্য পাবেন।
সংক্ষেপে, আপনার ক্লায়েন্ট অ্যাপে জেনারেট করা ওয়েব SDK ব্যবহার করতে, আপনি এই পূর্বশর্ত পদক্ষেপগুলি অনুসরণ করবেন:
- আপনার ওয়েব অ্যাপে Firebase যোগ করুন।
তারপর:
- আপনার অ্যাপ স্কিমা বিকাশ করুন.
- JavaScript SDK , বা প্রতিক্রিয়া বা কৌণিক লাইব্রেরি দিয়ে আপনার ক্লায়েন্ট কোড শুরু করুন।
- প্রতিক্রিয়া এবং কৌণিক জন্য, Tanstack ক্যোয়ারী প্যাকেজ ইনস্টল করুন
SDK জেনারেশন সেট আপ করুন:
- আমাদের ডেটা কানেক্ট VS কোড এক্সটেনশনে অ্যাপ বোতামে SDK যোগ করুন
- JavaScript SDK এর জন্য আপনার
connector.yaml
আপডেট করে, বা প্রতিক্রিয়া বা কৌণিক ।
JavaScript SDK , অথবা React বা Angular দিয়ে লাইব্রেরি এবং জেনারেট করা কোড ইম্পোর্ট করুন।
জাভাস্ক্রিপ্ট SDK , বা প্রতিক্রিয়া বা কৌণিকের সাহায্যে প্রশ্ন এবং মিউটেশনের কলগুলি বাস্তবায়ন করুন।
JavaScript SDK , অথবা React বা Angular এর সাথে Data Connect এমুলেটর সেট আপ করে পরীক্ষা করুন।
Firebase JavaScript SDK দিয়ে ক্লায়েন্ট কোড প্রয়োগ করুন
এই বিভাগে আপনি Firebase JavaScript SDK ব্যবহার করে কিভাবে ক্লায়েন্ট বাস্তবায়ন করতে পারেন তা কভার করে।
আপনি যদি প্রতিক্রিয়া বা কৌণিক ব্যবহার করে থাকেন, তাহলে ফ্রেমওয়ার্কের জন্য Data Connect SDK তৈরি করার বিষয়ে অতিরিক্ত সেটআপ নির্দেশাবলী এবং অতিরিক্ত ডকুমেন্টেশনের লিঙ্কগুলি দেখুন।
আপনার অ্যাপ চালু করুন
প্রথমে, স্ট্যান্ডার্ড ফায়ারবেস সিকোয়েন্স ব্যবহার করে আপনার অ্যাপ শুরু করুন।
initializeApp({...});
আপনার জাভাস্ক্রিপ্ট SDK তৈরি করুন
বেশিরভাগ ফায়ারবেস প্রজেক্টের মতো, আপনার Firebase Data Connect ক্লায়েন্ট কোডের কাজ স্থানীয় প্রজেক্ট ডিরেক্টরিতে হয়। ডেটা কানেক্ট ভিএস কোড এক্সটেনশন এবং Firebase সিএলআই উভয়ই ক্লায়েন্ট কোড তৈরি ও পরিচালনার জন্য গুরুত্বপূর্ণ স্থানীয় টুল।
SDK জেনারেশনের অপশনগুলি dataconnect.yaml
ফাইলের বেশ কয়েকটি এন্ট্রিতে চাবি করা হয় যখন আপনি আপনার প্রকল্প শুরু করেন।
SDK জেনারেশন শুরু করুন
আপনারconnector.yaml
এ, আপনার outputDir
, package
এবং (ওয়েব SDK-এর জন্য) packageJsonDir
যোগ করুন। 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
ng add @angular/fire
আপনার প্রতিক্রিয়া বা কৌণিক SDK তৈরি করুন
স্ট্যান্ডার্ড ওয়েব SDK-এর মতো, যেমনটি আগে বর্ণিত হয়েছে, Firebase টুলিং আপনার স্কিমা এবং ক্রিয়াকলাপগুলির উপর ভিত্তি করে SDK-এর স্বয়ংক্রিয় প্রজন্ম পরিচালনা করে।
আপনার প্রকল্পের জন্য একটি প্রতিক্রিয়া SDK তৈরি করতে, আপনার connector.yaml
কনফিগারেশন ফাইলে একটি react
কী যোগ করুন।
generate:
javascriptSdk:
react: true
outputDir: "../movies-generated"
package: "@movie-app/movies"
packageJsonDir: "../../"
generate:
javascriptSdk:
angular: 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";
// 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 '@myorg/myconnector';
// generated React hooks from SDK
import { injectListAllMovies, injectCreateMovie } from "@myorg/connector/angular";
আপনার প্রতিক্রিয়া বা কৌণিক ক্লায়েন্টে প্রশ্ন এবং মিউটেশন ব্যবহার করুন
সেটআপ সম্পূর্ণ হলে, আপনি জেনারেট করা SDK থেকে পদ্ধতিগুলিকে অন্তর্ভুক্ত করতে পারেন।
নিচের স্নিপেটে, জেনারেট করা SDK থেকে, প্রতিক্রিয়ার জন্য use
মেথড useListAllMovies
এবং Angular-এর জন্য inject
-prefixed মেথড injectListAllMovies
লক্ষ্য করুন।
জেনারেট করা SDK-তে এই ধরনের সমস্ত ক্রিয়াকলাপ, উভয় প্রশ্ন এবং মিউটেশন, কল TanStackQuery বাইন্ডিং:
- প্রশ্ন কল করুন এবং 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>
}
import { injectAllMovies, connectorConfig } from '@movies-app/movies/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 '@movies-app/movies';
import { useListAllMovies } from '@movies-app/movies/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 প্রজন্মের জন্য বিশেষ বিবেচনা
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 উত্সগুলি স্বয়ংক্রিয়ভাবে আপডেট হতে পারে।বিকল্পভাবে, যখনই .gql ফাইলগুলি পরিবর্তন করা হয় তখন আপনি SDK পুনরুদ্ধার করতে CLI ব্যবহার করতে পারেন:
firebase dataconnect:sdk:generate --watch
ইন্টিগ্রেশন এবং প্রোডাকশন রিলিজের জন্য SDK তৈরি করুন
কিছু পরিস্থিতিতে, যেমন CI পরীক্ষার জন্য জমা দেওয়ার জন্য প্রকল্পের উত্স প্রস্তুত করা, আপনি একটি ব্যাচ আপডেটের জন্য Firebase CLI-কে কল করতে পারেন।
এই ক্ষেত্রে, firebase dataconnect:sdk:generate
ব্যবহার করুন।