Membuat aplikasi kalkulator sederhana dengan Kotlin

 Nama (NRP) : Muhammad Arkan Karindra Darvesh (5025211236)

Langkah - langkah membuat sebuah komponen button dan mengintegrasikannya dalam sebuah aplikasi Kalkulator sederhana. 

Aplikasi Simple Calculator dengan Jetpack Compose

Aplikasi ini adalah kalkulator sederhana yang memungkinkan pengguna untuk melakukan operasi matematika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Aplikasi ini dibangun menggunakan Jetpack Compose yang merupakan toolkit deklaratif modern untuk membangun UI di Android.

Tampilan Aplikasi

Contoh: Pengguna memasukkan 32 dan 2, lalu menekan tombol "+" sehingga hasilnya adalah 34.

Penjelasan Struktur dan Kode

1. Struktur Umum - MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContent {
        SimpleCalculatorTheme {
            CalcApp()
        }
    }
}

Penjelasan: Fungsi onCreate adalah titik awal aplikasi. Di dalamnya, tema diterapkan dan fungsi utama CalcApp() dipanggil untuk menampilkan UI aplikasi kalkulator.

2. Fungsi CalcApp()

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

    // UI layout
}

• num1 dan num2 menyimpan input angka dari pengguna.
• result menyimpan hasil perhitungan.
• UI dibangun dengan menggunakan Column dan Row untuk penataan tombol-tombol operasi.

3. Input Angka

OutlinedTextField(
    value = num1,
    onValueChange = { num1 = it },
    label = { Text("Number 1") },
    singleLine = true
)

Digunakan OutlinedTextField untuk memasukkan angka pertama dan kedua. Input ini bersifat String agar bisa menangani input kosong, lalu diubah ke Double saat perhitungan.

4. Tombol Operasi

Button(onClick = { result = calc(num1, num2, "+") }) {
    Text("+")
}

Ada 4 tombol operasi (+, -, ×, ÷). Masing-masing tombol memanggil fungsi calc() dengan operator yang sesuai.

5. Tombol AC (Clear)

Button(
    onClick = {
        num1 = ""
        num2 = ""
        result = ""
    }
)

Membersihkan semua input dan hasil, mengembalikan tampilan ke keadaan awal.

6. Fungsi calc() - Perhitungan

fun calc(num1: String, num2: String, operator: String): String {
    if (num1.isEmpty() || num2.isEmpty()) return "Invalid input"
    return try {
        val result = when (operator) {
            "+" -> num1.toDouble() + num2.toDouble()
            "-" -> num1.toDouble() - num2.toDouble()
            "*" -> num1.toDouble() * num2.toDouble()
            "/" -> num1.toDouble() / num2.toDouble()
            else -> return "Invalid operator"
        }
        if (result % 1.0 == 0.0) result.toInt().toString() else result.toString()
    } catch (e: Exception) {
        "Error"
    }
}

Penjelasan:
Fungsi ini:

• Memastikan input tidak kosong.
• Mengonversi input menjadi Double.
• Melakukan operasi sesuai dengan parameter operator.
• Jika hasilnya bilangan bulat (misal 34.0), maka ditampilkan sebagai 34 (tanpa koma).
• Menangani error dengan try-catch.

Kesimpulan

Aplikasi ini adalah contoh bagus untuk belajar:

• Dasar penggunaan @Composable di Jetpack Compose
• State management menggunakan remember dan mutableStateOf
• Validasi dan konversi input
• Penerapan perhitungan logika matematika sederhana

Fitur bisa dikembangkan lagi seperti menambahkan histori kalkulasi, animasi tombol, atau validasi input agar hanya menerima angka.

https://github.com/Arkandrvesh/PPB

Aplikasi Temperature Converter (Jetpack Compose)

Aplikasi ini digunakan untuk mengonversi suhu dari satu satuan ke satuan lainnya. Mendukung konversi antara Celsius, Fahrenheit, Reamur, dan Kelvin. Dibangun dengan Jetpack Compose agar tampilannya modern dan responsif.

Tampilan Aplikasi

Contoh: Konversi dari Celsius ke Fahrenheit

Penjelasan Kode

1. Struktur Awal (MainActivity)

setContent {
    TemperatureConverterTheme {
        TempConverterApp()
    }
}

Fungsi ini memuat tema aplikasi dan memanggil TempConverterApp() yang merupakan tampilan utama UI.

2. State dan UI Utama (TempConverterApp)

var input by remember { mutableStateOf("") }
var fromUnit by remember { mutableStateOf("Celsius") }
var toUnit by remember { mutableStateOf("Fahrenheit") }
var result by remember { mutableStateOf("") }

• input menyimpan nilai suhu yang dimasukkan pengguna.
• fromUnit dan toUnit menyimpan satuan suhu awal dan target.
• result menyimpan hasil konversi yang akan ditampilkan.

Komponen utama UI terdiri dari:

• OutlinedTextField untuk input suhu.
• DropdownSelector untuk memilih satuan suhu asal dan tujuan.
• Tombol Convert untuk menghitung hasil konversi.
• Tombol AC untuk mereset semua input dan hasil.

3. Komponen Dropdown (DropdownSelector)

@Composable
fun DropdownSelector(...) {
    // Menampilkan dropdown menu untuk memilih satuan suhu
}

Fungsi ini digunakan dua kali: sekali untuk bagian "From" dan sekali untuk bagian "To". Unit dipilih dari daftar: Celsius, Fahrenheit, Reamur, dan Kelvin.

4. Fungsi Konversi (convertTemperature)

fun convertTemperature(input: String, from: String, to: String): String {
    val value = input.toDoubleOrNull() ?: return "Invalid input"

    val celsius = when (from) {
        "Celsius" -> value
        "Fahrenheit" -> (value - 32) * 5 / 9
        "Reamur" -> value * 5 / 4
        "Kelvin" -> value - 273.15
        else -> return "Invalid unit"
    }

    val result = when (to) {
        "Celsius" -> celsius
        "Fahrenheit" -> celsius * 9 / 5 + 32
        "Reamur" -> celsius * 4 / 5
        "Kelvin" -> celsius + 273.15
        else -> return "Invalid unit"
    }

    return if (result % 1.0 == 0.0) result.toInt().toString() else "%.2f".format(result)
}

Penjelasan:

• Mengubah nilai dari satuan asal ke Celsius sebagai basis perhitungan.
• Kemudian mengubah nilai Celsius ke satuan tujuan.
• Jika hasilnya bulat, akan ditampilkan sebagai bilangan bulat.
• Jika desimal, dibulatkan dua angka di belakang koma.

Kesimpulan

Aplikasi ini merupakan contoh bagus untuk mempelajari:

• Pemanfaatan state di Jetpack Compose dengan remember
• Pembuatan dropdown dinamis dengan DropdownMenu
• Logika konversi suhu lintas satuan
• Pemrosesan input numerik dan validasi

Kamu bisa mengembangkan fitur ini lebih lanjut, seperti:

• Menambahkan grafik suhu
• Menyimpan histori konversi
• Auto-detect satuan suhu berdasarkan simbol (misalnya: °C, °F)