মোবাইল ডেভেলপমেন্টে Jetpack Compose: এটি কী, মূল ধারণা এবং এটি কীভাবে কাজ করে

Jetpack Compose মৌলিক বিষয় (@Composable, Composition, Recomposition)

@Composable — অ্যানোটেশন যা একটি ফাংশনকে Composable-এ রূপান্তরিত করে। Composable ফাংশন UI বিল্ডিং ব্লক। তারা View ফেরত দেয় না, বরং Composition-এ এলিমেন্ট নির্গত করে। Composition — Composable ফাংশন কল থেকে নির্মিত একটি UI ট্রি। Compose নতুন ট্রির সাথে পুরানোটির তুলনা করে এবং শুধুমাত্র পরিবর্তিত অংশগুলি আপডেট করে।

Recomposition

Recomposition — অবস্থা পরিবর্তনে Composable ফাংশনের পুনরায় শুরু। Compose ট্র্যাক করে প্রতিটি ফাংশনে কোন অবস্থাগুলি পড়া হয়। যখন একটি অবস্থা পরিবর্তিত হয়, Compose শুধুমাত্র সেই ফাংশনগুলি পুনরায় শুরু করে যা এই অবস্থাটি পড়ে (Smart Recomposition)। Recomposition আশাবাদী: একাধিকবার চলতে পারে, তাই ফাংশনগুলি বিশুদ্ধ হতে হবে (সাইড ইফেক্ট ছাড়া)। সাইড ইফেক্ট LaunchedEffect বা DisposableEffect-এ যায়। Composable ফাংশন suspend হতে পারে না। তারা অন্যান্য Composable ফাংশন থেকে কল করা হয়। কল ক্রম নিশ্চিত নয় (Compose পুনর্বিন্যাস করতে পারে)।

// State Hoisting এবং LazyColumn সহ Composable উদাহরণ
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — ডিক্লারেটিভ ট্রি। Recomposition — স্মার্ট পুনরায় শুরু। IT Sectr টাইপ স্থিতিশীলতা পর্যবেক্ষণের সুপারিশ করে — অস্থির টাইপ অত্যধিক পুনর্গঠন ঘটায়।

CompositionLocal

CompositionLocal — Compose-তে অন্তর্নিহিত ডেটা পাসিং। SwiftUI-তে @Environment-এর অনুরূপ। CompositionLocalProvider — মান সেট করা। current — পড়া। এর জন্য ব্যবহৃত: Theme (MaterialTheme), ContentScale, Density। স্ট্যাটিক CompositionLocal — পরিবর্তন ছাড়া কনফিগারেশনের জন্য। ডায়নামিক CompositionLocal — পরিবর্তনযোগ্য মানের (থিম) জন্য। IT Sectr গ্লোবাল কনফিগারেশনের জন্য CompositionLocal এবং ডেটার জন্য স্পষ্ট প্যারামিটার ব্যবহারের সুপারিশ করে।

অবস্থা (remember, mutableStateOf, State Hoisting)

remember — পুনর্গঠনের মধ্যে মান সংরক্ষণ করে। mutableStateOf — পর্যবেক্ষণযোগ্য অবস্থা তৈরি করে (MutableState<T>)। পরিবর্তনে, পুনর্গঠন ট্রিগার করে। State Hoisting — প্যাটার্ন: অবস্থা প্যারেন্ট উপাদানে উত্তোলিত হয়, চাইল্ড মান + কলব্যাক পায়। State (অপরিবর্তনীয়) — শুধু পড়া। MutableState — পড়া + লেখা। rememberSaveable — রোটেশন/প্রসেস ডেথের সময় সংরক্ষণ করে।

State Hoisting

State Hoisting — নীতি: state down, events up। অবস্থা প্যারেন্টে সংরক্ষণ করা হয় এবং প্যারামিটারের মাধ্যমে চাইল্ড উপাদানে পাঠানো হয়। চাইল্ড উপাদান ল্যাম্বডা (কলব্যাক) মাধ্যমে পরিবর্তন জানায়। সুবিধা: পুনর্ব্যবহারযোগ্যতা, পরীক্ষাযোগ্যতা, সত্যের একক উৎস। উদাহরণ: MyTextField নিজের অবস্থা সংরক্ষণ করার পরিবর্তে, প্যারেন্ট স্ট্রিং সংরক্ষণ করে এবং value + onValueChange মাধ্যমে পাঠায়।

ডেরাইভড স্টেট

derivedStateOf — গণনাকৃত অবস্থা, শুধুমাত্র নির্ভরতা পরিবর্তনে পুনর্গণনা করে। ফিল্টারিং, রূপান্তর, বৈধতার জন্য ব্যবহৃত। snapshotFlow — State-কে Flow-এ রূপান্তর করে। রিঅ্যাকটিভ চেইনের জন্য ব্যবহৃত। collectAsState — Composable-এর ভিতরে Flow-কে State-এ সংগ্রহ করে। IT Sectr গণনাকৃত মানের জন্য derivedStateOf এবং State-কে coroutines-এর সাথে সংযোগের জন্য snapshotFlow ব্যবহারের সুপারিশ করে।

ধারক (Column, Row, Box, LazyColumn)

Column — উল্লম্ব লেআউট (LinearLayout vertical-এর অনুরূপ)। Row — অনুভূমিক লেআউট। Box — স্ট্যাকিং লেআউট (FrameLayout-এর অনুরূপ)। LazyColumn — লেজি লোডিং সহ উল্লম্ব স্ক্রলযোগ্য তালিকা। LazyRow — অনুভূমিক স্ক্রলযোগ্য তালিকা। Scaffold — প্রধান স্ক্রিন কাঠামো: TopAppBar, BottomBar, FloatingActionButton, Snackbar। TopAppBar — শীর্ষ বার। BottomNavigation — নিচের নেভিগেশন (Material 3-এ NavigationBar)। Modifier — চেইন: .fillMaxWidth().padding(8.dp).clickable { }। মডিফায়ার ক্রম গুরুত্বপূর্ণ — প্রতিটি একটি নতুন র‍্যাপার তৈরি করে।

LazyColumn অপ্টিমাইজেশন

LazyColumn — ভার্চুয়ালাইজড তালিকা। শুধুমাত্র দৃশ্যমান এলিমেন্ট রেন্ডার করে। অপ্টিমাইজেশন: 1) key — আইটেমের জন্য অনন্য কী, 2) contentType — প্রকার অনুসারে আইটেম গ্রুপ করা, 3) itemContent — আইটেমের ভিতরে পুনর্গঠন কমানো, 4) LazyVerticalGrid / LazyHorizontalGrid — গ্রিডের জন্য। LazyLayout — কাস্টম লেজি লেআউট। Paging 3 + Compose — collectAsLazyPagingItems মাধ্যমে পেজিনেশন। IT Sectr পূর্বানুমানযোগ্য পুনর্গঠনের জন্য সব LazyColumn-এর জন্য key(item) সুপারিশ করে।

নেভিগেশন (NavController, NavHost)

Navigation Compose — নেভিগেশন লাইব্রেরি। NavController — গন্তব্য স্ট্যাক পরিচালনা করে। NavHost — নেভিগেশন গ্রাফের জন্য ধারক। composable("route") — গন্তব্য নিবন্ধন। navController.navigate("route") — নেভিগেট। popBackStack() — ফিরে যাওয়া। আর্গুমেন্ট: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType }))। intentFilter মাধ্যমে ডিপ লিংকিং। BottomNavigation — NavController-এর সাথে ইন্টিগ্রেশন: NavBarItem → navigate + popUpTo।

উন্নত নেভিগেশন

একাধিক ব্যাক স্ট্যাক — প্রতিটি BottomNavigation ট্যাবের জন্য আলাদা ব্যাক স্ট্যাক। SavedStateHandle — প্রসেস ডেথের সময় আর্গুমেন্ট সংরক্ষণ। NavArgs — টাইপ-নিরাপদ আর্গুমেন্ট (Kotlin 2.0+). ডিপ লিংক — বাহ্যিক লিংকের জন্য URL স্কিম। ভবিষ্যদ্বাণীমূলক ব্যাক জেসচার (Android 14+) — প্রিভিউ সহ ব্যাক জেসচার সমর্থন। IT Sectr টাইপ নিরাপত্তার জন্য NavArgs এবং BottomNavigation-এর জন্য একাধিক ব্যাক স্ট্যাক ব্যবহারের সুপারিশ করে।

ইফেক্ট (LaunchedEffect, DisposableEffect)

LaunchedEffect — Composition-এ suspend ব্লক চালু করে। Composition ছাড়লে বাতিল হয়। keys পরিবর্তনে পুনরায় শুরু হয়। এর জন্য ব্যবহৃত: ডেটা লোডিং, টাইমার, অ্যানিমেশন। DisposableEffect — যে রিসোর্সের পরিষ্কারের প্রয়োজন: onDispose { } — listener থেকে আনসাবস্ক্রাইব, সংযোগ বন্ধ। SideEffect — সিঙ্ক্রোনাস ইফেক্ট (প্রতি পুনর্গঠন)। এর জন্য ব্যবহৃত: লগিং, অ-Compose কোডের সাথে সিঙ্ক্রোনাইজেশন। IT Sectr ডেটা লোডিংয়ের জন্য LaunchedEffect এবং পরিষ্কারের জন্য DisposableEffect সুপারিশ করে।

Compose — ফাংশন + মডিফায়ার। SwiftUI — struct + মডিফায়ার। ধারণাগুলি একই, সিনট্যাক্স ভিন্ন। IT Sectr উভয় ফ্রেমওয়ার্ক শেখার সুপারিশ করে — একটি বোঝা অন্যটি শেখা সহজ করে।

ইফেক্ট প্যাটার্ন

rememberCoroutineScope — LaunchedEffect-এর বাইরে CoroutineScope-এ অ্যাক্সেস (যেমন, বাটন ক্লিকে)। snapshotFlow — চেইনের জন্য State-কে Flow-এ রূপান্তর। produceState — অ-Compose উৎসকে State-এ রূপান্তর। animateFloatAsState এবং animateColorAsState — ইফেক্টের মাধ্যমে অ্যানিমেশন। IT Sectr UI ইভেন্টের জন্য rememberCoroutineScope এবং স্বয়ংক্রিয় লোডিংয়ের জন্য LaunchedEffect সুপারিশ করে।

থিমিং (MaterialTheme, Material3)

MaterialTheme — গ্লোবাল Compose থিম। রঙ, টাইপোগ্রাফি, আকার। MaterialTheme { } — পুরো অ্যাপ র‍্যাপ করে। Material3 (M3) — Google ডিজাইন সিস্টেম 2023+। Dynamic Colors — ওয়ালপেপারের সাথে অভিযোজন (Android 12+). TextStyle — টেক্সট কনফিগারেশন: fontSize, fontWeight, lineHeight। Shape — কোণ গোল করা। Elevation — ছায়া। IT Sectr ডিফল্টভাবে Material3 এবং আধুনিক ডিভাইসের জন্য Dynamic Colors সুপারিশ করে।

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

অ্যানিমেশন (animate*, AnimatedVisibility)

animateFloatAsState — Float মান অ্যানিমেট করে। animateColorAsState — রঙ অ্যানিমেট করে। animateDpAsState — আকার অ্যানিমেট করে। AnimatedVisibility — .animateEnterExit() দিয়ে দেখান/লুকান। AnimatedContent — বিষয়বস্তু পরিবর্তনে অ্যানিমেশন (crossfade, slide)। updateTransition — enum অবস্থার উপর ভিত্তি করে অ্যানিমেশন। Animatable — Animatable ইন্টারফেসের মাধ্যমে কাস্টম অ্যানিমেশন। IT Sectr তালিকার জন্য AnimatedVisibility এবং স্ক্রিন ট্রানজিশনের জন্য AnimatedContent সুপারিশ করে।

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

পরীক্ষা (Compose UI Test)

Compose UI Test — Compose স্ক্রিন পরীক্ষা। createComposeRule() — JUnit নিয়ম। setContent { } — Composable সেট করুন। onNodeWithText, onNodeWithTag, onNodeWithContentDescription — এলিমেন্ট খুঁজুন। performClick, performTextInput, performScrollTo — ক্রিয়া। assertIsDisplayed, assertTextEquals — যাচাই। Semantics — অ্যাক্সেসিবিলিটি এবং পরীক্ষার জন্য Semantics ট্রি। IdlingResource — অ্যাসিঙ্ক্রোনাস অপারেশনের জন্য অপেক্ষা। স্ক্রিনশট পরীক্ষা — Papercuts, Roborazzi। IT Sectr প্রতিটি স্ক্রিনের জন্য UI পরীক্ষা এবং ViewModel-এর জন্য ইউনিট পরীক্ষা সুপারিশ করে।

WindowSizeClass — স্ক্রিন আকারের সাথে অভিযোজন (Compact, Medium, Expanded)। Material3 রেসপনসিভ লেআউটের সাথে সম্পর্কিত। BottomNavigation থেকে NavigationRail-এ স্বয়ংক্রিয় স্যুইচিংয়ের জন্য Adaptive Navigation Suite-এ ব্যবহৃত। IT Sectr ট্যাবলেট এবং ডেস্কটপ Compose অভিযোজনের জন্য WindowSizeClass সুপারিশ করে।

Paging 3 + Compose — Google-এর পেজিনেশন লাইব্রেরি। PagingData — পেজ স্ট্রিম। PagingConfig — সেটিংস (pageSize, prefetchDistance)। collectAsLazyPagingItems() — Compose-এ সংগ্রহ। PagingSource — কাস্টম উৎস। RemoteMediator — হাইব্রিড লোডিং (নেটওয়ার্ক + DB)। Paging 3 Compose-এ অসীম স্ক্রল তালিকার জন্য মানক।