इस पेज का अनुवाद Cloud Translation API से किया गया है.

फायरबेस एमुलेटर सूट का उपयोग करके आपके फ़्लटर ऐप्स के लिए स्थानीय विकास

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

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

आवश्यक शर्तें

यह कोडलैब मानता है कि आपके पास कुछ फ़्लटर अनुभव है। यदि नहीं, तो हो सकता है कि आप पहले बुनियादी बातें सीखना चाहें। निम्नलिखित लिंक सहायक हैं:

फ़्लटर विजेट फ़्रेमवर्क का भ्रमण करें
अपना पहला फ़्लटर ऐप लिखें, भाग 1 कोडलैब आज़माएँ

आपके पास कुछ फ़ायरबेस अनुभव भी होना चाहिए, लेकिन यह ठीक है अगर आपने फ़्लटर प्रोजेक्ट में फ़ायरबेस को कभी नहीं जोड़ा है। यदि आप फायरबेस कंसोल से अपरिचित हैं, या आप फायरबेस में बिल्कुल नए हैं, तो पहले निम्नलिखित लिंक देखें:

आप क्या बनाएंगे

यह कोडलैब एक सरल जर्नलिंग एप्लिकेशन बनाने में आपका मार्गदर्शन करता है। एप्लिकेशन में एक लॉगिन स्क्रीन होगी, और एक स्क्रीन जो आपको पिछली जर्नल प्रविष्टियाँ पढ़ने और नई प्रविष्टियाँ बनाने की अनुमति देती है।

आप क्या सीखेंगे

आप सीखेंगे कि फायरबेस का उपयोग कैसे शुरू करें, और अपने फ़्लटर डेवलपमेंट वर्कफ़्लो में फायरबेस एमुलेटर सूट को कैसे एकीकृत और उपयोग करें। इन फायरबेस विषयों को कवर किया जाएगा:

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

आपको किस चीज़ की ज़रूरत पड़ेगी

फ़्लटर और स्थापित एसडीके का कार्यसाधक ज्ञान
Intellij JetBrains या VS कोड टेक्स्ट संपादक
Google Chrome ब्राउज़र (या फ़्लटर के लिए आपका अन्य पसंदीदा विकास लक्ष्य। इस कोडलैब में कुछ टर्मिनल कमांड मान लेंगे कि आप Chrome पर अपना ऐप चला रहे हैं)

2. एक फायरबेस प्रोजेक्ट बनाएं और सेट करें

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

एक फायरबेस प्रोजेक्ट बनाएं

फायरबेस कंसोल में साइन इन करें।
फायरबेस कंसोल में, प्रोजेक्ट जोड़ें (या एक प्रोजेक्ट बनाएं ) पर क्लिक करें, और अपने फायरबेस प्रोजेक्ट के लिए एक नाम दर्ज करें (उदाहरण के लिए, " फायरबेस-फ्लटर-कोडेलैब")।

प्रोजेक्ट निर्माण विकल्पों पर क्लिक करें। संकेत मिलने पर फायरबेस शर्तों को स्वीकार करें। Google Analytics सेट करना छोड़ें, क्योंकि आप इस ऐप के लिए Analytics का उपयोग नहीं करेंगे।

फायरबेस प्रोजेक्ट्स के बारे में अधिक जानने के लिए, फायरबेस प्रोजेक्ट्स को समझें देखें।

आप जो ऐप बना रहे हैं वह दो फायरबेस उत्पादों का उपयोग करता है जो फ़्लटर ऐप्स के लिए उपलब्ध हैं:

आपके उपयोगकर्ताओं को आपके ऐप में साइन इन करने की अनुमति देने के लिए फायरबेस प्रमाणीकरण ।
क्लाउड फायरस्टोर क्लाउड पर संरचित डेटा को सहेजने और डेटा में बदलाव होने पर तुरंत सूचना प्राप्त करने के लिए है।

इन दोनों उत्पादों को विशेष कॉन्फ़िगरेशन की आवश्यकता है या फायरबेस कंसोल का उपयोग करके सक्षम करने की आवश्यकता है।

क्लाउड फायरस्टोर सक्षम करें

फ़्लटर ऐप जर्नल प्रविष्टियों को सहेजने के लिए क्लाउड फायरस्टोर का उपयोग करता है।

क्लाउड फायरस्टोर सक्षम करें:

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

3. फ़्लटर ऐप सेट करें

शुरू करने से पहले आपको स्टार्टर कोड डाउनलोड करना होगा और फायरबेस सीएलआई इंस्टॉल करना होगा।

स्टार्टर कोड प्राप्त करें

कमांड लाइन से GitHub रिपॉजिटरी को क्लोन करें:

git clone https://github.com/flutter/codelabs.git flutter-codelabs

वैकल्पिक रूप से, यदि आपके पास GitHub का cli टूल स्थापित है:

gh repo clone flutter/codelabs flutter-codelabs

नमूना कोड को flutter-codelabs निर्देशिका में क्लोन किया जाना चाहिए, जिसमें कोडलैब्स के संग्रह के लिए कोड होता है। इस कोडलैब का कोड flutter-codelabs/firebase-emulator-suite में है।

flutter-codelabs/firebase-emulator-suite अंतर्गत निर्देशिका संरचना दो फ़्लटर प्रोजेक्ट हैं। एक को complete कहा जाता है, जिसे आप संदर्भित कर सकते हैं यदि आप आगे बढ़ना चाहते हैं, या अपने स्वयं के कोड को क्रॉस-रेफरेंस करना चाहते हैं। दूसरे प्रोजेक्ट को start कहा जाता है।

जिस कोड से आप प्रारंभ करना चाहते हैं वह निर्देशिका flutter-codelabs/firebase-emulator-suite/start में है। उस निर्देशिका को अपनी पसंदीदा IDE में खोलें या आयात करें।

cd flutter-codelabs/firebase-emulator-suite/start

फायरबेस सीएलआई स्थापित करें

फायरबेस सीएलआई आपके फायरबेस प्रोजेक्ट्स के प्रबंधन के लिए उपकरण प्रदान करता है। एम्यूलेटर सुइट का उपयोग करने के लिए सीएलआई की आवश्यकता है, इसलिए आपको इसे इंस्टॉल करना होगा।

सीएलआई स्थापित करने के कई तरीके हैं। सबसे आसान तरीका, यदि आप MacOS या Linux का उपयोग कर रहे हैं, तो इस कमांड को अपने टर्मिनल से चलाना है:

curl -sL https://firebase.tools | bash

सीएलआई स्थापित करने के बाद, आपको फायरबेस से प्रमाणित करना होगा।

निम्नलिखित कमांड चलाकर अपने Google खाते का उपयोग करके फायरबेस में लॉग इन करें:

firebase login

यह कमांड आपकी स्थानीय मशीन को फायरबेस से जोड़ता है और आपको आपके फायरबेस प्रोजेक्ट्स तक पहुंच प्रदान करता है।

अपने फायरबेस प्रोजेक्ट्स को सूचीबद्ध करके जांचें कि सीएलआई ठीक से स्थापित है और आपके खाते तक उसकी पहुंच है। निम्न आदेश चलाएँ:

firebase projects:list

प्रदर्शित सूची फायरबेस कंसोल में सूचीबद्ध फायरबेस परियोजनाओं के समान होनी चाहिए। आपको कम से कम फायरबेस-फ़्लटर-कोडलैब देखना चाहिए।

फ़्लटरफ़ायर सीएलआई स्थापित करें

फ़्लटरफ़ायर सीएलआई, फ़ायरबेस सीएलआई के शीर्ष पर बनाया गया है, और यह आपके फ़्लटर ऐप के साथ फ़ायरबेस प्रोजेक्ट को एकीकृत करना आसान बनाता है।

सबसे पहले, सीएलआई स्थापित करें:

dart pub global activate flutterfire_cli

सुनिश्चित करें कि सीएलआई स्थापित किया गया था। फ़्लटर प्रोजेक्ट निर्देशिका के भीतर निम्नलिखित कमांड चलाएँ और सुनिश्चित करें कि सीएलआई सहायता मेनू आउटपुट करता है।

flutterfire --help

अपने फ़्लटर ऐप में अपने फ़ायरबेस प्रोजेक्ट को जोड़ने के लिए फ़ायरबेस सीएलआई और फ़्लटरफ़ायर सीएलआई का उपयोग करें

दो सीएलआई स्थापित करने के साथ, आप अलग-अलग फायरबेस उत्पाद (जैसे फायरस्टोर) सेट कर सकते हैं, एमुलेटर डाउनलोड कर सकते हैं, और केवल कुछ टर्मिनल कमांड के साथ फायरबेस को अपने फ़्लटर ऐप में जोड़ सकते हैं।

सबसे पहले, निम्नलिखित चलाकर फायरबेस सेटअप समाप्त करें:

firebase init

यह कमांड आपको अपना प्रोजेक्ट स्थापित करने के लिए आवश्यक प्रश्नों की एक श्रृंखला के माध्यम से ले जाएगा। ये स्क्रीनशॉट प्रवाह दिखाते हैं:

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

अब, पिछले चरण में आपके द्वारा बनाए गए प्रोजेक्ट का चयन करें: फ़्लटर-फ़ायरबेस-कोडलैब।

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

प्रक्रिया के अंत में, आपको एक आउटपुट देखना चाहिए जो निम्न स्क्रीनशॉट जैसा दिखता है।

महत्वपूर्ण : आपका आउटपुट मेरे से थोड़ा अलग हो सकता है, जैसा कि नीचे स्क्रीनशॉट में देखा गया है, क्योंकि यदि आपके पास पहले से ही एमुलेटर डाउनलोड हैं तो अंतिम प्रश्न "नहीं" में डिफ़ॉल्ट होगा।

फ़्लटरफ़ायर कॉन्फ़िगर करें

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

flutterfire configure

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

निम्नलिखित स्क्रीनशॉट वे संकेत दिखाते हैं जिनका आपको उत्तर देना होगा।

यह स्क्रीनशॉट प्रक्रिया के अंत में आउटपुट दिखाता है। यदि आप फायरबेस से परिचित हैं, तो आप देखेंगे कि आपको कंसोल में एप्लिकेशन बनाने की ज़रूरत नहीं थी, और फ़्लटरफ़ायर सीएलआई ने आपके लिए यह किया।

फ़्लटर ऐप में फ़ायरबेस पैकेज जोड़ें

अंतिम सेटअप चरण आपके फ़्लटर प्रोजेक्ट में प्रासंगिक फ़ायरबेस पैकेज जोड़ना है। टर्मिनल में, सुनिश्चित करें कि आप flutter-codelabs/firebase-emulator-suite/start पर फ़्लटर प्रोजेक्ट के मूल में हैं। फिर, निम्नलिखित तीन कमांड चलाएँ:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add cloud_firestore

ये एकमात्र पैकेज हैं जिनका उपयोग आप इस एप्लिकेशन में करेंगे।

4. फायरबेस एमुलेटर को सक्षम करना

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

सबसे पहले, main.dart. में main फ़ंक्शन में फ़ायरबेस इनिशियलाइज़ेशन कोड और एमुलेटर सेटअप कोड जोड़ें।

मुख्य.डार्ट

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import 'app_state.dart';
import 'firebase_options.dart';
import 'logged_in_view.dart';
import 'logged_out_view.dart';


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

 if (kDebugMode) {
   try {
     FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
     await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
   } catch (e) {
     // ignore: avoid_print
     print(e);
   }
 }

 runApp(MyApp());
}

कोड की पहली कुछ पंक्तियाँ फायरबेस को आरंभ करती हैं। लगभग सार्वभौमिक रूप से, यदि आप फ़्लटर ऐप में फ़ायरबेस के साथ काम कर रहे हैं, तो आप WidgetsFlutterBinding.ensureInitialized और Firebase.initializeApp पर कॉल करके शुरुआत करना चाहते हैं।

इसके बाद, लाइन if (kDebugMode) से शुरू होने वाला कोड आपके ऐप को प्रोडक्शन फायरबेस प्रोजेक्ट के बजाय एमुलेटर को लक्षित करने के लिए कहता है। kDebugMode यह सुनिश्चित करता है कि एमुलेटर को लक्षित करना केवल तभी होगा जब आप विकास के माहौल में हों। क्योंकि kDebugMode एक स्थिर मान है, डार्ट कंपाइलर रिलीज़ मोड में उस कोड ब्लॉक को पूरी तरह से हटाना जानता है।

एम्यूलेटर प्रारंभ करें

फ़्लटर ऐप शुरू करने से पहले आपको एमुलेटर शुरू करना चाहिए। सबसे पहले, इसे टर्मिनल में चलाकर एमुलेटर शुरू करें:

firebase emulators:start

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

यह आउटपुट आपको बताता है कि कौन से एमुलेटर चल रहे हैं, और आप एमुलेटर को देखने के लिए कहां जा सकते हैं। सबसे पहले, localhost:4000 पर एमुलेटर यूआई देखें।

यह स्थानीय एमुलेटर के यूआई का मुखपृष्ठ है। यह उपलब्ध सभी एमुलेटरों को सूचीबद्ध करता है, और प्रत्येक को चालू या बंद स्थिति के साथ लेबल किया जाता है।

5. फायरबेस ऑथ एम्यूलेटर

आपके द्वारा उपयोग किया जाने वाला पहला एमुलेटर प्रमाणीकरण एमुलेटर है। यूआई में प्रमाणीकरण कार्ड पर "एमुलेटर पर जाएं" पर क्लिक करके प्रामाणिक एमुलेटर से प्रारंभ करें, और आपको एक पृष्ठ दिखाई देगा जो इस तरह दिखता है:

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

इसके बाद, आप फायरबेस ऑथ एमुलेटर में एक उपयोगकर्ता को जोड़ने और फिर फ़्लटर यूआई के माध्यम से उस उपयोगकर्ता को लॉग इन करने की प्रक्रिया से गुजरेंगे।

एक उपयोगकर्ता जोड़ें

"उपयोगकर्ता जोड़ें" बटन पर क्लिक करें और इस जानकारी के साथ फ़ॉर्म भरें:

प्रदर्शन नाम: डैश
ईमेल: Dash@email.com
पासवर्ड: डैशवर्ड

फ़ॉर्म सबमिट करें, और आप देखेंगे कि तालिका में अब एक उपयोगकर्ता शामिल है। अब आप उस उपयोगकर्ता के साथ लॉग इन करने के लिए कोड को अपडेट कर सकते हैं।

लॉग_आउट_व्यू.डार्ट

LoggedOutView विजेट में एकमात्र कोड जिसे अद्यतन किया जाना है वह कॉलबैक में है जो तब ट्रिगर होता है जब कोई उपयोगकर्ता लॉगिन बटन दबाता है। इस तरह दिखने के लिए कोड अपडेट करें:

class LoggedOutView extends StatelessWidget {
 final AppState state;
 const LoggedOutView({super.key, required this.state});
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Firebase Emulator Suite Codelab'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
          Text(
           'Please log in',
            style: Theme.of(context).textTheme.displaySmall,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton(
             onPressed: () async {
              await state.logIn('dash@email.com', 'dashword').then((_) {
                if (state.user != null) {
                 context.go('/');
                }
              });
              },
              child: const Text('Log In'),
          ),
        ),
      ],
    ),
   ),
  );
 }
}

अपडेट किया गया कोड TODO स्ट्रिंग्स को आपके द्वारा ऑथ एम्यूलेटर में बनाए गए ईमेल और पासवर्ड से बदल देता है। और अगली पंक्ति में, if(true) लाइन को कोड से बदल दिया गया है जो जाँचता है कि क्या state.user शून्य है। AppClass का कोड इस पर अधिक प्रकाश डालता है।

ऐप_स्टेट.डार्ट

AppState में कोड के दो भागों को अद्यतन करने की आवश्यकता है। सबसे पहले, वर्ग सदस्य AppState.user को Object प्रकार के बजाय firebase_auth पैकेज से User प्रकार दें।

दूसरा, नीचे दिखाए अनुसार AppState.login विधि भरें:

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user; // <-- changed variable type
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 } 
 // ...
}

उपयोगकर्ता के लिए प्रकार की परिभाषा अब User? . वह User वर्ग Firebase Auth से आता है, और User.displayName जैसी आवश्यक जानकारी प्रदान करता है, जिस पर थोड़ी चर्चा की गई है।

यह फायरबेस ऑथ में ईमेल और पासवर्ड के साथ उपयोगकर्ता को लॉग इन करने के लिए आवश्यक बुनियादी कोड है। यह साइन इन करने के लिए FirebaseAuth को कॉल करता है, जो Future<UserCredential> ऑब्जेक्ट लौटाता है। जब भविष्य पूरा हो जाता है, तो यह कोड जाँचता है कि क्या UserCredential से कोई User जुड़ा हुआ है। यदि क्रेडेंशियल ऑब्जेक्ट पर कोई उपयोगकर्ता है, तो उपयोगकर्ता ने सफलतापूर्वक लॉग इन किया है, और AppState.user प्रॉपर्टी सेट की जा सकती है। यदि नहीं है, तो कोई त्रुटि हुई, और वह मुद्रित हो गया।

ध्यान दें कि इस विधि में कोड की एकमात्र पंक्ति जो इस ऐप के लिए विशिष्ट है (सामान्य फायरबेसऑथ कोड के बजाय) _listenForEntries विधि के लिए कॉल है, जिसे अगले चरण में कवर किया जाएगा।

कार्य: एक्शन आइकन - अपने ऐप को पुनः लोड करें, और जब यह रेंडर हो जाए तो लॉगिन बटन दबाएँ। इससे ऐप उस पृष्ठ पर चला जाता है जिस पर लिखा होता है "आपका स्वागत है, व्यक्ति!" शीर्ष पर। प्रमाणीकरण काम कर रहा होगा, क्योंकि यह आपको इस पृष्ठ पर नेविगेट करने की अनुमति देता है, लेकिन उपयोगकर्ता का वास्तविक नाम प्रदर्शित करने के लिए logged_in_view.dart में एक मामूली अपडेट करने की आवश्यकता है।

log_in_view.dart

LoggedInView.build विधि में पहली पंक्ति बदलें:

class LoggedInView extends StatelessWidget {
 final AppState state;
 LoggedInView({super.key, required this.state});

 final PageController _controller = PageController(initialPage: 1);

 @override
 Widget build(BuildContext context) {
   final name = state.user!.displayName ?? 'No Name';

   return Scaffold(
 // ...

अब, यह लाइन AppState ऑब्जेक्ट पर User प्रॉपर्टी से displayName लेती है। जब आपने अपना पहला उपयोगकर्ता परिभाषित किया था तो यह displayName एमुलेटर में सेट किया गया था। आपके ऐप को अब "वापस स्वागत है, डैश!" प्रदर्शित करना चाहिए। जब आप TODO के बजाय लॉग इन करते हैं।

6. फायरस्टोर एमुलेटर पर डेटा पढ़ें और लिखें

सबसे पहले, फायरस्टोर एमुलेटर की जाँच करें। एमुलेटर यूआई होमपेज ( localhost:4000 ) पर, फायरस्टोर कार्ड पर "एमुलेटर पर जाएं" पर क्लिक करें। इसे ऐसा दिखना चाहिए:

एम्यूलेटर:

फायरबेस कंसोल:

यदि आपके पास फायरस्टोर के साथ कोई अनुभव है, तो आप देखेंगे कि यह पेज फायरबेस कंसोल फायरस्टोर पेज के समान दिखता है। हालाँकि, कुछ उल्लेखनीय अंतर हैं।

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

उस सूची को संक्षेप में कहें तो, फायरस्टोर का यह संस्करण विकास के दौरान उपयोगी अधिक उपकरण प्रदान करता है, और उत्पादन में आवश्यक उपकरणों को हटा देता है।

फायरस्टोर को लिखें

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

Entry सबमिट करने का उच्च-स्तरीय प्रवाह है:

उपयोगकर्ता ने फॉर्म भरा और Submit बटन दबाया
यूआई AppState.writeEntryToFirebase को कॉल करता है
AppState.writeEntryToFirebase Firebase में एक प्रविष्टि जोड़ता है

चरण 1 या 2 में शामिल किसी भी कोड को बदलने की आवश्यकता नहीं है। चरण 3 के लिए जोड़ा जाने वाला एकमात्र कोड AppState क्लास में जोड़ा जाएगा। AppState.writeEntryToFirebase में निम्नलिखित परिवर्तन करें।

ऐप_स्टेट.डार्ट

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user;
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 }

 void writeEntryToFirebase(Entry entry) {
   FirebaseFirestore.instance.collection('Entries').add(<String, String>{
     'title': entry.title,
     'date': entry.date.toString(),
     'text': entry.text,
   });
 }
 // ...
}

राइटएंट्रीटूफायरबेस विधि में कोड फायरस्टोर में "एंट्रीज़" नामक संग्रह का संदर्भ लेता है। इसके बाद यह एक नई प्रविष्टि जोड़ता है, जो Map<String, String> प्रकार की होनी चाहिए।

इस मामले में, फायरस्टोर में "प्रविष्टियाँ" संग्रह मौजूद नहीं था, इसलिए फायरस्टोर ने एक बनाया।

उस कोड को जोड़ने के साथ, अपने ऐप को पुनः लोड करें या पुनरारंभ करें, लॉग इन करें और EntryForm दृश्य पर नेविगेट करें। आप जो भी Strings चाहें, फॉर्म भर सकते हैं। (दिनांक फ़ील्ड कोई भी स्ट्रिंग लेगा, क्योंकि इसे इस कोडलैब के लिए सरल बनाया गया है। इसमें किसी भी तरह से DateTime ऑब्जेक्ट के बारे में मजबूत सत्यापन या परवाह नहीं है।)

फॉर्म पर सबमिट दबाएं. ऐप में कुछ नहीं होगा, लेकिन आप एमुलेटर यूआई में अपनी नई प्रविष्टि देख सकते हैं।

फायरस्टोर एमुलेटर में अनुरोध टैब

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

यह पुष्टि करता है कि AppState.writeEntryToFirestore ने काम किया है, और अब आप अनुरोध टैब में अनुरोध को आगे बढ़ा सकते हैं। अब उस टैब पर क्लिक करें.

फायरस्टोर एमुलेटर अनुरोध

यहां, आपको एक सूची देखनी चाहिए जो इसके समान दिखती है:

आप उनमें से किसी भी सूची आइटम पर क्लिक कर सकते हैं और काफी उपयोगी जानकारी देख सकते हैं। नई जर्नल प्रविष्टि बनाने के आपके अनुरोध से संबंधित CREATE सूची आइटम पर क्लिक करें। आपको एक नई तालिका दिखाई देगी जो इस तरह दिखेगी:

जैसा कि उल्लेख किया गया है, फायरस्टोर एमुलेटर आपके ऐप के सुरक्षा नियमों को विकसित करने के लिए उपकरण प्रदान करता है। यह दृश्य दिखाता है कि आपके सुरक्षा नियमों की कौन सी पंक्ति यह अनुरोध पारित हुई (या विफल रही, यदि ऐसा था)। अधिक मजबूत ऐप में, सुरक्षा नियम बढ़ सकते हैं और कई प्राधिकरण जांच हो सकती हैं। इस दृश्य का उपयोग उन प्राधिकरण नियमों को लिखने और डीबग करने में सहायता के लिए किया जाता है।

यह मेटाडेटा और प्रमाणीकरण डेटा सहित इस अनुरोध के प्रत्येक भाग का निरीक्षण करने का एक आसान तरीका भी प्रदान करता है। इस डेटा का उपयोग जटिल प्राधिकरण नियम लिखने के लिए किया जाता है।

फायरस्टोर से पढ़ना

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

यह कोड क्रमशः AppState._entriesStreamController और AppState.entries नामक StreamController और Stream के साथ मिलकर काम करता है। वह कोड पहले ही लिखा जा चुका है, जैसा कि फायरस्टोर से डेटा प्रदर्शित करने के लिए यूआई में आवश्यक सभी कोड है।

नीचे दिए गए कोड से मिलान करने के लिए _listenForEntries विधि को अपडेट करें:

ऐप_स्टेट.डार्ट

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user;
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 }

 void writeEntryToFirebase(Entry entry) {
   FirebaseFirestore.instance.collection('Entries').add(<String, String>{
     'title': entry.title,
     'date': entry.date.toString(),
     'text': entry.text,
   });
 }

 void _listenForEntries() {
   FirebaseFirestore.instance
       .collection('Entries')
       .snapshots()
       .listen((event) {
     final entries = event.docs.map((doc) {
       final data = doc.data();
       return Entry(
         date: data['date'] as String,
         text: data['text'] as String,
         title: data['title'] as String,
       );
     }).toList();

     _entriesStreamController.add(entries);
   });
 }
 // ...
}

यह कोड फायरस्टोर में "प्रविष्टियाँ" संग्रह को सुनता है। जब फायरस्टोर इस क्लाइंट को सूचित करता है कि नया डेटा है, तो यह उस डेटा को पास कर देता है और _listenForEntries में कोड अपने सभी चाइल्ड दस्तावेज़ों को एक ऑब्जेक्ट में बदल देता है जिसका उपयोग हमारा ऐप ( Entry ) कर सकता है। फिर, यह उन प्रविष्टियों को StreamController में जोड़ता है जिसे _entriesStreamController कहा जाता है (जिसे यूआई सुन रहा है)। यह कोड एकमात्र अद्यतन आवश्यक है.

अंत में, याद रखें कि AppState.logIn विधि _listenForEntries पर कॉल करती है, जो उपयोगकर्ता के लॉग इन करने के बाद सुनने की प्रक्रिया शुरू करती है।

// ...
Future<void> logIn(String email, String password) async {
 final credential = await FirebaseAuth.instance
     .signInWithEmailAndPassword(email: email, password: password);
 if (credential.user != null) {
   user = credential.user!;
   _listenForEntries();
 } else {
   print('no user!');
 }
}
// ...

अब ऐप को रन करें. इसे ऐसा दिखना चाहिए:

7. एमुलेटर में डेटा निर्यात और आयात करें

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

एमुलेटर डेटा निर्यात करें

सबसे पहले, आपके पास पहले से मौजूद एमुलेटर डेटा निर्यात करें। जबकि एमुलेटर अभी भी चल रहे हैं, एक नई टर्मिनल विंडो खोलें, और निम्नलिखित कमांड दर्ज करें:

firebase emulators:export ./emulators_data

.emulators_data एक तर्क है, जो फायरबेस को बताता है कि डेटा कहाँ निर्यात करना है। यदि निर्देशिका मौजूद नहीं है, तो इसे बनाया जाता है। आप उस निर्देशिका के लिए अपनी इच्छानुसार कोई भी नाम उपयोग कर सकते हैं।

जब आप यह कमांड चलाते हैं, तो आपको यह आउटपुट उस टर्मिनल में दिखाई देगा जहां आपने कमांड चलाया था:

i  Found running emulator hub for project flutter-firebase-codelab-d6b79 at http://localhost:4400
i  Creating export directory /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data
i  Exporting data to: /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data
✔  Export complete

और यदि आप उस टर्मिनल विंडो पर स्विच करते हैं जहां एमुलेटर चल रहे हैं, तो आपको यह आउटपुट दिखाई देगा:

i  emulators: Received export request. Exporting data to /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data.
✔  emulators: Export complete.

और अंत में, यदि आप अपनी प्रोजेक्ट निर्देशिका में देखते हैं, तो आपको ./emulators_data नामक एक निर्देशिका दिखनी चाहिए, जिसमें आपके द्वारा सहेजे गए डेटा के साथ अन्य मेटाडेटा फ़ाइलों के साथ JSON फ़ाइलें भी शामिल हैं।

एमुलेटर डेटा आयात करें

अब, आप उस डेटा को अपने विकास वर्कफ़्लो के हिस्से के रूप में आयात कर सकते हैं, और वहीं से शुरू कर सकते हैं जहाँ आपने छोड़ा था।

सबसे पहले, यदि एमुलेटर चल रहे हैं तो अपने टर्मिनल में CTRL+C दबाकर उन्हें रोकें।

इसके बाद, emulators:start कमांड चलाएं जिसे आप पहले ही देख चुके हैं, लेकिन एक ध्वज के साथ बताएं कि कौन सा डेटा आयात करना है:

firebase emulators:start --import ./emulators_data

जब एमुलेटर चालू हो जाएं, तो localhost:4000 पर एमुलेटर यूआई पर नेविगेट करें, और आपको वही डेटा देखना चाहिए जिसके साथ आप पहले काम कर रहे थे।

एम्यूलेटर बंद करते समय स्वचालित रूप से डेटा निर्यात करें

प्रत्येक विकास सत्र के अंत में डेटा निर्यात करना याद रखने के बजाय, जब आप एमुलेटर छोड़ते हैं तो आप डेटा को स्वचालित रूप से निर्यात भी कर सकते हैं।

जब आप अपने एमुलेटर शुरू करते हैं, तो दो अतिरिक्त फ़्लैग के साथ emulators:start कमांड चलाएँ।

firebase emulators:start --import ./emulators_data --export-on-exit

वोइला! जब भी आप इस प्रोजेक्ट के लिए एमुलेटर के साथ काम करेंगे तो आपका डेटा अब सहेजा जाएगा और पुनः लोड किया जाएगा। आप –export-on-exit flag के तर्क के रूप में एक अलग निर्देशिका भी निर्दिष्ट कर सकते हैं, लेकिन यह –import को दी गई निर्देशिका के लिए डिफ़ॉल्ट होगी।

आप इन विकल्पों में से किसी भी संयोजन का भी उपयोग कर सकते हैं। यह डॉक्स से नोट है: निर्यात निर्देशिका को इस ध्वज के साथ निर्दिष्ट किया जा सकता है: firebase emulators:start --export-on-exit=./saved-data यदि --import उपयोग किया जाता है, तो निर्यात पथ उसी पर डिफ़ॉल्ट होता है; उदाहरण के लिए: firebase emulators:start --import=./data-path --export-on-exit अंत में, यदि वांछित हो, तो --import और --export-on-exit फ़्लैग के लिए अलग-अलग निर्देशिका पथ पास करें।

8. बधाई हो!

आपने फायरबेस एमुलेटर और फ़्लटर के साथ गेट अप एंड रनिंग पूरी कर ली है। आप इस कोडेलैब के लिए पूरा कोड जीथब पर "पूर्ण" निर्देशिका में पा सकते हैं: फ़्लटर कोडेलैब्स

हमने क्या कवर किया है

फायरबेस का उपयोग करने के लिए फ़्लटर ऐप सेट करना
फायरबेस प्रोजेक्ट स्थापित करना
फ़्लटरफायर सीएलआई
फायरबेस सीएलआई
फायरबेस प्रमाणीकरण एमुलेटर
फायरबेस फायरस्टोर एमुलेटर
एमुलेटर डेटा आयात और निर्यात करना

अगले कदम

फ़्लटर में फ़ायरस्टोर और प्रमाणीकरण का उपयोग करने के बारे में और जानें: फ़्लटर कोडेलैब के लिए फ़ायरबेस के बारे में जानें
एम्यूलेटर प्रदान करने वाले अन्य फायरबेस टूल का अन्वेषण करें:
घन संग्रहण
क्लाउड फ़ंक्शंस
रीयलटाइम डेटाबेस
अपने ऐप में Google प्रमाणीकरण को तुरंत जोड़ने के लिए फ़्लटरफ़ायर यूआई का अन्वेषण करें।

और अधिक जानें

फायरबेस साइट: firebase.google.com
स्पंदन साइट: flutter.dev
फ़्लटरफ़ायर फ़ायरबेस फ़्लटर विजेट: firebase.flutter.dev
फायरबेस यूट्यूब चैनल
फ़्लटर यूट्यूब चैनल

स्पार्की को आप पर गर्व है!