Flutter के लिए Firebase के बारे में जानें

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

इस codelab में, आप की मूल बातें से कुछ सीखेंगे Firebase Android और iOS के लिए स्पंदन मोबाइल क्षुधा बनाने के लिए।

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

यह codelab मानता है कि आपके स्पंदन से परिचित हैं, और आप स्थापित किया है स्पंदन एसडीके , और एक संपादक

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

इस कोडलैब में आप फ़्लटर का उपयोग करके Android, iOS, वेब और macOS पर एक ईवेंट RSVP और गेस्टबुक चैट ऐप बनाएंगे। आप क्लाउड फायरस्टोर का उपयोग करके उपयोगकर्ताओं को फायरबेस प्रमाणीकरण और सिंक डेटा के साथ प्रमाणित करेंगे।

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

आप निम्न में से किसी भी डिवाइस का उपयोग करके इस कोडलैब को चला सकते हैं:

उपरोक्त के अलावा, आपको इसकी भी आवश्यकता होगी:

  • आपकी पसंद का ब्राउज़र, जैसे क्रोम।
  • एक IDE या इस तरह के रूप में अपनी पसंद के पाठ संपादक, एंड्रॉयड स्टूडियो या वी.एस. कोड डार्ट और स्पंदन प्लगइन्स के साथ विन्यस्त।
  • नवीनतम stable के संस्करण स्पंदन (या beta अगर आप किनारे पर रहने वाले आनंद लें)।
  • आपके Firebase प्रोजेक्ट को बनाने और प्रबंधित करने के लिए एक Google खाता, एक gmail खाते की तरह।
  • firebase कमांड लाइन टूल , अपने जीमेल खाते में प्रवेश।
  • कोडलैब का नमूना कोड। कोड कैसे प्राप्त करें, इसके लिए अगला चरण देखें।

2. नमूना कोड प्राप्त करें

आइए GitHub से हमारे प्रोजेक्ट के प्रारंभिक संस्करण को डाउनलोड करके प्रारंभ करें।

क्लोन GitHub भंडार कमांड लाइन से:

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

वैकल्पिक रूप से, अगर आपके पास GitHub के CLI उपकरण स्थापित:

gh repo clone flutter/codelabs flutter-codelabs

नमूना कोड में क्लोन किया जाना चाहिए flutter-codelabs निर्देशिका, जो codelabs का एक संग्रह के लिए कोड है। इस codelab के लिए कोड में है flutter-codelabs/firebase-get-to-know-flutter

के तहत निर्देशिका संरचना flutter-codelabs/firebase-get-to-know-flutter जहाँ आप प्रत्येक नामित कदम के अंत में होना चाहिए की फोटो की एक श्रृंखला है। यह चरण 2 है, इसलिए मेल खाने वाली फाइलों का पता लगाना उतना ही आसान है जितना:

cd flutter-codelabs/firebase-get-to-know-flutter/step_02

यदि आप आगे बढ़ना चाहते हैं, या देखें कि एक कदम के बाद कुछ कैसा दिखना चाहिए, तो उस चरण के नाम पर निर्देशिका देखें जिसमें आप रुचि रखते हैं।

स्टार्टर ऐप आयात करें

खोलें या आयात flutter-codelabs/firebase-get-to-know-flutter/step_02 अपना पसंदीदा आईडीई में निर्देशिका। इस निर्देशिका में कोडलैब के लिए शुरुआती कोड है जिसमें अभी तक काम नहीं करने वाला फ़्लटर मीटअप ऐप शामिल है।

काम करने के लिए फाइलों का पता लगाएँ

इस ऐप में कोड कई निर्देशिकाओं में फैला हुआ है। कार्यक्षमता के इस विभाजन को कोड को कार्यक्षमता के आधार पर समूहीकृत करके काम करना आसान बनाने के लिए डिज़ाइन किया गया है।

प्रोजेक्ट में निम्न फ़ाइलों की स्थिति जानें:

  • lib/main.dart : यह फ़ाइल मुख्य प्रवेश बिंदु और आवेदन विजेट में शामिल है।
  • lib/src/widgets.dart : यह फ़ाइल आवेदन की स्टाइल मदद मानकीकृत करने के लिए विगेट्स के एक मुट्ठी भर में शामिल है। इनका उपयोग स्टार्टर ऐप की स्क्रीन को कंपोज करने के लिए किया जाता है।
  • lib/src/authentication.dart : इस फ़ाइल की एक आंशिक कार्यान्वयन शामिल FirebaseUI प्रमाणीकरण विगेट्स का एक सेट में Firebase ईमेल आधारित प्रमाणीकरण के लिए एक लॉगिन उपयोगकर्ता अनुभव बनाने के साथ। प्रमाणीकरण प्रवाह के लिए ये विजेट अभी तक स्टार्टर ऐप में उपयोग नहीं किए गए हैं, लेकिन आप इन्हें जल्द ही वायर कर देंगे।

बाकी एप्लिकेशन बनाने के लिए आप आवश्यकतानुसार अतिरिक्त फाइलें जोड़ेंगे।

की समीक्षा lib/main.dart फ़ाइल

इस एप्लिकेशन का लाभ लेता है google_fonts पूरे एप्लिकेशन भर रोबोटो डिफ़ॉल्ट फ़ॉन्ट बनाने के लिए हमें सक्षम करने के लिए पैकेज। प्रेरित पाठक के लिए एक व्यायाम जा सकता है fonts.google.com और आप इस ऐप्लिकेशन के विभिन्न भागों में वहाँ की खोज फोंट का उपयोग करें।

आप से सहायक विगेट्स उपयोग कर रहे हैं lib/src/widgets.dart के रूप में Header , Paragraph और IconAndDetail । ये विजेट में वर्णित पेज लेआउट में अव्यवस्था कम HomePage डुप्लिकेट किए गए कोड को नष्ट करने से। यह एक सुसंगत रूप और अनुभव को सक्षम करने का अतिरिक्त लाभ है।

यहां बताया गया है कि आपका ऐप Android, iOS, वेब और macOS पर कैसा दिखता है:

ऐप पूर्वावलोकन

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

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

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

  1. में प्रवेश करें Firebase
  2. Firebase कंसोल में, क्लिक परियोजना जोड़ें (या एक प्रोजेक्ट बना), और अपने Firebase परियोजना Firebase-स्पंदन-Codelab नाम।

4395e4e67c08043a.png

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

b7138cde5f2c7b61.png

Firebase परियोजनाओं के बारे में अधिक जानने के लिए, Firebase परियोजनाओं को समझें

आप जिस ऐप्लिकेशन का निर्माण कर रहे हैं, वह ऐसे कई Firebase उत्पादों का उपयोग करता है जो वेब ऐप्लिकेशन के लिए उपलब्ध हैं:

  • Firebase प्रमाणीकरण अपने उपयोगकर्ताओं को अपने ऐप्लिकेशन में प्रवेश करने की अनुमति देने के लिए।
  • बादल Firestore बादल पर संरचित डेटा बचाने के लिए और जब डेटा परिवर्तन तत्काल अधिसूचना प्राप्त करने के लिए।
  • Firebase सुरक्षा नियम अपने डेटाबेस सुरक्षित करने के लिए।

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

सक्षम करें ईमेल Firebase प्रमाणीकरण के लिए साइन-इन

उपयोगकर्ताओं को वेब ऐप्लिकेशन में प्रवेश करने के लिए अनुमति देने के लिए, तो आप इस codelab के लिए विधि साइन-इन ईमेल / पासवर्ड का उपयोग करेंगे:

  1. Firebase कंसोल में, बाएं पैनल में मेनू बिल्ड का विस्तार करें।
  2. प्रमाणीकरण क्लिक करें और फिर आरंभ करें बटन दबाएं, फिर साइन-इन विधि टैब पर क्लिक करें (या यहां क्लिक करें साइन-इन विधि टैब पर सीधे जाने के लिए)।
  3. प्रदाताओं साइन-इन सूची में ईमेल / पासवर्ड पर क्लिक करें, सेट स्थिति पर स्विच सक्षम करें, और फिर सहेजें क्लिक करें। 58e3e3e23c2f16a4.png

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

वेब एप्लिकेशन का उपयोग करता है बादल Firestore चैट संदेशों बचाने के लिए और नए चैट संदेश प्राप्त करते हैं।

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

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

4. फायरबेस कॉन्फ़िगरेशन

फ़्लटर के साथ फायरबेस का उपयोग करने के लिए, आपको फ़्लटर प्रोजेक्ट को फ़्लटरफ़ायर लाइब्रेरी का सही ढंग से उपयोग करने के लिए कॉन्फ़िगर करने के लिए एक प्रक्रिया का पालन करने की आवश्यकता है:

  • अपने प्रोजेक्ट में FlutterFire निर्भरताएँ जोड़ें
  • Firebase प्रोजेक्ट पर वांछित प्लेटफ़ॉर्म पंजीकृत करें
  • प्लेटफ़ॉर्म-विशिष्ट कॉन्फ़िगरेशन फ़ाइल डाउनलोड करें, और इसे कोड में जोड़ें।

अपने स्पंदन एप्लिकेशन के शीर्ष स्तरीय निर्देशिका में, वहाँ उपनिर्देशिका कहा जाता है android , ios , macos और web । इन निर्देशिकाओं में क्रमशः iOS और Android के लिए प्लेटफ़ॉर्म-विशिष्ट कॉन्फ़िगरेशन फ़ाइलें होती हैं।

निर्भरताओं को कॉन्फ़िगर करें

आपको इस ऐप में उपयोग किए जा रहे दो Firebase उत्पादों के लिए FlutterFire पुस्तकालयों को जोड़ने की आवश्यकता है - Firebase Auth और Cloud Firestore। निर्भरता जोड़ने के लिए निम्नलिखित तीन कमांड चलाएँ।

$ flutter pub add firebase_core 
Resolving dependencies...
+ firebase_core 1.10.5
+ firebase_core_platform_interface 4.2.2
+ firebase_core_web 1.5.2
+ flutter_web_plugins 0.0.0 from sdk flutter
+ js 0.6.3
  test_api 0.4.3 (0.4.8 available)
Changed 5 dependencies!

firebase_core आम कोड सभी Firebase स्पंदन प्लगइन्स के लिए आवश्यक है।

$ flutter pub add firebase_auth
Resolving dependencies...
+ firebase_auth 3.3.3
+ firebase_auth_platform_interface 6.1.8
+ firebase_auth_web 3.3.4
+ intl 0.17.0
  test_api 0.4.3 (0.4.8 available)
Changed 4 dependencies!

firebase_auth Firebase के प्रमाणीकरण की क्षमता के साथ एकीकरण सक्षम बनाता है।

$ flutter pub add cloud_firestore
Resolving dependencies...
+ cloud_firestore 3.1.4
+ cloud_firestore_platform_interface 5.4.9
+ cloud_firestore_web 2.6.4
  test_api 0.4.3 (0.4.8 available)
Changed 3 dependencies!

cloud_firestore बादल Firestore डेटा भंडारण के लिए उपयोग सक्षम बनाता है।

$ flutter pub add provider
Resolving dependencies...
+ nested 1.0.0
+ provider 6.0.1
  test_api 0.4.3 (0.4.8 available)
Changed 2 dependencies!

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

स्थापित कर रहा है flutterfire

  1. FlutterFire CLI अंतर्निहित Firebase CLI पर निर्भर करता है। आप पहले से ऐसा नहीं किया है, तो स्थापित या के नवीनतम संस्करण में अद्यतन Firebase CLI
  2. : इसके बाद, निम्न आदेश चलाकर FlutterFire CLI स्थापित
    $ dart pub global activate flutterfire_cli
    

स्थापना के बाद, flutterfire आदेश विश्व स्तर पर उपलब्ध हो जाएगा।

अपने ऐप्स को कॉन्फ़िगर करना

सीएलआई एक विशिष्ट प्लेटफॉर्म के लिए सभी कॉन्फ़िगरेशन उत्पन्न करने के लिए आपके फायरबेस प्रोजेक्ट और चयनित प्रोजेक्ट एप्लिकेशन से जानकारी निकालता है।

अपने आवेदन की जड़ में, कॉन्फ़िगर कमांड चलाएँ:

$ flutterfire configure

कॉन्फ़िगरेशन कमांड आपको कई प्रक्रियाओं के माध्यम से मार्गदर्शन करेगा:

  1. एक फायरबेस प्रोजेक्ट का चयन करना (.firebaserc फ़ाइल के आधार पर या फायरबेस कंसोल से)।
  2. संकेत दें कि आप किस प्लेटफ़ॉर्म (जैसे Android, iOS, macOS और वेब) के लिए कॉन्फ़िगरेशन चाहते हैं।
  3. पहचानें कि चुने गए प्लेटफॉर्म के लिए कौन से फायरबेस एप्लिकेशन का कॉन्फ़िगरेशन निकालने के लिए उपयोग किया जाना चाहिए। डिफ़ॉल्ट रूप से, CLI आपके वर्तमान प्रोजेक्ट कॉन्फ़िगरेशन के आधार पर स्वचालित रूप से Firebase ऐप्स से मिलान करने का प्रयास करेगा।
  4. अपने प्रोजेक्ट में एक firebase_options.dart फ़ाइल जनरेट करें।

मैकोज़ कॉन्फ़िगर करें

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

macos/धावक/DebugProfile.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

मैकोज़/रनर/रिलीज़.एंटाइटेलमेंट

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

देखें पात्रता और अनुप्रयोग सैंडबॉक्स और अधिक विस्तार के लिए।

5. उपयोगकर्ता साइन-इन जोड़ें (आरएसवीपी)

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

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

प्रदाता के साथ व्यापार तर्क

आप का उपयोग करने के लिए जा रहे हैं provider पैकेज स्पंदन विगेट्स के आवेदन के पेड़ के दौरान एक केंद्रीकृत आवेदन राज्य वस्तु उपलब्ध बनाने के लिए। शुरू में, के शीर्ष पर आयात संशोधित lib/main.dart :

lib/main.dart

import 'package:firebase_auth/firebase_auth.dart'; // new
import 'package:firebase_core/firebase_core.dart'; // new
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';           // new

import 'firebase_options.dart';                    // new
import 'src/authentication.dart';                  // new
import 'src/widgets.dart';

import लाइनों Firebase कोर और प्रमाणीकरण, में पुल परिचय provider पैकेज है जो आप आवेदन राज्य वस्तु विजेट पेड़ के माध्यम से उपलब्ध बनाने के लिए उपयोग कर रहे हैं, और से प्रमाणीकरण विजेट शामिल lib/src

इस आवेदन के स्टेट ऑब्जेक्ट, ApplicationState , तो इस चरण के लिए दो मुख्य जिम्मेदारियों है, लेकिन जैसा कि आप बाद के चरणों में आवेदन करने के लिए और अधिक क्षमताओं को जोड़ अतिरिक्त जिम्मेदारी प्राप्त होगा। पहली जिम्मेदारी के लिए एक कॉल के साथ Firebase पुस्तकालय प्रारंभ करने में है Firebase.initializeApp() , और फिर वहाँ प्राधिकरण प्रवाह की हैंडलिंग है। के अंत में निम्नलिखित वर्ग जोड़े lib/main.dart :

lib/main.dart

class ApplicationState extends ChangeNotifier {
  ApplicationState() {
    init();
  }

  Future<void> init() async {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loginState = ApplicationLoginState.loggedIn;
      } else {
        _loginState = ApplicationLoginState.loggedOut;
      }
      notifyListeners();
    });
  }

  ApplicationLoginState _loginState = ApplicationLoginState.loggedOut;
  ApplicationLoginState get loginState => _loginState;

  String? _email;
  String? get email => _email;

  void startLoginFlow() {
    _loginState = ApplicationLoginState.emailAddress;
    notifyListeners();
  }

  Future<void> verifyEmail(
    String email,
    void Function(FirebaseAuthException e) errorCallback,
  ) async {
    try {
      var methods =
          await FirebaseAuth.instance.fetchSignInMethodsForEmail(email);
      if (methods.contains('password')) {
        _loginState = ApplicationLoginState.password;
      } else {
        _loginState = ApplicationLoginState.register;
      }
      _email = email;
      notifyListeners();
    } on FirebaseAuthException catch (e) {
      errorCallback(e);
    }
  }

  Future<void> signInWithEmailAndPassword(
    String email,
    String password,
    void Function(FirebaseAuthException e) errorCallback,
  ) async {
    try {
      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: email,
        password: password,
      );
    } on FirebaseAuthException catch (e) {
      errorCallback(e);
    }
  }

  void cancelRegistration() {
    _loginState = ApplicationLoginState.emailAddress;
    notifyListeners();
  }

  Future<void> registerAccount(
      String email,
      String displayName,
      String password,
      void Function(FirebaseAuthException e) errorCallback) async {
    try {
      var credential = await FirebaseAuth.instance
          .createUserWithEmailAndPassword(email: email, password: password);
      await credential.user!.updateDisplayName(displayName);
    } on FirebaseAuthException catch (e) {
      errorCallback(e);
    }
  }

  void signOut() {
    FirebaseAuth.instance.signOut();
  }
}

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

यह ध्यान दिया जाना चाहिए कि यह फायरबेसयूआई प्रमाणीकरण प्रवाह का पूर्ण कार्यान्वयन नहीं है, क्योंकि यह किसी मौजूदा खाते वाले उपयोगकर्ता के मामले को नहीं संभालता है जिसे लॉग इन करने में समस्या हो रही है। इस अतिरिक्त क्षमता को लागू करने के लिए एक अभ्यास के रूप में छोड़ दिया गया है प्रेरित पाठक।

प्रमाणीकरण प्रवाह को एकीकृत करना

अब आप आवेदन राज्य की शुरुआत की है कि यह एप्लिकेशन को प्रारंभ में आवेदन राज्य तार और में प्रमाणीकरण प्रवाह जोड़ने के लिए समय आ गया है HomePage । मुख्य प्रवेश बिंदु अद्यतन के माध्यम से आवेदन राज्य को एकीकृत करने के provider पैकेज:

lib/main.dart

void main() {
  // Modify from here
  runApp(
    ChangeNotifierProvider(
      create: (context) => ApplicationState(),
      builder: (context, _) => App(),
    ),
  );
  // to here.
}

करने के लिए संशोधन main समारोह प्रदाता पैकेज आवेदन राज्य वस्तु instantiating का उपयोग कर के लिए जिम्मेदार बनाता है ChangeNotifierProvider विजेट। आप इस विशिष्ट प्रदाता वर्ग का उपयोग कर रहे हैं, क्योंकि आवेदन राज्य वस्तु फैली ChangeNotifier और इस के लिए सक्षम बनाता provider पता करने के लिए जब निर्भर विजेट पुन: प्रदर्शित करने के लिए पैकेज। अंत में, के साथ आवेदन राज्य को एकीकृत Authentication अपडेट करके HomePage के build विधि:

lib/main.dart

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          // Add from here
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Authentication(
              email: appState.email,
              loginState: appState.loginState,
              startLoginFlow: appState.startLoginFlow,
              verifyEmail: appState.verifyEmail,
              signInWithEmailAndPassword: appState.signInWithEmailAndPassword,
              cancelRegistration: appState.cancelRegistration,
              registerAccount: appState.registerAccount,
              signOut: appState.signOut,
            ),
          ),
          // to here
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
        ],
      ),
    );
  }
}

आप का दृष्टांत Authentication विजेट, और एक में लपेट Consumer विजेट। उपभोक्ता हमेशा की तरह विजेट कि provider पैकेज पेड़ जब आवेदन राज्य परिवर्तन के भाग के पुनर्निर्माण के लिए इस्तेमाल किया जा सकता। Authentication विजेट प्रमाणीकरण यूआई है कि अब आप परीक्षण करेंगे है।

प्रमाणीकरण प्रवाह का परीक्षण

cdf2d25e436bd48d.png

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

2a2cd6d69d172369.png

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

e5e65065dba36b54.png

त्रुटि प्रबंधन प्रवाह की जांच करने के लिए एक छोटा पासवर्ड (छह वर्णों से कम) दर्ज करने का प्रयास करना सुनिश्चित करें। यदि उपयोगकर्ता पंजीकृत है, तो वे इसके बजाय पासवर्ड देखेंगे।

fbb3ea35fb4f67a.png

इस पृष्ठ पर त्रुटि प्रबंधन की जांच करने के लिए इस पृष्ठ पर गलत पासवर्ड दर्ज करना सुनिश्चित करें। अंत में, एक बार जब उपयोगकर्ता लॉग इन हो जाता है, तो आप लॉग इन अनुभव देखेंगे जो उपयोगकर्ता को फिर से लॉग आउट करने की क्षमता प्रदान करता है।

4ed811a25b0cf816.png

और इसके साथ ही, आपने प्रमाणीकरण प्रवाह लागू कर दिया है। बधाई!

6. क्लाउड फायरस्टोर को संदेश लिखें

यह जानकर कि उपयोगकर्ता आ रहे हैं, बहुत अच्छा है, लेकिन आइए मेहमानों को ऐप में कुछ और करने दें। क्या होगा यदि वे एक अतिथि पुस्तिका में संदेश छोड़ सकते हैं? वे साझा कर सकते हैं कि वे आने के लिए उत्साहित क्यों हैं या वे किससे मिलने की उम्मीद करते हैं।

संदेशों कि उपयोगकर्ता ऐप में लिखना चैट संग्रहीत करने के लिए, आप इस्तेमाल करेंगे बादल Firestore

डेटा मॉडल

Cloud Firestore एक NoSQL डेटाबेस है, और डेटाबेस में संग्रहीत डेटा को संग्रह, दस्तावेज़, फ़ील्ड और उप-संग्रह में विभाजित किया जाता है। तुम एक उच्च-स्तरीय संग्रह कहा जाता है में एक दस्तावेज़ के रूप में चैट के प्रत्येक संदेश का संग्रह किया जायेगा guestbook

7c20dc8424bb1d84.png

फायरस्टोर में संदेश जोड़ें

इस खंड में, आप डेटाबेस में नए संदेश लिखने के लिए उपयोगकर्ताओं के लिए कार्यक्षमता जोड़ेंगे। सबसे पहले, आप UI तत्व (फ़ॉर्म फ़ील्ड और भेजें बटन) जोड़ते हैं, और फिर आप उस कोड को जोड़ते हैं जो इन तत्वों को डेटाबेस से जोड़ता है।

सबसे पहले, के लिए आयात जोड़ने cloud_firestore पैकेज और dart:async

lib/main.dart

import 'dart:async';                                    // new

import 'package:cloud_firestore/cloud_firestore.dart';  // new
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

import 'firebase_options.dart';
import 'src/authentication.dart';
import 'src/widgets.dart';

संदेश क्षेत्र और एक भेजें बटन का UI तत्व का निर्माण करने के लिए, विजेट एक नया स्टेटफुल जोड़ने GuestBook के तल पर lib/main.dart

lib/main.dart

class GuestBook extends StatefulWidget {
  const GuestBook({required this.addMessage});
  final FutureOr<void> Function(String message) addMessage;

  @override
  _GuestBookState createState() => _GuestBookState();
}

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Form(
        key: _formKey,
        child: Row(
          children: [
            Expanded(
              child: TextFormField(
                controller: _controller,
                decoration: const InputDecoration(
                  hintText: 'Leave a message',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Enter your message to continue';
                  }
                  return null;
                },
              ),
            ),
            const SizedBox(width: 8),
            StyledButton(
              onPressed: () async {
                if (_formKey.currentState!.validate()) {
                  await widget.addMessage(_controller.text);
                  _controller.clear();
                }
              },
              child: Row(
                children: const [
                  Icon(Icons.send),
                  SizedBox(width: 4),
                  Text('SEND'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

इसके अलावा जिस तरह से विगेट्स बाहर रखी हैं ध्यान दें, यदि आप एक है Row एक साथ, TextFormField और एक StyledButton है, जो अपने आप में एक होता है Row । यह भी ध्यान रखें TextFormField एक में लपेटा जाता है Expanded विजेट, इस बलों TextFormField पंक्ति में किसी भी अतिरिक्त जगह लेने के लिए। बेहतर समझने के लिए ऐसा क्यों आवश्यक है, के माध्यम से पढ़ने के लिए कृपया समझ की कमी

अब जब आपके पास एक विजेट है जो उपयोगकर्ता को अतिथि पुस्तक में जोड़ने के लिए कुछ पाठ दर्ज करने में सक्षम बनाता है, तो आपको इसे स्क्रीन पर लाने की आवश्यकता है। ऐसा करने के लिए, संपादित के शरीर HomePage के तल पर निम्नांकित दो पंक्तियों को जोड़ने के लिए ListView के बच्चों:

const Header("What we'll be doing"),
const Paragraph(
  'Join us for a day full of Firebase Workshops and Pizza!',
),
// Add the following two lines.
const Header('Discussion'),
GuestBook(addMessage: (message) => print(message)),

हालांकि यह विजेट प्रदर्शित करने के लिए पर्याप्त है, लेकिन यह कुछ भी उपयोगी करने के लिए पर्याप्त नहीं है। आप इसे कार्यशील बनाने के लिए शीघ्र ही इस कोड को अपडेट करेंगे।

ऐप पूर्वावलोकन

भेजें बटन क्लिक एक उपयोगकर्ता नीचे कोड स्निपेट ट्रिगर किया जाएगा। यह करने के लिए संदेश इनपुट क्षेत्र की सामग्री को कहते हैं guestbook डेटाबेस का संग्रह। विशेष रूप से, addMessageToGuestBook विधि संदेश किसी नए दस्तावेज़ में (एक स्वत: उत्पन्न आईडी के साथ) के लिए सामग्री कहते हैं guestbook संग्रह।

ध्यान दें कि FirebaseAuth.instance.currentUser.uid स्वत: जनरेट अद्वितीय ID के लिए एक संदर्भ है कि Firebase प्रमाणीकरण के लिए सभी लॉग-इन उपयोगकर्ताओं देता है।

के लिए एक और बदलाव करें lib/main.dart फ़ाइल। जोड़े addMessageToGuestBook विधि। आप अगले चरण में यूजर इंटरफेस और इस क्षमता को एक साथ तार देंगे।

lib/main.dart

class ApplicationState extends ChangeNotifier {

  // Current content of ApplicationState elided ...

  // Add from here
  Future<DocumentReference> addMessageToGuestBook(String message) {
    if (_loginState != ApplicationLoginState.loggedIn) {
      throw Exception('Must be logged in');
    }

    return FirebaseFirestore.instance
        .collection('guestbook')
        .add(<String, dynamic>{
      'text': message,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'name': FirebaseAuth.instance.currentUser!.displayName,
      'userId': FirebaseAuth.instance.currentUser!.uid,
    });
  }
  // To here
}

डेटाबेस में UI को तार-तार करना

आपके पास एक UI है जहां उपयोगकर्ता उस पाठ को दर्ज कर सकता है जिसे वे अतिथि पुस्तक में जोड़ना चाहते हैं, और आपके पास क्लाउड फायरस्टोर में प्रविष्टि जोड़ने के लिए कोड है। अब आपको बस इतना करना है कि दोनों को एक साथ तार दें। में lib/main.dart के लिए निम्न परिवर्तन करने के HomePage विजेट।

lib/main.dart

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Authentication(
              email: appState.email,
              loginState: appState.loginState,
              startLoginFlow: appState.startLoginFlow,
              verifyEmail: appState.verifyEmail,
              signInWithEmailAndPassword: appState.signInWithEmailAndPassword,
              cancelRegistration: appState.cancelRegistration,
              registerAccount: appState.registerAccount,
              signOut: appState.signOut,
            ),
          ),
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
          // Modify from here
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (appState.loginState == ApplicationLoginState.loggedIn) ...[
                  const Header('Discussion'),
                  GuestBook(
                    addMessage: (message) =>
                        appState.addMessageToGuestBook(message),
                  ),
                ],
              ],
            ),
          ),
          // To here.
        ],
      ),
    );
  }
}

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

संदेश भेजने का परीक्षण करें

  1. सुनिश्चित करें कि आपने ऐप में साइन इन किया है।
  2. इस तरह के "यहां देखें!" के रूप में संदेश दर्ज करें, और फिर भेजें क्लिक करें।

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

लेकिन आप नए जोड़े गए संदेश को फायरबेस कंसोल में देख सकते हैं।

Firebase कंसोल में, में डाटाबेस डैशबोर्ड , आप देखना चाहिए guestbook आपके नए जोड़े गए संदेश के साथ संग्रह। यदि आप संदेश भेजते रहते हैं, तो आपके गेस्टबुक संग्रह में कई दस्तावेज़ होंगे, जैसे:

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

713870af0b3b63c.png

7. संदेश पढ़ें

यह अच्छा है कि मेहमान डेटाबेस में संदेश लिख सकते हैं, लेकिन वे उन्हें अभी तक ऐप में नहीं देख सकते हैं। चलो इसे ठीक करते हैं!

संदेशों को सिंक्रनाइज़ करें

संदेशों को प्रदर्शित करने के लिए, आपको श्रोताओं को जोड़ना होगा जो डेटा में परिवर्तन होने पर ट्रिगर करते हैं और फिर एक UI तत्व बनाते हैं जो नए संदेश दिखाता है। आप एप्लिकेशन स्थिति में कोड जोड़ेंगे जो ऐप से नए जोड़े गए संदेशों को सुनता है।

बस ऊपर GuestBook निम्नलिखित मूल्य वर्ग विजेट। यह वर्ग आपके द्वारा क्लाउड फायरस्टोर में संग्रहीत किए जा रहे डेटा के संरचित दृश्य को उजागर करता है।

lib/main.dart

class GuestBookMessage {
  GuestBookMessage({required this.name, required this.message});
  final String name;
  final String message;
}

की धारा में ApplicationState जहां राज्य और ही टिककर खेल को परिभाषित, नई लाइनों निम्नलिखित जोड़ें:

lib/main.dart

  ApplicationLoginState _loginState = ApplicationLoginState.loggedOut;
  ApplicationLoginState get loginState => _loginState;

  String? _email;
  String? get email => _email;

  // Add from here
  StreamSubscription<QuerySnapshot>? _guestBookSubscription;
  List<GuestBookMessage> _guestBookMessages = [];
  List<GuestBookMessage> get guestBookMessages => _guestBookMessages;
  // to here.

और अंत में, के प्रारंभ खंड में ApplicationState , दस्तावेज़ संग्रह के ऊपर एक प्रश्न की सदस्यता के लिए जब में एक उपयोगकर्ता के लॉग, और सदस्यता समाप्त जब वे लॉग आउट निम्नलिखित जोड़ें।

lib/main.dart

  Future<void> init() async {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loginState = ApplicationLoginState.loggedIn;
        // Add from here
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
        // to here.
      } else {
        _loginState = ApplicationLoginState.loggedOut;
        // Add from here
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
        // to here.
      }
      notifyListeners();
    });
  }

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

अधिक जानकारी के लिए, बादल Firestore प्रलेखन

में GuestBook आप यूजर इंटरफेस को यह बदल रहा है राज्य कनेक्ट करने की आवश्यकता विजेट। आप इसके कॉन्फ़िगरेशन के हिस्से के रूप में संदेशों की सूची जोड़कर विजेट को संशोधित करते हैं।

lib/main.dart

class GuestBook extends StatefulWidget {
  // Modify the following line
  const GuestBook({required this.addMessage, required this.messages});
  final FutureOr<void> Function(String message) addMessage;
  final List<GuestBookMessage> messages; // new

  @override
  _GuestBookState createState() => _GuestBookState();
}

इसके बाद, हम में इस नए विन्यास को बेनकाब _GuestBookState संशोधित करके build विधि इस प्रकार है।

lib/main.dart

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  // Modify from here
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // to here.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: 'Leave a message',
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Enter your message to continue';
                      }
                      return null;
                    },
                  ),
                ),
                const SizedBox(width: 8),
                StyledButton(
                  onPressed: () async {
                    if (_formKey.currentState!.validate()) {
                      await widget.addMessage(_controller.text);
                      _controller.clear();
                    }
                  },
                  child: Row(
                    children: const [
                      Icon(Icons.send),
                      SizedBox(width: 4),
                      Text('SEND'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        // Modify from here
        const SizedBox(height: 8),
        for (var message in widget.messages)
          Paragraph('${message.name}: ${message.message}'),
        const SizedBox(height: 8),
      ],
      // to here.
    );
  }
}

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

अंत में, आप अब के शरीर अद्यतन करने की आवश्यकता HomePage सही ढंग से निर्माण करने के लिए GuestBook नए के साथ messages पैरामीटर।

lib/main.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (appState.loginState == ApplicationLoginState.loggedIn) ...[
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages, // new
        ),
      ],
    ],
  ),
),

संदेशों को सिंक्रनाइज़ करने का परीक्षण करें

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

  1. आपके द्वारा डेटाबेस में पहले बनाए गए संदेशों को ऐप में प्रदर्शित किया जाना चाहिए। नए संदेश लिखने के लिए स्वतंत्र महसूस करें; उन्हें तत्काल प्रकट होना चाहिए।
  2. यदि आप अपने कार्यक्षेत्र को एकाधिक विंडो या टैब में खोलते हैं, तो संदेश वास्तविक समय में सभी टैब में समन्वयित होंगे।
  3. (वैकल्पिक) आप मैन्युअल रूप से हटाने, संशोधित करने, या Firebase कंसोल का डाटाबेस खंड में सीधे नए संदेश जोड़ने की कोशिश कर सकते हैं; UI में कोई भी परिवर्तन दिखाई देना चाहिए।

बधाई हो! आप अपने ऐप में क्लाउड फायरस्टोर दस्तावेज़ पढ़ रहे हैं!

अनुप्रयोग पी समीक्षा

8. बुनियादी सुरक्षा नियम स्थापित करें

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

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

आप Firebase कंसोल में Cloud Firestore के लिए सुरक्षा नियम लिख सकते हैं:

  1. Firebase कंसोल के विकास खंड में, डेटाबेस क्लिक करें और फिर नियम टैब का चयन करें (या यहां क्लिक करें नियम टैब पर सीधे जाने के लिए)।
  2. नियमों के सार्वजनिक होने के बारे में चेतावनी के साथ आपको निम्नलिखित डिफ़ॉल्ट सुरक्षा नियम देखना चाहिए।

7767a2d2e64e7275.png

संग्रह की पहचान करें

सबसे पहले, उन संग्रहों की पहचान करें जिन पर ऐप डेटा लिखता है।

में match /databases/{database}/documents , संग्रह आप सुरक्षित करना चाहते हैं की पहचान:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

सुरक्षा नियम जोड़ें

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

नीचे दिखाए अनुसार अपने नियम सेट में पढ़ने और लिखने के नियम जोड़ें:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

अब, अतिथिपुस्तिका के लिए, केवल साइन-इन किए हुए उपयोगकर्ता ही संदेश पढ़ सकते हैं (कोई भी संदेश!), लेकिन केवल संदेश का लेखक ही संदेश को संपादित कर सकता है।

सत्यापन नियम जोड़ें

यह सुनिश्चित करने के लिए डेटा सत्यापन जोड़ें कि दस्तावेज़ में सभी अपेक्षित फ़ील्ड मौजूद हैं:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

9. बोनस चरण: आपने जो सीखा है उसका अभ्यास करें

एक सहभागी की प्रतिसाद स्थिति रिकॉर्ड करें

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

आप एप्लिकेशन स्थिति में कुछ नई क्षमताएं जोड़ने जा रहे हैं। पहला यह है कि लॉग इन उपयोगकर्ता को नामांकित करने की क्षमता है कि वे भाग ले रहे हैं या नहीं। दूसरी क्षमता एक काउंटर है कि वास्तव में कितने लोग भाग ले रहे हैं।

में lib/main.dart , इस राज्य के साथ बातचीत करने यूआई कोड सक्षम करने के लिए accessors अनुभाग के लिए निम्नलिखित जोड़ें:

lib/main.dart

int _attendees = 0;
int get attendees => _attendees;

Attending _attending = Attending.unknown;
StreamSubscription<DocumentSnapshot>? _attendingSubscription;
Attending get attending => _attending;
set attending(Attending attending) {
  final userDoc = FirebaseFirestore.instance
      .collection('attendees')
      .doc(FirebaseAuth.instance.currentUser!.uid);
  if (attending == Attending.yes) {
    userDoc.set(<String, dynamic>{'attending': true});
  } else {
    userDoc.set(<String, dynamic>{'attending': false});
  }
}

अद्यतन ApplicationState के init विधि इस प्रकार है:

lib/main.dart

  Future<void> init() async {
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );

    // Add from here
    FirebaseFirestore.instance
        .collection('attendees')
        .where('attending', isEqualTo: true)
        .snapshots()
        .listen((snapshot) {
      _attendees = snapshot.docs.length;
      notifyListeners();
    });
    // To here

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loginState = ApplicationLoginState.loggedIn;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
        // Add from here
        _attendingSubscription = FirebaseFirestore.instance
            .collection('attendees')
            .doc(user.uid)
            .snapshots()
            .listen((snapshot) {
          if (snapshot.data() != null) {
            if (snapshot.data()!['attending'] as bool) {
              _attending = Attending.yes;
            } else {
              _attending = Attending.no;
            }
          } else {
            _attending = Attending.unknown;
          }
          notifyListeners();
        });
        // to here
      } else {
        _loginState = ApplicationLoginState.loggedOut;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
        _attendingSubscription?.cancel(); // new
      }
      notifyListeners();
    });
  }

उपरोक्त उपस्थित लोगों की संख्या का पता लगाने के लिए एक हमेशा सब्सक्राइब की गई क्वेरी जोड़ता है, और दूसरी क्वेरी जो केवल तब सक्रिय होती है जब उपयोगकर्ता यह पता लगाने के लिए लॉग इन होता है कि उपयोगकर्ता भाग ले रहा है या नहीं। इसके बाद, के बाद निम्नलिखित गणन जोड़ने GuestBookMessage घोषणा:

lib/main.dart

enum Attending { yes, no, unknown }

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

lib/main.dart

class YesNoSelection extends StatelessWidget {
  const YesNoSelection({required this.state, required this.onSelection});
  final Attending state;
  final void Function(Attending selection) onSelection;

  @override
  Widget build(BuildContext context) {
    switch (state) {
      case Attending.yes:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(elevation: 0),
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              TextButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      case Attending.no:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              TextButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              ElevatedButton(
                style: ElevatedButton.styleFrom(elevation: 0),
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      default:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              StyledButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              StyledButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
    }
  }
}

इसके बाद, आप अद्यतन करने की आवश्यकता HomePage के निर्माण विधि का लाभ लेने के YesNoSelection एक मनोनीत करने के उपयोगकर्ता द्वारा प्रवेश करता है, तो वे भाग ले रहे हैं सक्षम करने,। आप इस घटना के लिए उपस्थित लोगों की संख्या भी प्रदर्शित करेंगे।

lib/main.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Add from here
      if (appState.attendees >= 2)
        Paragraph('${appState.attendees} people going')
      else if (appState.attendees == 1)
        const Paragraph('1 person going')
      else
        const Paragraph('No one going'),
      // To here.
      if (appState.loginState == ApplicationLoginState.loggedIn) ...[
        // Add from here
        YesNoSelection(
          state: appState.attending,
          onSelection: (attending) => appState.attending = attending,
        ),
        // To here.
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages,
        ),
      ],
    ],
  ),
),

नियम जोड़ें

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

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

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

सत्यापन नियम जोड़ें

यह सुनिश्चित करने के लिए डेटा सत्यापन जोड़ें कि दस्तावेज़ में सभी अपेक्षित फ़ील्ड मौजूद हैं:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

(वैकल्पिक) अब आप बटन पर क्लिक के परिणाम देख सकते हैं। फायरबेस कंसोल में अपने क्लाउड फायरस्टोर डैशबोर्ड पर जाएं।

ऐप पूर्वावलोकन

10. बधाई!

आपने इंटरैक्टिव, रीयल-टाइम वेब ऐप्लिकेशन बनाने के लिए Firebase का इस्तेमाल किया है!

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

  • फायरबेस प्रमाणीकरण
  • क्लाउड फायरस्टोर
  • फायरबेस सुरक्षा नियम

अगले कदम

  • अन्य Firebase उत्पादों के बारे में अधिक जानना चाहते हैं? हो सकता है कि आप उन छवि फ़ाइलों को संग्रहीत करना चाहते हैं जिन्हें उपयोगकर्ता अपलोड करते हैं? या अपने उपयोगकर्ताओं को सूचनाएं भेजें? की जाँच करें Firebase प्रलेखन । फायरबेस के लिए स्पंदन प्लगइन्स के बारे में अधिक जानना चाहते हैं? की जाँच करें FlutterFire अधिक जानकारी के लिए।
  • क्लाउड फायरस्टोर के बारे में अधिक जानना चाहते हैं? शायद आप उपसंग्रह और लेन-देन के बारे में जानना चाहते हैं? को सामने बादल Firestore वेब codelab एक codelab कि बादल इस firestore पर और अधिक गहराई में चला जाता है के लिए। या यह की जाँच यूट्यूब श्रृंखला पता करने के लिए बादल के firestore पाने के लिए !

और अधिक जानें

यह कैसे हुआ?

हमें आपकी राय जान कर खुशी होगी! एक (बहुत) कम फॉर्म भरें यहाँ