UI State Production সহজ ভাষায় ব্যাখ্যা

 

UI State Production সহজ ভাষায় ব্যাখ্যা

আমরা প্রতিদিন মোবাইল অ্যাপে কাজ করি, যেখানে UI (User Interface) সবসময় পরিবর্তনশীল হয়। কখনো ব্যবহারকারী কিছু লিখে, কখনো নতুন ডাটা লোড হয়—এইসব পরিবর্তন নিয়ন্ত্রণ করতে UI State ব্যবহৃত হয়।

এখন প্রশ্ন হলো, UI State তৈরি ও পরিচালনা (Production & Management) কিভাবে করা হয়?

এই গাইডটি পড়ার পর আপনি শিখবেন:
✅ কোন API ব্যবহার করে UI State তৈরি করতে হয়
✅ কিভাবে State পরিচালনা করা হয় যাতে সিস্টেমের রিসোর্স অপচয় না হয়
✅ UI-তে State কিভাবে ব্যবহার করা হয়

---

🟢 State কী এবং Events কী?

👉 State: UI-র বর্তমান অবস্থা (যেমন: স্ক্রিনে কী দেখানো হচ্ছে)
👉 Events: যেগুলো UI-তে পরিবর্তন ঘটায় (যেমন: ব্যবহারকারী বোতাম চাপলো)

📌 সংক্ষেপে মনে রাখুন: State থাকে, Events ঘটে

🔹 State সবসময় উপস্থিত থাকে
🔹 Events ক্ষণস্থায়ী, যেগুলো UI পরিবর্তন ঘটায়

🔻 উদাহরণ:

• আপনি যদি WhatsApp-এ চ্যাট খুলেন, তাহলে State হলো চ্যাট স্ক্রিনের অবস্থা
• কিন্তু কেউ যদি আপনাকে ম্যাসেজ পাঠায়, তাহলে Event হলো নতুন ম্যাসেজ আসা

---

🟢 State Production Pipeline (State তৈরি করার ধাপ)

একটি UI State তৈরি করতে ৩টি প্রধান অংশ থাকে:

1️⃣ Input (ইনপুট):

• User Events: যেমন ব্যবহারকারী "Like" বাটনে চাপ দিলো
• API থেকে Data: যেমন নতুন নিউজ লোড হলো
• অন্য Events: যেমন Snackbar টেক্সট দেখানোর সময়সীমা শেষ

2️⃣ State Holders (State প্রসেসিং):

• ViewModel (Android Jetpack)-এর মাধ্যমে UI State ম্যানেজ করা হয়
• State Holders Events গ্রহণ করে এবং প্রয়োজনীয় লজিক প্রয়োগ করে UI State আপডেট করে

3️⃣ Output (আউটপুট):

• UI State পরিবর্তিত হলে UI Update হয়
• UI সবসময় সর্বশেষ State দেখে রেন্ডার হয়

🖼 এটা পাইপলাইন প্রক্রিয়ার মতো কাজ করে:

[Input] -> [State Holder] -> [Output]

---

🟢 State Production এর API সমূহ

State তৈরির জন্য আমরা ২ ধরনের API ব্যবহার করি:

ধাপ	API
Input	Coroutines, Flow, RxJava
Output	StateFlow, LiveData, Compose State

🔹 Input API (State পরিবর্তনের উৎস)

👉 UI-কে জ্যাংক (Lag) মুক্ত রাখতে ব্যাকগ্রাউন্ড থ্রেডে কাজ করা ভালো
👉 এক্ষেত্রে Coroutines, Flow বা RxJava ব্যবহার করা হয়

🔹 Output API (State পরিবর্তন হলে UI আপডেট করা)

👉 UI কে আপডেট রাখতে StateFlow, LiveData, Compose State ব্যবহার করা হয়
👉 এগুলো অবজারভেবল (Observable), অর্থাৎ UI সবসময় নতুন State পায়

---

🟢 State Production কিভাবে কাজ করে? (প্র্যাকটিকাল উদাহরণ)

ধরি, আমরা একটি Dice Roller অ্যাপ বানাচ্ছি, যেখানে ব্যবহারকারী "Roll" বাটন চাপলে ১-৬ পর্যন্ত র‍্যান্ডম সংখ্যা আসবে।

১️⃣ Simple State পরিবর্তন

🔹 State তৈরি:

data class DiceUiState(
    val firstDieValue: Int? = null,
    val secondDieValue: Int? = null,
    val numberOfRolls: Int = 0
)

🔹 ViewModel-এ State সংরক্ষণ:

class DiceRollViewModel : ViewModel() {

    private val _uiState = MutableStateFlow(DiceUiState())
    val uiState: StateFlow<DiceUiState> = _uiState.asStateFlow()

    // UI থেকে এই ফাংশন কল হবে
    fun rollDice() {
        _uiState.update { currentState ->
            currentState.copy(
                firstDieValue = Random.nextInt(1, 7),
                secondDieValue = Random.nextInt(1, 7),
                numberOfRolls = currentState.numberOfRolls + 1
            )
        }
    }
}

🔹 UI-তে State ব্যবহার:

val uiState by viewModel.uiState.collectAsState()

Text(text = "Roll: ${uiState.numberOfRolls}")
Button(onClick = { viewModel.rollDice() }) {
    Text("Roll Dice")
}

📌 ফলাফল:

• StateFlow এর কারণে UI স্বয়ংক্রিয়ভাবে আপডেট হবে
• ইউজার যখন "Roll" চাপবে, নতুন সংখ্যা দেখাবে

---

🟢 Asynchronous (দীর্ঘসময় নেয় এমন) কাজের জন্য State পরিবর্তন

ধরি, আমাদের একটি To-Do অ্যাপ আছে যেখানে টাস্ক তৈরি ও সংরক্ষণ করতে হবে। কিন্তু এটি Async API কল করে ব্যাকগ্রাউন্ডে সেভ হবে।

২️⃣ Async State পরিবর্তন (Coroutine ব্যবহার করে)

data class AddEditTaskUiState(
    val title: String = "",
    val description: String = "",
    val isTaskCompleted: Boolean = false,
    val isLoading: Boolean = false,
    val userMessage: String? = null,
    val isTaskSaved: Boolean = false
)

class AddEditTaskViewModel(private val tasksRepository: TasksRepository) : ViewModel() {

   private val _uiState = MutableStateFlow(AddEditTaskUiState())
   val uiState: StateFlow<AddEditTaskUiState> = _uiState.asStateFlow()

   fun createNewTask() {
        viewModelScope.launch {
            val newTask = Task(uiState.value.title, uiState.value.description)
            try {
                tasksRepository.saveTask(newTask)
                _uiState.update { it.copy(isTaskSaved = true) }
            } catch (exception: Exception) {
                _uiState.update { it.copy(userMessage = "Error saving task!") }
            }
        }
    }
}

📌 কি হলো এখানে?

• ViewModel ব্যাকগ্রাউন্ডে কাজ চালাবে
• কাজ শেষ হলে State আপডেট হবে এবং UI পরিবর্তন হবে

---

🟢 Stream (ধারাবাহিক State পরিবর্তন)

আমরা চাইলে Flow বা RxJava ব্যবহার করে একাধিক State একসাথে ম্যানেজ করতে পারি।

৩️⃣ Flow দিয়ে UI State আপডেট করা

val uiState = combine(
    authorsRepository.getAuthorsStream(),
    topicsRepository.getTopicsStream()
) { authors, topics ->
    InterestsUiState(authors = authors, topics = topics)
}.stateIn(
    scope = viewModelScope,
    started = SharingStarted.WhileSubscribed(5_000),
    initialValue = InterestsUiState.Loading
)

📌 Flow কেন?

• এটি Real-time API data & UI update সমন্বয় করতে পারে

---

📌 সংক্ষেপে মনে রাখুন:

✅ State সবসময় থাকে, Events মাঝে মাঝে হয়
✅ StateFlow / LiveData দিয়ে UI আপডেট হয়
✅ Coroutine & Flow ব্যাকগ্রাউন্ড কাজের জন্য ভালো
✅ UI Thread ব্লক না করে সব কাজ করতে হবে

এখন আপনি UI State Production সম্পর্কে পরিপূর্ণ ধারণা পেয়ে গেছেন! 🚀💡