Tugas 4

github: https://github.com/ilomimo/diceppb

Aplikasi “Rolling Dice” adalah contoh sederhana namun efektif untuk memahami konsep dasar pemrograman antarmuka pengguna (UI) menggunakan Jetpack Compose di Android. Aplikasi ini menampilkan gambar dadu yang dapat diubah-ubah secara acak saat tombol “Roll” ditekan. Meski fungsionalitasnya sederhana, aplikasi ini memperkenalkan berbagai konsep penting seperti pengelolaan state, penggunaan gambar dari sumber daya (resources), serta layout responsif dan interaktif.

---

Struktur dan Penjelasan Kode

1. Fungsi MainActivity

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

MainActivity adalah titik masuk aplikasi. Fungsi onCreate() mengaktifkan mode tampilan edge-to-edge dan memanggil UI utama melalui setContent. Di dalamnya, RollingdiceTheme digunakan untuk menjaga konsistensi desain, lalu memuat fungsi DiceRollerApp() yang menyusun keseluruhan tampilan.

---

2. Fungsi DiceRollerApp

@Composable
fun DiceRollerApp() {
    DiceRollerWithImageAndButton()
}

Fungsi ini memanggil composable utama yang menyatukan elemen visual dan logika interaktif, DiceRollerWithImageAndButton().

---

3. Fungsi DiceRollerWithImageAndButton

@Composable
fun DiceRollerWithImageAndButton(modifier: Modifier = Modifier) {
    var result by remember { mutableIntStateOf(1) }

    val imageOfDice = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.fillMaxSize().wrapContentSize(align = Alignment.Center)
    ) {
        Image(
            painter = painterResource(id = imageOfDice),
            contentDescription = null
        )

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

        Button(onClick = {
            result = (1..6).random()
        }) {
            Text(text = "Roll")
        }
    }
}

Fungsi ini adalah inti dari tampilan dan logika aplikasi.

• var result by remember { mutableIntStateOf(1) } menyimpan angka dadu yang sedang tampil. remember dan mutableIntStateOf memastikan data tetap tersimpan dan bisa berubah saat tombol ditekan.
• when (result) menentukan gambar mana yang ditampilkan sesuai angka hasil roll.
• Layout Column menyusun elemen secara vertikal dan berada di tengah layar.
• Image() digunakan untuk menampilkan gambar dadu.
• Spacer() memberi jarak antara gambar dan tombol.
• Button() berisi logika untuk meroll dadu: menghasilkan angka acak 1 sampai 6.

---

4. Preview Fungsi

@Preview(showBackground = true)
@Composable
fun DiceRollerAppPreview() {
    RollingdiceTheme {
        DiceRollerApp()
    }
}

Bagian ini digunakan untuk menampilkan pratinjau aplikasi di Android Studio tanpa harus menjalankan emulator berguna untuk pengembangan UI yang cepat dan visual.