Tugas 5 PPB G - Membuat Aplikasi Kalkulator Sederhana Menggunakan Jetpack Compose

 Tugas Pertemuan 5 PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Pada pertemuan ke-5 ini, kami diminta membuat aplikasi Kalkulator sederhana. Aplikasi ini adalah kalkulator sederhana yang dibuat menggunakan Jetpack Compose di Android Studio dengan Kotlin. Pengguna dapat memasukkan dua angka dan memilih operasi matematika dasar (penjumlahan, pengurangan, perkalian, dan pembagian) untuk mendapatkan hasilnya.

Source Code dapat dilihat disini

Berikut penjelasan kodenya

a. MainActivity.kt

Kelas MainActivity bertindak sebagai titik masuk utama aplikasi. Di dalamnya, UI dikonstruksi dengan fungsi setContent { CalculatorApp() }, yang memanggil fungsi Composable utama.

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

b. CalculatorApp() (Composable UI Utama)

Fungsi ini bertanggung jawab untuk menampilkan UI aplikasi dengan Jetpack Compose.

Komponen Utama:

• TextField: Untuk input angka pertama dan kedua.

• Button: Untuk operasi matematika.

• Text: Untuk menampilkan hasil.

• Spacer: Untuk memberikan jarak antar elemen UI.

    @Composable
    fun CalculatorApp() {
        var num1 by remember { mutableStateOf(TextFieldValue("")) }
        var num2 by remember { mutableStateOf(TextFieldValue("")) }
        var result by remember { mutableStateOf("") }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        ) {
            Text(
                text = "Aplikasi Kalkulator Sederhana",
                style = MaterialTheme.typography.headlineMedium,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.height(16.dp))
            TextField(
                value = num1,
                onValueChange = { num1 = it },
                label = { Text("Masukkan angka pertama") }
            )
            Spacer(modifier = Modifier.height(8.dp))

            TextField(
                value = num2,
                onValueChange = { num2 = it },
                label = { Text("Masukkan angka kedua") }
            )
            Spacer(modifier = Modifier.height(16.dp))

            Row {
                Button(onClick = {
                    result = calculate(num1.text, num2.text, "+")
                }) { Text("add") }

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

                Button(onClick = {
                    result = calculate(num1.text, num2.text, "-")
                }) { Text("sub") }

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

                Button(onClick = {
                    result = calculate(num1.text, num2.text, "*")
                }) { Text("mul") }

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

                Button(onClick = {
                    result = calculate(num1.text, num2.text, "/")
                }) { Text("div") }
            }

            Spacer(modifier = Modifier.height(16.dp))
            Text(text = "Hasil: $result", style = MaterialTheme.typography.headlineSmall)

            Spacer(modifier = Modifier.height(30.dp))
            Text("👨🏻‍💻 by : ")
            Spacer(modifier = Modifier.height(16.dp))
            Text("Arfi Raushani Fikra (5025211084) - PPB G 2025")
        }
    }
	

c. calculate() (Fungsi Perhitungan)

Fungsi ini menangani logika perhitungan berdasarkan input pengguna dan operasi yang dipilih.

      fun calculate(n1: String, n2: String, operator: String): String {
          val num1 = n1.toDoubleOrNull()
          val num2 = n2.toDoubleOrNull()

          if (num1 == null || num2 == null) {
              return "Masukkan angka yang valid!"
          }

          return when (operator) {
              "+" -> (num1 + num2).toString()
              "-" -> (num1 - num2).toString()
              "*" -> (num1 * num2).toString()
              "/" -> if (num2 != 0.0) (num1 / num2).toString() else "Tidak bisa bagi 0"
              else -> "Operasi tidak valid"
          }
      }
      

d. DefaultPreview() (Preview UI di Android Studio)

Fungsi ini memungkinkan kita melihat tampilan UI di Android Studio Preview tanpa harus menjalankan emulator.

  @Preview(showBackground = true)
  @Composable 
  fun DefaultPreview() { 
    CalculatorApp()
  }
  

Hasilnya adalah sebagai berikut

~ Terima Kasih ~