Tugas 5

https://github.com/ilomimo/calcu-ppb

 

Aplikasi ini merupakan implementasi kalkulator sederhana yang ditulis dengan framework Jetpack Compose. Tujuan utamanya adalah memberikan pengalaman kalkulasi intuitif, ringan, dan mudah digunakan, sekaligus mendemonstrasikan struktur aplikasi Compose yang efisien dan reaktif.

1. Struktur Utama Aplikasi

Aplikasi dimulai dari kelas MainActivity, yang merupakan turunan dari ComponentActivity. Di dalam fungsi onCreate, Compose setContent digunakan untuk mengatur antarmuka pengguna dengan memanggil fungsi CalculatorScreen() dalam tema SimplecalcuTheme.

setContent {
    SimplecalcuTheme {
        Surface(...) {
            CalculatorScreen()
        }
    }
}

Ini menciptakan antarmuka berbasis tema Material 3, menjaga konsistensi tampilan dan nuansa aplikasi.

2. CalculatorScreen() — Komposisi UI dan Logika Interaktif

Fungsi ini adalah inti dari UI dan logika kalkulasi.

State Management

var input by remember { mutableStateOf("") }
var result by remember { mutableStateOf("") }

Dua variabel state (input, result) digunakan untuk menyimpan ekspresi matematika yang diketik pengguna dan hasil evaluasinya. Karena Jetpack Compose bersifat reactive, perubahan nilai ini otomatis memperbarui UI.

Tampilan dan Layout

• Komponen Column menyusun elemen secara vertikal.
• Text digunakan untuk menampilkan ekspresi (input) dan hasil (result).
• Tombol-tombol disusun dalam struktur List<List<String>>, dan ditampilkan secara dinamis menggunakan Row dan Box.

Setiap tombol diberi warna berbeda tergantung fungsinya:

• Operator (+, -, ×, ÷) berwarna biru muda,
• Tombol hasil (=) hijau pastel,
• Tombol clear (C) merah pastel,
• Angka biasa abu terang.

Interaksi Tombol

.clickable {
    when (button) {
        "=" -> calculate()
        "C" -> { input = ""; result = "" }
        else -> input += button
    }
}

Tiap tombol bisa ditekan dengan .clickable. Tombol “=” menjalankan fungsi calculate(), sedangkan “C” menghapus input dan hasil. Tombol angka dan operator menambahkan karakter ke string input.

3. Fungsi calculate() dan Evaluasi Ekspresi

val expr = input.replace("×", "*").replace("÷", "/")
val eval = eval(expr)

Sebelum dihitung, ekspresi dikonversi ke format operator standar (*, /). Fungsi eval() kemudian digunakan untuk mengevaluasi ekspresi matematika dari string.

4. Evaluator Manual eval()

Bagian paling penting dari kode ini adalah fungsi eval(), yaitu parser ekspresi aritmatika manual yang:

• Mendukung operasi dasar: +, -, ×, ÷
• Memahami urutan operasi (operator precedence)
• Bisa menangani angka desimal
• Mendukung tanda negatif dan ekspresi dalam tanda kurung

Parser ini bekerja dengan pendekatan recursive descent parsing, yakni metode parsing top-down yang sangat cocok untuk ekspresi matematika sederhana.

Contoh parsing:

• parseExpression() menangani penjumlahan dan pengurangan
• parseTerm() menangani perkalian dan pembagian
• parseFactor() menangani bilangan, tanda negatif, dan tanda kurung

Jika ada karakter tidak valid atau kesalahan input, parser akan melempar exception, dan hasil ditampilkan sebagai "Error".

5. Kelebihan Desain dan Kesederhanaan

• Responsif: Setiap perubahan input langsung tercermin di UI
• Modular: Logika UI, evaluasi, dan interaksi dipisah jelas
• Visual: UI bersih dan mudah digunakan dengan warna terpisah
• Expandable: Mudah dikembangkan menjadi kalkulator ilmiah, historis, atau berfitur tambahan