Firebase Data Connect की मदद से बनाना

1. शुरू करने से पहले

इस कोडलैब में, आपको मूवी की समीक्षा करने वाला वेब ऐप्लिकेशन बनाने के लिए, Firebase Data Connect को Cloud SQL डेटाबेस के साथ इंटिग्रेट करना होगा. इस ऐप्लिकेशन से पता चलता है कि Firebase Data Connect, SQL के साथ काम करने वाले ऐप्लिकेशन बनाने की प्रोसेस को कैसे आसान बनाता है. इसमें ये सुविधाएं शामिल हैं:

• पुष्टि करना: अपने ऐप्लिकेशन की क्वेरी और म्यूटेशन के लिए, कस्टम पुष्टि करने की सुविधा लागू करें. इससे यह पक्का किया जा सकेगा कि सिर्फ़ अनुमति वाले उपयोगकर्ता आपके डेटा के साथ इंटरैक्ट कर सकें.
• GraphQL स्कीमा: फ़िल्म की समीक्षा करने वाले वेब ऐप्लिकेशन की ज़रूरतों के हिसाब से बनाए गए, आसानी से इस्तेमाल किए जा सकने वाले GraphQL स्कीमा का इस्तेमाल करके, अपने डेटा स्ट्रक्चर बनाएं और मैनेज करें.
• SQL क्वेरी और म्यूटेशन: GraphQL की मदद से क्वेरी और म्यूटेशन का इस्तेमाल करके, Cloud SQL में डेटा को वापस पाएं, अपडेट करें, और मैनेज करें.
• स्ट्रिंग के कुछ हिस्से से मैच करने वाली बेहतर खोज: टाइटल, ब्यौरा या टैग जैसे फ़ील्ड के आधार पर फ़िल्में ढूंढने के लिए, फ़िल्टर और खोज के विकल्पों का इस्तेमाल करें.
• (ज़रूरी नहीं) वेक्टर सर्च इंटिग्रेशन: Firebase Data Connect की वेक्टर सर्च का इस्तेमाल करके, कॉन्टेंट खोजने की सुविधा जोड़ें. इससे, उपयोगकर्ता को इनपुट और प्राथमिकताओं के आधार पर बेहतर अनुभव मिलता है.

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

इसके लिए, आपके पास JavaScript की बुनियादी जानकारी होनी चाहिए.

आपको इनके बारे में जानकारी मिलेगी

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

आपको इन चीज़ों की ज़रूरत होगी

• Git
• Visual Studio Code
• nvm-windows (Windows) या nvm (macOS/Linux) का इस्तेमाल करके, Node.js इंस्टॉल करना
• अगर आपने अभी तक Firebase प्रोजेक्ट नहीं बनाया है, तो Firebase कंसोल में जाकर एक प्रोजेक्ट बनाएं
• (ज़रूरी नहीं) वेक्टर सर्च के लिए, अपने प्रोजेक्ट को 'इस्तेमाल के हिसाब से पैसे चुकाएं' वाले ब्लेज़ प्लान पर अपग्रेड करें

2. डेवलपमेंट एनवायरमेंट सेट अप करना

कोडलैब के इस चरण में, आपको Firebase Data Connect का इस्तेमाल करके, मूवी की समीक्षा करने वाला ऐप्लिकेशन बनाने के लिए, एनवायरमेंट सेट अप करने के बारे में बताया जाएगा.

1. प्रोजेक्ट रिपॉज़िटरी का क्लोन बनाएं और ज़रूरी डिपेंडेंसी इंस्टॉल करें:

   git clone https://github.com/firebaseextended/codelab-dataconnect-web
   cd codelab-dataconnect-web
   cd ./app && npm i
   npm run dev
   

2. इन निर्देशों को चलाने के बाद, अपने ब्राउज़र में http://localhost:5173 खोलें. इससे, आपको वेब ऐप्लिकेशन स्थानीय तौर पर चलता हुआ दिखेगा. यह फ़िल्म की समीक्षा करने वाला ऐप्लिकेशन बनाने और उसकी सुविधाओं के साथ इंटरैक्ट करने के लिए, आपके फ़्रंट एंड के तौर पर काम करता है.
3. Visual Studio Code का इस्तेमाल करके, क्लोन किए गए codelab-dataconnect-web फ़ोल्डर को खोलें. यहां आपको अपना स्कीमा तय करना होगा, क्वेरी लिखनी होंगी, और ऐप्लिकेशन की मुख्य सुविधाओं की जांच करनी होगी.
4. Data Connect की सुविधाओं का इस्तेमाल करने के लिए, Firebase Data Connect Visual Studio एक्सटेंशन इंस्टॉल करें.
   इसके अलावा, Visual Studio Code Marketplace से भी एक्सटेंशन इंस्टॉल किया जा सकता है या VS Code में जाकर उसे खोजा जा सकता है.
5. Firebase कंसोल में कोई नया Firebase प्रोजेक्ट खोलें या बनाएं.
6. अपने Firebase प्रोजेक्ट को Firebase Data Connect VSCode एक्सटेंशन से कनेक्ट करें. एक्सटेंशन में, ये काम करें:
   1. साइन इन करें बटन पर क्लिक करें.
   2. Firebase प्रोजेक्ट कनेक्ट करें पर क्लिक करें और अपना Firebase प्रोजेक्ट चुनें.
   
7. Firebase Data Connect VS Code एक्सटेंशन का इस्तेमाल करके, Firebase एमुलेटर शुरू करें:
   एमुलेटर शुरू करें पर क्लिक करें. इसके बाद, पक्का करें कि एमुलेटर टर्मिनल में चल रहे हों.

3. स्टार्टर कोडबेस की समीक्षा करना

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

फ़ोल्डर और फ़ाइल का स्ट्रक्चर

यहां दिए गए सब-सेक्शन में, ऐप्लिकेशन के फ़ोल्डर और फ़ाइल स्ट्रक्चर की खास जानकारी दी गई है.

dataconnect/ डायरेक्ट्री

इसमें Firebase Data Connect कॉन्फ़िगरेशन, कनेक्टर (जो क्वेरी और म्यूटेशन तय करते हैं), और स्कीमा फ़ाइलें शामिल होती हैं.

• schema/schema.gql: GraphQL स्कीमा तय करता है
• connector/queries.gql: आपके ऐप्लिकेशन में ज़रूरी क्वेरी
• connector/mutations.gql: आपके ऐप्लिकेशन में बदलाव करने की ज़रूरत है
• connector/connector.yaml: SDK टूल जनरेट करने के लिए कॉन्फ़िगरेशन फ़ाइल

app/src/ डायरेक्ट्री

इसमें ऐप्लिकेशन लॉजिक और Firebase Data Connect के साथ इंटरैक्शन शामिल होता है.

• firebase.ts: आपके Firebase प्रोजेक्ट में मौजूद Firebase ऐप्लिकेशन से कनेक्ट करने के लिए कॉन्फ़िगरेशन.
• lib/dataconnect-sdk/: इसमें जनरेट किया गया SDK टूल शामिल होता है. connector/connector.yaml फ़ाइल में, एसडीके टूल जनरेट करने की जगह में बदलाव किया जा सकता है. साथ ही, जब भी कोई क्वेरी या म्यूटेशन तय किया जाएगा, तब एसडीके टूल अपने-आप जनरेट हो जाएंगे.

4. फ़िल्म की समीक्षाओं के लिए स्कीमा तय करना

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

मुख्य इकाइयां और उनके बीच के संबंध

Movie टाइप में, टाइटल, शैली, और टैग जैसी अहम जानकारी होती है. इसका इस्तेमाल, ऐप्लिकेशन खोजने और मूवी प्रोफ़ाइलों के लिए करता है. User टाइप, उपयोगकर्ता के इंटरैक्शन को ट्रैक करता है. जैसे, समीक्षाएं और पसंदीदा आइटम. Reviews उपयोगकर्ताओं को फ़िल्मों से जोड़ें. इससे ऐप्लिकेशन, उपयोगकर्ताओं की दी गई रेटिंग और सुझाव/शिकायत/राय दिखा सकता है.

फ़िल्मों, कलाकारों, और उपयोगकर्ताओं के बीच के संबंधों की वजह से, ऐप्लिकेशन ज़्यादा डाइनैमिक बन जाता है. MovieActor जॉइन टेबल की मदद से, कास्ट की जानकारी और कलाकार की फ़िल्मोग्राफ़ी दिखाई जा सकती है. FavoriteMovie टाइप की मदद से, उपयोगकर्ता अपनी पसंदीदा फ़िल्में जोड़ सकते हैं. इससे, ऐप्लिकेशन उपयोगकर्ताओं के हिसाब से पसंदीदा फ़िल्मों की सूची दिखा सकता है और लोकप्रिय फ़िल्मों को हाइलाइट कर सकता है.

Movie टेबल सेट अप करना

Movie टाइप, फ़िल्म इकाई के मुख्य स्ट्रक्चर के बारे में बताता है. इसमें title, genre, releaseYear, और rating जैसे फ़ील्ड शामिल होते हैं.

कोड स्निपेट को dataconnect/schema/schema.gql फ़ाइल में कॉपी करके चिपकाएं:

type Movie
  @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  releaseYear: Int
  genre: String
  rating: Float
  description: String
  tags: [String]
}

खास बातें:

• id: हर फ़िल्म के लिए एक यूनीक यूयूआईडी, जिसे @default(expr: "uuidV4()") का इस्तेमाल करके जनरेट किया जाता है.

MovieMetadata टेबल सेट अप करना

MovieMetadata टाइप, Movie टाइप के साथ एक-से-एक रिलेशनशिप बनाता है. इसमें ज़्यादा जानकारी शामिल होती है, जैसे कि फ़िल्म का निर्देशक.

कोड स्निपेट को dataconnect/schema/schema.gql फ़ाइल में कॉपी करके चिपकाएं:

type MovieMetadata
  @table {
  # @ref creates a field in the current table (MovieMetadata)
  # It is a reference that holds the primary key of the referenced type
  # In this case, @ref(fields: "movieId", references: "id") is implied
  movie: Movie! @ref
  # movieId: UUID <- this is created by the above @ref
  director: String
}

खास बातें:

• फ़िल्म! @ref: यह Movie टाइप का रेफ़रंस देता है, जिससे फ़ॉरेन-की रिलेशनशिप बनती है.

Actor टेबल सेट अप करना

कोड स्निपेट को dataconnect/schema/schema.gql फ़ाइल में कॉपी करके चिपकाएं:

type Actor @table {
  id: UUID!
  imageUrl: String!
  name: String! @col(name: "name", dataType: "varchar(30)")
}

Actor टाइप, फ़िल्म डेटाबेस में किसी कलाकार को दिखाता है. यहां हर कलाकार कई फ़िल्मों का हिस्सा हो सकता है, जिससे कई-से-कई संबंध बनता है.

MovieActor टेबल सेट अप करना

कोड स्निपेट को dataconnect/schema/schema.gql फ़ाइल में कॉपी करके चिपकाएं:

type MovieActor @table(key: ["movie", "actor"]) {
  # @ref creates a field in the current table (MovieActor) that holds the primary key of the referenced type
  # In this case, @ref(fields: "id") is implied
  movie: Movie!
  # movieId: UUID! <- this is created by the implied @ref, see: implicit.gql

  actor: Actor!
  # actorId: UUID! <- this is created by the implied  @ref, see: implicit.gql

  role: String! # "main" or "supporting"
}

खास बातें:

• movie: मूवी टाइप का रेफ़रंस देता है. साथ ही, फ़ॉरेन की movieId: UUID! जनरेट करता है.
• actor: यह एक्टर टाइप का रेफ़रंस देता है. साथ ही, यह फ़ॉरेन की actorId: UUID! जनरेट करता है.
• role: इससे पता चलता है कि फ़िल्म में अभिनेता की भूमिका क्या है (उदाहरण के लिए, "main" या "supporting").

User टेबल सेट अप करना

User टाइप, उपयोगकर्ता इकाई की जानकारी देता है. यह इकाई, समीक्षाएं देकर या मूवी को पसंदीदा के तौर पर जोड़कर, मूवी के साथ इंटरैक्ट करती है.

कोड स्निपेट को dataconnect/schema/schema.gql फ़ाइल में कॉपी करके चिपकाएं:

type User
  @table {
  id: String! @col(name: "auth_uid")
  username: String! @col(dataType: "varchar(50)")
  # The following are generated from the @ref in the Review table
  # reviews_on_user
  # movies_via_Review
}

FavoriteMovie टेबल सेट अप करना

FavoriteMovie टाइप एक जॉइन टेबल है, जो उपयोगकर्ताओं और उनकी पसंदीदा फ़िल्मों के बीच कई-से-कई रिलेशनशिप को मैनेज करती है. हर टेबल, User को Movie से लिंक करती है.

कोड स्निपेट को dataconnect/schema/schema.gql फ़ाइल में कॉपी करके चिपकाएं:

type FavoriteMovie
  @table(name: "FavoriteMovies", singular: "favorite_movie", plural: "favorite_movies", key: ["user", "movie"]) {
  # @ref is implicit
  user: User!
  movie: Movie!
}

खास बातें:

• movie: यह फ़िल्म के टाइप का रेफ़रंस देता है. साथ ही, यह फ़ॉरेन की movieId: UUID! को अपने-आप जनरेट करता है.
• user: उपयोगकर्ता टाइप का रेफ़रंस देता है. साथ ही, फ़ॉरेन की userId: UUID! को अपने-आप जनरेट करता है.

Review टेबल सेट अप करना

Review टाइप, समीक्षा इकाई को दिखाता है और User और Movie टाइप को कई-से-कई संबंध में जोड़ता है. इसका मतलब है कि एक उपयोगकर्ता कई समीक्षाएं कर सकता है और हर फ़िल्म के लिए कई समीक्षाएं की जा सकती हैं.

कोड स्निपेट को dataconnect/schema/schema.gql फ़ाइल में कॉपी करके चिपकाएं:

type Review @table(name: "Reviews", key: ["movie", "user"]) {
  id: UUID! @default(expr: "uuidV4()")
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

खास बातें:

• user: इससे उस उपयोगकर्ता का रेफ़रंस मिलता है जिसने समीक्षा की है.
• movie: इससे उस फ़िल्म का रेफ़रंस मिलता है जिसकी समीक्षा की जा रही है.
• reviewDate: @default(expr: "request.time") का इस्तेमाल करके, समीक्षा बनाने के समय पर अपने-आप सेट हो जाता है.

अपने-आप जनरेट होने वाले फ़ील्ड और डिफ़ॉल्ट वैल्यू

स्कीमा, यूनीक आईडी और टाइमस्टैंप अपने-आप जनरेट करने के लिए, @default(expr: "uuidV4()") जैसे एक्सप्रेशन का इस्तेमाल करता है. उदाहरण के लिए, नया रिकॉर्ड बनाने पर, Movie और Review टाइप के id फ़ील्ड में यूयूआईडी अपने-आप भर जाता है.

स्कीमा तय हो जाने के बाद, आपके मूवी ऐप्लिकेशन के डेटा स्ट्रक्चर और रिलेशनशिप के लिए एक बेहतरीन फ़ाउंडेशन तैयार हो गया है!

5. सबसे लोकप्रिय और नई फ़िल्में देखना

इस सेक्शन में, आपको लोकल एमुलेटर में फ़िल्म का मॉक डेटा डालना होगा. इसके बाद, वेब ऐप्लिकेशन में इन कनेक्टर को कॉल करने के लिए, कनेक्टर (क्वेरी) और TypeScript कोड लागू करना होगा. आखिर में, आपका ऐप्लिकेशन सीधे डेटाबेस से, सबसे ज़्यादा रेटिंग वाली और नई फ़िल्में डाइनैमिक तौर पर फ़ेच और दिखा पाएगा.

मॉक मूवी, कलाकार, और समीक्षा का डेटा डालना

1. VSCode में, खोलें dataconnect/moviedata_insert.gql को चुनें. पक्का करें कि Firebase Data Connect एक्सटेंशन में, एमुलेटर चल रहे हों.
2. आपको फ़ाइल में सबसे ऊपर, चालू करें (लोकल) बटन दिखेगा. अपने डेटाबेस में, मूवी का मॉक डेटा डालने के लिए इस पर क्लिक करें.
   
3. डेटा कनेक्ट एक्सीक्यूशन टर्मिनल देखकर पुष्टि करें कि डेटा जोड़ दिया गया है.
   

कनेक्टर लागू करना

1. dataconnect/movie-connector/queries.gql खोलें. आपको टिप्पणियों में एक बुनियादी ListMovies क्वेरी दिखेगी:

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

   यह क्वेरी सभी फ़िल्मों और उनकी जानकारी (जैसे, id, title, releaseYear) को फ़ेच करती है. हालांकि, यह फ़िल्मों को क्रम से नहीं लगाती.
2. क्रम से लगाने और सीमित करने के विकल्प जोड़ने के लिए, मौजूदा ListMovies क्वेरी को नीचे दी गई क्वेरी से बदलें:

   # List subset of fields for movies
   query ListMovies($orderByRating: OrderDirection, $orderByReleaseYear: OrderDirection, $limit: Int) @auth(level: PUBLIC) {
     movies(
       orderBy: [
         { rating: $orderByRating },
         { releaseYear: $orderByReleaseYear }
       ]
       limit: $limit
     ) {
       id
       title
       imageUrl
       releaseYear
       genre
       rating
       tags
       description
     }
   }
   

3. अपने स्थानीय डेटाबेस के लिए क्वेरी चलाने के लिए, चलाएं (स्थानीय) बटन पर क्लिक करें. क्वेरी चलाने से पहले, कॉन्फ़िगरेशन पैनल में क्वेरी वैरिएबल भी डाले जा सकते हैं.
   

खास बातें:

• movies(): डेटाबेस से मूवी का डेटा फ़ेच करने के लिए, GraphQL क्वेरी फ़ील्ड.
• orderByRating: रेटिंग के हिसाब से (बढ़ते/घटते क्रम में) फ़िल्मों को क्रम से लगाने के लिए पैरामीटर.
• orderByReleaseYear: रिलीज़ के साल के हिसाब से (बढ़ते/घटते क्रम में) फ़िल्मों को क्रम से लगाने के लिए पैरामीटर.
• limit: इससे, एक बार में लौटाई जा सकने वाली फ़िल्मों की संख्या पर पाबंदी लगती है.

वेब ऐप्लिकेशन में क्वेरी इंटिग्रेट करना

कोडलैब के इस सेक्शन में, आपको अपने वेब ऐप्लिकेशन में पिछले सेक्शन में बताई गई क्वेरी का इस्तेमाल करना होगा. Firebase Data Connect के एमुलेटर, .gql फ़ाइलों (खास तौर पर, schema.gql, queries.gql, mutations.gql) और connector.yaml फ़ाइल में मौजूद जानकारी के आधार पर SDK टूल जनरेट करते हैं. इन SDK को सीधे आपके ऐप्लिकेशन में कॉल किया जा सकता है.

1. MovieService (app/src/lib/MovieService.tsx) में, सबसे ऊपर मौजूद इंपोर्ट स्टेटमेंट से टिप्पणी हटाएं:

   import { listMovies, ListMoviesData, OrderDirection } from "@movie/dataconnect";
   

   फ़ंक्शन listMovies, रिस्पॉन्स टाइप ListMoviesData, और एनम OrderDirection, ये सभी SDK टूल हैं. इन्हें Firebase Data Connect के एमुलेटर जनरेट करते हैं. ये एमुलेटर, आपके तय किए गए स्कीमा और क्वेरी के आधार पर काम करते हैं.
2. handleGetTopMovies और handleGetLatestMovies फ़ंक्शन को इस कोड से बदलें:

   // Fetch top-rated movies
   export const handleGetTopMovies = async (
     limit: number
   ): Promise<ListMoviesData["movies"] | null> => {
     try {
       const response = await listMovies({
         orderByRating: OrderDirection.DESC,
         limit,
       });
       return response.data.movies;
     } catch (error) {
       console.error("Error fetching top movies:", error);
       return null;
     }
   };
   
   // Fetch latest movies
   export const handleGetLatestMovies = async (
     limit: number
   ): Promise<ListMoviesData["movies"] | null> => {
     try {
       const response = await listMovies({
         orderByReleaseYear: OrderDirection.DESC,
         limit,
       });
       return response.data.movies;
     } catch (error) {
       console.error("Error fetching latest movies:", error);
       return null;
     }
   };
   

खास बातें:

• listMovies: अपने-आप जनरेट होने वाला फ़ंक्शन, जो listMovies क्वेरी को कॉल करता है, ताकि फ़िल्मों की सूची वापस लाई जा सके. इसमें रेटिंग या रिलीज़ के साल के हिसाब से क्रम से लगाने और नतीजों की संख्या को सीमित करने के विकल्प शामिल हैं.
• ListMoviesData: नतीजे का टाइप, जिसका इस्तेमाल ऐप्लिकेशन के होम पेज पर 10 सबसे लोकप्रिय और नई फ़िल्में दिखाने के लिए किया जाता है.

इसे इस्तेमाल करने का तरीका देखें

क्वेरी को काम करते हुए देखने के लिए, अपना वेब ऐप्लिकेशन फिर से लोड करें. होम पेज पर अब फ़िल्मों की सूची डाइनैमिक तौर पर दिखती है. यह सूची, सीधे आपके लोकल डेटाबेस से फ़ेच की जाती है. आपको सबसे ज़्यादा रेटिंग वाली और नई फ़िल्में आसानी से दिखेंगी. इनमें वह डेटा दिखेगा जिसे आपने अभी सेट अप किया है.

6. फ़िल्म और कलाकार की जानकारी दिखाना

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

कनेक्टर लागू करना

1. अपने प्रोजेक्ट में dataconnect/movie-connector/queries.gql खोलें .
2. फ़िल्म और कलाकार की जानकारी पाने के लिए, ये क्वेरी जोड़ें:

   # Get movie by id
   query GetMovieById($id: UUID!) @auth(level: PUBLIC) {
   movie(id: $id) {
       id
       title
       imageUrl
       releaseYear
       genre
       rating
       description
       tags
       metadata: movieMetadatas_on_movie {
         director
       }
       mainActors: actors_via_MovieActor(where: { role: { eq: "main" } }) {
         id
         name
         imageUrl
       }
       supportingActors: actors_via_MovieActor(
         where: { role: { eq: "supporting" } }
       ) {
         id
         name
         imageUrl
       }
       reviews: reviews_on_movie {
         id
         reviewText
         reviewDate
         rating
         user {
           id
           username
         }
       }
     }
   }
   
   # Get actor by id
   query GetActorById($id: UUID!) @auth(level: PUBLIC) {
     actor(id: $id) {
       id
       name
       imageUrl
       mainActors: movies_via_MovieActor(where: { role: { eq: "main" } }) {
         id
         title
         genre
         tags
         imageUrl
       }
       supportingActors: movies_via_MovieActor(
         where: { role: { eq: "supporting" } }
       ) {
         id
         title
         genre
         tags
         imageUrl
       }
     }
   }
   

3. अपने बदलाव सेव करें और क्वेरी की समीक्षा करें.

खास बातें:

• movie()/actor(): Movies या Actors टेबल से किसी एक फ़िल्म या कलाकार को फ़ेच करने के लिए, GraphQL क्वेरी फ़ील्ड.
• _on_: इससे, फ़ॉरेन-की रिलेशनशिप वाले असोसिएटेड टाइप के फ़ील्ड को सीधे ऐक्सेस किया जा सकता है. उदाहरण के लिए, reviews_on_movie किसी खास फ़िल्म से जुड़ी सभी समीक्षाएं फ़ेच करता है.
• _via_: जॉइन टेबल की मदद से, कई-से-कई रिलेशनशिप पर जाने के लिए इस्तेमाल किया जाता है. उदाहरण के लिए, actors_via_MovieActor, MovieActor जॉइन टेबल की मदद से Actor टाइप को ऐक्सेस करता है. साथ ही, where शर्त, कलाकारों को उनकी भूमिका (उदाहरण के लिए, "मुख्य" या "सहायक") के आधार पर फ़िल्टर करती है.

नकली डेटा डालकर क्वेरी की जांच करना

1. Data Connect के 'एक्सीक्यूशन पैनल' में, नकली आईडी डालकर क्वेरी की जांच की जा सकती है. जैसे:

   {"id": "550e8400-e29b-41d4-a716-446655440000"}
   

2. "क्वांटम पैराडॉक्स" (यह एक मॉक मूवी है, जिसका ऊपर दिया गया आईडी है) के बारे में जानकारी पाने के लिए, GetMovieById के लिए रन (लोकल) पर क्लिक करें.

वेब ऐप्लिकेशन में क्वेरी इंटिग्रेट करना

1. MovieService (app/src/lib/MovieService.tsx) में, इन इंपोर्ट से टिप्पणी हटाएं:

   import { getMovieById, GetMovieByIdData } from "@movie/dataconnect";
   import { GetActorByIdData, getActorById } from "@movie/dataconnect";
   

2. handleGetMovieById और handleGetActorById फ़ंक्शन को इस कोड से बदलें:

   // Fetch movie details by ID
   export const handleGetMovieById = async (
     movieId: string
   ) => {
     try {
       const response = await getMovieById({ id: movieId });
       if (response.data.movie) {
         return response.data.movie;
       }
       return null;
     } catch (error) {
       console.error("Error fetching movie:", error);
       return null;
     }
   };
   
   // Calling generated SDK for GetActorById
   export const handleGetActorById = async (
     actorId: string
   ): Promise<GetActorByIdData["actor"] | null> => {
     try {
       const response = await getActorById({ id: actorId });
       if (response.data.actor) {
         return response.data.actor;
       }
       return null;
     } catch (error) {
       console.error("Error fetching actor:", error);
       return null;
     }
   };
   

खास बातें:

• getMovieById / getActorById: ये अपने-आप जनरेट होने वाले फ़ंक्शन हैं. ये आपकी तय की गई क्वेरी को कॉल करते हैं और किसी खास फ़िल्म या कलाकार के बारे में पूरी जानकारी हासिल करते हैं.
• GetMovieByIdData / GetActorByIdData: ये नतीजों के टाइप हैं. इनका इस्तेमाल, ऐप्लिकेशन में फ़िल्म और कलाकार की जानकारी दिखाने के लिए किया जाता है.

इसे इस्तेमाल करने का तरीका देखें

अब, अपने वेब ऐप्लिकेशन के होम पेज पर जाएं. किसी फ़िल्म पर क्लिक करने पर, आपको उसकी पूरी जानकारी दिखेगी. इसमें फ़िल्म में काम करने वाले कलाकारों और समीक्षाओं की जानकारी शामिल होगी. यह जानकारी, मिलती-जुलती टेबल से ली जाती है. इसी तरह, किसी कलाकार पर क्लिक करने से, वे फ़िल्में दिखेंगी जिनमें उन्होंने काम किया है.

7. उपयोगकर्ता की पुष्टि करना

इस सेक्शन में, आपको Firebase Authentication का इस्तेमाल करके, उपयोगकर्ता के साइन इन और साइन आउट करने की सुविधा लागू करनी होगी. Firebase Authentication के डेटा का इस्तेमाल, Firebase DataConnect में उपयोगकर्ता का डेटा सीधे तौर पर पाने या अपडेट करने के लिए भी किया जाएगा. इससे, आपके ऐप्लिकेशन में उपयोगकर्ता को सुरक्षित तरीके से मैनेज किया जा सकेगा.

कनेक्टर लागू करना

1. dataconnect/movie-connector/ में mutations.gql को खोलें .
2. पुष्टि किए गए मौजूदा उपयोगकर्ता को बनाने या अपडेट करने के लिए, यह म्यूटेशन जोड़ें:

   # Create or update the current authenticated user
   mutation UpsertUser($username: String!) @auth(level: USER) {
     user_upsert(
       data: {
         id_expr: "auth.uid"
         username: $username
       }
     )
   }
   

खास बातें:

• id_expr: "auth.uid": इसमें auth.uid का इस्तेमाल किया जाता है. यह सीधे Firebase Authentication से मिलता है, न कि उपयोगकर्ता या ऐप्लिकेशन से. इससे सुरक्षा की एक और लेयर जुड़ जाती है. इससे यह पक्का होता है कि उपयोगकर्ता आईडी को सुरक्षित और अपने-आप मैनेज किया जाता है.

मौजूदा उपयोगकर्ता की जानकारी फ़ेच करना

1. dataconnect/movie-connector/ में queries.gql को खोलें .
2. मौजूदा उपयोगकर्ता को फ़ेच करने के लिए, यह क्वेरी जोड़ें:

   # Get user by ID
   query GetCurrentUser @auth(level: USER) {
     user(key: { id_expr: "auth.uid" }) {
       id
       username
       reviews: reviews_on_user {
         id
         rating
         reviewDate
         reviewText
         movie {
           id
           title
         }
       }
       favoriteMovies: favorite_movies_on_user {
         movie {
           id
           title
           genre
           imageUrl
           releaseYear
           rating
           description
           tags
           metadata: movieMetadatas_on_movie {
             director
           }
         }
       }
     }
   }
   

खास बातें:

• auth.uid: इसे सीधे Firebase Authentication से वापस पाया जाता है. इससे, उपयोगकर्ता के डेटा को सुरक्षित तरीके से ऐक्सेस करने की सुविधा मिलती है.
• _on_ फ़ील्ड: ये फ़ील्ड, जॉइन टेबल दिखाते हैं:
  • reviews_on_user: उपयोगकर्ता से जुड़ी सभी समीक्षाएं फ़ेच करता है. इनमें मूवी की id और title भी शामिल हैं.
  • favorite_movies_on_user: उपयोगकर्ता की पसंदीदा के तौर पर मार्क की गई सभी फ़िल्में दिखाता है. इसमें genre, releaseYear, rating, और metadata जैसी ज़्यादा जानकारी भी शामिल होती है.

वेब ऐप्लिकेशन में क्वेरी इंटिग्रेट करना

1. MovieService (app/src/lib/MovieService.tsx) में, इन इंपोर्ट से टिप्पणी हटाएं:

   import { upsertUser } from "@movie/dataconnect";
   import { getCurrentUser, GetCurrentUserData } from "@movie/dataconnect";
   

2. handleAuthStateChange और handleGetCurrentUser फ़ंक्शन को इस कोड से बदलें:

   // Handle user authentication state changes and upsert user
   export const handleAuthStateChange = (
     auth: any,
     setUser: (user: User | null) => void
   ) => {
     return onAuthStateChanged(auth, async (user) => {
       if (user) {
         setUser(user);
         const username = user.email?.split("@")[0] || "anon";
         await upsertUser({ username });
       } else {
         setUser(null);
       }
     });
   };
   
   // Fetch current user profile
   export const handleGetCurrentUser = async (): Promise<
     GetCurrentUserData["user"] | null
   > => {
     try {
       const response = await getCurrentUser();
       return response.data.user;
     } catch (error) {
       console.error("Error fetching user profile:", error);
       return null;
     }
   };
   

खास बातें:

• handleAuthStateChange: यह फ़ंक्शन, पुष्टि की स्थिति में होने वाले बदलावों को सुनता है. जब कोई उपयोगकर्ता साइन इन करता है, तो यह उपयोगकर्ता का डेटा सेट करता है और डेटाबेस में उपयोगकर्ता की जानकारी बनाने या अपडेट करने के लिए, upsertUser म्यूटेशन को कॉल करता है.
• handleGetCurrentUser: getCurrentUser क्वेरी का इस्तेमाल करके, मौजूदा उपयोगकर्ता की प्रोफ़ाइल फ़ेच करता है. इससे, उपयोगकर्ता की समीक्षाएं और पसंदीदा फ़िल्में मिलती हैं.

इसे इस्तेमाल करने का तरीका देखें

अब, नेविगेशन बार में मौजूद "Google से साइन इन करें" बटन पर क्लिक करें. Firebase Authentication एमुलेटर का इस्तेमाल करके साइन इन किया जा सकता है. साइन इन करने के बाद, "मेरी प्रोफ़ाइल" पर क्लिक करें. फ़िलहाल, यह खाली रहेगा. हालांकि, आपने अपने ऐप्लिकेशन में उपयोगकर्ता के हिसाब से डेटा मैनेज करने की सुविधा सेट अप कर ली है.

8. उपयोगकर्ता इंटरैक्शन लागू करना

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

उपयोगकर्ता को किसी फ़िल्म को पसंदीदा के तौर पर सेट करने की सुविधा देना

इस सेक्शन में, आपको डेटाबेस सेट अप करना होगा, ताकि उपयोगकर्ता किसी फ़िल्म को पसंदीदा के तौर पर सेट कर सकें.

कनेक्टर लागू करना

1. dataconnect/movie-connector/ में mutations.gql को खोलें .
2. पसंदीदा फ़िल्मों को मैनेज करने के लिए, ये म्यूटेशन जोड़ें:

   # Add a movie to the user's favorites list
   mutation AddFavoritedMovie($movieId: UUID!) @auth(level: USER) {
     favorite_movie_upsert(data: { userId_expr: "auth.uid", movieId: $movieId })
   }
   
   # Remove a movie from the user's favorites list
   mutation DeleteFavoritedMovie($movieId: UUID!) @auth(level: USER) {
     favorite_movie_delete(key: { userId_expr: "auth.uid", movieId: $movieId })
   }
   
   

खास बातें:

• userId_expr: "auth.uid": auth.uid का इस्तेमाल करता है, जो सीधे Firebase Authentication से मिलता है. इससे यह पक्का होता है कि सिर्फ़ पुष्टि किए गए उपयोगकर्ता का डेटा ऐक्सेस या उसमें बदलाव किया जाए.

देखना कि किसी फ़िल्म को पसंदीदा के तौर पर मार्क किया गया है या नहीं

1. dataconnect/movie-connector/ में queries.gql को खोलें .
2. किसी फ़िल्म को पसंदीदा के तौर पर सेट किया गया है या नहीं, यह देखने के लिए यह क्वेरी जोड़ें:

   query GetIfFavoritedMovie($movieId: UUID!) @auth(level: USER) {
     favorite_movie(key: { userId_expr: "auth.uid", movieId: $movieId }) {
       movieId
     }
   }
   

खास बातें:

• auth.uid: Firebase Authentication का इस्तेमाल करके, उपयोगकर्ता के डेटा को सुरक्षित तरीके से ऐक्सेस करने की सुविधा देता है.
• favorite_movie: favorite_movies जॉइन टेबल की जांच करके यह पता लगाता है कि मौजूदा उपयोगकर्ता ने किसी फ़िल्म को पसंदीदा के तौर पर मार्क किया है या नहीं.

वेब ऐप्लिकेशन में क्वेरी इंटिग्रेट करना

1. MovieService (app/src/lib/MovieService.tsx) में, इन इंपोर्ट से टिप्पणी हटाएं:

   import { addFavoritedMovie, deleteFavoritedMovie, getIfFavoritedMovie } from "@movie/dataconnect";
   

2. handleAddFavoritedMovie, handleDeleteFavoritedMovie, और handleGetIfFavoritedMovie फ़ंक्शन को इस कोड से बदलें:

   // Add a movie to user's favorites
   export const handleAddFavoritedMovie = async (
     movieId: string
   ): Promise<void> => {
     try {
       await addFavoritedMovie({ movieId });
     } catch (error) {
       console.error("Error adding movie to favorites:", error);
       throw error;
     }
   };
   
   // Remove a movie from user's favorites
   export const handleDeleteFavoritedMovie = async (
     movieId: string
   ): Promise<void> => {
     try {
       await deleteFavoritedMovie({ movieId });
     } catch (error) {
       console.error("Error removing movie from favorites:", error);
       throw error;
     }
   };
   
   // Check if the movie is favorited by the user
   export const handleGetIfFavoritedMovie = async (
     movieId: string
   ): Promise<boolean> => {
     try {
       const response = await getIfFavoritedMovie({ movieId });
       return !!response.data.favorite_movie;
     } catch (error) {
       console.error("Error checking if movie is favorited:", error);
       return false;
     }
   };
   

खास बातें:

• handleAddFavoritedMovie और handleDeleteFavoritedMovie: उपयोगकर्ता की पसंदीदा सूची में किसी मूवी को सुरक्षित तरीके से जोड़ने या हटाने के लिए, म्यूटेशन का इस्तेमाल करें.
• handleGetIfFavoritedMovie: getIfFavoritedMovie क्वेरी का इस्तेमाल करके यह पता लगाता है कि उपयोगकर्ता ने किसी मूवी को पसंदीदा के तौर पर मार्क किया है या नहीं.

इसे इस्तेमाल करने का तरीका देखें

अब फ़िल्मों के कार्ड और फ़िल्म की जानकारी वाले पेज पर, दिल के आइकॉन पर क्लिक करके, फ़िल्मों को पसंदीदा या अनफ़ेवरिट किया जा सकता है. इसके अलावा, अपनी प्रोफ़ाइल पेज पर अपनी पसंदीदा फ़िल्में देखी जा सकती हैं.

उपयोगकर्ताओं को समीक्षाएं करने या मिटाने की अनुमति देना

इसके बाद, आपको ऐप्लिकेशन में उपयोगकर्ताओं की समीक्षाओं को मैनेज करने के लिए सेक्शन लागू करना होगा.

कनेक्टर लागू करना

mutations.gql (dataconnect/movie-connector/mutations.gql) में: ये म्यूटेशन जोड़ें:

# Add a review for a movie
mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!)
@auth(level: USER) {
  review_insert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
      reviewDate_date: { today: true }
    }
  )
}

# Delete a user's review for a movie
mutation DeleteReview($movieId: UUID!) @auth(level: USER) {
  review_delete(key: { userId_expr: "auth.uid", movieId: $movieId })
}

खास बातें:

• userId_expr: "auth.uid": यह पक्का करना कि समीक्षाएं, पुष्टि किए गए उपयोगकर्ता से जुड़ी हों.
• reviewDate_date: { today: true }: DataConnect का इस्तेमाल करके, समीक्षा की मौजूदा तारीख अपने-आप जनरेट होती है. इससे, मैन्युअल इनपुट की ज़रूरत नहीं होती.

वेब ऐप्लिकेशन में क्वेरी इंटिग्रेट करना

1. MovieService (app/src/lib/MovieService.tsx) में, इन इंपोर्ट से टिप्पणी हटाएं:

   import { addReview, deleteReview } from "@movie/dataconnect";
   

2. handleAddReview और handleDeleteReview फ़ंक्शन को इस कोड से बदलें:

   // Add a review to a movie
   export const handleAddReview = async (
     movieId: string,
     rating: number,
     reviewText: string
   ): Promise<void> => {
     try {
       await addReview({ movieId, rating, reviewText });
     } catch (error) {
       console.error("Error adding review:", error);
       throw error;
     }
   };
   
   // Delete a review from a movie
   export const handleDeleteReview = async (movieId: string): Promise<void> => {
     try {
       await deleteReview({ movieId });
     } catch (error) {
       console.error("Error deleting review:", error);
       throw error;
     }
   };
   

खास बातें:

• handleAddReview: किसी चुनी गई मूवी के लिए समीक्षा जोड़ने के लिए, addReview म्यूटेशन को कॉल करता है. साथ ही, उसे पुष्टि किए गए उपयोगकर्ता से सुरक्षित तरीके से लिंक करता है.
• handleDeleteReview: पुष्टि किए गए उपयोगकर्ता की किसी फ़िल्म की समीक्षा हटाने के लिए, deleteReview म्यूटेशन का इस्तेमाल करता है.

इसे इस्तेमाल करने का तरीका देखें

उपयोगकर्ता अब फ़िल्म की जानकारी वाले पेज पर, फ़िल्मों के लिए समीक्षाएं दे सकते हैं. वे अपनी प्रोफ़ाइल पेज पर जाकर, अपनी समीक्षाएं भी देख सकते हैं और उन्हें मिटा सकते हैं. इससे उन्हें ऐप्लिकेशन के साथ हुए इंटरैक्शन पर पूरा कंट्रोल मिलता है.

9. बेहतर फ़िल्टर और टेक्स्ट का कुछ हिस्सा मैच करने की सुविधा

इस सेक्शन में, आपको खोज की बेहतर सुविधाएं लागू करनी होंगी. इनकी मदद से, उपयोगकर्ता रेटिंग और रिलीज़ के साल के हिसाब से फ़िल्में खोज सकते हैं. साथ ही, शैलियों और टैग के हिसाब से फ़िल्मों को फ़िल्टर कर सकते हैं. इसके अलावा, टाइटल या ब्यौरे में टेक्स्ट का कुछ हिस्सा मैच करके, ज़्यादा सटीक नतीजे पाने के लिए एक से ज़्यादा फ़िल्टर को जोड़ सकते हैं.

कनेक्टर लागू करना

1. queries.gql को dataconnect/movie-connector/ में खोलें.
2. खोज की अलग-अलग सुविधाओं के साथ काम करने के लिए, यह क्वेरी जोड़ें:

   # Search for movies, actors, and reviews
   query SearchAll(
     $input: String
     $minYear: Int!
     $maxYear: Int!
     $minRating: Float!
     $maxRating: Float!
     $genre: String!
   ) @auth(level: PUBLIC) {
     moviesMatchingTitle: movies(
       where: {
         _and: [
           { releaseYear: { ge: $minYear } }
           { releaseYear: { le: $maxYear } }
           { rating: { ge: $minRating } }
           { rating: { le: $maxRating } }
           { genre: { contains: $genre } }
           { title: { contains: $input } }
         ]
       }
     ) {
       id
       title
       genre
       rating
       imageUrl
     }
     moviesMatchingDescription: movies(
       where: {
         _and: [
           { releaseYear: { ge: $minYear } }
           { releaseYear: { le: $maxYear } }
           { rating: { ge: $minRating } }
           { rating: { le: $maxRating } }
           { genre: { contains: $genre } }
           { description: { contains: $input } }
         ]
       }
     ) {
       id
       title
       genre
       rating
       imageUrl
     }
     actorsMatchingName: actors(where: { name: { contains: $input } }) {
       id
       name
       imageUrl
     }
     reviewsMatchingText: reviews(where: { reviewText: { contains: $input } }) {
       id
       rating
       reviewText
       reviewDate
       movie {
         id
         title
       }
       user {
         id
         username
       }
     }
   }
   

खास बातें:

• _and ऑपरेटर: एक ही क्वेरी में कई शर्तों को जोड़ता है. इससे releaseYear, rating, और genre जैसे कई फ़ील्ड के हिसाब से खोज को फ़िल्टर किया जा सकता है.
• contains ऑपरेटर: फ़ील्ड में टेक्स्ट के कुछ हिस्से से मैच होने वाले शब्दों को खोजता है. इस क्वेरी में, title, description, name या reviewText में मैच खोजे जाते हैं.
• where क्लॉज़: डेटा को फ़िल्टर करने की शर्तों के बारे में बताता है. हर सेक्शन (फ़िल्में, कलाकार, समीक्षाएं) में where क्लॉज़ का इस्तेमाल करके, खोज के लिए खास शर्तें तय की जाती हैं.

वेब ऐप्लिकेशन में क्वेरी इंटिग्रेट करना

1. MovieService (app/src/lib/MovieService.tsx) में, इन इंपोर्ट से टिप्पणी हटाएं:

   import { searchAll, SearchAllData } from "@movie/dataconnect";
   

2. handleSearchAll फ़ंक्शन को इस कोड से बदलें:

   // Function to perform the search using the query and filters
   export const handleSearchAll = async (
     searchQuery: string,
     minYear: number,
     maxYear: number,
     minRating: number,
     maxRating: number,
     genre: string
   ): Promise<SearchAllData | null> => {
     try {
       const response = await searchAll({
         input: searchQuery,
         minYear,
         maxYear,
         minRating,
         maxRating,
         genre,
       });
   
       return response.data;
     } catch (error) {
       console.error("Error performing search:", error);
       return null;
     }
   };
   

खास बातें:

• handleSearchAll: यह फ़ंक्शन, उपयोगकर्ता के इनपुट के आधार पर खोज करने के लिए searchAll क्वेरी का इस्तेमाल करता है. साथ ही, साल, रेटिंग, शैली, और टेक्स्ट के कुछ हिस्से से मैच करने वाले पैरामीटर के हिसाब से नतीजों को फ़िल्टर करता है.

इसे इस्तेमाल करने का तरीका देखें

वेब ऐप्लिकेशन के नेविगेशन बार में जाकर, "ऐडवांस खोज" पेज पर जाएं. अब अलग-अलग फ़िल्टर और इनपुट का इस्तेमाल करके, फ़िल्में, कलाकार, और समीक्षाएं खोजी जा सकती हैं. इससे, आपको ज़्यादा जानकारी वाले और अपनी पसंद के मुताबिक खोज के नतीजे मिलेंगे.

10. ज़रूरी नहीं: Cloud पर डिप्लॉय करना (बिलिंग की ज़रूरत है)

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

Firebase के प्लान को अपग्रेड करना

Firebase Data Connect को PostgreSQL के लिए Cloud SQL के साथ इंटिग्रेट करने के लिए, आपका Firebase प्रोजेक्ट पे-ऐज़-यू-गो (Blaze) कीमत वाले प्लान पर होना चाहिए. इसका मतलब है कि यह Cloud Billing खाते से लिंक है.

• Cloud Billing खाते के लिए, क्रेडिट कार्ड जैसा पेमेंट का कोई तरीका होना ज़रूरी है.
• अगर आपने Firebase और Google Cloud का इस्तेमाल पहले कभी नहीं किया है, तो देखें कि क्या आपको 300 डॉलर का क्रेडिट और मुफ़्त में आज़माने के लिए Cloud Billing खाता मिल सकता है.
• अगर आपने किसी इवेंट के तहत यह कोडलैब किया है, तो इवेंट के आयोजक से पूछें कि क्या कोई Cloud क्रेडिट उपलब्ध है.

अपने प्रोजेक्ट को Blaze प्लान पर अपग्रेड करने के लिए, यह तरीका अपनाएं:

1. Firebase कंसोल में, अपना प्लान अपग्रेड करें को चुनें.
2. ब्लेज़ प्लान चुनें. अपने प्रोजेक्ट से क्लाउड बिलिंग खाता लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
   अगर आपको इस अपग्रेड के तहत क्लाउड बिलिंग खाता बनाना पड़ा है, तो अपग्रेड पूरा करने के लिए, आपको Firebase Console में अपग्रेड फ़्लो पर वापस जाना पड़ सकता है.

अपने वेब ऐप्लिकेशन को Firebase प्रोजेक्ट से कनेक्ट करना

1. Firebase कंसोल का इस्तेमाल करके, अपने वेब ऐप्लिकेशन को Firebase प्रोजेक्ट में रजिस्टर करें:
   1. अपना प्रोजेक्ट खोलें. इसके बाद, ऐप्लिकेशन जोड़ें पर क्लिक करें.
   2. फ़िलहाल, SDK टूल और कॉन्फ़िगरेशन सेटअप को अनदेखा करें. हालांकि, जनरेट किए गए firebaseConfig ऑब्जेक्ट को कॉपी करना न भूलें.
   
2. app/src/lib/firebase.tsx में मौजूदा firebaseConfig को, Firebase कंसोल से कॉपी किए गए कॉन्फ़िगरेशन से बदलें.

   const firebaseConfig = {
     apiKey: "API_KEY",
     authDomain: "PROJECT_ID.firebaseapp.com",
     projectId: "PROJECT_ID",
     storageBucket: "PROJECT_ID.firebasestorage.app",
     messagingSenderId: "SENDER_ID",
     appId: "APP_ID"
   };
   

3. वेब ऐप्लिकेशन बनाएं: VS Code में वापस जाकर, app फ़ोल्डर में, होस्टिंग डिप्लॉयमेंट के लिए वेब ऐप्लिकेशन बनाने के लिए Vite का इस्तेमाल करें:

   cd app
   npm run build
   

अपने Firebase प्रोजेक्ट में Firebase Authentication सेट अप करना

1. Google Sign-In की मदद से, Firebase Authentication सेट अप करें.
2. (ज़रूरी नहीं) Firebase कंसोल का इस्तेमाल करके, Firebase से पुष्टि करने के लिए डोमेन को अनुमति दें. उदाहरण के लिए, http://127.0.0.1.
   
   1. पुष्टि की सेटिंग में, अनुमति वाले डोमेन पर जाएं.
   2. "डोमेन जोड़ें" पर क्लिक करें और सूची में अपना स्थानीय डोमेन शामिल करें.

Firebase CLI की मदद से डिप्लॉय करना

1. dataconnect/dataconnect.yaml में, पक्का करें कि आपका इंस्टेंस आईडी, डेटाबेस, और सेवा आईडी आपके प्रोजेक्ट से मेल खाता हो:

   specVersion: "v1alpha"
   serviceId: "your-service-id"
   location: "us-central1"
   schema:
     source: "./schema"
     datasource:
       postgresql:
         database: "your-database-id"
         cloudSql:
           instanceId: "your-instance-id"
   connectorDirs: ["./movie-connector"]
   

2. पक्का करें कि आपने अपने प्रोजेक्ट के साथ Firebase CLI सेट अप किया हो:

   npm i -g firebase-tools
   firebase login --reauth
   firebase use --add
   

3. डिप्लॉय करने के लिए, अपने टर्मिनल में यह कमांड चलाएं:

   firebase deploy --only dataconnect,hosting
   

4. स्कीमा में किए गए बदलावों की तुलना करने के लिए, यह निर्देश चलाएं:

   firebase dataconnect:sql:diff
   

5. अगर बदलाव स्वीकार किए जा सकते हैं, तो उन्हें इनके साथ लागू करें:

   firebase dataconnect:sql:migrate
   

'PostgreSQL के लिए Cloud SQL' इंस्टेंस को, डिप्लॉय किए गए आखिरी स्कीमा और डेटा के साथ अपडेट कर दिया जाएगा. Firebase कंसोल में जाकर, इस प्रोसेस की स्थिति देखी जा सकती है.

अब आपको your-project.web.app/ पर अपना ऐप्लिकेशन लाइव दिखेगा. इसके अलावा, प्रोडक्शन एनवायरमेंट में डेटा जोड़ने के लिए, Firebase Data Connect पैनल में चालू करें (प्रोडक्शन) पर क्लिक किया जा सकता है. यह ठीक वैसा ही है जैसा आपने लोकल एमुलेटर के साथ किया था.

11. ज़रूरी नहीं: Firebase Data Connect की मदद से वेक्टर सर्च (बिलिंग ज़रूरी है)

इस सेक्शन में, Firebase Data Connect का इस्तेमाल करके, मूवी की समीक्षा करने वाले ऐप्लिकेशन में वेक्टर सर्च की सुविधा चालू की जाएगी. इस सुविधा की मदद से, कॉन्टेंट के हिसाब से खोज की जा सकती है. जैसे, वेक्टर एम्बेडमेंट का इस्तेमाल करके, मिलती-जुलती जानकारी वाली फ़िल्में ढूंढना.

इस चरण को पूरा करने के लिए, यह ज़रूरी है कि आपने Google Cloud पर डिप्लॉय करने के लिए, इस कोडलैब का आखिरी चरण पूरा कर लिया हो.

किसी फ़ील्ड के लिए एम्बेड शामिल करने के लिए स्कीमा अपडेट करना

dataconnect/schema/schema.gql में, Movie टेबल में descriptionEmbedding फ़ील्ड जोड़ें:

type Movie
  # The below parameter values are generated by default with @table, and can be edited manually.
  @table {
  # implicitly calls @col to generates a column name. ex: @col(name: "movie_id")
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  releaseYear: Int
  genre: String
  rating: Float
  description: String
  tags: [String]
  descriptionEmbedding: Vector @col(size:768) # Enables vector search
}

खास बातें:

• descriptionEmbedding: Vector @col(size:768): यह फ़ील्ड, मूवी के ब्यौरे के सेमैनटिक एम्बेडमेंट को सेव करता है. इससे आपके ऐप्लिकेशन में वेक्टर पर आधारित कॉन्टेंट की खोज की सुविधा चालू होती है.

Vertex AI चालू करना

1. Google Cloud से Vertex AI के एपीआई सेट अप करने के लिए, ज़रूरी शर्तों की गाइड देखें. एम्बेड जनरेशन और वेक्टर सर्च की सुविधा के साथ काम करने के लिए, यह चरण ज़रूरी है.
2. pgvector और वेक्टर सर्च को चालू करने के लिए, अपना स्कीमा फिर से डिप्लॉय करें. इसके लिए, Firebase Data Connect VS Code एक्सटेंशन का इस्तेमाल करके, "प्रोडक्शन में डिप्लॉय करें" पर क्लिक करें.

डेटाबेस को एम्बेडमेंट से पॉप्युलेट करना

1. VS Code में dataconnect फ़ोल्डर खोलें.
2. अपने डेटाबेस में फ़िल्मों के एम्बेड किए गए कॉन्टेंट को भरने के लिए, optional_vector_embed.gql में चालू करें(लोकल) पर क्लिक करें.

वेक्टर सर्च क्वेरी जोड़ना

वेक्टर खोज करने के लिए, dataconnect/movie-connector/queries.gql में यह क्वेरी जोड़ें:

# Search movie descriptions using L2 similarity with Vertex AI
query SearchMovieDescriptionUsingL2Similarity($query: String!)
@auth(level: PUBLIC) {
  movies_descriptionEmbedding_similarity(
    compare_embed: { model: "textembedding-gecko@003", text: $query }
    method: L2
    within: 2
    limit: 5
  ) {
    id
    title
    description
    tags
    rating
    imageUrl
  }
}

खास बातें:

• compare_embed: तुलना के लिए, एम्बेडिंग मॉडल (textembedding-gecko@003) और इनपुट टेक्स्ट ($query) की जानकारी देता है.
• method: मिलते-जुलते डेटा का पता लगाने का तरीका (L2) बताता है. यह तरीका, इयूक्लिडियन दूरी दिखाता है.
• within: इस विकल्प की मदद से, L2 डिस्टेंस 2 या उससे कम वाली फ़िल्मों को खोजा जा सकता है. इसमें, कॉन्टेंट से मिलते-जुलते शब्दों पर फ़ोकस किया जाता है.
• limit: यह विकल्प, दिखाए जाने वाले नतीजों की संख्या को पांच तक सीमित करता है.

अपने ऐप्लिकेशन में वेक्टर सर्च फ़ंक्शन लागू करना

स्कीमा और क्वेरी सेट अप हो जाने के बाद, वेक्टर सर्च को अपने ऐप्लिकेशन की सेवा लेयर में इंटिग्रेट करें. इस चरण की मदद से, अपने वेब ऐप्लिकेशन से खोज क्वेरी को कॉल किया जा सकता है.

1. app/src/lib/ MovieService.ts में, SDK टूल से इन इंपोर्ट की टिप्पणी हटाएं. ऐसा करने पर, यह किसी भी अन्य क्वेरी की तरह काम करेगा.

   import {
     searchMovieDescriptionUsingL2similarity,
     SearchMovieDescriptionUsingL2similarityData,
   } from "@movie/dataconnect";
   

2. ऐप्लिकेशन में वेक्टर-आधारित खोज को इंटिग्रेट करने के लिए, यह फ़ंक्शन जोड़ें:

   // Perform vector-based search for movies based on description
   export const searchMoviesByDescription = async (
     query: string
   ): Promise<
     | SearchMovieDescriptionUsingL2similarityData["movies_descriptionEmbedding_similarity"]
     | null
   > => {
     try {
       const response = await searchMovieDescriptionUsingL2similarity({ query });
       return response.data.movies_descriptionEmbedding_similarity;
     } catch (error) {
       console.error("Error fetching movie descriptions:", error);
       return null;
     }
   };
   

खास बातें:

• searchMoviesByDescription: यह फ़ंक्शन, वेक्टर पर आधारित कॉन्टेंट की खोज करने के लिए, इनपुट टेक्स्ट को पास करके searchMovieDescriptionUsingL2similarity क्वेरी को कॉल करता है.

इसे इस्तेमाल करने का तरीका देखें

नेविगेशन बार में "वेक्टर सर्च" सेक्शन पर जाएं और "रोमांटिक और मॉडर्न" जैसे वाक्यांश टाइप करें. आपको उस कॉन्टेंट से मिलती-जुलती फ़िल्मों की सूची दिखेगी जिसे आपने खोजा है. इसके अलावा, किसी भी फ़िल्म की जानकारी वाले पेज पर जाकर, पेज पर सबसे नीचे मौजूद मिलती-जुलती फ़िल्मों वाले सेक्शन को भी देखा जा सकता है.

12. नतीजा

बधाई हो, अब आपके पास वेब ऐप्लिकेशन का इस्तेमाल करने का विकल्प है! अगर आपको अपनी मूवी का डेटा इस्तेमाल करना है, तो चिंता न करें. _insert.gql फ़ाइलों की नकल करके, Firebase Data Connect एक्सटेंशन का इस्तेमाल करके अपना डेटा डालें या VS Code में Data Connect एक्सटेंशन के 'एक्सीक्यूशन पैनल' से उन्हें जोड़ें.

ज़्यादा जानें

• Firebase Data Connect का दस्तावेज़
• Firebase Data Connect वेब SDK टूल
• Firebase Data Connect CLI
• Data Connect की मदद से वेक्टर सर्च