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

फायरबेस एंड्रॉइड कोडलैब - अनुकूल चैट बनाएं

1 अवलोकन

स्क्रीनशॉट

इमेज: वर्किंग फ्रेंडली चैट ऐप।

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

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

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

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

नवीनतम Android स्टूडियो संस्करण।
Android 5.0+ के साथ एक Android एमुलेटर ।
Node.js संस्करण 10 या उच्चतर (एमुलेटर सूट का उपयोग करने के लिए)।
जावा 8 या उच्चतर। जावा स्थापित करने के लिए इन निर्देशों का उपयोग करें; अपने संस्करण की जांच करने के लिए, java -version चलाएं।
कोटलिन प्रोग्रामिंग लैंग्वेज से परिचित।

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

रिपॉजिटरी को क्लोन करें

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

$ git clone https://github.com/firebase/codelab-friendlychat-android

"दोस्तानाचैट-एंड्रॉइड" भंडार में दो निर्देशिकाएं हैं:

बिल्ड-एंड्रॉइड-स्टार्ट -स्टार्टिंग कोड जिसे आप इस कोडलैब में बनाते हैं।
बिल्ड-एंड्रॉइड - समाप्त नमूना ऐप के लिए पूर्ण कोड।

नोट : यदि आप तैयार ऐप को चलाना चाहते हैं, तो आपको फायरबेस कंसोल में फायरबेस एंड्रॉइड ऐप के साथ फायरबेस प्रोजेक्ट बनाना होगा, जिसमें आपके ऐप का पैकेज नाम और SHA1 हो। अधिक जानकारी के लिए, इस कोडलैब का चरण #10 देखें।

Android स्टूडियो में आयात करें

Android स्टूडियो में, फ़ाइल > ओपन चुनें, फिर build-android-start डायरेक्टरी चुनें ( android_studio_folder ) उस निर्देशिका से जहाँ आपने नमूना कोड डाउनलोड किया था।

अब आपके पास एंड्रॉइड स्टूडियो में build-android-start प्रोजेक्ट खुला होना चाहिए। अगर आपको google-services.json फ़ाइल गुम होने की चेतावनी दिखाई देती है, तो चिंता न करें। इसे बाद के चरण में जोड़ा जाएगा।

निर्भरताओं की जाँच करें

इस कोडलैब में आपके लिए आवश्यक सभी निर्भरताएँ आपके लिए पहले ही जोड़ी जा चुकी हैं, लेकिन यह समझना महत्वपूर्ण है कि अपने ऐप में Firebase SDK को कैसे जोड़ा जाए:

बिल्ड.ग्रेडल.केटीएस

plugins {
    id("com.android.application") version "8.0.0" apply false
    id("com.android.library") version "8.0.0" apply false
    id("org.jetbrains.kotlin.android") version "1.8.20" apply false

    // The google-services plugin is required to parse the google-services.json file
    id("com.google.gms.google-services") version "4.3.15" apply false
}

ऐप/build.gradle.kts

plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.gms.google-services")
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation("com.google.android.gms:play-services-auth:20.5.0")

    // Firebase SDK
    implementation(platform("com.google.firebase:firebase-bom:32.0.0"))
    implementation("com.google.firebase:firebase-database-ktx")
    implementation("com.google.firebase:firebase-storage-ktx")
    implementation("com.google.firebase:firebase-auth-ktx")

    // Firebase UI Library
    implementation("com.firebaseui:firebase-ui-auth:8.0.2")
    implementation("com.firebaseui:firebase-ui-database:8.0.2")
}

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

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

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

सबसे पहले आपको Firebase CLI इंस्टॉल करना होगा। यदि आप macOS या Linux का उपयोग कर रहे हैं, तो आप निम्न cURL कमांड चला सकते हैं:

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

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

एक बार जब आप सीएलआई स्थापित कर लेते हैं, तो firebase --version चलाने से 9.0.0 या उच्चतर संस्करण की रिपोर्ट करनी चाहिए:

$ firebase --version
9.0.0

लॉग इन करें

सीएलआई को अपने Google खाते से जोड़ने के लिए firebase login चलाएं। यह लॉगिन प्रक्रिया को पूरा करने के लिए एक नई ब्राउज़र विंडो खोलेगा। वही खाता चुनना सुनिश्चित करें जिसका उपयोग आपने पहले अपना Firebase प्रोजेक्ट बनाते समय किया था।

4. फायरबेस एम्यूलेटर सूट से कनेक्ट करें

एमुलेटर शुरू करें

अपने टर्मिनल में, अपने स्थानीय codelab-friendlychat-android डायरेक्टरी के रूट से निम्न कमांड चलाएँ:

firebase emulators:start --project=demo-friendlychat-android

आपको कुछ इस तरह के लॉग देखने चाहिए। पोर्ट मानों को firebase.json फ़ाइल में परिभाषित किया गया था, जिसे क्लोन नमूना कोड में शामिल किया गया था।

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

Firebase Emulator Suite UI देखने के लिए अपने वेब ब्राउज़र में http://localhost:4000 पर नेविगेट करें:

एमुलेटर सूट यूआई होम

emulators:start ।

अपना ऐप कनेक्ट करें

Android Studio में, MainActivity.kt खोलें, फिर onCreate मेथड के अंदर निम्न कोड जोड़ें:

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5. स्टार्टर ऐप चलाएं

google-services.json जोड़ें

आपके Android ऐप को Firebase से कनेक्ट करने के लिए, आपको अपने Android प्रोजेक्ट के app फ़ोल्डर के अंदर एक google-services.json फ़ाइल जोड़नी होगी। इस कोडलैब के प्रयोजनों के लिए, हमने एक नकली JSON फ़ाइल प्रदान की है जो आपको Firebase Emulator Suite से कनेक्ट करने की अनुमति देगी।

mock-google-services.json फ़ाइल को build-android-start/app फ़ोल्डर में google-services.json के रूप में कॉपी करें:

cp mock-google-services.json build-android-start/app/google-services.json

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

एप चलाएं

अब जब आपने प्रोजेक्ट को Android Studio में आयात कर लिया है और एक Firebase कॉन्फ़िगरेशन JSON फ़ाइल जोड़ दी है, तो आप पहली बार ऐप चलाने के लिए तैयार हैं।

अपना एंड्रॉइड एमुलेटर शुरू करें।
Android स्टूडियो में, चलाएँ क्लिक करें ( ) टूलबार में।

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

6. प्रमाणीकरण सक्षम करें

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

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

वर्तमान उपयोगकर्ता के लिए जाँच करें

सबसे पहले MainActivity.kt क्लास में निम्नलिखित इंस्टेंस वैरिएबल जोड़ें:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

अब जब भी वे ऐप खोलते हैं और अप्रमाणित होते हैं, तो उपयोगकर्ता को साइन-इन स्क्रीन पर भेजने के लिए MainActivity संशोधित करते हैं। दृश्य से binding संलग्न होने के बाद onCreate() विधि में निम्नलिखित जोड़ें:

MainActivity.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

हम यह भी जांचना चाहते हैं कि उपयोगकर्ता onStart() के दौरान साइन इन है या नहीं:

MainActivity.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

फिर वर्तमान में प्रमाणित फायरबेस उपयोगकर्ता के बारे में उचित जानकारी वापस करने के लिए getUserPhotoUrl() और getUserName() विधियों को लागू करें:

MainActivity.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

फिर साइन आउट बटन को संभालने के लिए signOut() विधि लागू करें:

MainActivity.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

अब हमारे पास आवश्यक होने पर उपयोगकर्ता को साइन-इन स्क्रीन पर भेजने के लिए सभी तर्क मौजूद हैं। आगे हमें उपयोगकर्ताओं को ठीक से प्रमाणित करने के लिए साइन-इन स्क्रीन को लागू करने की आवश्यकता है।

फ़ाइल SignInActivity.kt खोलें। प्रमाणीकरण आरंभ करने के लिए यहां एक साधारण साइन-इन बटन का उपयोग किया जाता है। इस खंड में, आप साइन इन के तर्क को लागू करने के लिए FirebaseUI का उपयोग करेंगे।

// Firebase instance variables टिप्पणी के अंतर्गत SignInActivity वर्ग में एक प्रामाणिक उदाहरण चर जोड़ें:

साइन इनएक्टिविटी.केटी

// Firebase instance variables
private lateinit var auth: FirebaseAuth

फिर, फायरबेस को आरंभ करने के लिए onCreate() विधि को उसी तरह संपादित करें जैसे आपने MainActivity में किया था:

साइन इनएक्टिविटी.केटी

// Initialize FirebaseAuth
auth = Firebase.auth

SignInActivity में एक ActivityResultLauncher फ़ील्ड जोड़ें:

साइन इनएक्टिविटी.केटी

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

इसके बाद, FirebaseUI साइन इन फ़्लो को शुरू करने के लिए onStart() विधि संपादित करें:

साइन इनएक्टिविटी.केटी

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

अगला, साइन इन परिणाम को संभालने के लिए onSignInResult विधि को लागू करें। यदि साइन इन का परिणाम सफल रहा, तो MainActivity जारी रखें :

साइन इनएक्टिविटी.केटी

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

इतना ही! आपने केवल कुछ विधि कॉलों में और किसी सर्वर-साइड कॉन्फ़िगरेशन को प्रबंधित करने की आवश्यकता के बिना FirebaseUI के साथ प्रमाणीकरण लागू किया है।

अपने काम का परीक्षण करें

ऐप को अपने एंड्रॉइड एमुलेटर पर चलाएं। आपको तुरंत साइन-इन स्क्रीन पर भेज दिया जाना चाहिए। ईमेल बटन से साइन इन करें टैप करें, फिर एक खाता बनाएँ। यदि सब कुछ सही ढंग से लागू किया गया है, तो आपको मैसेजिंग स्क्रीन पर भेजा जाना चाहिए।

साइन इन करने के बाद, अपने ब्राउज़र में Firebase Emulator Suite UI खोलें, फिर इस पहले साइन-इन किए गए उपयोगकर्ता खाते को देखने के लिए प्रमाणीकरण टैब पर क्लिक करें।

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

इस चरण में, हम रीयलटाइम डेटाबेस में संग्रहीत संदेशों को पढ़ने और प्रदर्शित करने के लिए कार्यक्षमता जोड़ेंगे।

नमूना संदेश आयात करें

Firebase Emulator Suite UI में, रीयलटाइम डेटाबेस टैब चुनें।
डेटा व्यूअर में कोडलैब रिपॉजिटरी की अपनी स्थानीय कॉपी से initial_messages.json फ़ाइल को ड्रैग और ड्रॉप करें।

अब आपके पास डेटाबेस के messages नोड के अंतर्गत कुछ संदेश होने चाहिए।

डेटा पढ़ें

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

इस खंड में हम कोड जोड़ते हैं जो नए जोड़े गए संदेशों को ऐप यूआई में सिंक्रनाइज़ करता है:

फायरबेस रीयलटाइम डेटाबेस को प्रारंभ करना और डेटा में किए गए परिवर्तनों को संभालने के लिए श्रोता जोड़ना।
RecyclerView अडैप्टर को अपडेट कर रहा है ताकि नए संदेश दिखाए जा सकें।
MainActivity क्लास में अपने अन्य फायरबेस इंस्टेंस वेरिएबल्स के साथ डेटाबेस इंस्टेंस वेरिएबल्स जोड़ना:

MainActivity.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

टिप्पणी के तहत अपने MainActivity के onCreate() विधि को संशोधित करें // Initialize Realtime Database and FirebaseRecyclerAdapter । यह कोड रीयलटाइम डेटाबेस से सभी मौजूदा संदेशों को जोड़ता है और फिर आपके फायरबेस रीयलटाइम डेटाबेस में messages पथ के अंतर्गत नई चाइल्ड प्रविष्टियों को सुनता है। यह प्रत्येक संदेश के लिए UI में एक नया तत्व जोड़ता है:

MainActivity.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

इसके बाद FriendlyMessageAdapter.kt वर्ग में आंतरिक वर्ग MessageViewHolder() के भीतर bind() विधि लागू करें:

फ्रेंडलीमैसेजएडाप्टर.केटी

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

हमें छवियों वाले संदेशों को प्रदर्शित करने की भी आवश्यकता है, इसलिए आंतरिक वर्ग ImageMessageViewHolder() के भीतर bind() विधि को भी लागू करें:

फ्रेंडलीमैसेजएडाप्टर.केटी

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

अंत में, MainActivity में वापस जाएं, Firebase रीयलटाइम डेटाबेस से अपडेट सुनना शुरू करें और बंद करें। MainActivity में onPause() और onResume() विधियों को अपडेट करें जैसा कि नीचे दिखाया गया है:

MainActivity.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

समन्‍वयित संदेशों का परीक्षण करें

रन क्लिक करें ( ).
एम्यूलेटर सूट यूआई में, रीयलटाइम डेटाबेस टैब पर लौटें, फिर मैन्युअल रूप से एक नया संदेश जोड़ें। पुष्टि करें कि संदेश आपके Android ऐप में दिखाई दे रहा है:

बधाई हो, आपने अभी-अभी अपने ऐप में एक रीयलटाइम डेटाबेस जोड़ा है!

8. संदेश भेजें

पाठ संदेश भेजने को लागू करें

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

MainActivity क्लास में onCreate() मेथड में सेंड बटन के क्लिक श्रोता को अपडेट करें। यह कोड पहले से ही onCreate() विधि के नीचे है। नीचे दिए गए कोड से मिलान करने के लिए onClick() बॉडी को अपडेट करें:

MainActivity.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

छवि संदेश भेजने को लागू करें

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

छवि चुने
छवि चयन को संभालें
रीयलटाइम डेटाबेस में अस्थायी छवि संदेश लिखें
चयनित छवि अपलोड करना प्रारंभ करें
एक बार अपलोड पूरा हो जाने पर, छवि संदेश URL को अपलोड की गई छवि के URL में अपडेट करें

छवि चुने

छवियों को जोड़ने के लिए यह कोडलैब फायरबेस के लिए क्लाउड स्टोरेज का उपयोग करता है। क्लाउड स्टोरेज आपके ऐप के बाइनरी डेटा को स्टोर करने के लिए एक अच्छी जगह है।

छवि चयन को संभालें और अस्थायी संदेश लिखें

एक बार जब उपयोगकर्ता एक छवि का चयन कर लेता है, तो छवि चयन का Intent शुरू हो जाता है। यह onCreate() विधि के अंत में कोड में पहले ही लागू हो चुका है। समाप्त होने पर यह MainActivity के onImageSelected() विधि को कॉल करता है। नीचे दिए गए कोड स्निपेट का उपयोग करके, आप एक अस्थायी छवि url के साथ डेटाबेस को एक संदेश लिखेंगे जो दर्शाता है कि छवि अपलोड की जा रही है।

MainActivity.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

छवि अपलोड करें और संदेश अपडेट करें

विधि putImageInStorage() को MainActivity में जोड़ें। चयनित छवि के अपलोड को आरंभ करने के लिए इसे onImageSelected() कहा जाता है। एक बार अपलोड पूरा हो जाने पर आप उपयुक्त छवि का उपयोग करने के लिए संदेश को अपडेट कर देंगे।

MainActivity.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

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

Android स्टूडियो में, क्लिक करें रन बटन।
अपने Android एमुलेटर में, एक संदेश दर्ज करें, फिर भेजें बटन पर टैप करें। नया संदेश ऐप UI और Firebase Emulator Suite UI में दिखाई देना चाहिए।
एंड्रॉइड एमुलेटर में, अपने डिवाइस से एक छवि का चयन करने के लिए "+" छवि पर टैप करें। नया संदेश पहले प्लेसहोल्डर छवि के साथ दिखाई देना चाहिए, और फिर छवि अपलोड पूर्ण होने के बाद चयनित छवि के साथ दिखाई देना चाहिए। नया संदेश एम्यूलेटर सूट यूआई में भी दिखाई देना चाहिए, विशेष रूप से रीयलटाइम डेटाबेस टैब में ऑब्जेक्ट के रूप में और स्टोरेज टैब में ब्लॉब के रूप में।

9. बधाई हो!

आपने अभी-अभी Firebase का उपयोग करके रीयल-टाइम चैट ऐप्लिकेशन बनाया है!

आपने क्या सीखा

फायरबेस प्रमाणीकरण
फायरबेस रीयलटाइम डेटाबेस
फायरबेस के लिए क्लाउड स्टोरेज

इसके बाद, अपने Android ऐप में Firebase को जोड़ने के लिए आपने इस कोडलैब में जो सीखा है उसका उपयोग करने का प्रयास करें! फायरबेस के बारे में अधिक जानने के लिए, firebase.google.com पर जाएं।

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

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

10. वैकल्पिक: एक फायरबेस प्रोजेक्ट बनाएं और सेट अप करें

इस चरण में, आप इस कोडलैब के साथ उपयोग करने के लिए एक वास्तविक Firebase प्रोजेक्ट और एक Firebase Android ऐप बनाएंगे। आप अपने ऐप में अपना ऐप-विशिष्ट फायरबेस कॉन्फ़िगरेशन भी जोड़ेंगे। और अंत में, आप अपने ऐप के साथ उपयोग करने के लिए वास्तविक फायरबेस संसाधन सेट अप करेंगे।

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

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

अपने Android प्रोजेक्ट में Firebase जोड़ें

यह चरण शुरू करने से पहले, अपने ऐप का SHA1 हैश प्राप्त करें। अपनी डीबग कुंजी के SHA1 को निर्धारित करने के लिए अपने स्थानीय build-android-start निर्देशिका से निम्न आदेश चलाएं:

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

आपको उपरोक्त जैसा कुछ आउटपुट देखना चाहिए। महत्वपूर्ण रेखा SHA1 हैश है। यदि आप अपने SHA1 हैश को खोजने में असमर्थ हैं, तो अधिक जानकारी के लिए यह पृष्ठ देखें।

Firebase कंसोल पर वापस जाएं, और अपने Android प्रोजेक्ट को अपने Firebase प्रोजेक्ट के साथ पंजीकृत करने के लिए इन चरणों का पालन करें:

अपने नए प्रोजेक्ट की ओवरव्यू स्क्रीन से, सेटअप वर्कफ़्लो लॉन्च करने के लिए Android आइकन पर क्लिक करें:
अगली स्क्रीन पर, अपने ऐप के पैकेज नाम के रूप में com.google.firebase.codelab.friendlychat दर्ज करें।
ऐप रजिस्टर करें पर क्लिक करें, फिर अपनी फायरबेस कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए google-services.json डाउनलोड करें पर क्लिक करें।
google-services.json फ़ाइल को अपने Android प्रोजेक्ट की app डायरेक्टरी में कॉपी करें।
कंसोल के सेटअप वर्कफ़्लो में दिखाए गए अगले चरणों को छोड़ दें (वे build-android-start प्रोजेक्ट में आपके लिए पहले ही किए जा चुके हैं)।
सुनिश्चित करें कि आपके प्रोजेक्ट को ग्रैडल फ़ाइलों के साथ सिंक करके सभी निर्भरताएँ आपके ऐप के लिए उपलब्ध हैं। Android Studio टूलबार से, File > Sync Project with Gradle Files चुनें। कॉन्फ़िगरेशन परिवर्तन होने के लिए आपको बिल्ड/क्लीन प्रोजेक्ट चलाने और प्रोजेक्ट बनाने/पुनर्निर्माण करने की भी आवश्यकता हो सकती है।

फायरबेस प्रमाणीकरण कॉन्फ़िगर करें

इससे पहले कि आपका ऐप आपके उपयोगकर्ताओं की ओर से फायरबेस ऑथेंटिकेशन एपीआई एक्सेस कर सके, आपको फायरबेस ऑथेंटिकेशन और उन साइन-इन प्रदाताओं को सक्षम करना होगा, जिनका आप अपने ऐप में उपयोग करना चाहते हैं।

फायरबेस कंसोल में, बाईं ओर के नेविगेशन पैनल से प्रमाणीकरण चुनें।
साइन-इन विधि टैब का चयन करें।
ईमेल/पासवर्ड पर क्लिक करें, फिर स्विच को सक्षम (नीला) पर टॉगल करें।
Google पर क्लिक करें, फिर स्विच को सक्षम (नीला) पर टॉगल करें और प्रोजेक्ट समर्थन ईमेल सेट करें।

यदि आपको बाद में इस कोडलैब में "CONFIGURATION_NOT_FOUND" संदेश के साथ त्रुटियां मिलती हैं, तो इस चरण पर वापस आएं और अपने काम की दोबारा जांच करें।

रीयलटाइम डेटाबेस कॉन्फ़िगर करें

इस कोडलैब में ऐप फायरबेस रीयलटाइम डेटाबेस में चैट संदेशों को स्टोर करता है। इस खंड में, हम एक डेटाबेस बनाएंगे और इसकी सुरक्षा को एक JSON कॉन्फ़िगरेशन भाषा के माध्यम से कॉन्फ़िगर करेंगे जिसे फायरबेस सुरक्षा नियम कहा जाता है।

फायरबेस कंसोल में, बाईं ओर के नेविगेशन पैनल से रीयलटाइम डेटाबेस चुनें।
एक नया रीयलटाइम डेटाबेस उदाहरण बनाने के लिए डेटाबेस बनाएँ पर क्लिक करें। संकेत दिए जाने पर, us-central1 क्षेत्र चुनें, फिर अगला क्लिक करें।
सुरक्षा नियमों के बारे में पूछे जाने पर, लॉक मोड चुनें, फिर सक्षम करें पर क्लिक करें।
एक बार डेटाबेस उदाहरण बन जाने के बाद, नियम टैब का चयन करें, फिर निम्नलिखित के साथ नियम विन्यास को अद्यतन करें:
```
 {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }
```

सुरक्षा नियम कैसे काम करते हैं, इस बारे में अधिक जानकारी के लिए ("प्रमाणीकरण" चर पर प्रलेखन सहित), रीयलटाइम डेटाबेस सुरक्षा दस्तावेज़ीकरण देखें।

फायरबेस के लिए क्लाउड स्टोरेज को कॉन्फ़िगर करें

फायरबेस कंसोल में, बाईं ओर के नेविगेशन पैनल से स्टोरेज का चयन करें।
अपने प्रोजेक्ट के लिए क्लाउड स्टोरेज को सक्षम करने के लिए गेट स्टार्ट पर क्लिक करें।
सुझाए गए डिफ़ॉल्ट का उपयोग करके, अपनी बकेट सेट अप करने के लिए डायलॉग में दिए गए चरणों का पालन करें।

फायरबेस संसाधनों से कनेक्ट करें

इस कोडलैब के पिछले चरण में, आपने निम्नलिखित को MainActivity.kt में जोड़ा था। यह सशर्त ब्लॉक आपके Android प्रोजेक्ट को Firebase Emulator Suite से जोड़ता है।

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

यदि आप अपने ऐप को अपने नए वास्तविक फायरबेस प्रोजेक्ट और उसके वास्तविक फायरबेस संसाधनों से जोड़ना चाहते हैं, तो आप या तो इस ब्लॉक को हटा सकते हैं या अपने ऐप को रिलीज़ मोड में चला सकते हैं ताकि BuildConfig.DEBUG false हो।

फायरबेस एंड्रॉइड कोडलैब - अनुकूल चैट बनाएं

1 अवलोकन

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

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

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

रिपॉजिटरी को क्लोन करें

Android स्टूडियो में आयात करें

निर्भरताओं की जाँच करें

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

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

लॉग इन करें

4. फायरबेस एम्यूलेटर सूट से कनेक्ट करें

एमुलेटर शुरू करें

अपना ऐप कनेक्ट करें

5. स्टार्टर ऐप चलाएं

google-services.json जोड़ें

एप चलाएं

6. प्रमाणीकरण सक्षम करें

मूल साइन-इन कार्यक्षमता जोड़ें

वर्तमान उपयोगकर्ता के लिए जाँच करें

साइन-इन स्क्रीन को लागू करें

अपने काम का परीक्षण करें

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

नमूना संदेश आयात करें

डेटा पढ़ें

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

MainActivity.kt

समन्‍वयित संदेशों का परीक्षण करें

8. संदेश भेजें

पाठ संदेश भेजने को लागू करें

छवि संदेश भेजने को लागू करें

छवि चुने

छवि चयन को संभालें और अस्थायी संदेश लिखें

छवि अपलोड करें और संदेश अपडेट करें

MainActivity.kt

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

9. बधाई हो!

आपने क्या सीखा

10. वैकल्पिक: एक फायरबेस प्रोजेक्ट बनाएं और सेट अप करें

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

अपने Android प्रोजेक्ट में Firebase जोड़ें

फायरबेस प्रमाणीकरण कॉन्फ़िगर करें

रीयलटाइम डेटाबेस कॉन्फ़िगर करें

फायरबेस के लिए क्लाउड स्टोरेज को कॉन्फ़िगर करें

फायरबेस संसाधनों से कनेक्ट करें