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

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

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

• पुष्टि करना: अपने ऐप्लिकेशन की क्वेरी और म्यूटेशन के लिए, कस्टम पुष्टि करने की सुविधा लागू करें. इससे यह पक्का किया जा सकेगा कि सिर्फ़ अनुमति वाले उपयोगकर्ता आपके डेटा के साथ इंटरैक्ट कर सकें.
• GraphQL स्कीमा: फ़िल्म की समीक्षा करने वाले वेब ऐप्लिकेशन की ज़रूरतों के हिसाब से बनाए गए, आसानी से इस्तेमाल किए जा सकने वाले GraphQL स्कीमा का इस्तेमाल करके, अपने डेटा स्ट्रक्चर बनाएं और मैनेज करें.
• एसक्यूएल क्वेरी और म्यूटेशन: 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 प्रोजेक्ट नहीं बनाया है, तो उसे बनाएं
• (ज़रूरी नहीं) वेक्टर सर्च के लिए, अपने प्रोजेक्ट को ब्लेज़ प्लान पर अपग्रेड करें

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

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

पहला चरण: प्रोजेक्ट रिपॉज़िटरी को क्लोन करना

प्रोजेक्ट रिपॉज़िटरी को क्लोन करके और ज़रूरी डिपेंडेंसी इंस्टॉल करके शुरुआत करें:

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

1. इन निर्देशों को चलाने के बाद, अपने ब्राउज़र में http://localhost:5173 खोलें. इससे, आपको वेब ऐप्लिकेशन स्थानीय तौर पर चलता हुआ दिखेगा. यह फ़िल्म की समीक्षा करने वाला ऐप्लिकेशन बनाने और उसकी सुविधाओं के साथ इंटरैक्ट करने के लिए, आपके फ़्रंट एंड के तौर पर काम करता है.

दूसरा चरण: Visual Studio Code में प्रोजेक्ट खोलना

Visual Studio Code का इस्तेमाल करके, क्लोन किए गए codelab-dataconnect-web फ़ोल्डर को खोलें. यहां आपको अपना स्कीमा तय करना होगा, क्वेरी लिखनी होंगी, और ऐप्लिकेशन की मुख्य सुविधाओं की जांच करनी होगी.

तीसरा चरण: Firebase Data Connect Visual Studio एक्सटेंशन इंस्टॉल करना

Data Connect की सुविधाओं का इस्तेमाल करने के लिए, Firebase Data Connect Visual Studio एक्सटेंशन इंस्टॉल करें.इसके अलावा, इसे Visual Studio Code Marketplace से इंस्टॉल करें या VS Code में खोजें.

1. इसके अलावा: इसे Visual Studio Code Marketplace से इंस्टॉल करें या VS Code में खोजें.

चौथा चरण: Firebase प्रोजेक्ट बनाना

अगर आपके पास पहले से कोई Firebase प्रोजेक्ट नहीं है, तो नया Firebase प्रोजेक्ट बनाने के लिए Firebase Console पर जाएं. इसके बाद, Firebase Data Connect VSCode एक्सटेंशन में:

• साइन इन करें बटन पर क्लिक करें.
• Firebase प्रोजेक्ट कनेक्ट करें पर क्लिक करें और Firebase कंसोल में बनाया गया प्रोजेक्ट चुनें.

पांचवां चरण: Firebase एमुलेटर शुरू करना

Firebase Data Connect के VSCode एक्सटेंशन में, 'एम्युलेटर शुरू करें' पर क्लिक करें. साथ ही, पक्का करें कि टर्मिनल में एम्युलेटर चल रहे हों.

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

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

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

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

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

3. मूवी की समीक्षा के लिए स्कीमा तय करना

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

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

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

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

मूवी टेबल

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

कोड स्निपेट को अपनी 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 टाइप का रेफ़रंस देता है, जिससे फ़ॉरेन-की रिलेशनशिप बनती है.

एक्टर टेबल

कोड स्निपेट को 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 टाइप, उपयोगकर्ता इकाई की जानकारी देता है. यह इकाई, फ़िल्मों की समीक्षाएं देकर या उन्हें पसंदीदा के तौर पर जोड़कर, फ़िल्मों के साथ इंटरैक्ट करती है.

कोड स्निपेट को 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! को अपने-आप जनरेट करता है.

समीक्षा टेबल

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

कोड स्निपेट को 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()") जैसे एक्सप्रेशन का इस्तेमाल करता है. उदाहरण के लिए, नया रिकॉर्ड बनाने पर, मूवी और समीक्षा टाइप में मौजूद आईडी फ़ील्ड में यूयूआईडी अपने-आप भर जाता है.

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

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

इस सेक्शन में, आपको लोकल एमुलेटर में फ़िल्म का मॉक डेटा डालना होगा. इसके बाद, वेब ऐप्लिकेशन में इन कनेक्टर को कॉल करने के लिए, कनेक्टर (क्वेरी) और 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
  }
}

यह क्वेरी सभी फ़िल्मों और उनकी जानकारी (जैसे, आईडी, टाइटल, रिलीज़ का साल) को फ़ेच करती है. हालांकि, इससे फ़िल्मों को क्रम से नहीं लगाया जाता.

1. 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
  }
}

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

खास बातें:

• 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, और enum OrderDirection, ये सभी SDK टूल हैं. इन्हें Firebase Data Connect के एमुलेटर जनरेट करते हैं. ये एमुलेटर, आपके तय किए गए स्कीमा और क्वेरी के आधार पर काम करते हैं.

1. 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 और नई फ़िल्मों को दिखाने के लिए किया जाता है.

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

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

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

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

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

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 जॉइन टेबल की मदद से, 'अभिनेता' टाइप को ऐक्सेस करता है. साथ ही, where शर्त, 'अभिनेता' की भूमिका के आधार पर, उन्हें फ़िल्टर करती है (उदाहरण के लिए, "main" या "supporting").

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

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

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

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

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

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

1. 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: ये नतीजों के टाइप हैं. इनका इस्तेमाल, ऐप्लिकेशन में फ़िल्म और कलाकार की जानकारी दिखाने के लिए किया जाता है.

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

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

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

इस सेक्शन में, आपको 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 से मिलता है, न कि उपयोगकर्ता या ऐप्लिकेशन से. इससे सुरक्षा की एक और लेयर जुड़ जाती है. इससे यह पक्का होता है कि उपयोगकर्ता आईडी को सुरक्षित और अपने-आप मैनेज किया जाता है.

इसके बाद, dataconnect/movie-connector/ में queries.gql को खोलें .

मौजूदा उपयोगकर्ता को फ़ेच करने के लिए, यह क्वेरी जोड़ें:

# 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: उपयोगकर्ता से जुड़ी सभी समीक्षाएं फ़ेच करता है. इसमें फ़िल्म का आईडी और टाइटल भी शामिल है.
• favorite_movies_on_user: उपयोगकर्ता की पसंदीदा के तौर पर मार्क की गई सभी फ़िल्में दिखाता है. इसमें, शैली, रिलीज़ का साल, रेटिंग, और मेटाडेटा जैसी ज़्यादा जानकारी शामिल होती है.

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

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

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

1. 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 Auth एमुलेटर का इस्तेमाल करके साइन इन किया जा सकता है. साइन इन करने के बाद, "मेरी प्रोफ़ाइल" पर क्लिक करें. फ़िलहाल, यह खाली रहेगा. हालांकि, आपने अपने ऐप्लिकेशन में उपयोगकर्ता के हिसाब से डेटा मैनेज करने की सुविधा सेट अप कर ली है.

7. यूज़र इंटरैक्शन लागू करना

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

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

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 से मिलता है. इससे यह पक्का होता है कि सिर्फ़ पुष्टि किए गए उपयोगकर्ता का डेटा ऐक्सेस किया जाए या उसमें बदलाव किया जाए.

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

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";

1. 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 क्वेरी का इस्तेमाल करके यह पता लगाया जाता है कि उपयोगकर्ता ने किसी मूवी को पसंदीदा के तौर पर मार्क किया है या नहीं.

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

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

उपयोगकर्ताओं की समीक्षाएं लागू करना

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

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

1. 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 म्यूटेशन का इस्तेमाल करता है.

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

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

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

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

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

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";

1. 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 क्वेरी का इस्तेमाल करता है. साथ ही, साल, रेटिंग, शैली, और टेक्स्ट के कुछ हिस्से से मैच करने वाले नतीजों जैसे पैरामीटर के हिसाब से नतीजों को फ़िल्टर करता है.

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

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

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

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

Firebase कंसोल में वेब ऐप्लिकेशन जोड़ना

1. Firebase कंसोल में वेब ऐप्लिकेशन बनाएं और अपने ऐप्लिकेशन आईडी को नोट करें

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

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

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

cd app
npm run build

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

1. Google Sign-In की मदद से Firebase Auth सेट अप करना

2. (ज़रूरी नहीं) अपने प्रोजेक्ट कंसोल में, (Firebase Auth) [https://firebase.google.com/docs/auth/web/hosting] के लिए डोमेन की अनुमति दें. उदाहरण के लिए, http://127.0.0.1):

• पुष्टि करने की सेटिंग में, अपना प्रोजेक्ट चुनें और (अनुमति वाले डोमेन) [https://firebase.google.com/docs/auth/web/hosting] पर जाएं. "डोमेन जोड़ें" पर क्लिक करें और सूची में अपना स्थानीय डोमेन शामिल करें.

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"]

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

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

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

firebase deploy --only dataconnect,hosting

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

firebase dataconnect:sql:diff

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

firebase dataconnect:sql:migrate

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

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

10. ज़रूरी नहीं: Firebase Data Connect की मदद से वेक्टर सर्च

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

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

1. 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 API सेट अप करने के लिए, ज़रूरी शर्तों की गाइड पढ़ें. एम्बेड जनरेशन और वेक्टर सर्च की सुविधा के साथ काम करने के लिए, यह चरण ज़रूरी है.
2. pgvector और वेक्टर सर्च को चालू करने के लिए, अपना स्कीमा फिर से डिप्लॉय करें. इसके लिए, Firebase Data Connect VSCode एक्सटेंशन का इस्तेमाल करके, 'प्रोडक्शन में डिप्लॉय करें' पर क्लिक करें.

एम्बेड करके डेटाबेस में जानकारी भरना

1. VSCode में dataconnect फ़ोल्डर खोलें और optional_vector_embed.gql में रन करें(लोकल) पर क्लिक करें. इससे, आपके डेटाबेस में फ़िल्मों के एम्बेड किए गए कॉन्टेंट की जानकारी अपने-आप भर जाएगी.

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

1. वेक्टर खोज करने के लिए, 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 में, इन इंपोर्ट से कम्यूट हटाएं:

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

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

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

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

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

// 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 क्वेरी को कॉल करता है.

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

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

11. नतीजा

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

और जानें

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