Pertemuan 5

 Nama :    Muhammad Shafa Narariya

NRP :    5025231016

Kelas :    PPB (C)

Source Code : https://github.com/ItsPong/PBB/tree/main/Pertemuan_5

1. Struktur Utama & Tema (MainActivity)

Setiap aplikasi Android dimulai dari MainActivity. Di sini saya menggunakan Jetpack Compose untuk membangun UI secara deklaratif.

HelloAndroidTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        DiceRollerWithImageAndButton()
    }
}

• HelloAndroidTheme: Memastikan aplikasi memiliki tampilan warna dan gaya yang konsisten.

• Surface: Berfungsi sebagai "kanvas" utama yang menutupi seluruh layar HP.

2. Mengatur Tata Letak (Layouting)

Agar tampilan dadu dan tombol berada tepat di tengah layar, saya menggunakan kombinasi Modifier dan Column.

• fillMaxSize(): Menginstruksikan aplikasi untuk memenuhi seluruh ruang layar.

• wrapContentSize(Alignment.Center): Memastikan isi di dalamnya (gambar dan tombol) terpusat di tengah, tidak menempel di pojok.

• Column: Digunakan untuk menyusun gambar dadu dan tombol secara vertikal (atas ke bawah).

3. State Management: Otak Aplikasi

Inilah bagian yang paling menarik. Agar angka dadu bisa berubah saat tombol ditekan, kita memerlukan State.

var result by remember { mutableStateOf(1) }

• mutableStateOf(1): Variabel result menyimpan angka hasil kocokan (dimulai dari angka 1).

• remember: Memberitahu Android untuk "mengingat" nilai terakhir meskipun layar melakukan recomposition (gambar ulang). Tanpa ini, dadu akan selalu kembali ke angka 1.

4. Logika Visual (When Expression)

Aplikasi perlu tahu gambar mana yang harus ditampilkan berdasarkan angka hasil kocokan. Saya menggunakan logika when:

val imageResource = when (result) {
    1 -> R.drawable.dice_1
    2 -> R.drawable.dice_2
    // ... dst hingga 6
    else -> R.drawable.dice_6
}

Setiap angka (1-6) dihubungkan dengan file gambar yang telah saya simpan di folder res/drawable.

5. Interaksi User & Random Number

Aksi utama terjadi pada komponen Button. Di sinilah logika pengacakan angka dilakukan.

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

Ketika tombol "Roll" diklik, perintah (1..6).random() akan menghasilkan angka acak. Karena angka tersebut disimpan ke dalam variabel State (result), Jetpack Compose akan mendeteksi perubahan tersebut dan secara otomatis memperbarui gambar dadu di layar secara instan.