Membuat Aplikasi Kalkulator Sederhana

 Pertemuan 6

Nama : Hafidz Panji Ashari
NRP : 5025231278

Langkah-Langkah Pembuatan Aplikasi Kalkulator Modular

Pada pertemuan keenam ini, praktik pengembangan difokuskan pada pengolahan input pengguna, state management, dan perancangan arsitektur kode yang modular. Aplikasi yang dibangun adalah Kalkulator Sederhana menggunakan Jetpack Compose, di mana logika bisnis (business logic) dipisahkan dari elemen antarmuka (UI).

Berikut adalah langkah-langkah implementasinya:

1. Persiapan Proyek

• Membuat proyek baru di Android Studio dengan template Empty Activity menggunakan bahasa Kotlin.

• Proyek disetel untuk berjalan pada target minimum API 24.

2. Merancang Logika Perhitungan (Business Logic)

• Agar kode memiliki tingkat cohesion yang tinggi, logika perhitungan dipisah ke dalam sebuah fungsi native Kotlin bernama hitungOperasi().

• Fungsi ini menerima tiga parameter String (nilai pertama, nilai kedua, dan jenis operator).

• Di dalam fungsi tersebut, dilakukan konversi String ke Double menggunakan .toDoubleOrNull().

• Digunakan struktur kondisional when untuk mengeksekusi operasi penambahan, pengurangan, perkalian, atau pembagian berdasarkan operator yang dikirim. Fitur validasi pembagian dengan nol juga diterapkan di sini untuk mencegah error crash.

3. Mendefinisikan State Variabel UI

• Pada blok Composable AplikasiKalkulatorKu(), dideklarasikan tiga variabel State menggunakan mutableStateOf: inputPertama, inputKedua, dan teksHasil. Variabel ini bertugas memicu penggambaran ulang UI (recomposition) secara otomatis jika nilainya berubah.

4. Merancang Antarmuka (User Interface)

• Layout utama dibungkus menggunakan Column agar elemen tersusun vertikal secara rapi di tengah layar.

• Komponen OutlinedTextField digunakan untuk kolom input. Untuk meningkatkan kenyamanan pengguna (UX), ditambahkan parameter keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number) agar keyboard yang muncul secara otomatis adalah papan ketik numerik.

• Komponen Row dengan parameter Arrangement.SpaceEvenly digunakan untuk meletakkan empat tombol operator (+, -, x, /) agar berjejer proporsional secara horizontal.

• Setiap tombol operator dihubungkan ke fungsi hitungOperasi() melalui parameter onClick.

• Terakhir, ditambahkan tombol "Reset Kolom" menggunakan kustomisasi ButtonDefaults.buttonColors berwarna merah (error color) untuk mengosongkan seluruh kolom dan nilai State.

5. Pengujian Aplikasi

• Aplikasi dijalankan ke perangkat Virtual Device (Emulator) atau fisik. Logika perhitungan berjalan lancar tanpa error, serta tampilan merespons input secara real-time.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AplikasiKalkulatorKu()
        }
    }
}

fun hitungOperasi(nilaiA: String, nilaiB: String, operator: String): String {
    val angkaA = nilaiA.toDoubleOrNull() ?: 0.0
    val angkaB = nilaiB.toDoubleOrNull() ?: 0.0

    return when (operator) {
        "Tambah" -> "Hasil: ${angkaA + angkaB}"
        "Kurang" -> "Hasil: ${angkaA - angkaB}"
        "Kali" -> "Hasil: ${angkaA * angkaB}"
        "Bagi" -> {
            if (angkaB == 0.0) "Error: Tidak bisa dibagi nol!"
            else "Hasil: ${angkaA / angkaB}"
        }
        else -> "Hasil: 0"
    }
}

@Composable
fun AplikasiKalkulatorKu() {
    var inputPertama by remember { mutableStateOf("") }
    var inputKedua by remember { mutableStateOf("") }
    var teksHasil by remember { mutableStateOf("Hasil: 0") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        OutlinedTextField(
            value = inputPertama,
            onValueChange = { inputPertama = it },
            label = { Text("Masukkan Bilangan Pertama") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )

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

        OutlinedTextField(
            value = inputKedua,
            onValueChange = { inputKedua = it },
            label = { Text("Masukkan Bilangan Kedua") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )

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

        Text(
            text = teksHasil,
            style = MaterialTheme.typography.headlineSmall,
            color = MaterialTheme.colorScheme.primary
        )

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

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Button(onClick = { teksHasil = hitungOperasi(inputPertama, inputKedua, "Tambah") }) {
                Text("+")
            }
            Button(onClick = { teksHasil = hitungOperasi(inputPertama, inputKedua, "Kurang") }) {
                Text("-")
            }
            Button(onClick = { teksHasil = hitungOperasi(inputPertama, inputKedua, "Kali") }) {
                Text("x")
            }
            Button(onClick = { teksHasil = hitungOperasi(inputPertama, inputKedua, "Bagi") }) {
                Text("/")
            }
        }

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

        Button(
            onClick = {
                inputPertama = ""
                inputKedua = ""
                teksHasil = "Hasil: 0"
            },
            modifier = Modifier.fillMaxWidth(),
            colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.error)
        ) {
            Text("Reset Kolom")
        }
    }
}