React ব্যবহার করে Firebase Data Connect দিয়ে শুরু করুন

এই কুইকস্টার্টে, আপনি একটি ছোট নমুনা ডাটাবেস তৈরি এবং স্থাপন করবেন এবং একটি React ফ্রন্টএন্ড থেকে এটি অ্যাক্সেস করবেন।

পূর্বশর্ত

এই কুইকস্টার্টটি সম্পূর্ণ করতে, আপনার নিম্নলিখিতগুলির প্রয়োজন হবে:

  • NPM সহ একটি Node.js পরিবেশ।
  • একটি গুগল অ্যাকাউন্ট।

টিউটোরিয়াল

টিউটোরিয়াল

১. একটি নতুন ফায়ারবেস প্রকল্প তৈরি করুন

Firebase কনসোলে একটি নতুন Firebase প্রকল্প তৈরি করে শুরু করুন। তারপর, প্রকল্পটিকে Blaze প্ল্যানে আপগ্রেড করুন।

2. আপনার প্রকল্পটি শুরু করুন

একটি নতুন ডিরেক্টরি তৈরি করুন এবং এতে একটি Firebase প্রকল্প শুরু করুন। অনুরোধ করা হলে, নিম্নলিখিত বিকল্পগুলি নির্বাচন করুন:

  • পূর্ববর্তী ধাপে আপনার তৈরি করা প্রকল্পটি নির্বাচন করুন।
  • জেমিনি দিয়ে কোনও স্কিমা তৈরি করবেন না (এই টিউটোরিয়ালে, আপনি একটি পূর্ব-নির্মিত উদাহরণ স্কিমা ব্যবহার করবেন)।
  • একটি নতুন ক্লাউড SQL ইনস্ট্যান্স তৈরি করুন।
  • একটি রিঅ্যাক্ট টেমপ্লেট তৈরি করুন।
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

৩. GraphQL সংজ্ঞার উদাহরণ পর্যালোচনা করুন।

Data Connect এ, আপনি GraphQL ব্যবহার করে আপনার সমস্ত ডাটাবেস স্কিমা এবং ক্রিয়াকলাপ সংজ্ঞায়িত করেন। যখন আপনি আপনার প্রকল্পটি শুরু করেন, তখন Firebase CLI আপনাকে শুরু করার জন্য কিছু উদাহরণ সংজ্ঞা তৈরি করে।

 dataconnect/schema/schema.gql (উদ্ধৃতি)
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
dataconnect/example/queries.gql (উদ্ধৃতাংশ) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

৪. আপনার স্কিমা এবং ক্রিয়াকলাপ স্থাপন করুন

যখনই আপনি আপনার ডাটাবেস স্কিমা, কোয়েরি বা মিউটেশনে পরিবর্তন করেন, তখন আপনার পরিবর্তনগুলি ডাটাবেসে কার্যকর করার জন্য আপনাকে অবশ্যই সেগুলি স্থাপন করতে হবে। 

npx -y firebase-tools@latest \
    deploy --only dataconnect

৫. নমুনা তথ্য সহ ডাটাবেস তৈরি করুন

এই বীজ তথ্য আপনাকে নমুনা অ্যাপটি পরীক্ষা করার সময় দেখার জন্য কিছু দেবে। মনে রাখবেন যে এই ধাপে আপনি ইচ্ছামত GraphQL কার্যকর করছেন, যা প্রশাসনিক কাজের জন্য অনুমোদিত। 

npx -y firebase-tools@latest \
    dataconnect:execute dataconnect/seed_data.gql

৬. একটি জাভাস্ক্রিপ্ট ক্লায়েন্ট SDK তৈরি করুন

এই কমান্ডটি আপনার GraphQL সংজ্ঞা ব্যবহার করে আপনার ডাটাবেসের জন্য বিশেষভাবে একটি জাভাস্ক্রিপ্ট লাইব্রেরি তৈরি করে, যাতে টাইপ সংজ্ঞা থাকে। আপনি আপনার ক্লায়েন্ট অ্যাপে এই লাইব্রেরিটি ব্যবহার করে সমস্ত ডাটাবেস ক্রিয়াকলাপ সম্পাদন করেন।

আপনি connector.yaml এ সংজ্ঞা যোগ করে একাধিক প্ল্যাটফর্মের জন্য লাইব্রেরি তৈরি করতে পারেন, যার মধ্যে রয়েছে Android এর জন্য Kotlin, iOS এর জন্য Swift এবং Flutter। 

npx -y firebase-tools@latest \
    dataconnect:sdk:generate
স্বয়ংক্রিয়ভাবে তৈরি React SDK (উদ্ধৃতাংশ) 
export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

export function useListMovies(
  options?: useDataConnectQueryOptions&<ListMoviesData>
): UseDataConnectQueryResult&<ListMoviesData, undefined>;

৭. একটি ওয়েব অ্যাপ সেট আপ করুন

আপনার Firebase প্রকল্পে একটি নতুন ওয়েব অ্যাপ যোগ করতে এই কমান্ডগুলি চালান। 

npx -y firebase-tools@latest \
    apps:create web react-example
npx -y firebase-tools@latest \
    apps:sdkconfig web -o web-app/src/firebase-config.json
cd web-app ; npm i firebase ; cd ..

৮. একটি নমুনা React ক্লায়েন্ট লিখুন

web-app/src/App.jsx এর কন্টেন্টগুলো এই সহজ React অ্যাপ দিয়ে প্রতিস্থাপন করুন।

লক্ষ্য করুন যে অ্যাপটি জেনারেটেড SDK থেকে একটি ফাংশন ব্যবহার করে প্রয়োজনীয় ডাটাবেস অ্যাক্সেস সম্পন্ন করে। React-এর জন্য জেনারেটেড SDK স্টেট ম্যানেজমেন্ট পরিচালনা করতে TanStack Query ব্যবহার করে। 

import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebase-config.json';
import {
  QueryClient,
  QueryClientProvider
} from '@tanstack/react-query';

import { useListMovies } from '@dataconnect/generated/react';
import './App.css';

const app = initializeApp(firebaseConfig);
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Movies />
    </QueryClientProvider>
  );
}

function Movies() {
  const { isLoading, data } = useListMovies();
  if (isLoading) {
    return <h1>...</h1>
  }
  return (
    <>
      {data?.movies.map(
        movie => <h1 key={movie.id}>{movie.title}</h1>
      )}
    </>
  );
}

export default App;

৯. ওয়েব অ্যাপটি ব্যবহার করে দেখুন

ডেভেলপমেন্ট সার্ভারটি চালু করুন এবং উদাহরণ অ্যাপটি কাজ করছে তা দেখুন। 

npm run dev

পরবর্তী পদক্ষেপ

ভিজ্যুয়াল স্টুডিও কোড এক্সটেনশনটি ব্যবহার করে দেখুন

Data Connect দিয়ে ডেভেলপ করার সময়, আমরা দৃঢ়ভাবে ভিজ্যুয়াল স্টুডিও কোড এক্সটেনশন ব্যবহার করার পরামর্শ দিচ্ছি। এমনকি যদি আপনি আপনার প্রাথমিক ডেভেলপমেন্ট পরিবেশ হিসেবে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার না করেন, তবুও এক্সটেনশনটি বেশ কিছু বৈশিষ্ট্য প্রদান করে যা স্কিমা এবং অপারেশন ডেভেলপমেন্টকে আরও সুবিধাজনক করে তোলে:

  • একটি GraphQL ভাষা সার্ভার, যা Data Connect জন্য নির্দিষ্ট সিনট্যাক্স চেকিং এবং স্বয়ংসম্পূর্ণ পরামর্শ প্রদান করে।
  • আপনার কোডের সাথে সামঞ্জস্যপূর্ণ কোডলেন্স বোতাম যা আপনাকে আপনার স্কিমা সংজ্ঞা ফাইল থেকে ডেটা পড়তে এবং লিখতে এবং আপনার অপারেশন সংজ্ঞা থেকে কোয়েরি এবং মিউটেশন কার্যকর করতে দেয়।
  • আপনার তৈরি করা SDK গুলিকে আপনার GraphQL সংজ্ঞার সাথে স্বয়ংক্রিয়ভাবে সিঙ্ক্রোনাইজ করুন।
  • সরলীকৃত স্থানীয় এমুলেটর সেটআপ।
  • উৎপাদনে সরলীকৃত স্থাপনা।

স্থানীয় উন্নয়নের জন্য Data Connect এমুলেটর ব্যবহার করুন

যদিও এই টিউটোরিয়ালটি আপনাকে দেখিয়েছে কিভাবে Data Connect স্কিমা এবং অপারেশন সরাসরি প্রোডাকশনে স্থাপন করতে হয়, তবুও আপনি সম্ভবত আপনার অ্যাপটি সক্রিয়ভাবে ডেভেলপ করার সময় আপনার প্রোডাকশন dstabase-এ পরিবর্তন করতে চাইবেন না। পরিবর্তে, Data Connect এমুলেটর সেট আপ করুন এবং প্রোডাকশনের পরিবর্তে এর বিপরীতে আপনার ডেভেলপমেন্টের কাজ করুন। এমুলেটরটি একটি স্থানীয় PGlite ইনস্ট্যান্স সেট আপ করে যা CloudSQL-এ একটি লাইভ Postgres ইনস্ট্যান্সের মতো আচরণ করে।

আপনার অ্যাপের জন্য স্কিমা এবং অপারেশন কীভাবে লিখতে হয় তা শিখুন।

Data Connect ব্যবহার করে অ্যাপ তৈরি করার সময়, আপনার স্কিমা এবং অপারেশনগুলির নকশা করা হল আপনার প্রথম এবং সবচেয়ে গুরুত্বপূর্ণ ডেভেলপমেন্ট কাজগুলির মধ্যে একটি যা আপনি সম্পূর্ণ করবেন।

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