Tugas 6: Membuat Aplikasi Konversi Nilai Mata Uang

Nama: Ken Anargya Alkausar

NRP: 5025211168

Kelas: PPB - A

Tugas 6: Membuat Aplikasi Konversi Nilai Mata Uang

Di artikel ini, saya akan menjelaskan mengenai aplikasi konversi nilai mata uang yang dibuat menggunakan Jetpack Compose. Aplikasi ini memiliki fitur untuk mencari nilai mata uang dengan base mata uang dari dollar agar memudahkan implementasi. Aplikasi ini menggunakan API untuk mengambil data nilai tukar terbaru. Saya juga menambahkan fitur search bar untuk memudahkan pengguna mencari kode mata uang yang ingin dilihat.

Mengambil Data Nilai Tukar dari API

Untuk data exchange rate, saya menggunakan API gratis dari open.er-api.com. Data dikirim dalam format JSON, dan saya parsing menggunakan Gson.

Parsing Data JSON dari API

// ===================== API =====================
data class CurrencyResponse(
    @SerializedName("rates")
    val rates: Map<String, Double>
)

interface CurrencyApiService {
    @GET("latest/{base}")
    suspend fun getRates(@Path("base") base: String): CurrencyResponse
}

object ApiClient {
    val service: CurrencyApiService by lazy {
        Retrofit.Builder()
            .baseUrl("https://open.er-api.com/v6/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(CurrencyApiService::class.java)
    }
}

Untuk mendapatkan data nilai tukar mata uang secara real-time, aplikasi ini menggunakan Retrofit sebagai library HTTP client. Endpoint API yang diakses berada di https://open.er-api.com/v6/latest/{base}, di mana {base} adalah kode mata uang dasar seperti USD. Hasil dari API berupa data JSON yang berisi objek rates, yaitu kumpulan pasangan kode mata uang dan nilai tukarnya. Untuk memproses JSON tersebut ke dalam format Kotlin, digunakan data class CurrencyResponse yang memiliki properti rates bertipe Map<String, Double>. Parsing JSON dilakukan secara otomatis oleh Gson, yang terintegrasi dalam Retrofit menggunakan addConverterFactory(GsonConverterFactory.create()). Dengan arsitektur ini, kita cukup memanggil ApiClient.service.getRates("USD") untuk langsung mendapatkan objek Kotlin siap pakai tanpa harus parsing manual.

Tampilan UI Utama Aplikasi

OutlinedTextField(
    value = inputAmount,
    onValueChange = { inputAmount = it },
    label = { Text("Amount") },
    placeholder = { Text("e.g. 100") },
    keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
    modifier = Modifier.fillMaxWidth()
)

OutlinedTextField(
    value = selectedCurrency,
    onValueChange = {},
    readOnly = true,
    label = { Text("From Currency") },
    modifier = Modifier.fillMaxWidth()
)

// 🆕 SEARCH FIELD
OutlinedTextField(
    value = searchQuery,
    onValueChange = { searchQuery = it },
    label = { Text("Search Currency") },
    placeholder = { Text("e.g. USD, yen, euro...") },
    modifier = Modifier.fillMaxWidth()
)

Seluruh tampilan utama dibangun di dalam fungsi CurrencyConverterApp(). Di sini kamu akan melihat komponen UI seperti OutlinedTextField untuk input jumlah uang (inputAmount), OutlinedTextField read-only untuk mata uang dasar (selectedCurrency), dan LazyColumn untuk menampilkan hasil konversi. Selain itu juga ada fitur pencarian (searchQuery) untuk memfilter hasil berdasarkan input user.

Fetch Data Otomatis saat Mata Uang Berubah

LaunchedEffect(selectedCurrency) {
    isLoading = true
    errorMessage = null
    try {
        val response = withContext(Dispatchers.IO) {
            ApiClient.service.getRates(selectedCurrency)
        }
        rates = response.rates
    } catch (e: Exception) {
        errorMessage = "Failed to fetch data: ${e.message}"
    } finally {
        isLoading = false
    }
}

Setiap kali user memilih mata uang dasar baru, aplikasi akan otomatis mengambil data terbaru dari API. Ini di-handle dengan LaunchedEffect, yang merupakan mekanisme Compose untuk menjalankan kode sekali saat dependency (dalam hal ini selectedCurrency) berubah.

Dokumentasi: