Tugas 6: Membuat Aplikasi Konversi Nilai Mata Uang

Aplikasi Konverter Mata Uang ini merupakan studi kasus yang sangat baik untuk mendalami konsep yang lebih lanjut dalam Jetpack Compose. Selain memperkuat pemahaman tentang manajemen state dan input, proyek ini memperkenalkan praktik penting dalam pengembangan UI modern: membuat komponen kustom yang dapat digunakan kembali (reusable custom components). Mari kita bedah arsitektur dan logika dari aplikasi ini.

Struktur Aplikasi dan State Utama

Komponen utama aplikasi, CurrencyConverterApp, bertanggung jawab untuk menata letak keseluruhan dan mengelola state aplikasi secara global.

@Composable
fun CurrencyConverterApp() {
    var inputAmount by remember { mutableStateOf("") }
    var fromCurrency by remember { mutableStateOf("IDR") }
    var toCurrency by remember { mutableStateOf("USD") }
    var result by remember { mutableStateOf("") }

    // ... Layout ...
}
        

Aplikasi ini mengelola empat state utama: jumlah input (inputAmount), mata uang asal (fromCurrency), mata uang tujuan (toCurrency), dan hasil konversi (result). Semua state ini dideklarasikan menggunakan remember { mutableStateOf(...) } agar nilainya tetap terjaga selama recomposition.

Tata letak utama menggunakan Box untuk pemusatan konten dan Column untuk menyusun elemen-elemen UI secara vertikal.

Menciptakan Komponen Kustom: CurrencyDropdown

Fitur paling menarik dari aplikasi ini adalah penciptaan composable kustom CurrencyDropdown. Daripada menulis logika untuk menu dropdown dua kali, logika tersebut diekstraksi ke dalam satu komponen yang dapat dikonfigurasi dan digunakan kembali. Ini adalah praktik fundamental dalam Compose untuk membangun UI yang bersih dan modular.

@Composable
fun CurrencyDropdown(
    label: String, 
    selected: String, 
    options: List, 
    onSelect: (String) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }

    // ... implementation ...
}
        

Analisis Komponen CurrencyDropdown:

• Parameter Fleksibel: Komponen ini menerima semua data yang dibutuhkannya: sebuah label, nilai yang sedang terpilih (selected), daftar pilihan (options), dan sebuah fungsi lambda onSelect. Lambda onSelect adalah contoh dari event hoisting, di mana komponen anak memberitahu komponen induk tentang suatu kejadian (dalam hal ini, pemilihan item baru).
• State Internal: Komponen ini memiliki state-nya sendiri, yaitu expanded, untuk mengontrol visibilitas menu dropdown. State ini bersifat internal dan tidak perlu diketahui oleh CurrencyConverterApp, sebuah contoh enkapsulasi yang baik.
• Komposisi UI Cerdas: Tampilannya dibangun dengan menggabungkan beberapa komponen standar:
  • OutlinedTextField digunakan hanya untuk menampilkan nilai yang dipilih (readOnly = true).
  • IconButton dengan ArrowDropDown ditempatkan sebagai trailingIcon untuk memicu tampilan menu.
  • DropdownMenu adalah menu yang sebenarnya, yang visibilitasnya dikontrol oleh state expanded.
  • Setiap item menu (DropdownMenuItem) saat diklik akan memanggil onSelect untuk memberitahu induknya dan kemudian menyetel expanded ke false untuk menutup menu.

Memisahkan Logika Konversi

Sama seperti contoh aplikasi sebelumnya, logika bisnis untuk konversi mata uang dipisahkan ke dalam fungsi non-composable bernama convertCurrency.

fun convertCurrency(amountStr: String, from: String, to: String): String {
    val rates = mapOf(
        "IDR" to 1.0,
        "USD" to 0.000065,
        // ... more rates
    )
    
    // ... conversion logic ...
}
        

Poin Kunci dari Logika Konversi:

• Data Hardcoded: Kurs mata uang (rates) ditulis secara langsung di dalam kode. Perlu dicatat, dalam aplikasi dunia nyata, data ini idealnya diambil dari sebuah API (Application Programming Interface) agar selalu terkini.
• Parsing yang Aman: amountStr.toDoubleOrNull() digunakan untuk mengonversi input string ke angka. Metode ini lebih aman daripada .toDouble() karena akan mengembalikan null jika string tidak valid, yang kemudian dapat ditangani dengan baik tanpa menyebabkan aplikasi crash.
• Logika Konversi: Rumus yang digunakan ((amount / fromRate) * toRate) secara efektif mengonversi jumlah input ke sebuah unit dasar (dalam kasus ini, relatif terhadap IDR) sebelum mengonversinya ke mata uang tujuan.
• Pemformatan Output: Hasilnya diformat untuk menampilkan maksimal dua angka desimal ("%.2f".format(result)), memberikan output yang bersih dan mudah dibaca.

Menghubungkan Semuanya

Tombol "Convert" adalah pemicu utama yang menyatukan UI dan logika. Saat diklik, ia membaca semua state yang relevan dari CurrencyConverterApp, memanggil fungsi convertCurrency dengan nilai-nilai tersebut, dan akhirnya memperbarui state result, yang secara otomatis akan memperbarui teks hasil di layar.

Github

Referensi: 

https://developer.android.com/kotlin/learn?hl=id#:~:text=Kotlin%20adalah%20bahasa%20pemrograman%20banyak,membantu%20Anda%20bekerja%20dengan%20cepat.

https://kuliahppb.blogspot.com/2025/04/penggunaan-kotlin-1.html