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 ऐप्लिकेशन में, Model - View - ViewModel को कैसे लागू किया जाता है. इससे कोडबेस को समझना आसान हो जाएगा और अगले चरणों को पूरा करना भी आसान हो जाएगा.

आपको क्या बनाने को मिलेगा

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

इसे 'टास्क जोड़ें' स्क्रीन पर ले जाओ इसे होम स्क्रीन बनाओ

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

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

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

  • मॉडर्न Android ऐप्लिकेशन में Firebase Authentication, Performance Monitoring, Remote Config, और Cloud Firestore का इस्तेमाल कैसे करें
  • Firebase API को MVVM आर्किटेक्चर में कैसे फ़िट किया जाए
  • Firebase API की मदद से किए गए बदलावों को Compose यूज़र इंटरफ़ेस (यूआई) में कैसे दिखाया जाता है

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

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

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

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

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

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

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

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

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

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

यहां दिए गए तरीके से, Android विकल्प चुनें:

Firebase प्रोजेक्ट की खास जानकारी

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

  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. इसके बाद, नई सेवा देने वाली कंपनी जोड़ें पर क्लिक करें. साथ ही, Anonymous को चुनें और चालू करें.

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 /tasks/{document} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null
        && resource.data.userId == request.auth.uid
        && request.data.userId == resource.data.userId;
    }
  }
}

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

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

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

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 को इस तरह अपडेट करें:

screens/settings/SettingsViewModel.kt

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

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

screens/settings/SettingsScreen.kt

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

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

अब जांच करने का समय है!

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

Make it So की सेटिंग स्क्रीन इसे साइन अप स्क्रीन बनाओ

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

4. Cloud Firestore

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

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

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

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

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

screens/tasks/TasksScreen.kt

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

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

screens/tasks/TasksScreen.kt

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

अब जांच करने का समय है!

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

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

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

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

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

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

model/service/Performance.kt

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

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

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()
  }

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

अब जांच करने का समय है!

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

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

6. Remote Config

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

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 फ़ंक्शन में यह जानकारी जोड़ें:

screens/tasks/TasksViewModel.kt

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

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

screens/tasks/TasksScreen.kt

val options by viewModel.options

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

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

अब जांच करने का समय है!

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

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

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

7. बधाई

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

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

इस बारे में और पढ़ें

रेफ़रंस दस्तावेज़