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

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

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

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

• ऐसा एनवायरमेंट जिसमें ये टूल इंस्टॉल हों:
  • Node.js के साथ अपनी पसंद का पैकेज मैनेजर. इस ट्यूटोरियल में यह माना गया है कि npm.
  • Firebase CLI:

    npm i -g firebase-tools@latest

  • Flutter कमांड लाइन टूल.
  • FlutterFire सीएलआई

    dart pub global activate flutterfire_cli

• Google खाता.

ट्यूटोरियल

mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

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

firebase deploy --only dataconnect

firebase dataconnect:execute dataconnect/seed_data.gql

firebase dataconnect:sdk:generate

class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/dataconnect_generated/generated.dart';
import 'package:flutter_app/firebase_options.dart';

class MyApp extends StatelessWidget {
  late final Future<QueryResult<ListMoviesData, void>>
  _movieListFuture;

  MyApp({super.key}) {
    _movieListFuture = ExampleConnector.instance
        .listMovies()
        .execute();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _movieListFuture,
        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 ?? 0,
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

flutter run

अगले चरण

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

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

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

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

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

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

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

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