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

Firebase Android कोडलैब (कोड बनाना सीखना) - दोस्ताना चैट करना

1. खास जानकारी

स्क्रीनशॉट

इमेज: काम करने के लिहाज़ से बनाया गया चैट ऐप्लिकेशन.

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

आपको यह जानकारी मिलेगी

उपयोगकर्ताओं को साइन इन करने की अनुमति देने के लिए, Firebase से पुष्टि करने की सुविधा का इस्तेमाल कैसे करें.
Firebase रीयल टाइम डेटाबेस का इस्तेमाल करके डेटा सिंक करने का तरीका.
Firebase के लिए Cloud Storage में बाइनरी फ़ाइलें सेव करने का तरीका.
Firebase के साथ कोई Android ऐप्लिकेशन बनाने के लिए, Firebase लोकल एम्युलेटर सुइट का इस्तेमाल कैसे करें.

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

Android Studio का सबसे नया वर्शन.
Android 5.0 के बाद के वर्शन वाला Android Emulator.
Node.js का 10 या उसके बाद का वर्शन (एम्युलेटर सुइट का इस्तेमाल करने के लिए).
Java 8 या इससे नया वर्शन. Java इंस्टॉल करने के लिए, इन निर्देशों का इस्तेमाल करें; अपना वर्शन देखने के लिए, java -version चलाएं.
Kotlin की प्रोग्रामिंग भाषा की जानकारी.

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

डेटा स्टोर करने की जगह का क्लोन बनाएं

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

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

"फ़्रेंडलीचैट-Android" डेटा स्टोर करने की जगह में दो डायरेक्ट्री होती हैं:

build-android-start—शुरुआती कोड जिसे आपने इस कोडलैब में बनाया है.
बिल्ड-Android—सैंपल ऐप्लिकेशन के तैयार हो जाने के लिए कोड पूरा किया गया.

ध्यान दें: अगर आपको इस्तेमाल किए जा चुके ऐप्लिकेशन को चलाना है, तो आपको Firebase कंसोल में Firebase प्रोजेक्ट बनाना होगा. साथ ही, Firebase के Android ऐप्लिकेशन को भी बनाना होगा, जिसमें आपके ऐप्लिकेशन का पैकेज नाम और SHA1 मौजूद हो. ज़्यादा जानकारी के लिए, इस कोडलैब का चरण #10 देखें.

Android Studio में इंपोर्ट करें

Android Studio में, फ़ाइल > खोलें. इसके बाद, उस डायरेक्ट्री से build-android-start डायरेक्ट्री ( android_studio_फ़ोल्डर ) चुनें जहां से आपने सैंपल कोड डाउनलोड किया था.

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

डिपेंडेंसी जांचें

इस कोडलैब में, ऐसी सभी डिपेंडेंसी जो आपको पहले से जोड़नी होंगी, लेकिन आपके ऐप्लिकेशन में Firebase SDK टूल जोड़ने का तरीका समझना ज़रूरी है:

build.gradle.kts

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
}

app/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 पुष्टि, रीयलटाइम डेटाबेस, और Cloud Storage को एम्युलेट करने के लिए Firebase एम्युलेटर सुइट का इस्तेमाल करेंगे. इससे आपको अपना ऐप्लिकेशन बनाने के लिए, एक सुरक्षित, तेज़, और बिना किसी शुल्क के लोकल डेवलपमेंट एनवायरमेंट मिलता है.

Firebase सीएलआई इंस्टॉल करें

सबसे पहले आपको Firebase सीएलआई इंस्टॉल करना होगा. अगर macOS या Linux का इस्तेमाल किया जा रहा है, तो यहां दिया गया cURL निर्देश चलाया जा सकता है:

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

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

सीएलआई इंस्टॉल करने के बाद, firebase --version को 9.0.0 या इसके बाद वाले वर्शन के वर्शन की रिपोर्ट करनी चाहिए:

$ firebase --version
9.0.0

प्रवेश करें

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

4. Firebase Emulator Suite से कनेक्ट करना

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

अपने टर्मिनल में, अपनी लोकल 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 यूज़र इंटरफ़ेस (यूआई) देखने के लिए, अपने वेब ब्राउज़र में http://localhost:4000 पर जाएं:

Emulator Suite का यूज़र इंटरफ़ेस (यूआई) होम पेज

बाकी कोडलैब के लिए, 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

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

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

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

अपना Android Emulator चालू करें.
Android Studio में, टूलबार में Run ( ) पर क्लिक करें.

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

6. पुष्टि करने की प्रक्रिया चालू करें

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

इसके बाद हम उपयोगकर्ताओं का पता लगाने और साइन-इन स्क्रीन लागू करने के लिए ऐप्लिकेशन में कुछ बुनियादी Firebase पुष्टि कोड जोड़ेंगे.

मौजूदा उपयोगकर्ता की जांच करें

सबसे पहले, 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() तरीके लागू करें, ताकि पुष्टि किए गए मौजूदा Firebase उपयोगकर्ता के बारे में सही जानकारी मिल सके:

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 का इस्तेमाल करना होगा.

SignInActivity क्लास में // Firebase instance variables टिप्पणी के तहत, पुष्टि करने का इंस्टेंस वैरिएबल जोड़ें:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

इसके बाद, onCreate() वाले तरीके में बदलाव करके Firebase शुरू करें. ऐसा आपने MainActivity की तरह ही किया है:

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

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

SignInActivity.kt

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

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

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

SignInActivity.kt

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 पर जारी रखें:

SignInActivity.kt

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 के साथ पुष्टि करने की सुविधा लागू की है. इसके लिए आपको सर्वर साइड कॉन्फ़िगरेशन को मैनेज करने की ज़रूरत नहीं है.

अपने काम की जांच करें

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

साइन इन करने के बाद, अपने ब्राउज़र में Firebase Emulator Suite का यूज़र इंटरफ़ेस (यूआई) खोलें. इसके बाद, पहली बार साइन इन किए गए इस उपयोगकर्ता खाते को देखने के लिए पुष्टि करें टैब पर क्लिक करें.

7. मैसेज पढ़ना

इस चरण में, हम रीयलटाइम डेटाबेस में सेव किए गए मैसेज पढ़ने और दिखाने की सुविधा जोड़ेंगे.

मैसेज के नमूने इंपोर्ट करें

Firebase Emulator Suite के यूज़र इंटरफ़ेस (यूआई) में, रीयलटाइम डेटाबेस टैब चुनें.
कोडलैब के रिपॉज़िटरी की अपनी लोकल कॉपी से initial_messages.json फ़ाइल को खींचें और डेटा व्यूअर में छोड़ें.

अब आपको डेटाबेस के messages नोड में कुछ मैसेज दिखेंगे.

डेटा पढ़ें

मैसेज सिंक करना

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

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

मुख्य गतिविधि.केटी

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

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

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() तरीका लागू करें:

AdaptiveMessageAdapter.kt

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() तरीका भी लागू करें:

AdaptiveMessageAdapter.kt

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

मैसेज सिंक होने की जांच करना

Run ( ) पर क्लिक करें.
एम्युलेटर सुइट के यूज़र इंटरफ़ेस (यूआई) में, रीयलटाइम डेटाबेस टैब पर वापस जाएं. इसके बाद, मैन्युअल तरीके से नया मैसेज जोड़ें. पुष्टि करें कि आपके 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("")
}

इमेज मैसेज भेजने की सुविधा लागू करें

इस सेक्शन में, आपको ऐप्लिकेशन के उपयोगकर्ताओं के लिए इमेज मैसेज भेजने की सुविधा मिलेगी. इमेज वाला मैसेज बनाने के लिए, यह तरीका अपनाएं:

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

इमेज चुनें

इमेज जोड़ने के लिए यह कोडलैब, Firebase के लिए Cloud Storage का इस्तेमाल करता है. अपने ऐप्लिकेशन का बाइनरी डेटा सेव करने के लिए, Cloud Storage एक अच्छी जगह है.

इमेज चुनने का काम मैनेज करें और तापमान के बारे में मैसेज लिखें

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

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() में कॉल किया जाता है. अपलोड पूरा होने के बाद, आपको सही इमेज का इस्तेमाल करने के लिए मैसेज अपडेट करना होगा.

मुख्य गतिविधि.केटी

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 Studio में, रन बटन पर क्लिक करें.
अपने Android Emulator में, कोई मैसेज डालें. इसके बाद, 'भेजें' बटन पर टैप करें. नया मैसेज, ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) और Firebase Emulator Suite यूज़र इंटरफ़ेस (यूआई) में दिखना चाहिए.
Android Emulator में, "+" चित्र का उपयोग करें. नया मैसेज, सबसे पहले प्लेसहोल्डर इमेज के साथ दिखना चाहिए. इसके बाद, इमेज अपलोड होने के बाद, चुनी गई इमेज के साथ नया मैसेज दिखना चाहिए. नया मैसेज, Emulator Suite के यूज़र इंटरफ़ेस (यूआई) में भी दिखना चाहिए. खास तौर पर, रीयलटाइम डेटाबेस टैब में किसी ऑब्जेक्ट के तौर पर और स्टोरेज टैब में ब्लॉब के तौर पर.

9. बधाई हो!

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

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

Firebase से पुष्टि करना
Firebase रीयल टाइम डेटाबेस
Firebase के लिए Cloud Storage

इसके बाद, Firebase को अपने Android ऐप्लिकेशन में जोड़ने के लिए, इस कोडलैब में सीखी गई बातों का इस्तेमाल करके देखें! Firebase के बारे में ज़्यादा जानने के लिए, firebase.google.com पर जाएं.

अगर आपको असली Firebase प्रोजेक्ट सेट अप करने और असली Firebase संसाधनों (न कि डेमो प्रोजेक्ट और सिर्फ़ एम्युलेट किए गए संसाधनों) का इस्तेमाल करने का तरीका जानना है, तो अगले चरण पर जाएं.

ध्यान दें: जब आप असली Firebase प्रोजेक्ट सेट अप कर लें और खास तौर पर, जब आप असली ऐप्लिकेशन बनाना शुरू कर दें, तब भी हम डेवलपमेंट और जांच के लिए Firebase लोकल एम्युलेटर सुइट का इस्तेमाल करने का सुझाव देते हैं.

10. ज़रूरी नहीं: Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

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

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

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

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

यह चरण शुरू करने से पहले, अपने ऐप्लिकेशन का 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 डालें.
ऐप्लिकेशन रजिस्टर करें पर क्लिक करें. इसके बाद, अपनी Firebase कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए, google-services.json डाउनलोड करें पर क्लिक करें.
google-services.json फ़ाइल को अपने Android प्रोजेक्ट की app डायरेक्ट्री में कॉपी करें.
कंसोल के सेटअप वर्कफ़्लो में दिखाए गए अगले चरण अभी नहीं (ये आपके लिए build-android-start प्रोजेक्ट में पहले ही कर दिए गए हैं).
पक्का करें कि Gradle फ़ाइलों के साथ अपना प्रोजेक्ट सिंक करके, आपके ऐप्लिकेशन पर सभी डिपेंडेंसी उपलब्ध हैं. Android Studio के टूलबार से, फ़ाइल चुनें > Gradle फ़ाइलों के साथ प्रोजेक्ट सिंक करें. कॉन्फ़िगरेशन में बदलाव करने के लिए, आपको बिल्ड/क्लीन प्रोजेक्ट और बिल्ड/रीबिल्ड प्रोजेक्ट चलाना पड़ सकता है.

Firebase से पुष्टि करने की सुविधा कॉन्फ़िगर करें

इससे पहले कि आपका ऐप्लिकेशन आपके उपयोगकर्ताओं की ओर से, Firebase से पुष्टि करने वाले एपीआई को ऐक्सेस कर सके, आपको Firebase से पुष्टि करने की सुविधा और अपने ऐप्लिकेशन में इस्तेमाल करने के लिए साइन-इन करने वाली कंपनियों को चालू करना होगा.

Firebase कंसोल में, बाईं ओर के नेविगेशन पैनल से पुष्टि करें को चुनें.
साइन इन करने का तरीका टैब चुनें.
ईमेल/पासवर्ड पर क्लिक करें. इसके बाद, स्विच को 'चालू है' (नीला) पर टॉगल करें.
Google पर क्लिक करें. इसके बाद, स्विच को 'चालू है' (नीला) पर टॉगल करें. इसके बाद, प्रोजेक्ट से जुड़ी सहायता के लिए ईमेल सेट करें.

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

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

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

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

सुरक्षा के नियम कैसे काम करते हैं, इस बारे में ज़्यादा जानकारी के लिए (इसमें "auth" वैरिएबल से जुड़े दस्तावेज़ भी शामिल हैं), रीयल टाइम डेटाबेस के सुरक्षा से जुड़े दस्तावेज़ देखें.

Firebase के लिए Cloud Storage कॉन्फ़िगर करें

Firebase कंसोल में, बाईं ओर मौजूद नेविगेशन पैनल में स्टोरेज चुनें.
अपने प्रोजेक्ट के लिए Cloud Storage चालू करने के लिए, शुरू करें पर क्लिक करें.
सुझाए गए डिफ़ॉल्ट का इस्तेमाल करके, बकेट सेट अप करने के लिए, डायलॉग बॉक्स में दिया गया तरीका अपनाएं.

Firebase के संसाधनों से कनेक्ट करें

इस कोडलैब के शुरुआती चरण में, आपने 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)
}

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

Firebase Android कोडलैब (कोड बनाना सीखना) - दोस्ताना चैट करना

1. खास जानकारी

आपको यह जानकारी मिलेगी

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

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

डेटा स्टोर करने की जगह का क्लोन बनाएं

Android Studio में इंपोर्ट करें

डिपेंडेंसी जांचें

3. Firebase सीएलआई इंस्टॉल करें

Firebase सीएलआई इंस्टॉल करें

प्रवेश करें

4. Firebase Emulator Suite से कनेक्ट करना

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

अपना ऐप्लिकेशन कनेक्ट करें

5. स्टार्टर ऐप्लिकेशन चलाएं

google-services.json जोड़ें

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

6. पुष्टि करने की प्रक्रिया चालू करें

साइन-इन करने की बुनियादी सुविधाएं जोड़ें

मौजूदा उपयोगकर्ता की जांच करें

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

अपने काम की जांच करें

7. मैसेज पढ़ना

मैसेज के नमूने इंपोर्ट करें

डेटा पढ़ें

मैसेज सिंक करना

मुख्य गतिविधि.केटी

मैसेज सिंक होने की जांच करना

8. मैसेज भेजें

मैसेज भेजने की सुविधा लागू करें

इमेज मैसेज भेजने की सुविधा लागू करें

इमेज चुनें

इमेज चुनने का काम मैनेज करें और तापमान के बारे में मैसेज लिखें

इमेज अपलोड करें और मैसेज अपडेट करें

मुख्य गतिविधि.केटी

मैसेज भेजने की जांच करना

9. बधाई हो!

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

10. ज़रूरी नहीं: Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

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

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

Firebase से पुष्टि करने की सुविधा कॉन्फ़िगर करें

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

Firebase के लिए Cloud Storage कॉन्फ़िगर करें

Firebase के संसाधनों से कनेक्ट करें