React ব্যবহার করে Firebase SQL 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

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

SQL Connect VS Code এক্সটেনশনটি ব্যবহার করে দেখুন

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

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

স্থানীয় ডেভেলপমেন্টের জন্য SQL Connect এমুলেটর ব্যবহার করুন

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

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

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

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