Membuat Aplikasi Konverter Mata Uang Sederhana dengan Kotlin dan Jetpack Compose

Nama    : Iftala Zahri Sukmana
NRP      : 5025221002
Kelas     : G
Kode GitHub :  https://github.com/ifzahri/ppb/tree/main/MoneyExchanger

Pendahuluan

Aplikasi ini akan menjadi contoh sempurna bagi pemula yang ingin mempelajari pengembangan Android modern dengan pendekatan deklaratif melalui Jetpack Compose.

Persiapan Proyek

Sebelum kita mulai coding, pastikan kamu telah menginstal Android Studio versi terbaru dan membuat proyek baru dengan dukungan Jetpack Compose. Pilih template "Empty Compose Activity" saat membuat proyek baru untuk memudahkan proses.

Struktur Aplikasi

Aplikasi konverter mata uang kita akan memiliki komponen-komponen berikut:

  • Dua TextField untuk input nilai USD dan IDR
  • Informasi nilai tukar terkini
  • Tombol Reset untuk menghapus semua input

Implementasi Kode

MainActivity.kt

Pertama, mari kita buat file MainActivity.kt sebagai pusat aplikasi:

package com.example.currencyconverter

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

Komponen Utama Konverter Mata Uang

Selanjutnya, kita akan membuat fungsi CurrencyConverterScreen() yang menjadi tampilan utama aplikasi:

@Composable
fun CurrencyConverterScreen() {
    // Nilai tukar (per April 2025 - ini adalah nilai contoh)
    val usdToIdrRate = 15750.0
    
    var usdAmount by remember { mutableStateOf("") }
    var idrAmount by remember { mutableStateOf("") }
    var lastEditedField by remember { mutableStateOf("") }
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Text(
            text = "Konverter Mata Uang",
            fontSize = 24.sp,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        
        // Field Input USD
        OutlinedTextField(
            value = usdAmount,
            onValueChange = { newValue ->
                usdAmount = newValue
                lastEditedField = "USD"
                if (newValue.isNotEmpty()) {
                    try {
                        val usd = newValue.toDouble()
                        idrAmount = (usd * usdToIdrRate).toInt().toString()
                    } catch (e: NumberFormatException) {
                        idrAmount = ""
                    }
                } else {
                    idrAmount = ""
                }
            },
            label = { Text("Jumlah USD") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )
        
        // Field Input IDR
        OutlinedTextField(
            value = idrAmount,
            onValueChange = { newValue ->
                idrAmount = newValue
                lastEditedField = "IDR"
                if (newValue.isNotEmpty()) {
                    try {
                        val idr = newValue.toDouble()
                        usdAmount = (idr / usdToIdrRate).toString()
                    } catch (e: NumberFormatException) {
                        usdAmount = ""
                    }
                } else {
                    usdAmount = ""
                }
            },
            label = { Text("Jumlah IDR") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )
        
        // Informasi Nilai Tukar Terkini
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp)
        ) {
            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Text(
                    text = "Nilai Tukar Saat Ini",
                    fontSize = 18.sp
                )
                Spacer(modifier = Modifier.height(8.dp))
                Text(text = "1 USD = ${usdToIdrRate.toInt()} IDR")
                Text(text = "1 IDR = ${(1 / usdToIdrRate).toFloat()} USD")
            }
        }
        
        // Tombol Reset
        Button(
            onClick = {
                usdAmount = ""
                idrAmount = ""
                lastEditedField = ""
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp)
        ) {
            Text("Reset")
        }
    }
}

Penjelasan Kode

Mari kita bahas komponen-komponen penting dari kode di atas:

1. State Management

Dalam Jetpack Compose, state adalah konsep penting yang menentukan bagaimana UI bereaksi terhadap interaksi pengguna. Kita menggunakan mutableStateOf untuk mengelola tiga state utama:

var usdAmount by remember { mutableStateOf("") }
var idrAmount by remember { mutableStateOf("") }
var lastEditedField by remember { mutableStateOf("") }
  • usdAmount: menyimpan nilai input dalam Dolar AS
  • idrAmount: menyimpan nilai input dalam Rupiah
  • lastEditedField: melacak field mana yang terakhir diubah oleh pengguna

2. Konversi Dua Arah

Aplikasi ini mendukung konversi dua arah, artinya pengguna dapat memasukkan nilai baik di field USD maupun IDR. Nilai di field lainnya akan diperbarui secara otomatis:

// Ketika USD diubah
onValueChange = { newValue ->
    usdAmount = newValue
    lastEditedField = "USD"
    if (newValue.isNotEmpty()) {
        try {
            val usd = newValue.toDouble()
            idrAmount = (usd * usdToIdrRate).toInt().toString()
        } catch (e: NumberFormatException) {
            idrAmount = ""
        }
    } else {
        idrAmount = ""
    }
}

// Ketika IDR diubah
onValueChange = { newValue ->
    idrAmount = newValue
    lastEditedField = "IDR"
    if (newValue.isNotEmpty()) {
        try {
            val idr = newValue.toDouble()
            usdAmount = (idr / usdToIdrRate).toString()
        } catch (e: NumberFormatException) {
            usdAmount = ""
        }
    } else {
        usdAmount = ""
    }
}

3. Penanganan Error

Perhatikan bahwa kita menggunakan blok try-catch untuk menangani kemungkinan kesalahan format input:

try {
    val usd = newValue.toDouble()
    idrAmount = (usd * usdToIdrRate).toInt().toString()
} catch (e: NumberFormatException) {
    idrAmount = ""
}

Ini akan mencegah aplikasi crash jika pengguna memasukkan karakter yang bukan angka.

4. Tampilan Informasi Nilai Tukar

Untuk memberikan konteks kepada pengguna, kita menampilkan informasi nilai tukar saat ini dalam sebuah Card:

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(vertical = 8.dp)
) {
    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
    ) {
        Text(
            text = "Nilai Tukar Saat Ini",
            fontSize = 18.sp
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text(text = "1 USD = ${usdToIdrRate.toInt()} IDR")
        Text(text = "1 IDR = ${(1 / usdToIdrRate).toFloat()} USD")
    }
}

5. Tombol Reset

Terakhir, kita menambahkan tombol Reset untuk memudahkan pengguna memulai konversi baru:

Button(
    onClick = {
        usdAmount = ""
        idrAmount = ""
        lastEditedField = ""
    },
    modifier = Modifier
        .fillMaxWidth()
        .padding(top = 16.dp)
) {
    Text("Reset")
}

Hasil Akhir

Setelah mengimplementasikan semua kode di atas, kamu akan memiliki aplikasi konverter mata uang yang fungsional dengan tampilan minimalis dan modern. Aplikasi ini memungkinkan pengguna untuk:

  1. Memasukkan jumlah dalam USD atau IDR
  2. Melihat konversi secara real-time
  3. Melihat informasi nilai tukar saat ini
  4. Menggunakan tombol reset untuk memulai konversi baru


Pengembangan Lanjutan

Untuk pengembangan aplikasi lebih lanjut, kamu bisa menambahkan fitur-fitur seperti:

  1. API Nilai Tukar: Mengambil nilai tukar terkini dari API seperti Fixer.io atau Open Exchange Rates
  2. Dukungan Banyak Mata Uang: Menambahkan dukungan untuk mata uang lain seperti Euro, Yen, dll.
  3. Riwayat Konversi: Menyimpan riwayat konversi yang telah dilakukan pengguna
  4. Widget Home Screen: Menambahkan widget untuk konversi cepat dari home screen
  5. Mode Offline: Menyimpan nilai tukar terakhir untuk digunakan saat offline

Kesimpulan

Dalam tutorial ini, kita telah berhasil membuat aplikasi konverter mata uang sederhana antara Dolar AS dan Rupiah Indonesia menggunakan Kotlin dan Jetpack Compose. Aplikasi ini menunjukkan keunggulan pendekatan UI deklaratif yang ditawarkan oleh Jetpack Compose, yang memungkinkan kita membuat aplikasi dengan lebih sedikit kode namun tetap memiliki fungsionalitas yang lengkap.

Jetpack Compose sangat mempermudah pengembangan aplikasi Android dengan menyediakan komponen UI yang mudah digunakan dan diintegrasikan. Dengan memanfaatkan state management yang baik, kita dapat membuat aplikasi yang responsif terhadap input pengguna dengan sangat minim kode boilerplate.

Komentar

Posting Komentar

Postingan populer dari blog ini

Aplikasi Starbucks Clone dengan Android Studio

Gambar
Nama     : Iftala Zahri Sukmana NRP       : 5025221002 Kelas     : G Link GitHub  :  https://github.com/ifzahri/ppb/tree/main/starbucks Aplikasi ini akan memiliki fitur lengkap mulai dari menu pemesanan, keranjang belanja, hingga profil pengguna. 🎯 Fitur Utama Aplikasi Aplikasi Starbucks Clone yang kita buat memiliki empat halaman utama dengan berbagai fitur menarik: 1. Halaman Beranda (Home) Banner selamat datang dengan gradient warna khas Starbucks Bagian "Quick Order" untuk pemesanan cepat Daftar produk unggulan dengan tombol "Add to Cart" Desain card modern dengan elevation yang tepat 2. Halaman Menu Filter kategori produk (All, Coffee, Tea, Frappuccino, Food) Daftar lengkap menu dengan deskripsi dan harga Tombol "Add" untuk menambahkan item ke keranjang UI yang responsif dan mudah digunakan 3. Halaman Keranjang (Cart) Daftar semua item yang dipilih dengan jumlahnya Fitur tambah/kurang jumlah item Penghitungan total ...
Baca selengkapnya

Membuat Login Form Elegan dengan Jetpack Compose di Android Studio

Nama     : Iftala Zahri Sukmana NRP       : 5025221002 Kelas      : G Kode GitHub :   https://github.com/ifzahri/ppb/tree/main/loginform Selamat datang di blog teknis hari ini! Dalam artikel ini, saya akan membahas cara membuat form login yang modern dan fungsional menggunakan Jetpack Compose, library UI terbaru untuk pengembangan aplikasi Android. Mari kita pelajari cara membuat form login dengan field email, password, tombol login, dan opsi "Lupa Password" yang profesional. Pendahuluan Jetpack Compose telah mengubah cara kita membangun antarmuka pengguna di Android. Dengan pendekatan deklaratif dan reaktif, Compose memungkinkan pengembang untuk membuat UI yang kompleks dengan kode yang lebih sedikit dan lebih mudah dipahami. Dalam tutorial ini, kita akan fokus pada pembuatan komponen login yang sering menjadi pintu gerbang utama untuk aplikasi. Kita akan mengimplementasikan: Field input untuk email dengan validasi Field input unt...
Baca selengkapnya

Tutorial Pembuatan Aplikasi Dice Roller Interaktif dengan Jetpack Compose

Gambar
Nama     : Iftala Zahri Sukmana NRP        : 5025221002 Kelas     : G Link GitHub : https://github.com/ifzahri/ppb/tree/main/DiceRoller Pada kesempatan kali ini, kita akan mempelajari cara membuat aplikasi Dice Roller (Pelempar Dadu) yang interaktif menggunakan Jetpack Compose dan Kotlin. Aplikasi ini tidak hanya menampilkan animasi pelemparan dadu, tetapi juga menyimpan riwayat lemparan terakhir untuk pengalaman pengguna yang lebih menarik. Persiapan Awal Sebelum memulai, pastikan Anda telah menginstal Android Studio versi terbaru. Untuk tutorial ini, kita akan menggunakan Jetpack Compose - UI toolkit modern untuk Android yang ditulis dalam bahasa Kotlin. Langkah 1: Membuat Proyek Baru Buka Android Studio Pilih "New Project" Pilih "Empty Compose Activity" Beri nama proyek "Dice Roller" Atur package name menjadi "com.example.diceroller" Pilih Kotlin sebagai bahasa pemrograman Klik "Finish" Membuat Aset Gambar Dadu Untuk ap...
Baca selengkapnya