Tugas 6: Membuat Aplikasi Konversi Nilai Mata Uang

 

Nama  : Fathin Muhashibi Putra
NRP   : 5025211229
Kelas  : PPB - A

Tugas 6:
Membuat Aplikasi Konversi Nilai Mata Uang

      Pada tugas kali ini, saya membuat aplikasi konversi mata uang (Currency Converter) menggunakan bahasa Kotlin. Aplikasi ini dapat mengkonversi nilai mata uang dari satu mata uang ke mata uang lainnya dengan nilai kurs terkini.

1. Buat Proyek Baru

Buka Android Studio dan buat proyek baru dengan memilih Empty Compose Activity. Beri nama proyek CurrencyConverter dan biarkan pengaturan lainnya dalam kondisi default.

2. Struktur Dasar Project

Setelah proyek dibuat, buka file MainActivity.kt dan siapkan struktur dasar untuk menampilkan UI menggunakan Jetpack Compose. 


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

3. Desain UI Currency Converter

Untuk membuat interface yang menarik, saya menggunakan komponen Card untuk mengelompokkan elemen-elemen yang memiliki fungsi yang sama. Interface terdiri dari komponen-komponen berikut: 


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CurrencyConverterApp(modifier: Modifier = Modifier) {
    // State untuk menyimpan data aplikasi
    var amount by remember { mutableStateOf("") }
    var fromCurrency by remember { mutableStateOf("USD") }
    var toCurrency by remember { mutableStateOf("IDR") }
    var convertedAmount by remember { mutableStateOf("") }
    
    // UI Layout
    Box(
        modifier = modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .background(Color(0xFFF8F9FA))
            .padding(bottom = 32.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            // Header aplikasi dengan judul
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 8.dp),
                shape = RoundedCornerShape(20.dp),
                colors = CardDefaults.cardColors(
                    containerColor = Color(0xFFE0F2F1)
                ),
                elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
            ) {
                Text(
                    text = "Currency Converter",
                    style = MaterialTheme.typography.headlineMedium,
                    fontWeight = FontWeight.Medium,
                    color = Color(0xFF00897B),
                    modifier = Modifier
                        .padding(20.dp)
                        .align(Alignment.CenterHorizontally),
                    fontSize = 24.sp
                )
            }
            
            // Card untuk input jumlah
            Card(...) {
                // Input field untuk jumlah
            }
            
            // Card untuk seleksi mata uang
            Card(...) {
                // Dropdown untuk pemilihan mata uang
            }
            
            // Button konversi & tampilan hasil
            // ...
        }
    }
}

4. Input Jumlah dan Pemilihan Mata Uang

Saya membuat card untuk input jumlah uang dan dropdown untuk pemilihan mata uang asal dan tujuan. 


// Card untuk input jumlah
Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(vertical = 8.dp),
    shape = RoundedCornerShape(16.dp),
    elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
    colors = CardDefaults.cardColors(
        containerColor = Color.White
    )
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            "Enter Amount",
            fontWeight = FontWeight.Medium,
            color = Color(0xFF546E7A),
            fontSize = 16.sp
        )

        OutlinedTextField(
            value = amount,
            onValueChange = { amount = it },
            label = { Text("Amount") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
            modifier = Modifier.fillMaxWidth(),
            shape = RoundedCornerShape(10.dp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color(0xFF00897B),
                unfocusedBorderColor = Color(0xFFBDBDBD),
                focusedLabelColor = Color(0xFF00897B)
            )
        )
    }
}

// Card untuk dropdown pemilihan mata uang
// ... kode dropdown mata uang

5. Daftar Mata Uang dan Dropdown

Untuk memilih mata uang, saya mengimplementasikan dropdown menu dengan 10 pilihan mata uang internasional yang sering digunakan. Daftar mata uang yang tersedia adalah:

  • USD - US Dollar (Amerika Serikat)
  • EUR - Euro (Uni Eropa)
  • GBP - British Pound (Inggris)
  • JPY - Japanese Yen (Jepang)
  • AUD - Australian Dollar (Australia)
  • CAD - Canadian Dollar (Kanada)
  • CHF - Swiss Franc (Swiss)
  • CNY - Chinese Yuan (China)
  • INR - Indian Rupee (India)
  • IDR - Indonesian Rupiah (Indonesia)

Setiap mata uang ditampilkan dengan kode dan nama lengkapnya sehingga pengguna dapat dengan mudah mengidentifikasi mata uang yang ingin dipilih. Berikut adalah implementasi dropdown untuk pemilihan mata uang: 


val currencies = listOf(
    "AUD" to "Australian Dollar",
    "CAD" to "Canadian Dollar",
    "CHF" to "Swiss Franc",
    "CNY" to "Chinese Yuan",
    "EUR" to "Euro",
    "GBP" to "British Pound",
    "IDR" to "Indonesian Rupiah",
    "INR" to "Indian Rupee",
    "JPY" to "Japanese Yen",
    "USD" to "US Dollar"
)

Box(
    modifier = Modifier.weight(1f)
) {
    OutlinedTextField(
        value = fromCurrency,
        onValueChange = {},
        readOnly = true,
        label = { Text("From") },
        trailingIcon = {
            IconButton(onClick = { expanded1 = !expanded1 }) {
                Text("▼", fontSize = 12.sp)
            }
        },
        modifier = Modifier.fillMaxWidth(),
        // ... style properties
    )

    DropdownMenu(
        expanded = expanded1,
        onDismissRequest = { expanded1 = false },
        modifier = Modifier
            .fillMaxWidth(0.9f)
            .heightIn(max = 500.dp)
    ) {
        currencies.forEach { (code, name) ->
            DropdownMenuItem(
                text = {
                    Text(
                        "$code - $name",
                        fontSize = 13.sp,
                        color = Color(0xFF546E7A)
                    )
                },
                onClick = {
                    fromCurrency = code
                    expanded1 = false
                    // Auto-convert if amount is already entered
                    // ...
                },
                contentPadding = PaddingValues(horizontal = 16.dp, vertical = 1.dp)
            )
            Spacer(modifier = Modifier.height(1.dp))
        }
    }
}

Dropdown menu dibuat untuk dua pilihan mata uang: mata uang asal (From) dan mata uang tujuan (To). Nilai default saat aplikasi dibuka adalah USD untuk mata uang asal dan IDR untuk mata uang tujuan, sehingga pengguna dapat langsung mengkonversi US Dollar ke Rupiah Indonesia.

6. Implementasi Fungsi Konversi Mata Uang

Untuk melakukan konversi, saya membuat fungsi `convertCurrency()` yang mengkonversi dari satu mata uang ke mata uang lainnya menggunakan kurs terkini. 


fun convertCurrency(amount: Double, fromCurrency: String, toCurrency: String): Double {
    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,
        "INR" to 0.012,
        "IDR" to 0.0000596  // 1 USD = 16,778.52 IDR
    )

    if (fromCurrency == toCurrency) {
        return amount
    }

    val amountInUSD = amount * (ratesInUSD[fromCurrency] ?: 1.0)
    return amountInUSD / (ratesInUSD[toCurrency] ?: 1.0)
}

7. Tombol Konversi dan Tampilan Hasil

Setelah user memasukkan jumlah dan memilih mata uang, mereka dapat mengklik tombol "Convert" untuk mendapatkan hasil konversi. 


Button(
    onClick = {
        if (amount.isNotEmpty()) {
            val amountValue = amount.toDoubleOrNull() ?: 0.0
            val result = convertCurrency(amountValue, fromCurrency, toCurrency)
            convertedAmount = "%.2f %s = %.2f %s".format(
                amountValue, fromCurrency, result, toCurrency
            )
            focusManager.clearFocus()
        }
    },
    modifier = Modifier
        .fillMaxWidth()
        .padding(vertical = 8.dp)
        .height(50.dp),
    shape = RoundedCornerShape(25.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF00897B)
    ),
    elevation = ButtonDefaults.buttonElevation(defaultElevation = 2.dp)
) {
    Text(
        "Convert",
        fontSize = 16.sp,
        fontWeight = FontWeight.Medium
    )
}

// Tampilan hasil konversi
if (convertedAmount.isNotEmpty()) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp),
        shape = RoundedCornerShape(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
        colors = CardDefaults.cardColors(
            containerColor = Color(0xFFE0F2F1)
        )
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Result",
                fontWeight = FontWeight.Medium,
                color = Color(0xFF00897B),
                fontSize = 16.sp,
                modifier = Modifier.padding(bottom = 8.dp)
            )
            Text(
                text = convertedAmount,
                modifier = Modifier.padding(8.dp),
                style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.Medium,
                fontSize = 20.sp,
                color = Color(0xFF00695C)
            )
        }
    }
}

8. Fitur Tambahan: Swap Currencies

Saya menambahkan tombol swap untuk memudahkan pengguna menukar mata uang asal dan tujuan. 


OutlinedButton(
    onClick = {
        val temp = fromCurrency
        fromCurrency = toCurrency
        toCurrency = temp

        // Auto-convert after swap if amount is entered
        if (amount.isNotEmpty()) {
            val amountValue = amount.toDoubleOrNull() ?: 0.0
            val result = convertCurrency(amountValue, fromCurrency, toCurrency)
            convertedAmount = "%.2f %s = %.2f %s".format(
                amountValue, fromCurrency, result, toCurrency
            )
        }
    },
    modifier = Modifier
        .padding(vertical = 4.dp)
        .height(40.dp),
    shape = RoundedCornerShape(20.dp),
    border = BorderStroke(1.dp, Color(0xFF00897B)),
    colors = ButtonDefaults.outlinedButtonColors(
        contentColor = Color(0xFF00897B)
    )
) {
    Text(
        "Swap Currencies",
        fontSize = 14.sp,
        fontWeight = FontWeight.Medium
    )
}

9. Hasil Akhir

Setelah mengikuti semua tahap tersebut tersebut, maka jadilah sebuah konversi mata uang (Currency Converter) yang dapat digunakan. 

  • Screenshot Hasil: 

  • Kode Lengkap (Github Code): 

  • Video Demo Aplikasi Currency Converter:



Referensi : 
https://kuliahppb.blogspot.com/2025/04/penggunaan-kotlin-1.html
https://worldline.github.io/learning-kotlin/en/

Comments

Post a Comment

Popular posts from this blog

Tugas 2: Membuat Aplikasi Hello World menggunakan Jetpack Compose (PPB - A)

Image
  Nama  : Fathin Muhashibi Putra NRP   : 5025211229 Kelas  : PPB - A Tugas 2: Membuat Aplikasi Hello World menggunakan Jetpack Compose    Pada tugas kali ini, Saya membuat aplikasi Hello World menggunakan implementasi Jetpack Compose. Berikut adalah langkah-langkah yang dilakukan: 1. Sebelum Memulai Sebelum memulai dengan Jetpack Compose, pastikan sudah dikuasai sintaks Kotlin, terutama konsep lambda dan fungsi. Selain itu, Android Studio perlu diinstal sebagai IDE untuk mengembangkan aplikasi dengan Compose. Jetpack Compose adalah toolkit UI deklaratif yang memungkinkan pembuatan UI menggunakan fungsi @Composable , yang secara otomatis memperbarui UI saat data berubah, tanpa perlu memanipulasi elemen UI secara manual. ...
Read more

Tugas 1: Review Perkembangan Teknologi Perangkat Bergerak (PPB - A)

Image
  Nama  : Fathin Muhashibi Putra NRP    : 5025211229 Kelas  : PPB - A Tugas 1: Review Perkembangan Teknologi Perangkat Bergerak      Perkembangan perangkat bergerak, telah mengubah cara kita berkomunikasi, bekerja, dan bahkan berinteraksi dengan dunia sekitar. Teknologi perangkat bergerak tidak hanya berkembang dalam hal desain fisik, tetapi juga mencakup chipset, sistem operasi, aplikasi, dan user interface (UI), yang semua mengalami peningkatan signifikan dari tahun ke tahun. Berikut merupakan perkembangan teknologi perangkat bergerak : 1. Era Awal: Dari Telepon Mobil (Car Phone) ke Ponsel Genggam (1947 - 1973) 1947 : Sebelum ponsel seluler, terdapat car phone atau telepon mobil yang pertama kali diperkenalkan oleh insinyur di Bell Labs. Telepon ini memiliki bobot sekitar 80 kilogram dan hanya digunakan di dalam mobil, dengan jaringan yang sangat terbatas dan mahal. 1973: Motorola DynaTAC 8000X menjadi ponsel genggam pertama yang diperkenalkan...
Read more

ETS - Evaluasi Tengah Semester: Proyek - Mobile Front End

Image
  Anggota Kelompok: Nama: Fathin Muhashibi Putra NRP: 5025211229 Kelas: PPB - A ETS - Evaluasi Tengah Semester: Proyek - Mobile Front End A. Deskripsi Aplikasi JejakUang JejakUang adalah aplikasi mobile untuk mencatat dan mengelola keuangan pribadi. Aplikasi ini membantu pengguna mencatat pemasukan dan pengeluaran sehari-hari dengan antarmuka yang sederhana, navigasi yang mudah, serta visualisasi data keuangan dalam bentuk grafik. Dengan JejakUang, pengguna dapat lebih sadar dan teratur dalam mengelola keuangan pribadi. B. Fitur Aplikasi JejakUang      Berikut fitur-fitur yang ada pada aplikasi JejakUang Ringkasan Keuangan: Tampilan saldo terkini (pemasukan - pengeluaran) Total pemasukan dan pengeluaran Daftar transaksi terbaru pada halaman utama Pencatatan Transaksi: Input transaksi pemasukan dan pengeluaran ...
Read more