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

ध्यान दें: अगर आपको Data Connect को ब्लेज़ प्लान पर मौजूद अपने किसी Firebase प्रोजेक्ट में जोड़ना है, Data Connect सेवा बनानी है, और प्रोटोटाइपिंग के लिए Cloud SQL डेटाबेस उपलब्ध कराना है, तो इस क्विकस्टार्ट गाइड को पढ़ें. अगर आपको Spark प्लान का इस्तेमाल करना है और एम्युलेटर और लोकल डेटाबेस की मदद से, लोकल तौर पर प्रोटोटाइप बनाना है, तो लोकल डेवलपमेंट शुरू करें.

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

Firebase कंसोल में ये काम किए जा सकते हैं:

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

इसके बाद, अपने लोकल डेवलपमेंट एनवायरमेंट में आपको ये काम करने होंगे:

• अपने प्रोडक्शन इंस्टेंस के साथ काम करने के लिए, Visual Studio Code एक्सटेंशन सहित डेवलपमेंट टूलिंग सेट अप करें.
• अपने लोकल एनवायरमेंट को कंसोल में बनाई गई ऐसेट के साथ सिंक करें.
• स्ट्रॉन्गली टाइप किए गए एसडीके जनरेट करें और उन्हें अपने ऐप्लिकेशन में इस्तेमाल करें.

क्विकस्टार्ट ऐप्लिकेशन रिपॉज़िटरी एक्सप्लोर करें और हमारी वेब के लिए कोडलैब, iOS के लिए कोडलैब या Android के लिए कोडलैब को फ़ॉलो करके, पूरी सुविधाओं वाला Data Connect ऐप्लिकेशन बनाएं.

कंसोल फ़्लो: एआई की मदद से अपना स्कीमा डिज़ाइन करें. इसके बाद, इसे अपने डेटाबेस में डिप्लॉय करें

1. अगर आपने पहले से ही Firebase प्रोजेक्ट नहीं बनाया है, तो उसे बनाएं.
   1. Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें. इसके बाद, स्क्रीन पर दिए गए निर्देशों का पालन करें.
2. Firebase कंसोल के Data Connect सेक्शन पर जाएं.
3. Gemini का इस्तेमाल शुरू करें बटन पर क्लिक करें.
4. दिखने वाले स्कीमा जनरेटर वर्कफ़्लो पैनल में, किसी ऐप्लिकेशन के बारे में बताएं, ताकि Gemini आपके साथ मिलकर GraphQL स्कीमा बना सके.
5. GraphQL स्कीमा की समीक्षा करें. इसके बाद, अपग्रेड करें और डिप्लॉय करें पर क्लिक करें.

6. अपने प्रोजेक्ट को ब्लेज़ प्लान पर अपग्रेड करें. इससे Cloud SQL for PostgreSQL इंस्टेंस बनाया जा सकता है.

   ध्यान दें: Blaze अपग्रेड में बिलिंग सेट अप करने के बावजूद, आपको बिना किसी शुल्क के आज़माने की अवधि के दौरान Data Connect या Cloud SQL for PostgreSQL के डिफ़ॉल्ट कॉन्फ़िगरेशन के इस्तेमाल के लिए शुल्क नहीं लिया जाएगा.

7. नया Cloud SQL इंस्टेंस बनाएं चुनें. दिखने वाले डायलॉग बॉक्स में, Cloud SQL for PostgreSQL डेटाबेस के लिए कोई लोकेशन और नाम चुनें.

   आपका ऐप्लिकेशन स्कीमा डिप्लॉय किया जाता है. साथ ही, उस स्कीमा से जुड़ा PostgreSQL डेटाबेस भी डिप्लॉय किया जाता है.

   ध्यान दें: अगर आपको ग्राहक के मैनेज किए गए एन्क्रिप्शन कुंजियों (सीएमईके) का इस्तेमाल करना है, तो पक्का करें कि आपने मौजूदा Cloud SQL इंस्टेंस का इस्तेमाल करें विकल्प चुना हो. साथ ही, सीएमईके के साथ कोई मौजूदा Cloud SQL डेटाबेस चुना हो.
   ध्यान दें: Cloud SQL for PostgreSQL इंस्टेंस को चालू होने में 15 मिनट लग सकते हैं. Google Cloud कंसोल का इस्तेमाल करके, यह पुष्टि की जा सकती है कि Data Connect सेटअप फ़्लो पूरा हो गया है. इसमें डेटाबेस प्रोविज़निंग भी शामिल है.

Console फ़्लो: अपने क्लाइंट के लिए कार्रवाइयां बनाने के लिए, एआई की मदद लेना

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

एआई की मदद से काम करने वाले हमारे टूल आपकी मदद के लिए उपलब्ध हैं.

ध्यान दें: स्कीमा बनाने और उसे डिप्लॉय करने के बाद ही, ऑपरेशन बनाए जा सकते हैं.

1. जब कहा जाए, तब Gemini की मदद से कार्रवाइयां जनरेट करें बटन पर क्लिक करें.

2. कुछ समय बाद, अपने ऑपरेशन जनरेट करें वर्कफ़्लो पैनल में, Gemini की ओर से आपके स्कीमा के आधार पर दी गई क्वेरी और म्यूटेशन की सूची देखें.

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

4. ऑपरेशन जोड़ने के लिए, + जोड़ें बटन पर क्लिक करें. इसके बाद:

   1. अपनी कार्रवाई के बारे में सामान्य भाषा में बताएं.

      उदाहरण के लिए:

      List all products
      

   2. जनरेट किए गए GraphQL की समीक्षा करें.

   3. अगर ऑपरेशन स्वीकार किया जा सकता है, तो उसे अपनी कार्रवाइयों की सूची में जोड़ने के लिए, शामिल करें पर क्लिक करें.

5. कार्रवाइयों को तब तक जोड़ते और हटाते रहें, जब तक कार्रवाइयों का सेट आपकी ज़रूरत के मुताबिक न हो जाए.

6. कार्रवाइयों की इस सूची को क्लाइंट-कॉल किए जा सकने वाले कनेक्टर सेट के तौर पर डिप्लॉय करने के लिए, कनेक्टर का नाम चुनें. इसके बाद, डिप्लॉय करें पर क्लिक करें.

Console फ़्लो: म्यूटेशन बनाने और अपने डेटाबेस को पॉप्युलेट करने के लिए, Firebase में Gemini का इस्तेमाल करना

पिछले चरणों को पूरा करके, आपने काम के Data Connect स्कीमा बनाए और उन्हें प्रोडक्शन में डिप्लॉय किया. इसका मतलब है कि PostgreSQL डेटाबेस के साथ-साथ उससे जुड़ी टेबल भी बनाई गई हैं और उन्हें डिप्लॉय किया गया है.

अपने डेटाबेस को भरने के लिए, Firebase में Gemini का इस्तेमाल किया जा सकता है. इससे आपको अपनी टेबल में से किसी एक को अपडेट करने के लिए, GraphQL म्यूटेशन को तय करने के लिए नैचुरल लैंग्वेज में इनपुट देने में मदद मिलती है. साथ ही, अपने अपडेट की पुष्टि करने के लिए क्वेरी करने में मदद मिलती है.

ध्यान दें: स्कीमा बनाने और उसे डिप्लॉय करने के बाद ही, कार्रवाइयां बनाई जा सकती हैं.

अहम जानकारी: आपका स्कीमा किसी भी तरह के ऐप्लिकेशन के बारे में जानकारी दे सकता है. इस गाइड में Data Connect के बारे में जानने के लिए, हम किस इकाई का इस्तेमाल कर सकते हैं? आपके स्कीमा में बुनियादी इकाई के टाइप शामिल होने चाहिए. जैसे, Movie (फ़िल्म की समीक्षा करने वाले ऐप्लिकेशन के लिए), Product (ई-कॉमर्स ऐप्लिकेशन के लिए) या Account (पेमेंट ऐप्लिकेशन के लिए). अगले कुछ चरणों के लिए, अपने स्कीमा में कोई एक टाइप चुनें.

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

1. डेटा टैब खोलें.

2. GraphQL लिखने में मेरी मदद करो pen_spark आइकॉन पर क्लिक करें. इसके बाद, दिखने वाले बॉक्स में अपना इनपुट टाइप करें.

   ध्यान दें: डेटा भरने के लिए, Product या Account जैसी कोई आसान और बुनियादी इकाई चुनें.

   उदाहरण के लिए:

   Add data for three sample products to my app.
   

3. जनरेट करें पर क्लिक करें. म्यूटेशन वापस कर दिया जाता है.

4. आउटपुट की समीक्षा करें. अगर ज़रूरत हो, तो प्रॉम्प्ट को बेहतर बनाने के लिए, बदलाव करें पर क्लिक करें. इसके बाद, फिर से जनरेट करें पर क्लिक करें.

5. इसके बाद, डेटा एडिटर में म्यूटेशन डालने के लिए, शामिल करें पर क्लिक करें.

6. Run पर क्लिक करें.

म्यूटेशन चलाने पर, डेटा को आपके PostgreSQL डेटाबेस में मौजूद टेबल में लिखा जाता है. स्टोर किए गए डेटा को देखने के लिए, कंसोल में क्वेरी बनाई जा सकती है:

1. क्वेरी बनाने के लिए, GraphQL लिखने में मेरी मदद करो pen_spark का इस्तेमाल करके, पिछले चरणों को दोहराएं.

2. दिखाई देने वाले बॉक्स में, अपना इनपुट टाइप करें.

   उदाहरण के लिए:

   Query data for all sample products in my app.
   

3. जनरेट करें पर क्लिक करें. इसके बाद, चलाएं पर क्लिक करें.

लोकल फ़्लो: डेवलपमेंट टूलिंग चुनें

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

सबसे पहले, आपको लोकल एनवायरमेंट सेट अप करना होगा. Data Connect आपको डेवलपमेंट टूल इंस्टॉल करने के दो तरीके उपलब्ध कराता है.

अपने-आप इंस्टॉल होने की सुविधा (macOS या Linux) मैन्युअल तरीके से इंस्टॉल करना (Windows)

लोकल फ़्लो: डेवलपमेंट एनवायरमेंट सेट अप करना

1. अपने लोकल प्रोजेक्ट के लिए नई डायरेक्ट्री बनाएं.

2. Data Connect डेवलपमेंट एनवायरमेंट और ब्राउज़र पर आधारित आईडीई सेट अप करने के लिए, यहां दी गई कमांड को बनाई गई नई डायरेक्ट्री में चलाएं. साथ ही, क्लाइंट एसडीके जनरेट करें.

     curl -sL https://firebase.tools/init/dataconnect | editor=true bash

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

   यह स्क्रिप्ट, Firebase कंसोल में बनाई गई ऐसेट को आपकी लोकल डायरेक्ट्री के साथ सिंक करती है. साथ ही, आपके प्रोजेक्ट के लिए रजिस्टर किए गए ऐप्लिकेशन के लिए क्लाइंट SDK टूल जनरेट करती है.

ध्यान दें: अगर आपने VS Code का डेस्कटॉप वर्शन पहले से इंस्टॉल किया हुआ है, तो स्क्रिप्ट इसे अपने-आप खोल देगी.

ध्यान दें: अगर स्क्रिप्ट काम नहीं करती है, तो मैन्युअल तरीके से इंस्टॉल करने के चरणों का इस्तेमाल करें.

लोकल फ़्लो: लोकल प्रोजेक्ट सेट अप करना

अपने लोकल प्रोजेक्ट को सेट अप करने के लिए, अपनी प्रोजेक्ट डायरेक्ट्री को शुरू करें. आईडीई विंडो में, बाईं ओर मौजूद पैनल में, Firebase आइकॉन पर क्लिक करें. इससे Data Connect VS Code एक्सटेंशन का यूज़र इंटरफ़ेस (यूआई) खुल जाएगा:

1. एम्युलेटर शुरू करें बटन पर क्लिक करें.

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

लोकल फ़्लो: लोकल एनवायरमेंट में अपना स्कीमा और कनेक्टर ढूंढें

macOS या Linux के लिए, अपने-आप इंस्टॉल होने वाले विकल्प का इस्तेमाल करके, किसी मौजूदा प्रोजेक्ट में ऐसेट सिंक करने पर ये असर पड़ते हैं:

• यह आपके डिप्लॉय किए गए स्कीमा को सिंक करता है
  • अपना स्कीमा ढूंढें: यह आपकी Firebase प्रोजेक्ट डायरेक्ट्री में, /dataconnect/schema/schema.gql फ़ाइल में मौजूद होता है.
• यह आपके डिप्लॉय किए गए कनेक्टर में क्वेरी और म्यूटेशन को सिंक करता है
  • अपने कनेक्टर को ढूंढें: ये कार्रवाइयां, आपके Firebase प्रोजेक्ट की डायरेक्ट्री में मौजूद /dataconnect/connector/ डायरेक्ट्री में होती हैं.

ध्यान दें: आपका स्कीमा, Gemini के लिए बताए गए ऐप्लिकेशन के लिए यूनीक होता है. साथ ही, इसे पहले डिप्लॉय किया गया था. इसमें उस ऐप्लिकेशन के लिए सही इकाई के टाइप शामिल होते हैं.

इस गाइड के बाकी हिस्से में, उदाहरण Movie टाइप पर फ़ोकस करेंगे. यह टाइप तब दिख सकता है, जब आपने Gemini से किसी फ़िल्म की समीक्षा करने वाले ऐप्लिकेशन के बारे में पूछा हो. इस गाइड में, GraphQL और वर्कफ़्लो के कॉन्सेप्ट के बारे में बताने के लिए Movie का इस्तेमाल किया जाएगा. ये कॉन्सेप्ट, किसी भी तरह के ऐप्लिकेशन स्कीमा पर लागू होते हैं.

लोकल फ़्लो: अपने स्कीमा को समझना

स्कीमा का उदाहरण: फ़िल्म

Data Connect में, GraphQL फ़ील्ड को कॉलम में मैप किया जाता है. Movie टाइप में id, title, imageUrl, और genre शामिल हो सकते हैं. Data Connect, प्रिमिटिव डेटा टाइप String और UUID को पहचानता है.

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

स्कीमा का पहला उदाहरण: मूवीमेटाडेटा

फ़िल्मों के लिए, फ़िल्म के मेटाडेटा को मॉडल किया जा सकता है.

उदाहरण के लिए, schema.gql में, Gemini से जनरेट किया गया यह स्निपेट या समीक्षा कोड जोड़ा जा सकता है.

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

ध्यान दें कि movie फ़ील्ड को Movie के टाइप से मैप किया गया है. Data Connect समझता है कि यह संबंध Movie और MovieMetadata के बीच है. इसलिए, वह इस संबंध को मैनेज करेगा.

दस्तावेज़ में, Data Connect के स्कीमा के बारे में ज़्यादा जानें

लोकल फ़्लो: अपनी टेबल में ज़्यादा डेटा जोड़ना

आईडीई एडिटर पैनल में, आपको /dataconnect/schema/schema.gql में GraphQL टाइप के ऊपर CodeLens बटन दिख सकते हैं. आपने कंसोल में जिस तरह से डेटा जोड़ा था उसी तरह से, प्रोडक्शन डेटाबेस में डेटा जोड़ने के लिए म्यूटेशन बनाया जा सकता है.

ध्यान दें: आपका स्कीमा, उस ऐप्लिकेशन के लिए यूनीक होता है जिसके बारे में आपने स्कीमा असिस्ट को बताया है. डेटा जोड़ने के लिए, अपने स्कीमा में कोई बुनियादी टाइप चुनें. जैसे, Movie (किसी फ़िल्म की समीक्षा करने वाले ऐप्लिकेशन के लिए) या Product या Account (किसी ई-कॉमर्स ऐप्लिकेशन के लिए).

लोकल तौर पर काम करते समय, किसी टेबल में डेटा जोड़ने के लिए:

1. schema.gql में, अपने किसी एक टाइप (जैसे कि Movie, Product, Account, जो आपके ऐप्लिकेशन के हिसाब से हो) के एलान के ऊपर मौजूद, डेटा जोड़ें बटन पर क्लिक करें.
   
2. आपकी वर्किंग डायरेक्ट्री में एक नई फ़ाइल, <type>_insert.qgl, जोड़ी जाती है. जैसे, Movie_insert.gql या Product_insert.gql. उस टाइप के फ़ील्ड में डेटा को हार्ड कोड करें.
3. Run (Production) बटन पर क्लिक करें.
   
4. अन्य टेबल में रिकॉर्ड जोड़ने के लिए, ऊपर दिए गए चरणों को दोहराएं.

डेटा जोड़े जाने की पुष्टि तुरंत करने के लिए:

1. schema.gql पर वापस जाएं. इसके बाद, टाइप डिक्लेरेशन के ऊपर मौजूद, डेटा पढ़ें बटन पर क्लिक करें.
2. क्वेरी चलाने के लिए, नतीजे के तौर पर मिली <type>_read.gql फ़ाइल में, Product_read.gql जैसे रन (प्रोडक्शन) बटन पर क्लिक करें.

दस्तावेज़ में, Data Connect म्यूटेशन के बारे में ज़्यादा जानें

लोकल फ़्लो: एसडीके जनरेट करना

आपके स्कीमा और कनेक्टर के ऑपरेशन, स्थानीय तौर पर सिंक किए जाते हैं.

अब iOS, Android, वेब, और Flutter ऐप्लिकेशन में क्वेरी और म्यूटेशन के लिए कॉल लागू करने के लिए, VS Code एक्सटेंशन का इस्तेमाल किया जा सकता है.

1. एक्सटेंशन के यूज़र इंटरफ़ेस (यूआई) में, ऐप्लिकेशन में एसडीके जोड़ें बटन पर क्लिक करें.

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

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

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

लोकल फ़्लो: किसी ऐप्लिकेशन से अपनी क्वेरी को कॉल करने के लिए, एसडीके का इस्तेमाल करें

आपने पहले ही Firebase कंसोल में स्कीमा और कार्रवाइयां डिप्लॉय कर दी हों. अपने ऐप्लिकेशन से कॉल ऑपरेशन के लिए, उस SDK टूल का इस्तेमाल किया जा सकता है जिसे Data Connect ने आपकी ListMovies क्वेरी को लागू करने के लिए जनरेट किया है.

ध्यान दें: यहाँ दिए गए उदाहरणों में, @movie-app/movies जैसे इंपोर्ट और ListMovies जैसे ऑपरेशन के रेफ़रंस शामिल हैं. ये रेफ़रंस, फ़िल्म की समीक्षा करने वाले ऐप्लिकेशन के स्कीमा में मौजूद हो सकते हैं. जनरेट किए गए एसडीके टूल में, आपके ऐप्लिकेशन के लिए लागू होने वाले ListProducts या ListAccounts जैसे तरीके हो सकते हैं.

आपको यह पता चल सकता है कि वेब, iOS या Android के लिए हमारे कोडलैब में, पूरी सुविधाओं वाले Data Connect ऐप्लिकेशन के साथ क्विकस्टार्ट ऐप्लिकेशन की रिपॉज़िटरी एक्सप्लोर करना, जनरेट किए गए एसडीके टूल को समझने के लिए खास तौर पर फ़ायदेमंद होगा.

वेब

1. अपने वेब ऐप्लिकेशन में Firebase जोड़ें.

2. अपने React ऐप्लिकेशन की मुख्य फ़ाइल में:

   • जनरेट किए गए एसडीके को इंपोर्ट करें
   • Data Connect तरीकों को कॉल करें.
   ध्यान दें: इस सैंपल में, React ऐप्लिकेशन Firebase JavaScript SDK का इस्तेमाल करके आपकी क्वेरी को कॉल करता है. Data Connect, React में Data Connect के साथ एसिंक्रोनस तरीके से काम करने के लिए, खास बाइंडिंग भी उपलब्ध कराता है.

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   
   // Generated queries.
   // Update as needed with the path to your generated SDK.
   import { listMovies, ListMoviesData } from '@dataconnect/generated';
   
   function App() {
     const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
     useEffect(() => {
       listMovies.then(res => setMovies(res.data));
     }, []);
     return (
       movies.map(movie => <h1>{movie.title}</h1>);
     );
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<App />);
   

Swift

1. अपने iOS ऐप्लिकेशन में Firebase जोड़ें.

2. जनरेट किए गए एसडीके टूल का इस्तेमाल करने के लिए, इसे Xcode में डिपेंडेंसी के तौर पर कॉन्फ़िगर करें.

   Xcode के सबसे ऊपर मौजूद नेविगेशन बार में, File > Add Package Dependencies > Add Local को चुनें. इसके बाद, जनरेट की गई Package.swift वाली फ़ोल्डर को चुनें.

3. अपने ऐप्लिकेशन के मुख्य डेलिगेट में:

   • जनरेट किए गए एसडीके को इंपोर्ट करें
   • Data Connect तरीकों को कॉल करें.

   import SwiftUI
   
   import FirebaseDataConnect
   // Generated queries.
   // Update as needed with the package name of your generated SDK.
   import <CONNECTOR-PACKAGE-NAME>
   
   let connector = DataConnect.moviesConnector
   
   struct ListMovieView: View {
   @StateObject private var queryRef = connector.listMovies.ref()
   
       var body: some View {
           VStack {
               Button {
                   Task {
                       do {
                           try await refresh()
                       } catch {
                           print("Failed to refresh: \(error)")
                       }
                   }
               } label: {
                   Text("Refresh")
               }
   
               // use the query results in a view
               ForEach(queryRef.data?.movies ?? []) { movie in
                       Text(movie.title)
                   }
               }
       }
       @MainActor
       func refresh() async throws {
           _ = try await queryRef.execute()
       }
   
       struct ContentView_Previews: PreviewProvider {
       static var previews: some View {
           ListMovieView()
       }
   }
   

Kotlin Android

1. अपने Android ऐप्लिकेशन में Firebase जोड़ें.

2. जनरेट किए गए SDK टूल का इस्तेमाल करने के लिए, Gradle में Data Connect को डिपेंडेंसी के तौर पर कॉन्फ़िगर करें.

   अपने app/build.gradle.kts में plugins और dependencies अपडेट करें.

   plugins {
     // Use whichever versions of these dependencies suit your application.
     // The versions shown here were the latest as of March 14, 2025.
     // Note, however, that the version of kotlin("plugin.serialization") must,
     // in general, match the version of kotlin("android").
     id("com.android.application") version "8.9.0"
     id("com.google.gms.google-services") version "4.4.2"
     val kotlinVersion = "2.1.10"
     kotlin("android") version kotlinVersion
     kotlin("plugin.serialization") version kotlinVersion
   }
   
   dependencies {
     // Use whichever versions of these dependencies suit your application.
     // The versions shown here were the latest versions as of March 14, 2025.
     implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")
   
     // These dependencies are not strictly required, but will very likely be used
     // when writing modern Android applications.
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
     implementation("androidx.appcompat:appcompat:1.7.0")
     implementation("androidx.activity:activity-ktx:1.10.1")
     implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
     implementation("com.google.android.material:material:1.12.0")
   }
   

3. अपने ऐप्लिकेशन की मुख्य गतिविधि में:

   • जनरेट किए गए एसडीके को इंपोर्ट करें
   • Data Connect तरीकों को कॉल करें.

   import android.os.Bundle
   import android.widget.TextView
   import androidx.appcompat.app.AppCompatActivity
   import androidx.lifecycle.Lifecycle
   import androidx.lifecycle.lifecycleScope
   import androidx.lifecycle.repeatOnLifecycle
   import kotlinx.coroutines.launch
   
   
   private val connector = com.myapplication.MoviesConnector.instance
   
   class MainActivity : AppCompatActivity() {
   
     override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       val textView: TextView = findViewById(R.id.text_view)
   
       lifecycleScope.launch {
         lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
           
           val result = connector.listMovies.runCatching { execute { } }
           
           val newTextViewText = result.fold(
             onSuccess = {
               val titles = it.data.movies.map { it.title }
               "${titles.size} movies: " + titles.joinToString(", ")
             },
             onFailure = { "ERROR: ${it.message}" }
           )
           textView.text = newTextViewText
         }
       }
     }
   }
   

Flutter

1. अपने Flutter ऐप्लिकेशन में Firebase जोड़ें.
2. flutterfire सीएलआई dart pub global activate flutterfire_cli इंस्टॉल करें.
3. flutterfire configure रन करें.
4. आपके ऐप्लिकेशन के मुख्य फ़ंक्शन में:
   • जनरेट किए गए एसडीके को इंपोर्ट करें
   • Data Connect तरीकों को कॉल करें.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemBuilder: (context, index) => Card(
                      child: Text(
                    snapshot.data!.data.movies[index].title,
                  )),
                  itemCount: snapshot.data!.data.movies.length,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

अगले चरण

डिप्लॉय किए गए प्रोजेक्ट की समीक्षा करें और अन्य टूल के बारे में जानें:

• अपने डेटाबेस में डेटा जोड़ें, अपने स्कीमा की जांच करें और उनमें बदलाव करें. साथ ही, Firebase कंसोल में अपनी Data Connect सेवा पर नज़र रखें.

दस्तावेज़ में जाकर ज़्यादा जानकारी पाएं. उदाहरण के लिए, आपने क्विकस्टार्ट पूरा कर लिया है, इसलिए:

• स्कीमा, क्वेरी, और म्यूटेशन जनरेट करने में आपकी मदद करने वाले एआई टूल और दिशा-निर्देशों के बारे में ज़्यादा जानें. एआई की मदद से कोडिंग करने की गाइड में, इन विषयों के बारे में बताया गया है: अपने आईडीई के साथ हमारे एमसीपी सर्वर को सेट अप और इस्तेमाल करने का तरीका और प्रॉम्प्ट लिखने के सबसे सही तरीके.
• स्कीमा, क्वेरी, और म्यूटेशन डेवलपमेंट के बारे में ज़्यादा जानें
• वेब, Android, iOS, और Flutter के लिए, क्लाइंट एसडीके जनरेट करने और क्लाइंट कोड से क्वेरी और म्यूटेशन कॉल करने के बारे में जानें.