Tugas 6 PPB

 

 Tugas 6

Pemrograman Perangkat Bergerak

 

Nama : Ahmad Rafif Hikmatiar

NRP : 5025211247

Kelas : Pemrograman Perangkat Bergerak (D)

 

Currency Converter

 

Pada pertemuan ini ditugaskan membuat aplikasi Currency Converter. Aplikasi ini memungkinkan pengguna untuk memasukkan sejumlah uang, memilih mata uang asal dan tujuan, lalu menampilkan hasil konversi berdasarkan nilai tukar yang telah ditentukan. Berikut adalah penjelasan lebih detail dari implementasi yang dilakukan.

1. Youtube

 

2. Code

    Github: https://github.com/arafifh/tugas-6-ppb.git 

MainActivity.kt

package com.example.currency_converter_android_app

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.currency_converter_android_app.ui.theme.CurrencyConverterAndroidAppTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CurrencyConverterAndroidAppTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    CurrencyConverterApp()
                }
            }
        }
    }
}

@Composable
fun CurrencyConverterApp() {
    val currencies = listOf("IDR", "USD", "EUR", "GBP", "SAR", "CNY", "SGD", "AUD", "RUB", "INR")

    var amountInput by remember { mutableStateOf("") }
    var fromCurrency by remember { mutableStateOf("USD") }
    var toCurrency by remember { mutableStateOf("IDR") }
    var result by remember { mutableStateOf("") }

    val exchangeRates = mapOf(
        "IDR" to 1.0,
        "USD" to 15600.0,
        "EUR" to 17000.0,
        "GBP" to 19800.0,
        "SAR" to 4160.0,
        "CNY" to 2200.0,
        "SGD" to 11500.0,
        "AUD" to 10400.0,
        "RUB" to 160.0,
        "INR" to 190.0
    )

    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = "Currency Converter",
            style = MaterialTheme.typography.headlineMedium.copy(
                fontWeight = FontWeight.Bold,
                letterSpacing = 1.5.sp,
                fontFamily = FontFamily.Serif
            ),
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp),
            textAlign = TextAlign.Center
        )

        OutlinedTextField(
            value = amountInput,
            onValueChange = { amountInput = it },
            label = { Text("Amount") },
            modifier = Modifier.fillMaxWidth()
        )

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

        Row(modifier = Modifier.fillMaxWidth()) {
            Box(modifier = Modifier.weight(1f)) {
                CurrencyDropdown(currencies, fromCurrency) { fromCurrency = it }
            }
            Spacer(modifier = Modifier.width(16.dp))
            Box(modifier = Modifier.weight(1f)) {
                CurrencyDropdown(currencies, toCurrency) { toCurrency = it }
            }
        }


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

        Button(onClick = {
            val amount = amountInput.toDoubleOrNull() ?: 0.0
            val fromRate = exchangeRates[fromCurrency] ?: 1.0
            val toRate = exchangeRates[toCurrency] ?: 1.0
            val converted = amount * fromRate / toRate
            result = "%.2f $toCurrency".format(converted)
        }, modifier = Modifier.fillMaxWidth()) {
            Text("Convert")
        }

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

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
            shape = MaterialTheme.shapes.medium,
            colors = CardDefaults.cardColors(
                containerColor = MaterialTheme.colorScheme.primaryContainer
            )
        ) {
            Text(
                text = "Result: $result",
                style = MaterialTheme.typography.headlineSmall.copy(
                    fontWeight = FontWeight.Bold,
                    fontFamily = FontFamily.Serif
                ),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
            )
        }
    }
}

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

    Column(modifier = Modifier.fillMaxWidth()) {
        OutlinedButton(
            onClick = { expanded = true },
            modifier = Modifier.fillMaxWidth()
        ) {
            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(selectedCurrency)
                Icon(Icons.Default.ArrowDropDown, contentDescription = "Dropdown")
            }
        }
        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            currencies.forEach { currency ->
                DropdownMenuItem(
                    text = { Text(currency) },
                    onClick = {
                        onCurrencySelected(currency)
                        expanded = false
                    }
                )
            }
        }
    }
} 

Struktur Utama

    Kode dimulai dengan MainActivity, yang merupakan entry point dari aplikasi. Di dalam fungsi onCreate, tampilan UI disusun menggunakan fungsi setContent dengan tema aplikasi CurrencyConverterAndroidAppTheme. UI utama ditampilkan melalui fungsi CurrencyConverterApp() yang berisi antarmuka dan logika konversi.

CurrencyConverterApp

    Dalam CurrencyConverterApp(), terdapat beberapa variabel state seperti amountInput, fromCurrency, toCurrency, dan result yang masing-masing menyimpan input jumlah uang, mata uang asal, mata uang tujuan, dan hasil konversi. Nilai tukar mata uang disimpan dalam sebuah Map bernama exchangeRates yang berisi konversi terhadap IDR (Rupiah). Antarmuka pengguna terdiri dari judul, kolom input untuk jumlah uang, dua dropdown untuk memilih mata uang, tombol untuk melakukan konversi, dan sebuah kartu untuk menampilkan hasilnya. Proses konversi dilakukan dengan mengalikan jumlah uang dengan nilai tukar mata uang asal, lalu membaginya dengan nilai tukar mata uang tujuan.

CurrencyDropdown

    Dropdown yang digunakan untuk memilih mata uang merupakan komponen kustom yang dibuat dalam fungsi CurrencyDropdown. Fungsi ini memanfaatkan DropdownMenu dan DropdownMenuItem untuk menampilkan pilihan mata uang dan memperbarui pilihan yang dipilih pengguna. Keseluruhan aplikasi memanfaatkan pendekatan deklaratif Jetpack Compose yang modern, serta menggunakan remember dan mutableStateOf agar UI bisa otomatis memperbarui dirinya saat ada perubahan data. Aplikasi ini dirancang secara sederhana namun interaktif, dan dapat dikembangkan lebih lanjut, misalnya dengan mengambil kurs mata uang secara real-time dari API eksternal.