ফায়ারবেস অ্যান্ড্রয়েড কোডল্যাব - বন্ধুত্বপূর্ণ চ্যাট তৈরি করুন

1. সংক্ষিপ্ত বিবরণ

স্ক্রিনশট

ছবি: কার্যকরী বন্ধুত্বপূর্ণ চ্যাট অ্যাপ।

ফ্রেন্ডলি চ্যাট কোডল্যাবে আপনাকে স্বাগতম। এই কোডল্যাবে, আপনি শিখবেন কিভাবে ফায়ারবেস প্ল্যাটফর্ম ব্যবহার করে অ্যান্ড্রয়েডে চ্যাট অ্যাপ তৈরি করতে হয়।

তুমি কি শিখবে

  • ব্যবহারকারীদের সাইন ইন করার অনুমতি দেওয়ার জন্য ফায়ারবেস প্রমাণীকরণ কীভাবে ব্যবহার করবেন।
  • ফায়ারবেস রিয়েলটাইম ডাটাবেস ব্যবহার করে কীভাবে ডেটা সিঙ্ক করবেন।
  • ফায়ারবেসের জন্য ক্লাউড স্টোরেজে বাইনারি ফাইলগুলি কীভাবে সংরক্ষণ করবেন।
  • ফায়ারবেস লোকাল এমুলেটর স্যুট ব্যবহার করে ফায়ারবেস দিয়ে একটি অ্যান্ড্রয়েড অ্যাপ তৈরি করবেন কীভাবে?

তোমার যা লাগবে

  • সর্বশেষ অ্যান্ড্রয়েড স্টুডিও সংস্করণ।
  • অ্যান্ড্রয়েড ৫.০+ সহ একটি অ্যান্ড্রয়েড এমুলেটর
  • Node.js সংস্করণ ১০ বা তার বেশি (এমুলেটর স্যুট ব্যবহার করার জন্য)।
  • জাভা ৮ বা তার উচ্চতর। জাভা ইনস্টল করতে এই নির্দেশাবলী ব্যবহার করুন; আপনার সংস্করণ পরীক্ষা করতে, java -version চালান।
  • কোটলিন প্রোগ্রামিং ভাষার সাথে পরিচিতি।

2. নমুনা কোড পান

সংগ্রহস্থলটি ক্লোন করুন

কমান্ড লাইন থেকে GitHub রিপোজিটরি ক্লোন করুন:

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

অ্যান্ড্রয়েড স্টুডিওতে আমদানি করুন

অ্যান্ড্রয়েড স্টুডিওতে, File > Open নির্বাচন করুন, তারপর build-android-start ডিরেক্টরিটি নির্বাচন করুন ( অ্যান্ড্রয়েড_স্টুডিও_ফোল্ডার ) যে ডিরেক্টরি থেকে আপনি নমুনা কোড ডাউনলোড করেছেন সেখান থেকে।

এখন আপনার অ্যান্ড্রয়েড স্টুডিওতে 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
}

অ্যাপ/বিল্ড.গ্র্যাডল.কেটিএস

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

৩. ফায়ারবেস সিএলআই ইনস্টল করুন

এই কোডল্যাবে আপনি Firebase Auth, রিয়েলটাইম ডাটাবেস এবং ক্লাউড স্টোরেজ স্থানীয়ভাবে অনুকরণ করতে Firebase এমুলেটর স্যুট ব্যবহার করবেন। এটি আপনার অ্যাপ তৈরির জন্য একটি নিরাপদ, দ্রুত এবং বিনামূল্যে স্থানীয় ডেভেলপমেন্ট পরিবেশ প্রদান করে।

ফায়ারবেস সিএলআই ইনস্টল করুন

প্রথমে আপনাকে Firebase CLI ইনস্টল করতে হবে। আপনি যদি macOS বা Linux ব্যবহার করেন, তাহলে আপনি নিম্নলিখিত cURL কমান্ডটি চালাতে পারেন:

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

আপনি যদি উইন্ডোজ ব্যবহার করেন, তাহলে একটি স্বতন্ত্র বাইনারি পেতে অথবা npm এর মাধ্যমে ইনস্টল করতে ইনস্টলেশন নির্দেশাবলী পড়ুন।

একবার আপনি CLI ইনস্টল করার পরে, firebase --version চালানোর সময় 9.0.0 বা তার বেশি সংস্করণের রিপোর্ট করা উচিত:

$ firebase --version
9.0.0

লগ ইন

আপনার গুগল অ্যাকাউন্টের সাথে CLI সংযোগ করতে firebase login চালান। এটি লগইন প্রক্রিয়াটি সম্পূর্ণ করার জন্য একটি নতুন ব্রাউজার উইন্ডো খুলবে। আপনার Firebase প্রকল্প তৈরি করার সময় আপনি যে অ্যাকাউন্টটি ব্যবহার করেছিলেন সেই অ্যাকাউন্টটিই বেছে নিতে ভুলবেন না।

৪. ফায়ারবেস এমুলেটর স্যুটের সাথে সংযোগ করুন

এমুলেটরগুলি শুরু করুন

আপনার টার্মিনালে, আপনার স্থানীয় 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 এ নেভিগেট করুন:

এমুলেটর স্যুট UI হোম

কোডল্যাবের বাকি অংশের জন্য emulators:start কমান্ডটি চালু রাখুন।

আপনার অ্যাপটি সংযুক্ত করুন

অ্যান্ড্রয়েড স্টুডিওতে, 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-এর সাথে সংযুক্ত হওয়ার জন্য, আপনার অ্যান্ড্রয়েড প্রোজেক্টের app ফোল্ডারের ভিতরে একটি google-services.json ফাইল যুক্ত করতে হবে। এই কোডল্যাবের উদ্দেশ্যে, আমরা একটি মক JSON ফাইল সরবরাহ করেছি যা আপনাকে Firebase এমুলেটর স্যুটের সাথে সংযোগ করতে দেবে।

mock-google-services.json ফাইলটি build-android-start/app ফোল্ডারে google-services.json নামে কপি করুন:

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

এই কোডল্যাবের শেষ ধাপে, আপনি শিখবেন কিভাবে একটি আসল ফায়ারবেস প্রকল্প এবং ফায়ারবেস অ্যান্ড্রয়েড অ্যাপ তৈরি করতে হয় যাতে আপনি এই মক JSON ফাইলটি আপনার নিজস্ব কনফিগারেশন দিয়ে প্রতিস্থাপন করতে পারেন।

অ্যাপটি চালান

এখন আপনি অ্যান্ড্রয়েড স্টুডিওতে প্রকল্পটি আমদানি করেছেন এবং একটি ফায়ারবেস কনফিগারেশন JSON ফাইল যুক্ত করেছেন, আপনি প্রথমবারের মতো অ্যাপটি চালানোর জন্য প্রস্তুত।

  1. আপনার অ্যান্ড্রয়েড এমুলেটর শুরু করুন।
  2. অ্যান্ড্রয়েড স্টুডিওতে, রান ক্লিক করুন ( সম্পাদন করা ) টুলবারে।

অ্যাপটি আপনার অ্যান্ড্রয়েড এমুলেটরে চালু হওয়া উচিত। এই মুহুর্তে, আপনি একটি খালি বার্তা তালিকা দেখতে পাবেন এবং বার্তা পাঠানো এবং গ্রহণ করা কাজ করবে না। এই কোডল্যাবের পরবর্তী ধাপে, আপনি ব্যবহারকারীদের প্রমাণীকরণ করবেন যাতে তারা বন্ধুত্বপূর্ণ চ্যাট ব্যবহার করতে পারে।

৬. প্রমাণীকরণ সক্ষম করুন

এই অ্যাপটি সমস্ত চ্যাট বার্তা সংরক্ষণের জন্য 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
    }
}

তারপর বর্তমানে প্রমাণিত Firebase ব্যবহারকারী সম্পর্কে যথাযথ তথ্য ফেরত দিতে 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 ক্লাসে একটি Auth ইনস্ট্যান্স ভেরিয়েবল যোগ করুন:

SignInActivity.kt সম্পর্কে

// Firebase instance variables
private lateinit var auth: FirebaseAuth

তারপর, MainActivity তে যেভাবে করেছিলেন ঠিক সেভাবেই Firebase আরম্ভ করতে onCreate() পদ্ধতিটি সম্পাদনা করুন:

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-এর মাধ্যমে প্রমাণীকরণ বাস্তবায়ন করেছেন এবং কোনও সার্ভার-সাইড কনফিগারেশন পরিচালনা করার প্রয়োজন নেই।

তোমার কাজ পরীক্ষা করো।

আপনার অ্যান্ড্রয়েড এমুলেটরে অ্যাপটি চালান। আপনাকে অবিলম্বে সাইন-ইন স্ক্রিনে পাঠানো হবে। ইমেল দিয়ে সাইন ইন করুন বোতামটি আলতো চাপুন, তারপর একটি অ্যাকাউন্ট তৈরি করুন। সবকিছু সঠিকভাবে বাস্তবায়িত হলে, আপনাকে মেসেজিং স্ক্রিনে পাঠানো হবে।

সাইন ইন করার পর, আপনার ব্রাউজারে Firebase Emulator Suite UI খুলুন, তারপর এই প্রথম সাইন-ইন করা ব্যবহারকারী অ্যাকাউন্টটি দেখতে প্রমাণীকরণ ট্যাবে ক্লিক করুন।

৭. বার্তা পড়ুন

এই ধাপে, আমরা রিয়েলটাইম ডাটাবেসে সংরক্ষিত বার্তাগুলি পড়ার এবং প্রদর্শনের জন্য কার্যকারিতা যুক্ত করব।

নমুনা বার্তা আমদানি করুন

  1. ফায়ারবেস এমুলেটর স্যুট UI-তে, রিয়েলটাইম ডেটাবেস ট্যাবটি নির্বাচন করুন।
  2. আপনার কোডল্যাব রিপোজিটরির স্থানীয় কপি থেকে initial_messages.json ফাইলটি ডেটা ভিউয়ারে টেনে আনুন।

এখন ডাটাবেসের messages নোডের নিচে আপনার কয়েকটি মেসেজ থাকা উচিত।

তথ্য পড়ুন

বার্তাগুলি সিঙ্ক্রোনাইজ করুন

এই বিভাগে আমরা এমন কোড যুক্ত করব যা অ্যাপ UI-তে নতুন যোগ করা বার্তাগুলিকে সিঙ্ক্রোনাইজ করে:

  • ফায়ারবেস রিয়েলটাইম ডাটাবেস শুরু করা এবং ডেটাতে করা পরিবর্তনগুলি পরিচালনা করার জন্য একজন শ্রোতা যোগ করা।
  • নতুন বার্তা দেখানোর জন্য RecyclerView অ্যাডাপ্টার আপডেট করা হচ্ছে।
  • MainActivity ক্লাসে আপনার অন্যান্য Firebase ইনস্ট্যান্স ভেরিয়েবলের সাথে ডাটাবেস ইনস্ট্যান্স ভেরিয়েবল যোগ করা:

MainActivity.kt সম্পর্কে

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

// Initialize Realtime Database and FirebaseRecyclerAdapter মন্তব্যের অধীনে আপনার মেইনঅ্যাক্টিভিটির onCreate() পদ্ধতিটি পরিবর্তন করুন। এই কোডটি রিয়েলটাইম ডেটাবেস থেকে বিদ্যমান সমস্ত বার্তা যুক্ত করে এবং তারপর আপনার ফায়ারবেস রিয়েলটাইম ডেটাবেসে 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() পদ্ধতিটি প্রয়োগ করা:

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 Realtime Database থেকে আপডেট শোনা শুরু করুন এবং বন্ধ করুন। MainActivity তে onPause() এবং onResume() পদ্ধতিগুলি নীচে দেখানো হিসাবে আপডেট করুন:

MainActivity.kt সম্পর্কে

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

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

সিঙ্কিং বার্তা পরীক্ষা করুন

  1. রান ক্লিক করুন ( সম্পাদন করা )।
  2. এমুলেটর স্যুট UI-তে, রিয়েলটাইম ডেটাবেস ট্যাবে ফিরে যান, তারপর ম্যানুয়ালি একটি নতুন বার্তা যোগ করুন। নিশ্চিত করুন যে বার্তাটি আপনার অ্যান্ড্রয়েড অ্যাপে প্রদর্শিত হচ্ছে:

অভিনন্দন, আপনি আপনার অ্যাপে একটি রিয়েলটাইম ডাটাবেস যোগ করেছেন!

৮. বার্তা পাঠান

টেক্সট মেসেজ পাঠানো বাস্তবায়ন করুন

এই বিভাগে, আপনি অ্যাপ ব্যবহারকারীদের টেক্সট মেসেজ পাঠানোর ক্ষমতা যোগ করবেন। নীচের কোড স্নিপেটটি সেন্ড বোতামে ক্লিক ইভেন্টগুলি শোনে, মেসেজ ফিল্ডের বিষয়বস্তু সহ একটি নতুন 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 আপডেট করুন।

ছবি নির্বাচন করুন

ছবি যোগ করার জন্য এই কোডল্যাবটি Firebase-এর জন্য Cloud Storage ব্যবহার করে। আপনার অ্যাপের বাইনারি ডেটা সংরক্ষণ করার জন্য Cloud Storage একটি ভালো জায়গা।

ছবি নির্বাচন পরিচালনা করুন এবং অস্থায়ী বার্তা লিখুন

ব্যবহারকারী একবার একটি ছবি নির্বাচন করলে, ছবি নির্বাচন 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)
                    })
}

ছবি আপলোড করুন এবং বার্তা আপডেট করুন

MainActivity তে putImageInStorage() পদ্ধতিটি যোগ করুন। নির্বাচিত ছবিটি আপলোড শুরু করার জন্য এটি 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
            )
        }
}

বার্তা পাঠানোর পরীক্ষা করুন

  1. অ্যান্ড্রয়েড স্টুডিওতে, ক্লিক করুন সম্পাদন করা রান বোতাম।
  2. আপনার অ্যান্ড্রয়েড এমুলেটরে, একটি বার্তা লিখুন, তারপর পাঠান বোতামটি আলতো চাপুন। নতুন বার্তাটি অ্যাপ UI এবং Firebase এমুলেটর স্যুট UI তে দৃশ্যমান হওয়া উচিত।
  3. অ্যান্ড্রয়েড এমুলেটরে, আপনার ডিভাইস থেকে একটি ছবি নির্বাচন করতে "+" ছবিতে ট্যাপ করুন। নতুন বার্তাটি প্রথমে একটি প্লেসহোল্ডার ছবির সাথে দৃশ্যমান হওয়া উচিত, এবং তারপর ছবি আপলোড সম্পূর্ণ হওয়ার পরে নির্বাচিত ছবিটির সাথে। নতুন বার্তাটি এমুলেটর স্যুট UI তেও দৃশ্যমান হওয়া উচিত, বিশেষ করে রিয়েলটাইম ডেটাবেস ট্যাবে একটি অবজেক্ট হিসাবে এবং স্টোরেজ ট্যাবে একটি ব্লব হিসাবে।

9. অভিনন্দন!

আপনি Firebase ব্যবহার করে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করেছেন!

তুমি যা শিখেছো

  • ফায়ারবেস প্রমাণীকরণ
  • ফায়ারবেস রিয়েলটাইম ডাটাবেস
  • Firebase এর জন্য ক্লাউড স্টোরেজ

এরপর, এই কোডল্যাবে যা শিখেছেন তা ব্যবহার করে আপনার নিজস্ব অ্যান্ড্রয়েড অ্যাপে Firebase যোগ করার চেষ্টা করুন! Firebase সম্পর্কে আরও জানতে, firebase.google.com দেখুন।

আপনি যদি একটি আসল ফায়ারবেস প্রকল্প সেট আপ করতে এবং আসল ফায়ারবেস সংস্থানগুলি ব্যবহার করতে শিখতে চান (একটি ডেমো প্রকল্পের পরিবর্তে এবং কেবল অনুকরণ করা সংস্থানগুলি), তাহলে পরবর্তী ধাপে এগিয়ে যান।

দ্রষ্টব্য: আপনি একটি বাস্তব Firebase প্রকল্প সেট আপ করার পরেও এবং বিশেষ করে যখন আপনি একটি বাস্তব অ্যাপ তৈরি শুরু করেন, তখনও আমরা ডেভেলপমেন্ট এবং পরীক্ষার জন্য Firebase Local Emulator Suite ব্যবহার করার পরামর্শ দিই।

১০. ঐচ্ছিক: একটি Firebase প্রকল্প তৈরি এবং সেট আপ করুন

এই ধাপে, আপনি একটি আসল Firebase প্রকল্প এবং এই কোডল্যাবের সাথে ব্যবহারের জন্য একটি Firebase Android অ্যাপ তৈরি করবেন। আপনি আপনার অ্যাপে আপনার অ্যাপ-নির্দিষ্ট Firebase কনফিগারেশনও যোগ করবেন। এবং অবশেষে, আপনি আপনার অ্যাপের সাথে ব্যবহারের জন্য আসল Firebase রিসোর্স সেট আপ করবেন।

একটি ফায়ারবেস প্রকল্প তৈরি করুন

  1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
  2. একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, FriendlyChat )।
  3. চালিয়ে যান ক্লিক করুন।
  4. যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
  5. (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
  6. এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন
  7. Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

আপনার প্রকল্পটিকে ব্লেজ প্ল্যানে আপগ্রেড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
  2. ব্লেজ প্ল্যানটি নির্বাচন করুন। আপনার প্রকল্পের সাথে একটি ক্লাউড বিলিং অ্যাকাউন্ট লিঙ্ক করতে অন-স্ক্রিন নির্দেশাবলী অনুসরণ করুন।
    এই আপগ্রেডের অংশ হিসেবে যদি আপনার একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়, তাহলে আপগ্রেড সম্পূর্ণ করার জন্য আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হতে পারে।

আপনার অ্যান্ড্রয়েড প্রোজেক্টে Firebase যোগ করুন

Firebase কনসোলে, এবং আপনার Firebase প্রকল্পের সাথে আপনার Android প্রকল্প নিবন্ধন করতে এই পদক্ষেপগুলি অনুসরণ করুন:

  1. আপনার নতুন প্রকল্পের ওভারভিউ স্ক্রিন থেকে, সেটআপ ওয়ার্কফ্লো চালু করতে অ্যান্ড্রয়েড আইকনে ক্লিক করুন: অ্যান্ড্রয়েড অ্যাপ যোগ করুন
  2. পরবর্তী স্ক্রিনে, আপনার অ্যাপের প্যাকেজের নাম হিসেবে com.google.firebase.codelab.friendlychat লিখুন।
  3. আপনার Firebase কনফিগারেশন ফাইলটি ডাউনলোড করতে Register App এ ক্লিক করুন, তারপর Download google-services.json এ ক্লিক করুন।
  4. আপনার অ্যান্ড্রয়েড প্রজেক্টের app ডিরেক্টরিতে google-services.json ফাইলটি কপি করুন।
  5. কনসোলের সেটআপ ওয়ার্কফ্লোতে দেখানো পরবর্তী ধাপগুলি এড়িয়ে যান ( build-android-start প্রকল্পে আপনার জন্য ইতিমধ্যেই এগুলি করা হয়েছে)।
  6. আপনার প্রোজেক্টটি Gradle ফাইলের সাথে সিঙ্ক করে নিশ্চিত করুন যে আপনার অ্যাপে সমস্ত নির্ভরতা উপলব্ধ। Android Studio টুলবার থেকে, File > Sync Project with Gradle Files নির্বাচন করুন। কনফিগারেশন পরিবর্তনগুলি ঘটানোর জন্য আপনাকে Build/Clean Project এবং Build/Rebuild Project চালানোর প্রয়োজন হতে পারে।

ফায়ারবেস প্রমাণীকরণ কনফিগার করুন

আপনার অ্যাপটি আপনার ব্যবহারকারীদের পক্ষ থেকে Firebase প্রমাণীকরণ API গুলি অ্যাক্সেস করার আগে, আপনাকে Firebase প্রমাণীকরণ এবং আপনার অ্যাপে ব্যবহার করতে চান এমন সাইন-ইন প্রদানকারীগুলি সক্ষম করতে হবে।

  1. Firebase কনসোলে , বাম দিকের নেভিগেশন প্যানেল থেকে Authentication নির্বাচন করুন।
  2. সাইন-ইন পদ্ধতি ট্যাবটি নির্বাচন করুন।
  3. ইমেল/পাসওয়ার্ড ক্লিক করুন, তারপর সুইচটি সক্রিয় (নীল) এ টগল করুন।
  4. Google এ ক্লিক করুন, তারপর সুইচটি সক্রিয় (নীল) এ টগল করুন এবং একটি প্রকল্প সহায়তা ইমেল সেট করুন।

যদি আপনি এই কোডল্যাবে পরে "CONFIGURATION_NOT_FOUND" বার্তা সহ ত্রুটি পান, তাহলে এই ধাপে ফিরে আসুন এবং আপনার কাজটি দুবার পরীক্ষা করুন।

Sign in with Google ব্যবহার করার জন্য আপনার অ্যাপের SHA ফিঙ্গারপ্রিন্ট নির্দিষ্ট করতে হতে পারে। আপনি Firebase কনসোলের সেটিংস পৃষ্ঠায় এটি করতে পারেন। আপনার অ্যাপের SHA ফিঙ্গারপ্রিন্ট কীভাবে পাবেন সে সম্পর্কে বিস্তারিত জানতে Authenticating Your Client দেখুন।

রিয়েলটাইম ডাটাবেস সেট আপ করুন

এই কোডল্যাবের অ্যাপটি Firebase রিয়েলটাইম ডাটাবেসে চ্যাট বার্তা সংরক্ষণ করে। এই বিভাগে, আমরা একটি ডাটাবেস তৈরি করব এবং Firebase Security Rules নামক একটি JSON কনফিগারেশন ভাষার মাধ্যমে এর নিরাপত্তা কনফিগার করব।

  1. Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Realtime Database নির্বাচন করুন।
  2. ডাটাবেস তৈরি করুন ক্লিক করুন।
  3. আপনার ডাটাবেসের জন্য একটি অবস্থান নির্বাচন করুন, তারপর পরবর্তী ক্লিক করুন।
    একটি আসল অ্যাপের জন্য, আপনাকে এমন একটি অবস্থান বেছে নিতে হবে যা আপনার ব্যবহারকারীদের কাছাকাছি।
  4. পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
    এই কোডল্যাবের পরবর্তী ধাপে, আপনার ডেটা সুরক্ষিত করার জন্য আপনি নিরাপত্তা নিয়ম যোগ করবেন। আপনার ডাটাবেসের জন্য নিরাপত্তা নিয়ম যোগ না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না
  5. তৈরি করুন ক্লিক করুন।
  6. ডাটাবেস ইনস্ট্যান্স তৈরি হয়ে গেলে, নিয়ম ট্যাবটি নির্বাচন করুন, তারপর নিম্নলিখিতগুলি দিয়ে নিয়ম কনফিগারেশন আপডেট করুন:
     {
       "rules": {
         "messages": {
           ".read": "auth.uid != null",
           ".write": "auth.uid != null"
         }
       }
     }
    

নিরাপত্তা নিয়ম কীভাবে কাজ করে ("auth" ভেরিয়েবলের ডকুমেন্টেশন সহ) সে সম্পর্কে আরও তথ্যের জন্য, রিয়েলটাইম ডাটাবেস নিরাপত্তা ডকুমেন্টেশন দেখুন।

Firebase এর জন্য ক্লাউড স্টোরেজ সেট আপ করুন

  1. Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Storage নির্বাচন করুন।
  2. শুরু করুন ক্লিক করুন।
  3. আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি অবস্থান নির্বাচন করুন।
    US-WEST1 , US-CENTRAL1 , এবং US-EAST1 এর বাকেটগুলি Google ক্লাউড স্টোরেজের জন্য "সর্বদা বিনামূল্যে" স্তরের সুবিধা নিতে পারে। অন্যান্য সমস্ত অবস্থানের বাকেটগুলি Google ক্লাউড স্টোরেজের মূল্য এবং ব্যবহার অনুসরণ করে।
  4. পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
    এই কোডল্যাবে পরে, আপনার ডেটা সুরক্ষিত করার জন্য আপনি সুরক্ষা নিয়ম যুক্ত করবেন। আপনার স্টোরেজ বাকেটের জন্য সুরক্ষা নিয়ম যুক্ত না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না
  5. তৈরি করুন ক্লিক করুন।

Firebase রিসোর্সে সংযোগ করুন

এই কোডল্যাবের আগের ধাপে, আপনি MainActivity.kt তে নিম্নলিখিতটি যোগ করেছেন। এই শর্তসাপেক্ষ ব্লকটি আপনার অ্যান্ড্রয়েড প্রকল্পটিকে Firebase এমুলেটর স্যুটের সাথে সংযুক্ত করেছে।

// 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 হয়।