Jetpack Compose: آموزش جت پک کامپوز

Jetpack Compose یک فریمورک توسعه رابط کاربری (UI) برای اندروید است که توسط گوگل به منظور توسعه رابط کاربری داینامیک و تعاملی در اپلیکیشن‌های اندروید ارائه شده است. با استفاده از جت پک کامپوز (Jetpack Compose)، توسعه‌دهندگان قادر خواهند بود رابط کاربری‌های پیشرفته، زیبا و قابل تعامل را با کمترین تلاش و کد کمتری توسعه دهند.

در این مقاله از سری مقالات کاتلین اومدیم در مورد Jetpack Compose در اندروید صحبت کنیم. پس با سایت ترولرن همراه باش.

“قبل از شروع مقاله، بگم که بعد از مطالعه این مطلب، از آموزش پروژه محور برنامه نویسی اندروید سایتمون یعنی دوره ژنرال اندروید غافل نشید.”

راستی اگر میخوای جت پک کامپوز (Jetpack Compose) رو حرفه ای یاد بگیری سریع وارد دوره ژنرال اندروید بشو که اونجا همه چیز رو گفتم…

مقدمه

در دهه گذشته، توسعه برنامه‌های اندروید به عنوان یک صنعت روبه‌رو با تحولات زیادی قرار گرفته است. با پیدایش فریمورک‌ها و ابزارهای جدید، برنامه‌نویسان اندروید دسترسی به امکانات و قابلیت‌های بسیاری را بدست آورده‌اند که بهبود کارایی و تجربه کاربری برنامه‌ها را ممکن ساخته است.

یکی از این فریمورک‌های جدید و قدرتمند، Jetpack Compose است. جت پک کامپوز (Jetpack Compose) یک فریمورک توسعه رابط کاربری (UI) برای برنامه‌های اندروید است که توسط شرکت Google توسعه داده شده است. با استفاده از رویکرد برنامه‌نویسی دیکلاراتیو، Jetpack Compose به برنامه‌نویسان امکان می‌دهد رابط کاربری را با استفاده از کد کمتر و خواناتری توصیف کنند.

جت پک کامپوز (Jetpack Compose) بر اساس زبان برنامه‌نویسی Kotlin ساخته شده است و از قدرت و قابلیت‌های Kotlin برای تسهیل و سرعت بخشیدن به فرآیند توسعه استفاده می‌کند.

مزایا

1. یکی از ویژگی‌های برجسته Jetpack Compose، طراحی کامپوننت‌های قابل استفاده مجدد است. شما می‌توانید کامپوننت‌هایی را تعریف کنید که قابل استفاده در سراسر برنامه باشند و به طور مداوم از آن‌ها استفاده کنید. این باعث کاهش تکرار کد و افزایش بهره‌وری در فرآیند توسعه می‌شود.

2. جت پک کامپوز (Jetpack Compose) همچنین دارای اکوسیستمی قوی از ابزارها، کتابخانه‌ها و موارد دیگر است که توسعه رابط کاربری را سریعتر و آسان‌تر می‌کند. این اکوسیستم شامل ابزارهای طراحی، کتابخانه‌های مواد طراحی (Material Design)، پشتیبانی از تم‌ها و بسیاری از امکانات دیگر است.

3. همچنین، جت پک کامپوز (Jetpack Compose) قابلیت انتقال آسان به برنامه‌های اندروید قدیمی را داراست. شما می‌توانید جت پک کامپوز (Jetpack Compose) را به طور تدریجی به پروژه‌های قبلی خود اضافه کنید و از قابلیت‌ها و امکانات جدید آن بهره‌برداری کنید، بدون اینکه نیاز به بازنویسی کامل برنامه داشته باشید.

4. به طور خلاصه، جت پک کامپوز (Jetpack Compose) یک فریمورک قدرتمند برای تو جت پک کامپوز (Jetpack Compose) یک فریمورک توسعه رابط کاربری (UI) برای اندروید است که توسط گوگل ارائه شده است. این فریمورک بر اساس زبان برنامه‌نویسی Kotlin ساخته شده است و به توسعه‌دهندگان امکان می‌دهد رابط کاربری زیبا، پویا و تعاملی را با استفاده از کد کمتر و روش‌های ساده‌تر پیاده‌سازی کنند.

5. Jetpack Compose از رویکرد برنامه‌نویسی دی‌کلاراتیو استفاده می‌کند که در آن شما توصیف می‌کنید که رابط کاربری باید چگونه به نظر برسد و جت پک کامپوز (Jetpack Compose) با توجه به تغییرات در وضعیت برنامه، به‌روزرسانی رابط کاربری را به صورت خودکار انجام می‌دهد. این رویکرد باعث می‌شود توسعه‌دهندگان بتوانند با انعطاف بیشتری رابط کاربری را تغییر دهند و به نتیجه مورد انتظار برسند.

6. از دیگر ویژگی های آن، از زیرساخت Jetpack Android پشتیبانی می‌کند و با سایر اجزای Jetpack ادغام می‌شود. این بدان معناست که توسعه‌دهندگان می‌توانند از امکانات و ابزارهای موجود در Jetpack مانند نگهداری وضعیت (State Management)، مدیریت منابع، ناوبری و غیره در کنار جت پک کامپوز (Jetpack Compose) استفاده کنند.

7. جت پک کامپوز (Jetpack Compose) از مفاهیمی مانند کامپوننت‌ها، جت پک کامپوز (Jetpack Compose) و تابع‌های کامپوزی (Compose Functions) استفاده می‌کند. کامپوننت‌ها و تابع‌های کامپوزی به توسعه‌دهندگان اجازه می‌دهند که رابط کاربری را به صورت قابل استفاده مجدد طراحی کنند و در ترکیب با هم برای ساختاردهی UI استفاده کنند.

8. به توسعه‌دهندگان ابزارها و کامپوننت‌هایی را فراهم می‌کند که به طراحی، تست، انیمیشن، نویگیشن و سایر جنبه‌های توسعه رابط کاربری کمک می‌کنند. همچنین، با اکوسیستم گسترده‌ای از جامعه توسعه‌دهندگان، منابع آموزشی و اطلاعات مرتبط، جت پک کامپوز (Jetpack Compose) به توسعه‌دهندگان کمک می‌کند تا بهترین روش‌ها و الگوهای برنامه‌نویسی را در توسعه رابط کاربری اندروید اعمال کنند.

در این بخش، یک نمونه کد ساده از یک ماشین حساب ساده با استفاده از جت پک کامپوز (Jetpack Compose) را برای شما ارائه می‌دهم:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.dp

@Composable
fun Calculator() {
    var result by remember { mutableStateOf(0) }
    var input1 by remember { mutableStateOf("") }
    var input2 by remember { mutableStateOf("") }

    MaterialTheme {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Result: $result", style = MaterialTheme.typography.h5)
            Spacer(modifier = Modifier.height(16.dp))
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                CalculatorButton(text = "1", onClick = { input1 += "1" })
                CalculatorButton(text = "2", onClick = { input1 += "2" })
                CalculatorButton(text = "3", onClick = { input1 += "3" })
            }
            Spacer(modifier = Modifier.height(8.dp))
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                CalculatorButton(text = "4", onClick = { input1 += "4" })
                CalculatorButton(text = "5", onClick = { input1 += "5" })
                CalculatorButton(text = "6", onClick = { input1 += "6" })
            }
            Spacer(modifier = Modifier.height(8.dp))
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                CalculatorButton(text = "7", onClick = { input1 += "7" })
                CalculatorButton(text = "8", onClick = { input1 += "8" })
                CalculatorButton(text = "9", onClick = { input1 += "9" })
            }
            Spacer(modifier = Modifier.height(8.dp))
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                Button(onClick = { calculateSum() }) {
                    Text(text = "+")
                }
                Button(onClick = { calculateSubtraction() }) {
                    Text(text = "-")
                }
                Button(onClick = { calculateMultiplication() }) {
                    Text(text = "*")
                }
            }
            Spacer(modifier = Modifier.height(8.dp))
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                Button(onClick = { clearInputs() }) {
                    Text(text = "Clear")
                }
            }
        }
    }
}

@Composable
fun CalculatorButton(text: String, onClick: () -> Unit) {
    Button(
        onClick = onClick,
        modifier = Modifier.size(64.dp)
    ) {
        Text(text = text)
    }
}

fun ColumnScope.calculateSum() {
    val input1 = remember { mutableStateOf(input1) }
    val input2 = remember { mutableStateOf(input2) }
    val result = remember { mutableStateOf(0) }

    result.value = input1.value.toInt() + input2.value.toInt()
}

fun ColumnScope.calculateSubtraction() {
    val input1 = remember { mutableStateOf(input1) }
    val input2 = remember { mutableStateOf(input2) }
    val result = remember { mutableStateOf(0) }

    result.value = input1.value.toInt() - input2.value.toInt()
}

fun ColumnScope.calculateMultiplication() {
    val input1 = remember { mutableStateOf(input1) }
    val input2 = remember { mutableStateOf(input2) }
    val result = remember { mutableStateOf(0) }

    result.value = input1.value.toInt() * input2.value.toInt()
}

fun ColumnScope.clearInputs() {
    val input1 = remember { mutableStateOf("") }
    val input2 = remember { mutableStateOf("") }
    val result = remember { mutableStateOf(0) }

    input1.value = ""
    input2.value = ""
    result.value = 0
}

fun main() {
    setContent {
        Calculator()
    }
}

در این نمونه کد، تابع Calculator یک کامپوننت جت پک کامپوز (Jetpack Compose) است که یک ماشین حساب ساده را پیاده‌سازی می‌کند. در این کامپوننت، از استیت‌های قابل تغییر برای نمایش نتایج و ورودی‌های ماشین حساب استفاده می‌شود.

توابع calculateSum، calculateSubtraction و calculateMultiplication برای انجام عملیات جمع، تفریق و ضرب استفاده می‌شوند. هرکدام از این توابع، مقادیر ورودی از استیت‌های قابل تغییر را می‌گیرند و نتیجه را در یک استیت قابل تغییر ذخیره می‌کنند.

تابع clearInputs نیز برای پاک کردن ورودی‌ها و نتیجه استفاده می‌شود. این تابع با تنظیم مجدد مقادیر استیت‌های قابل تغییر، ورودی‌ها را به حالت اولیه برمی‌گرداند.

در main، با استفاده از setContent، کامپوننت Calculator نمایش داده می‌شود.

این نمونه کد را می‌توانید در یک پروژه اندروید که از جت پک کامپوز (Jetpack Compose) پشتیبانی می‌کند، اجرا کنید و با استفاده از دکمه‌ها، عملیات جمع، تفریق و ضرب را انجام دهید. نتیجه و ورودی‌ها در همان صفحه نمایش داده می‌شوند.

و همچنین ممنون میشم از طریق ستاره‌های این پایین به این مقاله امتیاز بدی و اگه هر سوالی داشتی توی قسمت دیدگاه بپرس و قطعا بهت پاسخ میدیم.