Tugas 6 - Konversi Mata Uang

   

Aplikasi Konversi Mata Uang

 

Langkah 1: Membuat Proyek Baru di Android Studio

1. Buka Android Studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" lalu klik Next.
4. Masukkan nama aplikasi (misalnya, "Konversi Mata Uang").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang.
8. Klik Finish.
9. Pada halaman "Select a minimum SDK", pilih API Level 24: Android 7.0 (Nougat) sebagai Minimum SDK.
10. Android Studio akan mulai membangun proyek Anda. Tunggu hingga proses ini selesai.

Langkah 2: Mengedit File MainActivity.kt

1. Setelah proyek selesai dibangun, buka file MainActivity.kt.
2. Sesuaikan kode seperti berikut:

package com.example.konversimatauang

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun KonversiMataUangApp(){
        val currencies = arrayOf("IDR", "EUR", "USD", "GBP", "JPY", "AUD", "CNY")
        val exchangeRates = mapOf(
            "IDR" to 16863.85,
            "USD" to 1.0,
            "EUR" to 0.92,
            "GBP" to 0.78,
            "JPY" to 110.15,
            "AUD" to 1.48,
            "CNY" to 7.05
        )

        var amountText by remember { mutableStateOf("") }
        var fromCurrency by remember { mutableStateOf("USD") }
        var toCurrency by remember { mutableStateOf("EUR") }
        var resultText by remember { mutableStateOf("") }
        var expanded1 by remember { mutableStateOf(false) }
        var expanded2 by remember { mutableStateOf(false) }

        Surface(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
                .padding(16.dp)
        ){
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text(
                    text = "Currency Converter",
                    style = TextStyle(
                        fontSize = 24.sp,
                        fontWeight = FontWeight.Bold,
                        textAlign = TextAlign.Center
                    ),
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 16.dp)
                )

                OutlinedTextField(
                    value = amountText,
                    onValueChange = { amountText = it},
                    label = { Text("Amount") },
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
                    singleLine = true,
                    modifier = Modifier.fillMaxWidth()
                )

                Row(
                    modifier = Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = "From:",
                        modifier = Modifier.width(80.dp)
                    )

                    ExposedDropdownMenuBox(
                        expanded = expanded1,
                        onExpandedChange = {expanded1 = it},
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        OutlinedTextField(
                            value = fromCurrency,
                            onValueChange = {},
                            readOnly = true,
                            trailingIcon = {
                                ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded1)
                            },
                            modifier = Modifier.menuAnchor()
                        )

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

                    }
                }

                Row(
                    modifier = Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = "To:",
                        modifier = Modifier.width(80.dp)
                    )

                    ExposedDropdownMenuBox(
                        expanded = expanded2,
                        onExpandedChange = {expanded2=it},
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        OutlinedTextField(
                            value = toCurrency,
                            onValueChange = {},
                            readOnly = true,
                            trailingIcon = {
                                ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded2)
                            },
                            modifier = Modifier.menuAnchor()
                        )

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

                Button(
                    onClick = {
                        if(amountText.isNotEmpty()){
                            try {
                                val amount = amountText.toDouble()
                                val fromRate = exchangeRates[fromCurrency] ?: 1.0
                                val toRate = exchangeRates[toCurrency] ?: 1.0

                                val result = amount / fromRate * toRate

                                resultText = if (toCurrency == "IDR"){
                                    "%.0f %s".format(result, toCurrency)
                                } else {
                                    "%.2f %s".format(result, toCurrency)
                                }
                            }
                            catch (e: NumberFormatException){
                                resultText = "Invalid amount"
                            }
                        } else {
                            resultText = "Please enter an amount"
                        }
                    },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .padding(top = 0.dp)
                ) {
                    Text("Convert", fontSize = 18.sp)
                }

                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 16.dp)
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(
                            text = "Result:",
                            style = TextStyle(
                                fontSize = 18.sp,
                                fontWeight = FontWeight.Bold
                            )
                        )

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

                        Text(
                            text = resultText,
                            style = TextStyle(
                                fontSize = 24.sp,
                                fontWeight = FontWeight.Bold,
                                textAlign = TextAlign.Center
                            ),
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(48.dp)
                        )
                    }
                }
            }
        }

    }
}

Langkah 3: Menjalankan Aplikasi

1. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
2. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
3. Android Studio akan membangun dan menjalankan aplikasi.
4. Isi jumlah uang, pilih mata uang asal dan mata uang tujuan yang ingin dikonversi.
5. Klik convert dan akan muncul hasilnya.

Dokumentasi