Pertemuan 6_Aplikasi Currency Converter

Nama              : Al-Ferro Yudisthira Putra

NRP                : 5025211176

Kelas               : PPB - A

Aplikasi Currency Converter

Pada tugas kali ini, saya membuat sebuah aplikasi dengan tujuan untuk merubah mata uang sesuai dengan keinginan user. Aplikasi ini terdiri dari beberapa komponen berupa

fun CurrencyConverterApp(modifier: Modifier = Modifier) {
    val mostTradedCurrencies = listOf(
        "USD", "EUR", "JPY", "GBP", "AUD",
        "CAD", "CHF", "CNY", "HKD", "IDR"
    )

    var amount by remember { mutableStateOf("") }
    var fromCurrency by remember { mutableStateOf("USD") }
    var toCurrency by remember { mutableStateOf("IDR") }
    var result by remember { mutableStateOf("Result: ") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Currency Converter", fontSize = 24.sp)

        OutlinedTextField(
            value = amount,
            onValueChange = { amount = it },
            label = { Text("Enter amount") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            CurrencyDropdown(
                label = "From",
                selectedCurrency = fromCurrency,
                currencies = mostTradedCurrencies,
                onCurrencySelected = { fromCurrency = it }
            )
            CurrencyDropdown(
                label = "To",
                selectedCurrency = toCurrency,
                currencies = mostTradedCurrencies,
                onCurrencySelected = { toCurrency = it }
            )
        }

        Button(
            onClick = {
                val amountValue = amount.toDoubleOrNull()
                result = if (amountValue != null) {
                    val converted = converter(amountValue, fromCurrency, toCurrency)
                    "Result: $converted $toCurrency"
                } else {
                    "Invalid input"
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Convert")
        }

        Text(result, fontSize = 20.sp)
    }
}

Fungsi CurrencyConverterApp adalah sebuah komponen antarmuka pengguna (UI) berbasis Jetpack Compose yang berfungsi sebagai aplikasi konversi mata uang. Aplikasi ini menampilkan antarmuka berupa judul, kolom input jumlah uang, dua dropdown untuk memilih mata uang asal dan tujuan, tombol untuk memulai konversi, serta teks untuk menampilkan hasil konversi. Daftar mata uang yang digunakan mencakup 10 mata uang paling sering diperdagangkan seperti USD, EUR, dan JPY. Nilai jumlah uang (amount), mata uang asal (fromCurrency), mata uang tujuan (toCurrency), dan hasil konversi (result) disimpan dalam state agar UI dapat bereaksi terhadap perubahan. Ketika tombol "Convert" ditekan, aplikasi akan mencoba mengonversi nilai jumlah uang ke dalam bentuk angka (Double), lalu memanggil fungsi converter() untuk menghitung nilai tukar berdasarkan pilihan mata uang. Hasil konversi kemudian ditampilkan di bawah tombol. Komposisi elemen UI diatur dalam Column dengan spasi dan perataan yang rapi untuk tampilan yang terorganisir.

fun CurrencyDropdown(
    label: String,
    selectedCurrency: String,
    currencies: List<String>,
    onCurrencySelected: (String) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }

    Column(modifier = Modifier.width(150.dp)) {
        Text(label)
        ExposedDropdownMenuBox(
            expanded = expanded,
            onExpandedChange = { expanded = !expanded }
        ) {
            OutlinedTextField(
                value = selectedCurrency,
                onValueChange = {},
                readOnly = true,
                modifier = Modifier.menuAnchor(),
                trailingIcon = {
                    ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
                }
            )

            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                currencies.forEach { currency ->
                    DropdownMenuItem(
                        text = { Text(currency) },
                        onClick = {
                            onCurrencySelected(currency)
                            expanded = false
                        }
                    )
                }
            }
        }
    }
}

Fungsi CurrencyDropdown adalah komponen antarmuka pengguna berbasis Jetpack Compose yang digunakan untuk membuat dropdown pilihan mata uang. Komponen ini menerima empat parameter yaitu label sebagai penanda, selectedCurrency sebagai mata uang yang sedang dipilih, currencies sebagai daftar pilihan mata uang, dan onCurrencySelected sebagai callback ketika pengguna memilih salah satu mata uang. Di dalam fungsi ini, terdapat state lokal expanded yang menentukan apakah dropdown sedang terbuka atau tidak. Komponen UI dibangun menggunakan Column dengan lebar tetap, dimulai dengan teks label, lalu dilanjutkan dengan ExposedDropdownMenuBox yang menggabungkan OutlinedTextField sebagai pemicu dropdown dengan ExposedDropdownMenu sebagai daftar pilihan. OutlinedTextField dibuat hanya-baca dan dilengkapi dengan ikon panah bawaan dari ExposedDropdownMenuDefaults. Saat pengguna memilih salah satu mata uang dari daftar, nilai tersebut dikirim ke fungsi onCurrencySelected dan dropdown ditutup. Fungsi ini modular dan dapat digunakan kembali dalam konteks manapun yang membutuhkan pemilihan mata uang.

fun converter(nominal: Double, fromCurrency: String, toCurrency: String): String {
    val ratesInUSD = mapOf(
        "USD" to 1.0,
        "EUR" to 1.08,
        "GBP" to 1.29,
        "JPY" to 0.0067,
        "AUD" to 0.66,
        "CAD" to 0.74,
        "CHF" to 1.12,
        "CNY" to 0.14,
        "HKD" to 0.13,
        "IDR" to 0.0000596
    )

    val amount = if (fromCurrency == toCurrency) {
        nominal
    } else {
        val amountInUSD = nominal * (ratesInUSD[fromCurrency] ?: 1.0)
        amountInUSD / (ratesInUSD[toCurrency] ?: 1.0)
    }

    val symbols = DecimalFormatSymbols().apply {
        groupingSeparator = '.'
        decimalSeparator = ','
    }

    val formatter = DecimalFormat("#,###.##", symbols)
    return formatter.format(amount)
}

Fungsi CurrencyDropdown adalah komponen antarmuka pengguna berbasis Jetpack Compose yang digunakan untuk membuat dropdown pilihan mata uang. Komponen ini menerima empat parameter yaitu label sebagai penanda, selectedCurrency sebagai mata uang yang sedang dipilih, currencies sebagai daftar pilihan mata uang, dan onCurrencySelected sebagai callback ketika pengguna memilih salah satu mata uang. Di dalam fungsi ini, terdapat state lokal expanded yang menentukan apakah dropdown sedang terbuka atau tidak. Komponen UI dibangun menggunakan Column dengan lebar tetap, dimulai dengan teks label, lalu dilanjutkan dengan ExposedDropdownMenuBox yang menggabungkan OutlinedTextField sebagai pemicu dropdown dengan ExposedDropdownMenu sebagai daftar pilihan. OutlinedTextField dibuat hanya-baca dan dilengkapi dengan ikon panah bawaan dari ExposedDropdownMenuDefaults. Saat pengguna memilih salah satu mata uang dari daftar, nilai tersebut dikirim ke fungsi onCurrencySelected dan dropdown ditutup. Fungsi ini modular dan dapat digunakan kembali dalam konteks manapun yang membutuhkan pemilihan mata uang.

Repository https://github.com/YudisthiraPutra/PPB_Week6_Assignment