Tugas 6 - Pemrograman Perangkat Bergerak G - Membuat Konversi USD to IDR

---

Membuat Aplikasi Konversi USD ke IDR dengan Android Studio dan Jetpack Compose

Pada tugas kali ini, saya Rakha Fathin Izzan Consetta (5025221156) membuat sebuah aplikasi Android sederhana dengan fungsi utama mengkonversi mata uang dari USD (Dollar Amerika) ke IDR (Rupiah Indonesia). Aplikasi ini dibangun menggunakan Android Studio dengan memanfaatkan Jetpack Compose, yaitu toolkit modern untuk membangun UI native di Android.

1. Deskripsi Program

Program ini memiliki tampilan yang minimalis namun fungsional. Pengguna cukup memasukkan nominal dalam USD, kemudian menekan tombol "Konversi" untuk mendapatkan hasil konversi ke Rupiah. Nilai tukar yang digunakan adalah kurs tetap yaitu 1 USD = 16.000 IDR.

2. Struktur Kode

a. MainActivity.kt

package com.example.usdtoidr

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.usdtoidr.ui.theme.USDToIDRTheme

Pada bagian awal, saya mengimpor beberapa library yang dibutuhkan untuk membangun UI menggunakan Jetpack Compose, termasuk layout, tombol, input, dan tema.

b. MainActivity dan Fungsi onCreate

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

Fungsi onCreate() adalah titik awal eksekusi aplikasi. Saya menggunakan setContent untuk menentukan isi UI menggunakan komponen Compose. Di dalamnya, saya memanggil fungsi CurrencyConverter() yang saya buat untuk menampilkan antarmuka utama aplikasi.

c. Fungsi CurrencyConverter()

@Composable
fun CurrencyConverter() {
    var usdInput by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }
    val exchangeRate = 16000.0

Dalam fungsi ini, saya mendefinisikan dua state: usdInput untuk menyimpan input pengguna dan result untuk menyimpan hasil konversi. Saya juga menetapkan kurs tetap exchangeRate sebesar 16.000.

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Konversi USD ke IDR", fontSize = 24.sp, color = Color(0xFF1B5E20))

Layout utama menggunakan Column agar elemen ditampilkan secara vertikal. Saya menambahkan judul aplikasi dengan Text.

        OutlinedTextField(
            value = usdInput,
            onValueChange = { usdInput = it },
            label = { Text("Masukkan jumlah USD") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            singleLine = true
        )

Di sini pengguna memasukkan nilai USD. Saya menggunakan OutlinedTextField agar tampilannya modern dan mudah digunakan.

        Button(
            onClick = {
                val usd = usdInput.toDoubleOrNull()
                result = if (usd != null) {
                    val idr = usd * exchangeRate
                    "Hasil: Rp ${"%,.0f".format(idr)}"
                } else {
                    "Masukkan angka yang valid"
                }
            }
        ) {
            Text("Konversi")
        }

Tombol "Konversi" menjalankan perhitungan jika input valid. Jika input tidak valid (misalnya kosong atau bukan angka), maka akan muncul pesan kesalahan.

        Text(result, fontSize = 20.sp, color = Color.DarkGray)
    }
}

Bagian terakhir dari fungsi ini menampilkan hasil konversi.

3. Program Full

package com.example.usdtoidr

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.usdtoidr.ui.theme.USDToIDRTheme

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

@Composable
fun CurrencyConverter() {
    var usdInput by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }
    val exchangeRate = 16000.0

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Konversi USD ke IDR", fontSize = 24.sp, color = Color(0xFF1B5E20))

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

        OutlinedTextField(
            value = usdInput,
            onValueChange = { usdInput = it },
            label = { Text("Masukkan jumlah USD") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            singleLine = true
        )

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

        Button(
            onClick = {
                val usd = usdInput.toDoubleOrNull()
                result = if (usd != null) {
                    val idr = usd * exchangeRate
                    "Hasil: Rp ${"%,.0f".format(idr)}"
                } else {
                    "Masukkan angka yang valid"
                }
            }
        ) {
            Text("Konversi")
        }

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

        Text(result, fontSize = 20.sp, color = Color.DarkGray)
    }
}

4. Hasil Output

Berikut tampilan yang dihasilkan saat aplikasi dijalankan:

• Input field untuk memasukkan jumlah dalam USD.

• Tombol untuk melakukan konversi.

• Hasil konversi ditampilkan dalam format mata uang Rupiah.