Pertemuan 5 - Dice Roller

Nama                : Ahmad Fadhilah Mappisara

NRP                  : 5025221195

Mata Kuliah      : Pemrograman Perangkat Bergerak (C)

Aplikasi Dice Roller (Android Studio - Jetpack Compose)

1. Pendahuluan

Pada tugas ini dilakukan pembuatan aplikasi sederhana berbasis Android menggunakan Jetpack Compose. Aplikasi yang dibuat adalah Dice Roller, yaitu aplikasi untuk mensimulasikan pelemparan dadu secara acak.

Tujuan dari pembuatan aplikasi ini adalah untuk memahami:

• Struktur dasar project Android
• Konsep UI modern menggunakan Compose
• State management sederhana
• Interaksi user melalui tombol

---

2. Pembuatan Project

Langkah awal adalah membuat project baru di Android Studio dengan langkah berikut:

1. Klik File > New > New Project
2. Pilih template Empty Activity
3. Isi nama project: Dice Roller
4. Minimum SDK: API 24 (Nougat)
5. Klik Finish

---

3. Struktur Awal Aplikasi

Setelah project dibuat, dilakukan penyesuaian struktur kode:

• Menghapus fungsi default seperti Greeting() dan GreetingPreview()
• Membuat dua fungsi utama:
  • DiceRollerApp() sebagai entry UI
  • DiceWithButtonAndImage() sebagai komponen utama

Kemudian pada MainActivity, bagian setContent diubah menjadi:

setContent {
    DiceRollerTheme {
        DiceRollerApp()
    }
}

---

4. Penggunaan Modifier

Dalam Jetpack Compose, Modifier digunakan untuk mengatur tampilan dan perilaku UI.

Pada aplikasi ini digunakan:

• fillMaxSize() → agar UI memenuhi layar
• wrapContentSize(Alignment.Center) → agar konten berada di tengah

Contoh penggunaan:

DiceWithButtonAndImage(
    modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
)

---

5. Pembuatan Layout

Layout utama menggunakan Column untuk menyusun elemen secara vertikal.

Column(
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // Isi komponen
}

Fungsi ini memastikan semua komponen berada di tengah secara horizontal.

---

6. Penambahan Tombol

Tombol digunakan untuk melakukan aksi lempar dadu.

Langkah:

1. Menambahkan string resource "Roll"
2. Membuat komponen Button

Button(onClick = { /* aksi */ }) {
    Text(stringResource(R.string.roll))
}

---

7. Penambahan Gambar

Aplikasi menggunakan 6 gambar dadu (dice_1 sampai dice_6) sebagai representasi hasil.

Gambar ditampilkan menggunakan:

Image(
    painter = painterResource(R.drawable.dice_1),
    contentDescription = "1"
)

Untuk memberi jarak antara gambar dan tombol digunakan:

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

---

8. Implementasi Logika Dadu

Untuk membuat aplikasi interaktif, digunakan angka acak dari 1–6.

a. State Management

Menggunakan remember dan mutableStateOf:

var result by remember { mutableStateOf(1) }

b. Aksi Tombol

Saat tombol ditekan:

result = (1..6).random()

c. Menentukan Gambar

Menggunakan ekspresi when:

val imageResource = 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
}

d. Menampilkan Hasil

Image(
    painter = painterResource(imageResource),
    contentDescription = result.toString()
)