Tugas 5: Membuat Aplikasi Kalkulator

Jetpack Compose memungkinkan pengembangan antarmuka pengguna (UI) Android dengan cara yang lebih efisien dan intuitif. Dengan menganalisis aplikasi sederhana seperti kalkulator, kita dapat memahami konsep-konsep inti yang menjadi fondasi toolkit ini. Aplikasi ini menunjukkan bagaimana mengelola input pengguna, menangani state, dan memisahkan logika kalkulasi dari kode UI.

Struktur Utama dan Penataan Letak

Komponen utama dari aplikasi ini adalah CalcApp, yang berisi seluruh elemen UI dan state. Penataan letaknya dibangun secara logis menggunakan composable layout dasar.

@Composable
fun CalcApp() {
    // ... state variables ...

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column(
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            // ... UI elements ...
        }
    }
}
        

• Box: Digunakan sebagai kontainer root untuk memposisikan seluruh konten tepat di tengah layar dengan contentAlignment = Alignment.Center.
• Column: Menyusun semua elemen (judul, field input, hasil, dan tombol) secara vertikal. Penggunaan verticalArrangement = Arrangement.spacedBy(16.dp) adalah cara yang elegan untuk memberikan jarak vertikal yang konsisten antar elemen tanpa perlu menggunakan Spacer berulang kali.

Manajemen State dan Input Pengguna

Aplikasi ini mengelola tiga bagian data yang dapat berubah: dua angka input dan hasil kalkulasi. Ketiganya dideklarasikan sebagai state Compose.

var num1 by remember { mutableStateOf("") }
var num2 by remember { mutableStateOf("") }
var result by remember { mutableStateOf("") }
        

Interaksi dengan pengguna terjadi melalui OutlinedTextField. Pola yang digunakan di sini adalah fundamental untuk input di Compose.

OutlinedTextField(
    value = num1,
    onValueChange = { num1 = it },
    label = { Text("Number 1") },
    singleLine = true
)
        

• value = num1: Properti value dari TextField terikat pada state num1. Ini adalah "aliran data ke bawah" (state-to-UI), di mana tampilan selalu mencerminkan data state saat ini.
• onValueChange = { num1 = it }: Ketika pengguna mengetik, lambda onValueChange dipanggil dengan teks baru (it). Kita kemudian memperbarui state num1 dengan nilai baru ini. Ini adalah "aliran event ke atas" (UI-to-state), yang memicu recomposition dan memperbarui tampilan. Pola ini sering disebut sebagai two-way data binding.

Pemisahan Logika dari Antarmuka Pengguna

Praktik arsitektur yang baik adalah memisahkan logika bisnis (dalam hal ini, kalkulasi) dari kode UI. Aplikasi ini melakukannya dengan baik melalui fungsi calc.

fun calc(num1: String, num2: String, operator: String): String {
    // ... implementation ...
}
        

Fungsi calc adalah fungsi Kotlin standar, bukan sebuah composable. Ini membuatnya mudah diuji secara terpisah dan menjaga composable CalcApp tetap fokus pada tugasnya: menampilkan UI dan mengelola state.

Di dalam Fungsi calc:

• Validasi Input: Hal pertama yang dilakukan adalah memeriksa apakah input kosong, yang merupakan langkah validasi dasar yang penting.
• Penanganan Error: Seluruh logika kalkulasi dibungkus dalam blok try-catch. Ini adalah cara yang tangguh untuk menangani input yang tidak valid (misalnya, teks non-numerik) yang akan menyebabkan NumberFormatException.
• Logika Kalkulasi: Ekspresi when digunakan untuk melakukan operasi aritmatika yang sesuai berdasarkan operator yang diberikan.
• Pemformatan Hasil: Terdapat logika cerdas untuk memformat output. Jika hasilnya adalah bilangan bulat (misalnya, 4.0), maka ".0" akan dihilangkan untuk pengalaman pengguna yang lebih baik.

Menghubungkan Aksi dengan Logika

Tombol-tombol operasi (`+`, `-`, `*`, `÷`) berfungsi sebagai jembatan antara state UI dan logika kalkulasi.

Button(onClick = { result = calc(num1, num2, "+") }) {
    Text("+")
}
        

Saat sebuah tombol diklik, event onClick mengambil nilai saat ini dari state num1 dan num2, memanggil fungsi calc, dan kemudian memperbarui state result dengan nilai yang dikembalikan. Pembaruan pada result ini secara otomatis memicu recomposition dari Text yang menampilkan hasil, sehingga UI selalu sinkron dengan state terbaru.

Tombol "AC" (All Clear) juga mengikuti pola ini dengan menyetel ulang semua variabel state menjadi string kosong, yang secara efektif membersihkan semua input dan hasil di UI.

Kesimpulan

Meskipun sederhana, aplikasi kalkulator ini merupakan studi kasus yang sangat baik tentang prinsip-prinsip inti Jetpack Compose. Ia mendemonstrasikan:

• UI yang Digerakkan oleh State (State-Driven UI): Tampilan adalah fungsi dari state saat ini.
• Aliran Data Searah (Unidirectional Data Flow): State mengalir ke bawah dari pengelola state ke UI, dan event mengalir ke atas dari UI untuk memperbarui state.
'
• Pola value dan onValueChange: Cara standar untuk menangani komponen input.
• Pemisahan Tanggung Jawab: Memisahkan logika kalkulasi murni dari kode UI yang komposabel.

Dengan memahami konsep-konsep ini, pengembang dapat membangun aplikasi yang lebih kompleks, terstruktur dengan baik, dan mudah dikelola menggunakan Jetpack Compose.

Github

Referensi: 

https://kuliahppb.blogspot.com/2024/03/memahami-bahasa-kotlin.html

https://www.youtube.com/watch?v=HlE8MEtKBr0