इस क्विकस्टार्ट में, प्रोडक्शन एसक्यूएल इंस्टेंस के साथ अपने ऐप्लिकेशन में Firebase Data Connect बनाने का तरीका बताया गया है.
Firebase कंसोल में ये काम किए जा सकते हैं:
- अपने Firebase प्रोजेक्ट में Firebase Data Connect जोड़ें.
- Firebase कंसोल में, एआई की मदद से स्कीमा जनरेट करने की सुविधा वाले ऐप्लिकेशन के लिए स्कीमा बनाएं और उसे डिप्लॉय करें.
- अपने ऐप्लिकेशन के लिए Cloud SQL इंस्टेंस उपलब्ध कराएं.
- Firebase में Gemini की मदद से, अपने डेटाबेस में सैंपल डेटा भरें.
- एआई की मदद से ऑपरेशन जनरेट करने की सुविधा के साथ, क्वेरी और म्यूटेशन बनाएं. इन्हें डिप्लॉय किया जा सकता है और इनका इस्तेमाल, क्लाइंट कोड को स्थानीय तौर पर डेवलप करने के लिए किया जा सकता है.
इसके बाद, अपने लोकल डेवलपमेंट एनवायरमेंट में आपको ये काम करने होंगे:
- अपने प्रोडक्शन इंस्टेंस के साथ काम करने के लिए, Visual Studio Code एक्सटेंशन सहित डेवलपमेंट टूलिंग सेट अप करें.
- अपने लोकल एनवायरमेंट को कंसोल में बनाई गई ऐसेट के साथ सिंक करें.
- स्ट्रॉन्गली टाइप किए गए एसडीके जनरेट करें और उन्हें अपने ऐप्लिकेशन में इस्तेमाल करें.
कंसोल फ़्लो: एआई की मदद से अपना स्कीमा डिज़ाइन करें. इसके बाद, इसे अपने डेटाबेस में डिप्लॉय करें
- अगर आपने पहले से ही Firebase प्रोजेक्ट नहीं बनाया है, तो उसे बनाएं.
- Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें. इसके बाद, स्क्रीन पर दिए गए निर्देशों का पालन करें.
- Firebase कंसोल के Data Connect सेक्शन पर जाएं.
- Gemini का इस्तेमाल शुरू करें बटन पर क्लिक करें.
- दिखने वाले स्कीमा जनरेटर वर्कफ़्लो पैनल में, किसी ऐप्लिकेशन के बारे में बताएं, ताकि Gemini आपके साथ मिलकर GraphQL स्कीमा बना सके.
- GraphQL स्कीमा की समीक्षा करें. इसके बाद, अपग्रेड करें और डिप्लॉय करें पर क्लिक करें.
अपने प्रोजेक्ट को ब्लेज़ प्लान पर अपग्रेड करें. इससे Cloud SQL for PostgreSQL इंस्टेंस बनाया जा सकता है.
नया Cloud SQL इंस्टेंस बनाएं चुनें. दिखने वाले डायलॉग बॉक्स में, Cloud SQL for PostgreSQL डेटाबेस के लिए कोई लोकेशन और नाम चुनें.
आपका ऐप्लिकेशन स्कीमा डिप्लॉय किया जाता है. साथ ही, उस स्कीमा से जुड़ा PostgreSQL डेटाबेस भी डिप्लॉय किया जाता है.
Console फ़्लो: अपने क्लाइंट के लिए कार्रवाइयां बनाने के लिए, एआई की मदद लेना
स्कीमा डिप्लॉय होने के बाद, इस डेटा को अपने क्लाइंट ऐप्लिकेशन से ऐक्सेस किया जा सकता है. इसके लिए, आपको क्वेरी और म्यूटेशन का कनेक्टर बनाना होगा. इसे बैकएंड में डिप्लॉय किया जा सकता है. इसके बाद, क्लाइंट से कॉल किया जा सकता है.
एआई की मदद से काम करने वाले हमारे टूल आपकी मदद के लिए उपलब्ध हैं.
जब कहा जाए, तब Gemini की मदद से कार्रवाइयां जनरेट करें बटन पर क्लिक करें.
कुछ समय बाद, अपने ऑपरेशन जनरेट करें वर्कफ़्लो पैनल में, Gemini की ओर से आपके स्कीमा के आधार पर दी गई क्वेरी और म्यूटेशन की सूची देखें.
उस ऑपरेशन को तय करने वाले GraphQL कोड की समीक्षा करने के लिए, हर ऑपरेशन लाइन पर क्लिक करें. अगर ज़रूरी हो, तो ट्रैशकैन कंट्रोल का इस्तेमाल करके उन कार्रवाइयों को मिटाएं जिनकी आपको ज़रूरत नहीं है.
ऑपरेशन जोड़ने के लिए, + जोड़ें बटन पर क्लिक करें. इसके बाद:
अपनी कार्रवाई के बारे में सामान्य भाषा में बताएं.
उदाहरण के लिए:
List all products
जनरेट किए गए GraphQL की समीक्षा करें.
अगर ऑपरेशन स्वीकार किया जा सकता है, तो उसे अपनी कार्रवाइयों की सूची में जोड़ने के लिए, शामिल करें पर क्लिक करें.
कार्रवाइयों को तब तक जोड़ते और हटाते रहें, जब तक कार्रवाइयों का सेट आपकी ज़रूरत के मुताबिक न हो जाए.
कार्रवाइयों की इस सूची को क्लाइंट-कॉल किए जा सकने वाले कनेक्टर सेट के तौर पर डिप्लॉय करने के लिए, कनेक्टर का नाम चुनें. इसके बाद, डिप्लॉय करें पर क्लिक करें.
Console फ़्लो: म्यूटेशन बनाने और अपने डेटाबेस को पॉप्युलेट करने के लिए, Firebase में Gemini का इस्तेमाल करना
पिछले चरणों को पूरा करके, आपने काम के Data Connect स्कीमा बनाए और उन्हें प्रोडक्शन में डिप्लॉय किया. इसका मतलब है कि PostgreSQL डेटाबेस के साथ-साथ उससे जुड़ी टेबल भी बनाई गई हैं और उन्हें डिप्लॉय किया गया है.
अपने डेटाबेस को भरने के लिए, Firebase में Gemini का इस्तेमाल किया जा सकता है. इससे आपको अपनी टेबल में से किसी एक को अपडेट करने के लिए, GraphQL म्यूटेशन को तय करने के लिए नैचुरल लैंग्वेज में इनपुट देने में मदद मिलती है. साथ ही, अपने अपडेट की पुष्टि करने के लिए क्वेरी करने में मदद मिलती है.
डेटा टैब खोलें.
GraphQL लिखने में मेरी मदद करो pen_spark आइकॉन पर क्लिक करें. इसके बाद, दिखने वाले बॉक्स में अपना इनपुट टाइप करें.
उदाहरण के लिए:
Add data for three sample products to my app.
जनरेट करें पर क्लिक करें. म्यूटेशन वापस कर दिया जाता है.
आउटपुट की समीक्षा करें. अगर ज़रूरत हो, तो प्रॉम्प्ट को बेहतर बनाने के लिए, बदलाव करें पर क्लिक करें. इसके बाद, फिर से जनरेट करें पर क्लिक करें.
इसके बाद, डेटा एडिटर में म्यूटेशन डालने के लिए, शामिल करें पर क्लिक करें.
Run पर क्लिक करें.
म्यूटेशन चलाने पर, डेटा को आपके PostgreSQL डेटाबेस में मौजूद टेबल में लिखा जाता है. स्टोर किए गए डेटा को देखने के लिए, कंसोल में क्वेरी बनाई जा सकती है:
क्वेरी बनाने के लिए, GraphQL लिखने में मेरी मदद करो pen_spark का इस्तेमाल करके, पिछले चरणों को दोहराएं.
दिखाई देने वाले बॉक्स में, अपना इनपुट टाइप करें.
उदाहरण के लिए:
Query data for all sample products in my app.
जनरेट करें पर क्लिक करें. इसके बाद, चलाएं पर क्लिक करें.
लोकल फ़्लो: डेवलपमेंट टूलिंग चुनें
अब आपके पास डिप्लॉय किए गए डेटाबेस में डेटा है और आपने कनेक्टर डिप्लॉय कर दिया है. इसलिए, अपने लोकल डेवलपमेंट एनवायरमेंट में स्कीमा और कनेक्टर को डेवलप करना जारी रखा जा सकता है.
सबसे पहले, आपको लोकल एनवायरमेंट सेट अप करना होगा. Data Connect आपको डेवलपमेंट टूल इंस्टॉल करने के दो तरीके उपलब्ध कराता है.
ज़रूरी शर्तें
इस क्विकस्टार्ट का इस्तेमाल करने के लिए, आपके पास ये चीज़ें होनी चाहिए.
- Visual Studio Code.
- Node.js इंस्टॉल किया गया हो. इसके लिए, Windows पर nvm-windows और macOS या Linux पर nvm का इस्तेमाल किया गया हो.
- एक Firebase प्रोजेक्ट. अगर आपने पहले से कोई खाता नहीं बनाया है, तो Firebase कंसोल में जाकर खाता बनाएं.
लोकल फ़्लो: डेवलपमेंट एनवायरमेंट सेट अप करना
- अपने लोकल प्रोजेक्ट के लिए नई डायरेक्ट्री बनाएं.
- नई डायरेक्ट्री में VS Code खोलें.
- Visual Studio Code Marketplace से, Firebase Data Connect एक्सटेंशन इंस्टॉल करें.
लोकल फ़्लो: लोकल प्रोजेक्ट सेट अप करना
अपने लोकल प्रोजेक्ट को सेट अप करने के लिए, अपनी प्रोजेक्ट डायरेक्ट्री को शुरू करें. आईडीई विंडो में, बाईं ओर मौजूद पैनल में, Firebase आइकॉन पर क्लिक करें. इससे Data Connect VS Code एक्सटेंशन का यूज़र इंटरफ़ेस (यूआई) खुल जाएगा:
- Google से साइन इन करें बटन पर क्लिक करें.
- Firebase प्रोजेक्ट कनेक्ट करें बटन पर क्लिक करें. इसके बाद, वह प्रोजेक्ट चुनें जिसे आपने पहले कंसोल में बनाया था.
Run firebase init बटन पर क्लिक करें और प्रोसेस पूरी करें.
एम्युलेटर शुरू करें बटन पर क्लिक करें.
लोकल फ़्लो: लोकल एनवायरमेंट में अपना स्कीमा और कनेक्टर ढूंढें
पिछले सेक्शन में मौजूदfirebase init
चरण, आपकी लोकल डेवलपमेंट एनवायरमेंट में ऐसेट सिंक करता है:
- यह आपके डिप्लॉय किए गए स्कीमा को सिंक करता है
- अपना स्कीमा ढूंढें: यह आपकी Firebase प्रोजेक्ट डायरेक्ट्री में,
/dataconnect/schema/schema.gql
फ़ाइल में मौजूद होता है.
- अपना स्कीमा ढूंढें: यह आपकी Firebase प्रोजेक्ट डायरेक्ट्री में,
- यह आपके डिप्लॉय किए गए कनेक्टर में क्वेरी और म्यूटेशन को सिंक करता है
- अपने कनेक्टर को ढूंढें: ये कार्रवाइयां, आपके Firebase प्रोजेक्ट की डायरेक्ट्री में मौजूद
/dataconnect/connector/
डायरेक्ट्री में होती हैं.
- अपने कनेक्टर को ढूंढें: ये कार्रवाइयां, आपके Firebase प्रोजेक्ट की डायरेक्ट्री में मौजूद
लोकल फ़्लो: अपने स्कीमा को समझना
स्कीमा का उदाहरण: फ़िल्म
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 बटन दिख सकते हैं. आपने कंसोल में जिस तरह से डेटा जोड़ा था उसी तरह से, प्रोडक्शन डेटाबेस में डेटा जोड़ने के लिए म्यूटेशन बनाया जा सकता है.
लोकल तौर पर काम करते समय, किसी टेबल में डेटा जोड़ने के लिए:
schema.gql
में, अपने किसी एक टाइप (जैसे किMovie
,Product
,Account
, जो आपके ऐप्लिकेशन के हिसाब से हो) के एलान के ऊपर मौजूद, डेटा जोड़ें बटन पर क्लिक करें.
- आपकी वर्किंग डायरेक्ट्री में एक नई फ़ाइल,
<type>_insert.qgl
, जोड़ी जाती है. जैसे,Movie_insert.gql
याProduct_insert.gql
. उस टाइप के फ़ील्ड में डेटा को हार्ड कोड करें. - Run (Production) बटन पर क्लिक करें.
- अन्य टेबल में रिकॉर्ड जोड़ने के लिए, ऊपर दिए गए चरणों को दोहराएं.
डेटा जोड़े जाने की पुष्टि तुरंत करने के लिए:
schema.gql
पर वापस जाएं. इसके बाद, टाइप डिक्लेरेशन के ऊपर मौजूद, डेटा पढ़ें बटन पर क्लिक करें.- क्वेरी चलाने के लिए, नतीजे के तौर पर मिली
<type>_read.gql
फ़ाइल में,Product_read.gql
जैसे रन (प्रोडक्शन) बटन पर क्लिक करें.
दस्तावेज़ में, Data Connect म्यूटेशन के बारे में ज़्यादा जानें
लोकल फ़्लो: एसडीके जनरेट करना
आपके स्कीमा और कनेक्टर के ऑपरेशन, स्थानीय तौर पर सिंक किए जाते हैं.
अब iOS, Android, वेब, और Flutter ऐप्लिकेशन में क्वेरी और म्यूटेशन के लिए कॉल लागू करने के लिए, VS Code एक्सटेंशन का इस्तेमाल किया जा सकता है.
- एक्सटेंशन के यूज़र इंटरफ़ेस (यूआई) में, ऐप्लिकेशन में एसडीके जोड़ें बटन पर क्लिक करें.
इसके बाद, एक डायलॉग बॉक्स दिखेगा. इसमें वह डायरेक्ट्री चुनें जिसमें आपके ऐप्लिकेशन का कोड मौजूद है. Data Connect एसडीके का कोड जनरेट होगा और वहां सेव हो जाएगा.
अपना ऐप्लिकेशन प्लैटफ़ॉर्म चुनें. इसके बाद, ध्यान दें कि एसडीके कोड आपकी चुनी गई डायरेक्ट्री में तुरंत जनरेट हो जाता है.
लोकल फ़्लो: किसी ऐप्लिकेशन से अपनी क्वेरी को कॉल करने के लिए, एसडीके का इस्तेमाल करें
आपने पहले ही Firebase कंसोल में स्कीमा और कार्रवाइयां डिप्लॉय कर दी हों.
अपने ऐप्लिकेशन से कॉल ऑपरेशन के लिए, उस SDK टूल का इस्तेमाल किया जा सकता है जिसे Data Connect ने आपकी ListMovies
क्वेरी को लागू करने के लिए जनरेट किया है.
वेब
- अपने वेब ऐप्लिकेशन में Firebase जोड़ें.
अपने 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
- अपने iOS ऐप्लिकेशन में Firebase जोड़ें.
जनरेट किए गए एसडीके टूल का इस्तेमाल करने के लिए, इसे Xcode में डिपेंडेंसी के तौर पर कॉन्फ़िगर करें.
Xcode के सबसे ऊपर मौजूद नेविगेशन बार में, File > Add Package Dependencies > Add Local को चुनें. इसके बाद, जनरेट की गई
Package.swift
वाली फ़ोल्डर को चुनें.अपने ऐप्लिकेशन के मुख्य डेलिगेट में:
- जनरेट किए गए एसडीके को इंपोर्ट करें
- 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
- अपने Android ऐप्लिकेशन में Firebase जोड़ें.
जनरेट किए गए 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") }
अपने ऐप्लिकेशन की मुख्य गतिविधि में:
- जनरेट किए गए एसडीके को इंपोर्ट करें
- 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
- अपने Flutter ऐप्लिकेशन में Firebase जोड़ें.
- flutterfire सीएलआई
dart pub global activate flutterfire_cli
इंस्टॉल करें. flutterfire configure
रन करें.- आपके ऐप्लिकेशन के मुख्य फ़ंक्शन में:
- जनरेट किए गए एसडीके को इंपोर्ट करें
- 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 के लिए, क्लाइंट एसडीके जनरेट करने और क्लाइंट कोड से क्वेरी और म्यूटेशन कॉल करने के बारे में जानें.