Tugas 5: Membuat Aplikasi Kalkulator

Nama: Ken Anargya Alkausar

NRP: 5025211168

Kelas: PPB - A

Tugas 5: Membuat Aplikasi Kalkulator

Di artikel ini, saya akan menjelaskan mengenai aplikasi kalkulator sederhana yang dibuat menggunakan Jetpack Compose, toolkit UI modern untuk Android. Aplikasi ini memiliki fitur dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Selain itu, tampilannya sudah didesain agar lebih rapih dan nyaman dilihat.

CalculatorUI

fun CalculatorUI(onResult: (String) -> Unit) {
    var num1 by remember { mutableStateOf("") }
    var num2 by remember { mutableStateOf("") }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Simple Calculator") }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .padding(padding)
                .padding(16.dp)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Masukkan dua angka:", fontSize = 18.sp, modifier = Modifier.padding(8.dp))

            TextField(
                value = num1,
                onValueChange = { num1 = it },
                label = { Text("Angka pertama") },
                modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
            )

            TextField(
                value = num2,
                onValueChange = { num2 = it },
                label = { Text("Angka kedua") },
                modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
            )

            Spacer(modifier = Modifier.height(16.dp))

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                CalculatorButton("+", onClick = { calculate(num1, num2, "+", onResult) }, modifier = Modifier.weight(1f))
                CalculatorButton("-", onClick = { calculate(num1, num2, "-", onResult) }, modifier = Modifier.weight(1f))
            }


            Spacer(modifier = Modifier.height(8.dp))

            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                CalculatorButton("x", onClick = { calculate(num1, num2, "*", onResult) }, modifier = Modifier.weight(1f))
                CalculatorButton(":", onClick = { calculate(num1, num2, "/", onResult) }, modifier = Modifier.weight(1f))
            }

        }
    }
}

Fungsi CalculatorUI adalah komponen utama yang menampilkan antarmuka pengguna dari kalkulator. Fungsi ini menggunakan anotasi @Composable, yang menunjukkan bahwa fungsi tersebut menghasilkan UI dalam paradigma deklaratif Jetpack Compose. Di dalamnya terdapat dua buah TextField untuk menerima input angka dari pengguna, masing-masing disimpan dalam state num1 dan num2 menggunakan remember dan mutableStateOf. Fungsi ini juga menggunakan Scaffold untuk menyusun elemen UI dengan struktur yang lebih terorganisir, termasuk TopAppBar sebagai judul aplikasi. Tombol-tombol operasi matematika ditampilkan dalam dua baris Row, yang masing-masing berisi dua tombol: penjumlahan dan pengurangan di baris pertama, serta perkalian dan pembagian di baris kedua. Fungsi ini juga memperhatikan tata letak dengan menggunakan Modifier, Padding, dan Alignment agar tampilan lebih rapi dan user-friendly.

CalculatorButton

fun CalculatorButton(label: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
    Button(
        onClick = onClick,
        modifier = modifier
            .padding(horizontal = 8.dp)
    ) {
        Text(label)
    }
}

Fungsi CalculatorButton adalah komponen khusus untuk menampilkan tombol operasi matematika. Fungsi ini juga merupakan fungsi @Composable, yang berarti dapat digunakan untuk membangun elemen UI dalam Jetpack Compose. Fungsi menerima tiga parameter: label untuk teks yang ditampilkan pada tombol, onClick untuk mendefinisikan aksi yang dijalankan saat tombol ditekan, dan modifier sebagai parameter opsional untuk mengatur ukuran atau posisi tombol. Di dalamnya, Button digunakan sebagai elemen interaktif utama, dan teks di dalam tombol ditampilkan menggunakan Text(label). Dengan membuat fungsi ini terpisah, kode menjadi lebih modular dan dapat digunakan kembali untuk tombol lainnya tanpa perlu menduplikasi kode.

Calculate

fun calculate(num1: String, num2: String, operator: String, onResult: (String) -> Unit) {
    try {
        val n1 = num1.toDouble()
        val n2 = num2.toDouble()
        val result = when (operator) {
            "+" -> n1 + n2
            "-" -> n1 - n2
            "*" -> n1 * n2
            "/" -> if (n2 != 0.0) n1 / n2 else return onResult("Tidak bisa dibagi 0")
            else -> 0.0
        }

        val displayResult = if (result % 1 == 0.0) {
            result.toInt().toString() // tampilkan tanpa koma
        } else {
            result.toString() // tetap tampilkan koma kalau desimal
        }

        onResult("Hasil: $displayResult")
    } catch (e: NumberFormatException) {
        onResult("Input tidak valid")
    }
}

Fungsi calculate berfungsi untuk menjalankan logika utama perhitungan berdasarkan input angka dan jenis operasi matematika yang dipilih. Fungsi ini menerima empat parameter: dua buah input String (yaitu num1 dan num2), satu parameter operator untuk menentukan jenis operasi, dan onResult, yaitu lambda function yang digunakan untuk mengirimkan hasil kembali ke fungsi pemanggil agar ditampilkan kepada pengguna. Di dalam fungsi ini, input angka diubah menjadi tipe Double agar bisa dilakukan operasi aritmatika. Kemudian, dilakukan pengecekan jenis operator untuk menentukan apakah akan melakukan penjumlahan, pengurangan, perkalian, atau pembagian. Fungsi ini juga menyertakan validasi seperti pembagian dengan nol dan pengecekan apakah hasil merupakan bilangan bulat atau desimal. Jika hasil perhitungan tidak memiliki nilai desimal (misalnya 81.0), maka akan ditampilkan sebagai 81 dengan mengubah hasil menjadi tipe Int. Selain itu, jika input bukan angka yang valid, fungsi akan menangani kesalahan dengan menampilkan pesan "Input tidak valid" melalui onResult.

Aplikasi kalkulator ini menunjukkan implementasi praktis dari konsep pemrograman deklaratif menggunakan Jetpack Compose. Selain tampilannya yang clean dan minimalis, fitur perhitungan dan validasi input sudah ditangani dengan baik.

Dokumentasi: