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

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

इस कोडलैब में, Android और iOS के लिए Flutter मोबाइल ऐप्लिकेशन बनाने के लिए, Firebase की कुछ बुनियादी बातें बताई गई हैं.

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

• Flutter के बारे में जानकारी
• Flutter SDK
• अपनी पसंद का टेक्स्ट एडिटर

आपको क्या सीखने को मिलेगा

• Flutter की मदद से, Android, iOS, वेब, और macOS पर इवेंट में शामिल होने के लिए जवाब देने और गेस्टबुक चैट ऐप्लिकेशन बनाने का तरीका.
• Firebase Authentication की मदद से उपयोगकर्ताओं की पुष्टि कैसे करें और Firestore के साथ डेटा सिंक कैसे करें.

आपको इनकी ज़रूरत होगी

इनमें से कोई भी डिवाइस:

• आपके कंप्यूटर से कनेक्ट किया गया Android या iOS डिवाइस, जो डेवलपर मोड पर सेट हो.
• iOS सिम्युलेटर (इसके लिए, Xcode टूल की ज़रूरत होती है).
• Android Emulator (इसे Android Studio में सेट अप करना ज़रूरी है).

आपको इनकी भी ज़रूरत होगी:

• अपनी पसंद का कोई ब्राउज़र, जैसे कि Google Chrome.
• आपकी पसंद का कोई आईडीई या टेक्स्ट एडिटर, जिसमें Dart और Flutter प्लगिन कॉन्फ़िगर किए गए हों. जैसे, Android Studio या Visual Studio Code.
• Flutter का नया stable वर्शन या beta.
• Firebase प्रोजेक्ट बनाने और उसे मैनेज करने के लिए, Google खाता.
• Firebase CLI में, आपके Google खाते से लॉग इन किया गया हो.

2. सैंपल कोड पाना

GitHub से अपने प्रोजेक्ट का शुरुआती वर्शन डाउनलोड करें:

1. कमांड लाइन से, GitHub रिपॉज़िटरी को flutter-codelabs डायरेक्ट्री में क्लोन करें:

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

flutter-codelabs डायरेक्ट्री में, कोडलैब के कलेक्शन का कोड होता है. इस कोडलैब का कोड, flutter-codelabs/firebase-get-to-know-flutter डायरेक्ट्री में है. इस डायरेक्ट्री में स्नैपशॉट की एक सीरीज़ होती है. इससे पता चलता है कि हर चरण के आखिर में आपका प्रोजेक्ट कैसा दिखना चाहिए. उदाहरण के लिए, आप दूसरे चरण पर हैं.

2. दूसरे चरण के लिए मिलती-जुलती फ़ाइलें ढूंढें:

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

अगर आपको आगे बढ़ना है या यह देखना है कि किसी चरण के बाद कोई चीज़ कैसी दिखनी चाहिए, तो उस चरण के नाम वाली डायरेक्ट्री में देखें जिसमें आपकी दिलचस्पी है.

स्टार्टर ऐप्लिकेशन इंपोर्ट करना

• अपनी पसंद के IDE में flutter-codelabs/firebase-get-to-know-flutter/step_02 डायरेक्ट्री खोलें या इंपोर्ट करें. इस डायरेक्ट्री में, कोडलैब के लिए स्टार्टर कोड होता है. इसमें Flutter meetup ऐप्लिकेशन शामिल होता है, जो अभी काम नहीं कर रहा है. जब इस ऐप्लिकेशन को अपने आईडीई में खोला जाएगा, तब आपको कंपाइल टाइम की गड़बड़ियां दिखेंगी. इन्हें चौथे चरण में ठीक किया जाएगा.

उन फ़ाइलों को ढूंढें जिन पर काम करना है

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

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

ऐप्लिकेशन के बाकी हिस्से को बनाने के लिए, ज़रूरत के मुताबिक अतिरिक्त फ़ाइलें जोड़ी जाती हैं.

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

यह ऐप्लिकेशन, google_fonts पैकेज का इस्तेमाल करता है, ताकि पूरे ऐप्लिकेशन में Roboto को डिफ़ॉल्ट फ़ॉन्ट के तौर पर इस्तेमाल किया जा सके. fonts.google.com पर जाकर, अलग-अलग फ़ॉन्ट देखे जा सकते हैं. साथ ही, ऐप्लिकेशन के अलग-अलग हिस्सों में उन फ़ॉन्ट का इस्तेमाल किया जा सकता है.

आपने lib/src/widgets.dart फ़ाइल से हेल्पर विजेट का इस्तेमाल किया है. ये विजेट Header, Paragraph, और IconAndDetail के तौर पर उपलब्ध हैं. ये विजेट, डुप्लीकेट कोड को हटा देते हैं, ताकि HomePage में बताए गए पेज लेआउट में कम से कम गड़बड़ी हो. इससे, एक जैसा लुक और फ़ील मिलता है.

Android, iOS, वेब, और macOS पर आपका ऐप्लिकेशन ऐसा दिखता है:

3. Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

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

Firebase प्रोजेक्ट बनाना

1. अपने Google खाते का इस्तेमाल करके, Firebase कंसोल में साइन इन करें.
2. नया प्रोजेक्ट बनाने के लिए बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए, Firebase-Flutter-Codelab.
   
3. जारी रखें पर क्लिक करें.
4. अगर आपसे कहा जाए, तो Firebase की शर्तें पढ़ें और स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
5. (ज़रूरी नहीं) Firebase कंसोल में एआई की मदद पाने की सुविधा चालू करें. इसे "Firebase में Gemini" कहा जाता है.
6. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल करके बंद करें.
7. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट के प्रोविज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.

Firebase प्रोजेक्ट के बारे में ज़्यादा जानने के लिए, Firebase प्रोजेक्ट के बारे में जानकारी लेख पढ़ें.

Firebase प्रॉडक्ट सेट अप करना

ऐप्लिकेशन, Firebase के इन प्रॉडक्ट का इस्तेमाल करता है. ये प्रॉडक्ट, वेब ऐप्लिकेशन के लिए उपलब्ध हैं:

• पुष्टि करना: इससे उपयोगकर्ताओं को आपके ऐप्लिकेशन में साइन इन करने की सुविधा मिलती है.
• Firestore: यह क्लाउड पर स्ट्रक्चर्ड डेटा सेव करता है. साथ ही, डेटा में बदलाव होने पर तुरंत सूचनाएं भेजता है.
• Firebase के सुरक्षा नियम: ये आपके डेटाबेस को सुरक्षित रखते हैं.

इनमें से कुछ प्रॉडक्ट के लिए खास कॉन्फ़िगरेशन की ज़रूरत होती है. इसके अलावा, आपको इन्हें Firebase कंसोल में चालू करना होगा.

ईमेल पते से साइन इन करने की पुष्टि करने की सुविधा चालू करना

1. Firebase कंसोल के प्रोजेक्ट की खास जानकारी वाले पैनल में, बनाएं मेन्यू को बड़ा करें.
2. पुष्टि करें > शुरू करें > साइन-इन करने का तरीका > ईमेल/पासवर्ड > चालू करें > सेव करें पर क्लिक करें.