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

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

পূর্বশর্ত

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

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

টিউটোরিয়াল

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 ; cd ..

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 স্কিমা পৃষ্ঠা দিয়ে শুরু করুন এবং অপারেশনগুলি কীভাবে লিখতে হয় তা শিখতে ফলো-আপ পৃষ্ঠাগুলিতে যান।