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

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

পূর্বশর্ত

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

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

টিউটোরিয়াল

mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

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

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

npx -y firebase-tools@latest dataconnect:sdk:generate

export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

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

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 \
            @tanstack/react-query \
            @tanstack-query-firebase/react

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 VS Code এক্সটেনশনটি ব্যবহার করে দেখুন

Data Connect ব্যবহার করে ডেভেলপ করার সময়, আমরা Data Connect VS Code এক্সটেনশনটি ব্যবহার করার জন্য জোরালোভাবে সুপারিশ করি। এমনকি যদি আপনি আপনার প্রধান ডেভেলপমেন্ট এনভায়রনমেন্ট হিসেবে Visual Studio Code ব্যবহার নাও করেন, তবুও এই এক্সটেনশনটি এমন কিছু ফিচার প্রদান করে যা স্কিমা এবং অপারেশন ডেভেলপমেন্টকে আরও সুবিধাজনক করে তোলে:

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

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

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

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

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

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