Firebase और Jetpack Compose की मदद से Android ऐप्लिकेशन बनाना

1. शुरुआती जानकारी

पिछली बार अपडेट किए जाने की तारीख: 16-11-2022

Firebase और Jetpack Compose की मदद से Android ऐप्लिकेशन बनाना

इस कोडलैब में, आपको Make It So नाम का एक Android ऐप्लिकेशन बनाना होगा. इस ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई), पूरी तरह से Jetpack Compose से बनाया गया है. यह नेटिव यूआई बनाने के लिए, Android का आधुनिक टूलकिट है. यह आसान है और इसमें .xml फ़ाइलें लिखने और उन्हें गतिविधियों, फ़्रैगमेंट या व्यू से जोड़ने के मुकाबले कम कोड की ज़रूरत होती है.

Firebase और Jetpack Compose एक साथ कितनी अच्छी तरह से काम करते हैं, यह समझने के लिए सबसे पहले यह जानना होगा कि Android के नए आर्किटेक्चर को कैसे समझा जा सकता है. एक अच्छे आर्किटेक्चर से सिस्टम को समझना, उसे डेवलप करना, और उसे बनाए रखना आसान हो जाता है. ऐसा इसलिए, क्योंकि इससे यह साफ़ तौर पर पता चल जाता है कि कॉम्पोनेंट कैसे व्यवस्थित किए जाते हैं और एक-दूसरे के साथ कैसे संचार करते हैं. Android के लिए सुझाए गए आर्किटेक्चर को मॉडल - व्यू - ViewModel कहा जाता है. मॉडल उस लेयर को दिखाता है जो ऐप्लिकेशन में डेटा ऐक्सेस करता है. व्यू, यूज़र इंटरफ़ेस (यूआई) लेयर है और उसे कारोबार के लॉजिक के बारे में कुछ नहीं पता होना चाहिए. ViewModel में कारोबार का लॉजिक लागू किया जाता है. इसके लिए, कभी-कभी ViewModel को Model लेयर को कॉल करना पड़ता है.

हमारा सुझाव है कि यह लेख पढ़ें. इससे आपको यह समझने में मदद मिलेगी कि Jetpack Compose की मदद से बनाए गए Android ऐप्लिकेशन में, मॉडल - व्यू - ViewModel को कैसे लागू किया जाता है. इससे कोडबेस को समझना आसान हो जाएगा और अगले चरणों को पूरा करना आसान हो जाएगा.

आपको क्या बनाना होगा

Make It So एक आसान ऐप्लिकेशन है, जिसमें कामों की सूची होती है. इसकी मदद से उपयोगकर्ता, टास्क जोड़ सकते हैं और उनमें बदलाव कर सकते हैं. साथ ही, वे फ़्लैग, प्राथमिकताएं, और काम पूरा करने की तारीख जोड़ सकते हैं और टास्क को 'पूरा हो गया' के तौर पर मार्क कर सकते हैं. नीचे दी गई इमेज इस ऐप्लिकेशन के दो मुख्य पेज दिखाती हैं: टास्क बनाने वाला पेज और बनाए गए टास्क की सूची वाला मुख्य पेज.

आपको कुछ ऐसी सुविधाएं मिलेंगी जो इस ऐप्लिकेशन में नहीं हैं:

• ईमेल और पासवर्ड से उपयोगकर्ताओं की पुष्टि करें
• Firestore कलेक्शन में लिसनर जोड़ना और यूज़र इंटरफ़ेस (यूआई) को बदलावों के हिसाब से काम करने के लिए बनाना
• ऐप्लिकेशन में किसी कोड की परफ़ॉर्मेंस को मॉनिटर करने के लिए कस्टम ट्रेस जोड़ें
• रिमोट कॉन्फ़िगरेशन का इस्तेमाल करके सुविधा का टॉगल बनाएं और उसे लॉन्च करने के लिए, कुछ लोगों के लिए रिलीज़ करने की सुविधा का इस्तेमाल करें

आपको इनके बारे में जानकारी मिलेगी

• आधुनिक Android ऐप्लिकेशन में Firebase से पुष्टि करने की सुविधा, परफ़ॉर्मेंस मॉनिटरिंग, रिमोट कॉन्फ़िगरेशन, और Cloud Firestore का इस्तेमाल करने का तरीका
• Firebase एपीआई को MVVM आर्किटेक्चर में फ़िट करने का तरीका
• लिखें यूज़र इंटरफ़ेस (यूआई) में Firebase API की मदद से किए गए बदलावों को दिखाने का तरीका

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

• Android Studio फ़्लमिंगो+
• एपीआई 21 या उसके बाद के वर्शन वाला Android एमुलेटर
• Kotlin प्रोग्रामिंग लैंग्वेज के बारे में जानकारी

2. सैंपल ऐप्लिकेशन पाना और Firebase सेट अप करना

सैंपल ऐप्लिकेशन का कोड पाना

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

git clone https://github.com/FirebaseExtended/make-it-so-android.git

ध्यान दें: main ब्रांच में दो फ़ोल्डर हैं: start और final. इस कोडलैब में दिए गए चरणों को पूरा करने के लिए, आपको start फ़ोल्डर का इस्तेमाल करना होगा. अगर आपको पूरा किया गया ऐप्लिकेशन चलाना है, तो आपको final फ़ोल्डर का इस्तेमाल करना होगा.

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

सबसे पहले, आपको Firebase कंसोल पर जाना होगा. इसके बाद, "+ प्रोजेक्ट जोड़ें" बटन पर क्लिक करके Firebase प्रोजेक्ट बनाएं. यहां इसकी इमेज दी गई है:

प्रोजेक्ट बनाने के लिए, स्क्रीन पर दिया गया तरीका अपनाएं.

ध्यान दें: प्रोजेक्ट बनाते समय Google Analytics चालू करना न भूलें. Google Analytics को चालू करने पर, Firebase रिमोट कॉन्फ़िगरेशन में टारगेटिंग के ज़्यादा विकल्प मिलते हैं.

अपने Firebase प्रोजेक्ट में कोई Android ऐप्लिकेशन जोड़ना

अपने Firebase प्रोजेक्ट में, Android, iOS, वेब, Flutter, और Unity के लिए अलग-अलग ऐप्लिकेशन रजिस्टर किए जा सकते हैं.

Android का विकल्प चुनें, जैसा कि आपको यहां दिख रहा है:

इसके बाद, यह तरीका अपनाएं:

1. पैकेज के नाम के तौर पर com.example.makeitso डालें और विकल्प के तौर पर कोई दूसरा नाम डालें. इस कोडलैब के लिए, आपको डीबग साइनिंग सर्टिफ़िकेट जोड़ने की ज़रूरत नहीं है.
2. अपने ऐप्लिकेशन को रजिस्टर करने और Firebase कॉन्फ़िगरेशन फ़ाइल को ऐक्सेस करने के लिए, आगे बढ़ें पर क्लिक करें.
3. अपनी कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए, google-services.json डाउनलोड करें पर क्लिक करें और उसे make-it-so-android/app डायरेक्ट्री में सेव करें.
4. आगे बढ़ें पर क्लिक करें. सैंपल प्रोजेक्ट में build.gradle फ़ाइल में Firebase SDK टूल पहले से ही शामिल हैं. इसलिए, अगले चरणों पर जाने के लिए, आगे बढ़ें पर क्लिक करें.
5. इसके बाद, कंसोल पर जारी रखें पर क्लिक करें.

Make it So ऐप्लिकेशन को सही तरीके से काम करने के लिए, आपको कोड पर जाने से पहले Console में दो काम करने होंगे: पुष्टि करने की सेवा देने वाली कंपनियों को चालू करना और Firestore डेटाबेस बनाना.

पुष्टि करने की सुविधा सेट अप करना

सबसे पहले, आइए पुष्टि की सुविधा चालू करते हैं, ताकि उपयोगकर्ता ऐप्लिकेशन में लॉग इन कर सकें:

1. बिल्ड मेन्यू में, पुष्टि करने की सुविधा चुनें और फिर शुरू करें पर क्लिक करें.
2. साइन इन करने का तरीका कार्ड से ईमेल/पासवर्ड चुनें और इसे चालू करें.
3. इसके बाद, नई कंपनी जोड़ें पर क्लिक करें और पहचान छिपाकर फ़ॉलो करने की सुविधा चालू करें.

Cloud Firestore सेट अप करना

इसके बाद, Firestore सेट अप करें. साइन इन किए हुए उपयोगकर्ता के टास्क सेव करने के लिए, Firestore का इस्तेमाल किया जाएगा. हर उपयोगकर्ता को डेटाबेस के कलेक्शन में अपना दस्तावेज़ मिलेगा.

1. Firebase कंसोल के बाएं पैनल में, बिल्ड करें को बड़ा करें. इसके बाद, Firestore डेटाबेस चुनें.
2. डेटाबेस बनाएं पर क्लिक करें.
3. डेटाबेस आईडी को (default) पर सेट रहने दें.
4. अपने डेटाबेस के लिए कोई जगह चुनें. इसके बाद, आगे बढ़ें पर क्लिक करें.
   असल ऐप्लिकेशन के लिए, आपको ऐसी जगह चुननी होगी जो आपके उपयोगकर्ताओं के आस-पास हो.
5. टेस्ट मोड में चालू करें पर क्लिक करें. सुरक्षा के नियमों से जुड़ा डिसक्लेमर पढ़ें.
   इस सेक्शन के अगले चरण में, आपको अपने डेटा को सुरक्षित रखने के लिए सुरक्षा के नियम जोड़ना होगा. अपने डेटाबेस के लिए सुरक्षा के नियम जोड़े बिना, किसी ऐप्लिकेशन को सार्वजनिक रूप से उपलब्ध न करें या उसे सार्वजनिक न करें.
6. बनाएं पर क्लिक करें.

आइए, Firestore डेटाबेस के लिए मज़बूत सुरक्षा नियम बनाते हैं.

1. Firestore डैशबोर्ड खोलें और नियम टैब पर जाएं.
2. सुरक्षा नियमों को इस तरह अपडेट करें:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
    }
  }
}

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

ऐप्लिकेशन चलाना

अब आप ऐप्लिकेशन इस्तेमाल करने के लिए तैयार हैं! Android Studio में make-it-so-android/start फ़ोल्डर खोलें और ऐप्लिकेशन चलाएं. इसे Android Emulator या किसी असली Android डिवाइस का इस्तेमाल करके पूरा किया जा सकता है.

ध्यान दें: ऐप्लिकेशन डेवलप करने या Firebase को आज़माने के दौरान, हमारा सुझाव है कि आप Firebase Local Emulator Suite का इस्तेमाल करें. हालांकि, यह कोडलैब, Firebase परफ़ॉर्मेंस मॉनिटर करने और Firebase रिमोट कॉन्फ़िगरेशन का इस्तेमाल करता है, जो अब तक एम्युलेटर के साथ काम नहीं करते हैं. इसलिए, आपको इस ऐप्लिकेशन को ऊपर बनाए गए Firebase प्रोजेक्ट के साथ चलाना होगा.

3. Firebase से पुष्टि करना

आपको कौनसी सुविधा जोड़नी है?

Make It So के सैंपल ऐप्लिकेशन की मौजूदा स्थिति में, उपयोगकर्ता बिना साइन-इन किए ऐप्लिकेशन का इस्तेमाल शुरू कर सकता है. ऐसा करने के लिए, यह पहचान छिपाकर पुष्टि करने की सुविधा का इस्तेमाल करता है. हालांकि, बिना पहचान वाले खातों से, उपयोगकर्ता दूसरे डिवाइसों पर या आने वाले समय में होने वाले सेशन में अपना डेटा ऐक्सेस नहीं कर सकता. हालांकि, पहचान छिपाकर पुष्टि करने की सुविधा, वॉर्म ऑनबोर्डिंग के लिए फ़ायदेमंद है, लेकिन आपको उपयोगकर्ताओं को साइन-इन करने का कोई दूसरा तरीका चुनने का विकल्प हमेशा देना चाहिए. इस बात को ध्यान में रखते हुए, इस कोडलैब में आपको Make It So ऐप्लिकेशन में ईमेल और पासवर्ड की पुष्टि करने की सुविधा जोड़नी होगी.

कोडिंग का समय आ गया है!

जैसे ही उपयोगकर्ता खाता बनाता है, वैसे ही एक ईमेल और पासवर्ड टाइप करके, आपको Firebase Authentication API से ईमेल क्रेडेंशियल के लिए अनुरोध करना होगा. इसके बाद, नए क्रेडेंशियल को उस खाते से लिंक करना होगा जिसकी पहचान छिपाई गई है. Android Studio में AccountServiceImpl.kt फ़ाइल खोलें और linkAccount फ़ंक्शन को अपडेट करें, ताकि वह ऐसा दिखे:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String) {
    val credential = EmailAuthProvider.getCredential(email, password)
    auth.currentUser!!.linkWithCredential(credential).await()
}

अब SignUpViewModel.kt खोलें और onSignUpClick फ़ंक्शन के launchCatching ब्लॉक में, सेवा linkAccount फ़ंक्शन को कॉल करें:

screens/sign_up/SignUpViewModel.kt

launchCatching {
    accountService.linkAccount(email, password)
    openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}

सबसे पहले, यह पुष्टि करने की कोशिश करता है कि आपके पास सही क्रेडेंशियल हैं या नहीं. अगर कॉल सही तरीके से होता है, तो यह अगली स्क्रीन (SettingsScreen) पर चला जाता है. इन कॉल को launchCatching ब्लॉक में चलाया जा रहा है. अगर पहली लाइन में कोई गड़बड़ी होती है, तो अपवाद को पकड़कर उसे मैनेज कर दिया जाएगा. साथ ही, दूसरी लाइन पर पहुंचा ही नहीं जाएगा.

जैसे ही SettingsScreen को फिर से खोला जाता है, आपको यह पक्का करना होगा कि साइन इन करें और खाता बनाएं के विकल्प हट गए हों, क्योंकि अब उपयोगकर्ता की पुष्टि पहले ही हो चुकी है. इसके लिए, SettingsViewModel को मौजूदा उपयोगकर्ता की स्थिति (AccountService.kt में उपलब्ध) को सुनने दें, ताकि यह पता लगाया जा सके कि खाता अनाम है या नहीं. ऐसा करने के लिए, SettingsViewModel.kt में uiState को अपडेट करें, ताकि यह ऐसा दिखे:

स्क्रीन/सेटिंग/SettingsViewModel.kt

val uiState = accountService.currentUser.map {
    SettingsUiState(it.isAnonymous)
}

SettingsViewModel से मिले रेवेन्यू की जानकारी इकट्ठा करने के लिए, आपको SettingsScreen.kt में uiState अपडेट करना होगा:

स्क्रीन/सेटिंग/SettingsScreen.kt

val uiState by viewModel.uiState.collectAsState(
    initial = SettingsUiState(false)
)

अब जब भी उपयोगकर्ता बदलेगा, तब SettingsScreen खुद को फिर से व्यवस्थित करेगा, ताकि उपयोगकर्ता की पुष्टि करने की नई स्थिति के हिसाब से विकल्प दिखाए जा सकें.

जांच करने का समय आ गया है!

इसे ऐसा बनाएं चलाएं और स्क्रीन के सबसे ऊपर दाएं कोने में गियर आइकॉन पर क्लिक करके सेटिंग पर जाएं. वहां, खाता बनाएं विकल्प पर क्लिक करें:

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

4. Cloud Firestore

आपको कौनसी सुविधा जोड़नी है?

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

कोडिंग करने का समय आ गया है!

StorageServiceImpl.kt में उपलब्ध Flow को इस तरह अपडेट करें:

model/service/impl/StorageServiceImpl.kt

override val tasks: Flow<List<Task>>
    get() =
      auth.currentUser.flatMapLatest { user ->
        firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
      }

यह कोड, user.id के आधार पर टास्क कलेक्शन में एक लिसनर जोड़ रहा है. हर टास्क को tasks नाम के कलेक्शन में मौजूद दस्तावेज़ से दिखाया जाता है. साथ ही, हर टास्क में userId नाम का एक फ़ील्ड होता है. कृपया ध्यान दें कि अगर currentUser की स्थिति बदलती है, तो एक नया Flow उत्सर्जित होगा (उदाहरण के लिए, प्रस्थान करके).

अब आपको TasksViewModel.kt में मौजूद Flow को सेवा में मौजूद Flow के तौर पर दिखाना होगा:

screens/tasks/TasksViewModel.kt

val tasks = storageService.tasks

सबसे आखिर में, यूज़र इंटरफ़ेस (यूआई) को दिखाने वाले composable function को TasksScreens.kt में बनाना होगा. इसके लिए, आपको इस फ़्लो के बारे में पता होना चाहिए और उसे एक स्थिति के रूप में इकट्ठा करना होगा. हर बार स्थिति बदलने पर, कंपोज़ेबल फ़ंक्शन अपने-आप खुद को रिकंपोज़ करेगा और उपयोगकर्ता को सबसे हाल की स्थिति दिखाएगा. इसे TasksScreen composable function में जोड़ें:

screens/tasks/TasksScreen.kt

val tasks = viewModel
    .tasks
    .collectAsStateWithLifecycle(emptyList())

कंपोज़ेबल फ़ंक्शन को इन स्थितियों का ऐक्सेस मिलने के बाद, LazyColumn को इस तरह दिखाने के लिए अपडेट किया जा सकता है. यह वह स्ट्रक्चर है जिसका इस्तेमाल स्क्रीन पर सूची दिखाने के लिए किया जाता है:

screens/tasks/TasksScreen.kt

LazyColumn {
    items(tasks.value, key = { it.id }) { taskItem ->
        TaskItem( [...] )
    }
}

जांच करने का समय आ गया है!

यह जांचने के लिए कि यह सुविधा काम कर रही है या नहीं, ऐप्लिकेशन का इस्तेमाल करके कोई नया टास्क जोड़ें. इसके लिए, स्क्रीन के सबसे नीचे दाएं कोने में मौजूद 'जोड़ें' बटन पर क्लिक करें. टास्क बनाने के बाद, वह Firestore Console में Firestore कलेक्शन में दिखेगा. अगर आपने एक ही खाते से किसी दूसरे डिवाइस पर Make it So में लॉग इन किया है, तो आपको अपने 'क्या-क्या करें' आइटम में बदलाव करने का विकल्प मिलेगा. साथ ही, उन आइटम को सभी डिवाइसों पर रीयल-टाइम में अपडेट होते हुए देखा जा सकेगा.

5. परफ़ॉर्मेंस को मॉनिटर करना

आपको कौनसी सुविधा जोड़नी है?

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

कोडिंग करने का समय आ गया है!

Performance.kt फ़ाइल खोलने पर, आपको ट्रैक नाम का एक इनलाइन फ़ंक्शन दिखेगा. यह फ़ंक्शन, कस्टम ट्रेस बनाने के लिए परफ़ॉर्मेंस मॉनिटरिंग एपीआई को कॉल करता है और ट्रेस के नाम को पैरामीटर के तौर पर भेजता है. आपको दूसरा पैरामीटर दिखेगा, वह है कोड का वह ब्लॉक जिसे आपको मॉनिटर करना है. हर ट्रेस के लिए इकट्ठा की गई डिफ़ॉल्ट मेट्रिक, पूरी तरह से चलने में लगने वाला समय होता है:

model/service/Performance.kt

inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)

आपके हिसाब से, कोड बेस के किन हिस्सों को मेज़र करना ज़रूरी है और आपके पास उनमें कस्टम ट्रेस जोड़ने का विकल्प है. यहां linkAccount फ़ंक्शन में कस्टम ट्रेस जोड़ने का उदाहरण दिया गया है. इस फ़ंक्शन को आपने इस कोडलैब में पहले (AccountServiceImpl.kt में) देखा था:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String): Unit =
  trace(LINK_ACCOUNT_TRACE) {
      val credential = EmailAuthProvider.getCredential(email, password)
      auth.currentUser!!.linkWithCredential(credential).await()
  }

अब आपकी बारी है! बनाएं ऐप्लिकेशन में कुछ कस्टम ट्रेस जोड़ें. इसके बाद, अगले सेक्शन पर जाकर जांच करें कि यह ठीक से काम कर रहा है या नहीं.

जांच करने का समय आ गया है!

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

कस्टम ट्रेस टैब पर जाएं और देखें कि कोड बेस में आपके जोड़े गए ट्रेस वहां दिख रहे हैं या नहीं. इसके बाद, यह देखें कि कोड के इन हिस्सों को लागू करने में आम तौर पर कितना समय लगता है.

6. Remote Config

आपको कौनसी सुविधा जोड़नी है?

रिमोट कॉन्फ़िगरेशन के लिए, कई तरह के इस्तेमाल के उदाहरण उपलब्ध हैं. जैसे, अपने ऐप्लिकेशन के दिखने का तरीका बदलना या अलग-अलग उपयोगकर्ता सेगमेंट के लिए अलग-अलग व्यवहार कॉन्फ़िगर करना. इस कोडलैब में, आपको रिमोट कॉन्फ़िगरेशन का इस्तेमाल करके एक सुविधा टॉगल बनाना है. यह टॉगल, Make it So ऐप्लिकेशन पर टास्क में बदलाव करने की नई सुविधा को दिखाएगा या छिपाएगा.

कोडिंग का समय आ गया है!

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

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

model/service/impl/ConfigurationServiceImpl.kt

override suspend fun fetchConfiguration(): Boolean {
  return remoteConfig.fetchAndActivate().await()
}

override val isShowTaskEditButtonConfig: Boolean
  get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()

पहला फ़ंक्शन, सर्वर से वैल्यू फ़ेच करता है. यह फ़ंक्शन, ऐप्लिकेशन के शुरू होने के साथ ही SplashViewModel.kt में कॉल किया जाता है. यह पक्का करने का सबसे अच्छा तरीका है कि शुरुआत से ही सभी स्क्रीन पर अप-टू-डेट वैल्यू उपलब्ध हों. अगर उपयोगकर्ता, बाद में यूज़र इंटरफ़ेस (यूआई) या ऐप्लिकेशन के काम करने के तरीके में बदलाव करता है, तो यह एक अच्छा उपयोगकर्ता अनुभव नहीं है. ऐसा तब नहीं होता, जब उपयोगकर्ता कुछ करने के दौरान ही ऐप्लिकेशन का इस्तेमाल कर रहा हो!

दूसरा फ़ंक्शन, उस पैरामीटर के लिए पब्लिश की गई बूलियन वैल्यू दिखा रहा है जिसे आपने अभी-अभी Console में बनाया है. आपको TasksViewModel.kt फ़ंक्शन में यह जानकारी वापस लानी होगी. इसके लिए, loadTaskOptions फ़ंक्शन में यह जानकारी जोड़ें:

स्क्रीन/टास्क/TasksViewModel.kt

fun loadTaskOptions() {
  val hasEditOption = configurationService.isShowTaskEditButtonConfig
  options.value = TaskActionOption.getOptions(hasEditOption)
}

पहली लाइन में मौजूद वैल्यू को वापस पाया जा रहा है और इसका इस्तेमाल करके, दूसरी लाइन में टास्क आइटम के लिए मेन्यू के विकल्प लोड किए जा रहे हैं. अगर वैल्यू false है, तो इसका मतलब है कि मेन्यू में बदलाव करने का विकल्प नहीं होगा. अब आपके पास विकल्पों की सूची है, तो आपको यूज़र इंटरफ़ेस (यूआई) को उसे ठीक से दिखाना होगा. Jetpack Compose की मदद से ऐप्लिकेशन बनाते समय, आपको उस composable function को ढूंढना होगा जो बताता है कि TasksScreen का यूज़र इंटरफ़ेस (यूआई) कैसा दिखना चाहिए. TasksScreen.kt फ़ाइल खोलें और TasksViewModel.kt में उपलब्ध विकल्पों को दिखाने के लिए, LazyColum को अपडेट करें:

स्क्रीन/टास्क/TasksScreen.kt

val options by viewModel.options

LazyColumn {
  items(tasks.value, key = { it.id }) { taskItem ->
    TaskItem(
      options = options,
      [...]
    )
  }
}

TaskItem एक और composable function है, जो बताता है कि किसी एक टास्क का यूज़र इंटरफ़ेस (यूआई) कैसा दिखना चाहिए. हर टास्क के लिए एक मेन्यू होता है, जिसमें विकल्प होते हैं. ये विकल्प तब दिखते हैं, जब उपयोगकर्ता टास्क के आखिर में मौजूद तीन बिंदु वाले आइकॉन पर क्लिक करता है.

जांच करने का समय आ गया है!

अब ऐप्लिकेशन चलाया जा सकता है! देखें कि Firebase कंसोल का इस्तेमाल करके पब्लिश की गई वैल्यू, ऐप्लिकेशन के काम करने के तरीके से मेल खाती है या नहीं:

• अगर यह false है, तो आपको तीन बिंदु वाले आइकॉन पर क्लिक करने पर, सिर्फ़ दो विकल्प दिखेंगे;
• अगर यह true है, तो तीन बिंदु वाले आइकॉन पर क्लिक करने पर आपको तीन विकल्प दिखेंगे;

कंसोल में एक-दो बार वैल्यू बदलकर और ऐप्लिकेशन को रीस्टार्ट करके देखें. रिमोट कॉन्फ़िगरेशन का इस्तेमाल करके, अपने ऐप्लिकेशन में नई सुविधाएं लॉन्च करना इतना ही आसान है!

7. बधाई

बधाई हो, आपने Firebase और Jetpack Compose का इस्तेमाल करके Android ऐप्लिकेशन बना लिया है!

आपने यूज़र इंटरफ़ेस के लिए Jetpack Compose का इस्तेमाल करके बनाए गए Android ऐप्लिकेशन में Firebase से पुष्टि करने, परफ़ॉर्मेंस मॉनिटर करने, रिमोट कॉन्फ़िगरेशन, और Cloud Firestore को जोड़ा है. साथ ही, इसे सुझाए गए MVVM आर्किटेक्चर में शामिल कर लिया है!

आगे पढ़ें

• Firebase और Compose का इस्तेमाल करके Android ऐप्लिकेशन बनाना
• Jetpack Compose ऐप्लिकेशन में Firebase Authentication जोड़ना
• Jetpack Compose ऐप्लिकेशन में Cloud Firestore जोड़ना
• Firebase और Compose की मदद से बनाए गए Android ऐप्लिकेशन में कोरूटीन और फ़्लो जोड़ना
• Jetpack Compose ऐप्लिकेशन में Firebase की परफ़ॉर्मेंस मॉनिटर करने की सुविधा जोड़ना
• Jetpack Compose ऐप्लिकेशन में Firebase रिमोट कॉन्फ़िगरेशन जोड़ना

पहचान फ़ाइलें

• Firebase से पुष्टि करने की सुविधा
• Cloud Firestore
• परफ़ॉर्मेंस मॉनिटर करना
• रिमोट कॉन्फ़िगरेशन