React का इस्तेमाल करके, Firebase Data Connect का इस्तेमाल शुरू करना

इस क्विकस्टार्ट में, आपको एक छोटा सैंपल डेटाबेस बनाने और उसे डिप्लॉय करने का तरीका बताया जाएगा. साथ ही, इसे React फ़्रंटएंड से ऐक्सेस करने का तरीका भी बताया जाएगा.

ज़रूरी शर्तें

इस क्विकस्टार्ट को पूरा करने के लिए, आपको इनकी ज़रूरत होगी:

  • NPM के साथ Node.js एनवायरमेंट.
  • Google खाता.

ट्यूटोरियल

ट्यूटोरियल

1. नया Firebase प्रोजेक्ट बनाना

इसके लिए, सबसे पहले Firebase कंसोल में एक नया Firebase प्रोजेक्ट बनाएं. इसके बाद, प्रोजेक्ट को Blaze प्लान पर अपग्रेड करें.

2. प्रोजेक्ट शुरू करना

नई डायरेक्ट्री बनाएं और उसमें Firebase प्रोजेक्ट शुरू करें. जब आपसे पूछा जाए, तो यहां दिए गए विकल्प चुनें:

  • पिछले चरण में बनाया गया प्रोजेक्ट चुनें.
  • Gemini की मदद से स्कीमा न बनाएं. इस ट्यूटोरियल में, पहले से बने उदाहरण वाले स्कीमा का इस्तेमाल किया जाएगा.
  • नया Cloud SQL इंस्टेंस बनाएं.
  • React टेंप्लेट बनाएं.
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. GraphQL की परिभाषाओं का उदाहरण देखना

Data Connect में, GraphQL का इस्तेमाल करके अपने सभी डेटाबेस स्कीमा और ऑपरेशन तय किए जाते हैं. प्रोजेक्ट शुरू करते समय, Firebase CLI ने कुछ उदाहरण परिभाषाएं बनाई थीं, ताकि आप शुरू कर सकें.

 dataconnect/schema/schema.gql (excerpt) 
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 (excerpt) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

4. अपने स्कीमा और कार्रवाइयां डिप्लॉय करना

जब भी अपने डेटाबेस स्कीमा, क्वेरी या म्यूटेशन में बदलाव किए जाते हैं, तो आपको उन्हें डिप्लॉय करना होगा. ऐसा करने पर ही, डेटाबेस पर बदलाव लागू होंगे.

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

5. डेटाबेस में सैंपल डेटा डालना

इस सीड डेटा से, आपको सैंपल ऐप्लिकेशन की जांच करते समय कुछ डेटा दिखेगा. ध्यान दें कि इस चरण में, आपको मनमुताबिक GraphQL को लागू करना होगा. ऐसा एडमिन से जुड़े कामों के लिए किया जा सकता है.

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

6. JavaScript क्लाइंट SDK जनरेट करना

यह कमांड, आपकी GraphQL परिभाषाओं का इस्तेमाल करके JavaScript लाइब्रेरी जनरेट करती है. यह लाइब्रेरी खास तौर पर आपके डेटाबेस के लिए होती है और इसमें टाइप की परिभाषाएं भी शामिल होती हैं. इस लाइब्रेरी का इस्तेमाल, क्लाइंट ऐप्लिकेशन में सभी डेटाबेस ऑपरेशन करने के लिए किया जाता है.

connector.yaml में परिभाषाएं जोड़कर, कई प्लैटफ़ॉर्म के लिए लाइब्रेरी जनरेट की जा सकती हैं. इनमें Android के लिए Kotlin, iOS के लिए Swift, और Flutter शामिल हैं.

 
npx -y firebase-tools@latest \
    dataconnect:sdk:generate
 अपने-आप जनरेट हुआ React SDK (excerpt) 
export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

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

7. वेब ऐप्लिकेशन सेट अप करना

अपने 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 ..

8. React क्लाइंट का सैंपल लिखना

web-app/src/App.jsx के कॉन्टेंट को इस आसान React ऐप्लिकेशन से बदलें.

ध्यान दें कि ऐप्लिकेशन, जनरेट किए गए एसडीके टूल के फ़ंक्शन का इस्तेमाल करके, ज़रूरी डेटाबेस ऐक्सेस करता है. 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;

9. वेब ऐप्लिकेशन आज़माएँ

उदाहरण ऐप्लिकेशन को काम करते हुए देखने के लिए, डेवलपमेंट सर्वर शुरू करें.

 
npm run dev

अगले चरण

Visual Studio Code एक्सटेंशन आज़माएं

Data Connect का इस्तेमाल करके डेवलपमेंट करते समय, हमारा सुझाव है कि आप Visual Studio Code एक्सटेंशन का इस्तेमाल करें. अगर आपने Visual Studio Code को अपने प्राइमरी डेवलपमेंट एनवायरमेंट के तौर पर इस्तेमाल नहीं किया है, तो भी एक्सटेंशन कई ऐसी सुविधाएं देता है जिनसे स्कीमा और ऑपरेशन डेवलपमेंट को ज़्यादा आसानी से किया जा सकता है:

  • GraphQL लैंग्वेज सर्वर, जो Data Connect के लिए सिंटैक्स की जांच करने और ऑटोकंप्लीट के सुझाव देने की सुविधा देता है
  • आपके कोड की लाइन में CodeLens बटन होते हैं. इनकी मदद से, स्कीमा की परिभाषा वाली फ़ाइलों से डेटा पढ़ा और लिखा जा सकता है. साथ ही, ऑपरेशन की परिभाषाओं से क्वेरी और म्यूटेशन किए जा सकते हैं.
  • जनरेट किए गए एसडीके को GraphQL की परिभाषाओं के साथ अपने-आप सिंक करके रखें.
  • लोकल एम्युलेटर को आसानी से सेट अप किया जा सकता है.
  • आसानी से प्रोडक्शन में डिप्लॉय करने की सुविधा.

लोकल डेवलपमेंट के लिए, Data Connect एम्युलेटर का इस्तेमाल करना

इस ट्यूटोरियल में, Data Connect स्कीमा और कार्रवाइयों को सीधे तौर पर प्रोडक्शन में डिप्लॉय करने का तरीका बताया गया है. हालांकि, ऐप्लिकेशन डेवलप करते समय, आपको प्रोडक्शन डेटाबेस में बदलाव नहीं करने चाहिए. इसके बजाय, Data Connect एम्युलेटर सेट अप करें और प्रोडक्शन के बजाय, इस पर डेवलपमेंट का काम करें. यह एम्युलेटर, लोकल PGlite इंस्टेंस सेट अप करता है. यह CloudSQL पर मौजूद लाइव Postgres इंस्टेंस की तरह काम करता है.

अपने ऐप्लिकेशन के लिए स्कीमा और कार्रवाइयां लिखने का तरीका जानें

Data Connect की मदद से ऐप्लिकेशन डेवलप करते समय, आपको सबसे पहले अपने स्कीमा और कार्रवाइयों का डिज़ाइन तैयार करना होगा. यह डेवलपमेंट का सबसे अहम टास्क होता है.

  • Firebase कंसोल में Gemini एक एआई टूल है. यह आपके ऐप्लिकेशन के बारे में सामान्य भाषा में दी गई जानकारी से Data Connect स्कीमा जनरेट कर सकता है. यह टूल, आपको बहुत जल्दी शुरू करने में मदद कर सकता है. खास तौर पर, अगर आपने पहले कभी रिलेशनल डेटाबेस के साथ काम नहीं किया है.
  • इसके अलावा, GraphQL का इस्तेमाल करके सीधे तौर पर डेटाबेस स्कीमा, क्वेरी, और म्यूटेशन लिखे जा सकते हैं. डिज़ाइन Data Connect स्कीमा पेज से शुरू करें. इसके बाद, फ़ॉलो-अप पेजों पर जाकर, लिखने की कार्रवाइयां करने का तरीका जानें.