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

स्क्रीनशॉट

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

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

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

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

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

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

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

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

Android Studio में आयात करें

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

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

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

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

बिल्ड.ग्रेडल

buildscript {
    // ...

    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.2'

        // The google-services plugin is required to parse the google-services.json file
        classpath 'com.google.gms:google-services:4.3.5'
    }
}

ऐप/बिल्ड.ग्रेडल

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:19.0.0'

    // Firebase SDK
    implementation platform('com.google.firebase:firebase-bom:26.6.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:7.2.0'
    implementation 'com.firebaseui:firebase-ui-database:7.2.0'
}

आदेश को चलाने के लिए Firebase एम्यूलेटर सुइट , आप को स्थापित करने और उपयोग करने की आवश्यकता Firebase CLI

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

विकल्प 1 - npm . के साथ स्थापित करें

यदि आपके पास पहले से ही आपकी मशीन पर Node.js और npm स्थापित है, तो आप निम्न आदेश के साथ CLI स्थापित कर सकते हैं:

npm install -g firebase-tools@latest

विकल्प 2 - स्टैंडअलोन बाइनरी स्थापित करें

आप Node.js / NPM नहीं है, तो या आप अनुप्रयोग विकास के लिए नए हैं, तो आपको निम्न एक स्टैंडअलोन बाइनरी के रूप में स्थापित कर सकते हैं CLI यहाँ मंच के लिए निर्देश

स्थापना की जाँच करें

एक बार जब आप Firebase CLI स्थापित किया है, सुनिश्चित करें कि आप संस्करण है बनाने के लिए निम्न आदेश चला 9.11.0 या उच्चतर:

firebase --version

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

अपने टर्मिनल में, अपने स्थानीय की जड़ से निम्न आदेश चला 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.

पर नेविगेट करें http: // localhost: 4000 देखने पर Firebase एम्यूलेटर सुइट यूआई अपने वेब ब्राउज़र में:

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

छोड़ दो emulators:start codelab के आराम के लिए आदेश चल रहा है।

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

एंड्रॉयड स्टूडियो में, खुली 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)
}

google-services.json जोड़ें

Firebase से कनेक्ट करने के अपने Android एप्लिकेशन के लिए आदेश में, आप एक जोड़ना होगा google-services.json अंदर फ़ाइल app अपने Android परियोजना के फ़ोल्डर। इस कोडलैब के प्रयोजनों के लिए, हमने एक नकली 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

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

ऐप चलाएं

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

  1. अपना एंड्रॉइड एमुलेटर शुरू करें।
  2. एंड्रॉयड स्टूडियो में, भागो (क्लिक करें निष्पादित करना ) टूलबार में।

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

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

बुनियादी साइन-इन कार्यक्षमता जोड़ें

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

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

सबसे पहले करने के लिए निम्न उदाहरण चर जोड़ने MainActivity.kt वर्ग:

मुख्य गतिविधि.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

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

मुख्य गतिविधि.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() :

मुख्य गतिविधि.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 उपयोगकर्ता के बारे में उचित जानकारी वापस जाने के लिए तरीके:

मुख्य गतिविधि.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() बाहर बटन संकेत को संभालने के लिए विधि:

मुख्य गतिविधि.kt

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

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

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

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

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

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

// Firebase instance variables
private lateinit var auth: FirebaseAuth

फिर, संपादित करें onCreate() विधि उसी तरह आप में किया था में Firebase प्रारंभ करने में MainActivity :

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

// Initialize FirebaseAuth
auth = Firebase.auth

एक जोड़े ActivityResultLauncher के क्षेत्र SignInActivity :

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

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

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

बगल में, संपादित onStart() के प्रवाह में FirebaseUI संकेत शुरू करने के लिए विधि:

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

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

इतना ही! आपने कुछ ही मेथड कॉल्स में और बिना किसी सर्वर-साइड कॉन्फिगरेशन को मैनेज किए फायरबेसयूआई के साथ ऑथेंटिकेशन लागू किया है।

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

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

में हस्ताक्षर करने के बाद, आपके ब्राउज़र में Firebase एम्यूलेटर सुइट यूआई खोलने तो देखने के लिए यह पहली साइन-इन उपयोगकर्ता खाता प्रमाणीकरण टैब पर क्लिक करें।

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

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

  1. Firebase एम्यूलेटर सुइट UI में, रीयलटाइम डाटाबेस टैब का चयन करें।
  2. खींचें और initial_messages.json डेटा दर्शक में codelab भंडार के अपने स्थानीय प्रतिलिपि से फ़ाइल।

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

डेटा पढ़ें

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

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

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

मुख्य गतिविधि.kt

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

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

मुख्य गतिविधि.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 वर्ग को लागू bind() भीतरी वर्ग के भीतर विधि MessageViewHolder() :

FriendlyMessageAdapter.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)
        }
    }
    ...
}

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

FriendlyMessageAdapter.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 रीयलटाइम डाटाबेस से अद्यतन के लिए सुन रहा। अद्यतन onPause() और onResume() में तरीकों MainActivity के रूप में नीचे दिखाया गया है:

मुख्य गतिविधि.kt

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

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

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

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

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

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

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

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

मुख्य गतिविधि.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 के साथ एक संदेश लिखेंगे जो यह दर्शाता है कि छवि अपलोड की जा रही है।

मुख्य गतिविधि.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() चयनित छवि को अपलोड करना आरंभ करें। एक बार अपलोड पूरा हो जाने पर आप उपयुक्त छवि का उपयोग करने के लिए संदेश को अपडेट कर देंगे।

मुख्य गतिविधि.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
            )
        }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

./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 हैश नहीं ढूंढ पा रहे हैं, तो देखने के इस पेज में अधिक जानकारी के लिए।

फायरबेस कंसोल पर वापस जाएं, और अपने एंड्रॉइड प्रोजेक्ट को अपने फायरबेस प्रोजेक्ट के साथ पंजीकृत करने के लिए इन चरणों का पालन करें:

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

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

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

  1. में Firebase कंसोल , बाईं ओर स्थित मार्गदर्शक पैनल से प्रमाणीकरण का चयन करें।
  2. साइन-इन विधि टैब चुनें।
  3. , ईमेल / पासवर्ड क्लिक करें, फिर सक्षम (नीला) के लिए स्विच टॉगल।
  4. , गूगल क्लिक करें, फिर सक्षम (नीला) के लिए स्विच टॉगल और एक परियोजना समर्थन ईमेल निर्धारित किया है।

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

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

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

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

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

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

  1. में Firebase कंसोल , बाईं ओर स्थित मार्गदर्शक पैनल से भंडारण का चयन करें।
  2. अपनी परियोजना के लिए क्लाउड संग्रहण सक्षम करने के लिए शुरू करने के लिए क्लिक करें।
  3. सुझाए गए डिफ़ॉल्ट का उपयोग करके, अपना बकेट सेट करने के लिए संवाद में दिए गए चरणों का पालन करें।

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

इस codelab के पहले के एक चरण में, आप करने के लिए निम्नलिखित जोड़ा 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