Mochamad Kolbi Nuron_Membuat Kalkulator

 Nama: Mochamad Kolbi Nuron

NRP: 5025231183

Kelas: PPB B

Membuat aplikasi kalkulator sederhana

1. Gambaran Umum

Aplikasi ini adalah kalkulator sederhana berbasis Android yang dibuat menggunakan Jetpack Compose.

Fitur utama:

• Input dua angka menggunakan TextField
• Operasi matematika:
  • Penjumlahan (+)
  • Pengurangan (-)
  • Perkalian (*)
  • Pembagian (/)
• Menampilkan hasil perhitungan
• Tombol reset untuk menghapus input

2. Struktur Utama Program

Aplikasi terdiri dari:

1. MainActivity → entry point aplikasi
2. CalculatorScreen() → UI utama dan logika
3. Preview → tampilan di Android Studio

3. Penjelasan Kode per Bagian

3.1 MainActivity (Entry Point)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            KalkulatorTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    CalculatorScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

Penjelasan:

• ComponentActivity() → kelas dasar activity
• onCreate() → fungsi pertama saat aplikasi dijalankan
• enableEdgeToEdge() → membuat tampilan fullscreen
• setContent {} → menggantikan XML dengan Compose

Komponen penting:

• KalkulatorTheme → tema aplikasi
• Scaffold → layout dasar (bisa untuk top bar, dll)
• CalculatorScreen() → memanggil UI utama

3.2 State (Variabel Data)

var number1 by remember { mutableStateOf("") }
var number2 by remember { mutableStateOf("") }
var result by remember { mutableStateOf("0") }

Penjelasan:

• number1 → input angka pertama
• number2 → input angka kedua
• result → hasil perhitungan

Konsep penting:

• remember → menyimpan nilai selama UI aktif
• mutableStateOf() → membuat state yang bisa berubah
• Saat state berubah → UI otomatis update

3.3 Layout Utama (Column)

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

Penjelasan:

• Column → menyusun elemen secara vertikal
• fillMaxSize() → memenuhi layar
• padding(16.dp) → jarak dari tepi
• Alignment.CenterHorizontally → posisi tengah horizontal
• Arrangement.Center → posisi tengah vertikal

3.4 Judul Aplikasi

Text(
    text = "Kalkulator Sederhana",
    style = MaterialTheme.typography.headlineMedium,
    modifier = Modifier.padding(bottom = 24.dp)
)

Penjelasan:

• Text → menampilkan teks
• headlineMedium → ukuran font besar
• padding → jarak bawah

3.5 Input Angka (TextField)

Input Pertama

TextField(
    value = number1,
    onValueChange = { number1 = it },
    label = { Text("Angka Pertama") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    modifier = Modifier.fillMaxWidth()
)

Input Kedua

TextField(
    value = number2,
    onValueChange = { number2 = it },
    label = { Text("Angka Kedua") },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    modifier = Modifier.fillMaxWidth()
)

Penjelasan:

• value → nilai yang ditampilkan
• onValueChange → update saat user mengetik
• keyboardType = Number → keyboard angka
• fillMaxWidth() → lebar penuh

3.6 Tombol Operasi Matematika

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
)

Penjelasan:

• Row → susun tombol secara horizontal
• SpaceEvenly → jarak antar tombol sama

➕ Penjumlahan

Button(onClick = {
    val n1 = number1.toDoubleOrNull() ?: 0.0
    val n2 = number2.toDoubleOrNull() ?: 0.0
    result = (n1 + n2).toString()
}) {
    Text("+")
}

➖ Pengurangan

result = (n1 - n2).toString()

✖️ Perkalian

result = (n1 * n2).toString()

➗ Pembagian

if (n2 != 0.0) {
    result = (n1 / n2).toString()
} else {
    result = "Error: Div by 0"
}

Penjelasan Logika:

• toDoubleOrNull() → mengubah input ke angka
• ?: 0.0 → jika kosong → default 0
• Operasi matematika dilakukan sesuai tombol
• Hasil dikonversi ke String → ditampilkan

Khusus pembagian:

• Dicek apakah pembagi = 0
• Jika iya → tampilkan error

3.7 Menampilkan Hasil

Text(
    text = "Hasil: $result",
    style = MaterialTheme.typography.headlineSmall
)

Penjelasan:

• Menampilkan hasil perhitungan
• $result → nilai dari state

3.8 Tombol Reset

Button(onClick = {
    number1 = ""
    number2 = ""
    result = "0"
}) {
    Text("Reset")
}

Penjelasan:

• Mengosongkan semua input
• Mengembalikan hasil ke 0

3.9 Preview

@Preview(showBackground = true)
@Composable
fun CalculatorPreview() {
    KalkulatorTheme {
        CalculatorScreen()
    }
}

Penjelasan:

• Untuk melihat tampilan tanpa menjalankan aplikasi
• Mempermudah desain UI