Mochamad Kolbi Nuron_DiceRoller

 Nama: Mochamad Kolbi Nuron

Nrp: 5025231183

kelas: PPB B

Tugas: membuat implementasi komponen antarmuka pengguna (UI) pada platform Android menggunakan Jetpack Compose. Fokus utama praktikum ini adalah pembuatan aplikasi Dice Roller, sebuah permainan dadu sederhana yang mendemonstrasikan interaksi tombol dan pengelolaan status (state) dalam aplikasi.

1. Pendahuluan

Dalam pengembangan aplikasi Android modern, pembuatan antarmuka pengguna (User Interface/UI) menjadi lebih mudah dengan hadirnya Jetpack Compose. Toolkit ini memungkinkan developer membuat UI secara deklaratif hanya menggunakan bahasa Kotlin tanpa perlu XML.

Pada praktikum ini, dibuat sebuah aplikasi sederhana bernama Dice Roller, yaitu aplikasi yang mensimulasikan pelemparan dadu. Aplikasi ini akan menampilkan gambar dadu sesuai angka yang dihasilkan secara acak ketika tombol ditekan.

Praktikum ini berfokus pada:

• Pembuatan UI menggunakan Jetpack Compose
• Interaksi pengguna melalui tombol
• Pengelolaan state (data yang berubah)

2. Tujuan

Tujuan dari praktikum ini adalah:

• Memahami dasar Jetpack Compose
• Mengimplementasikan komponen UI
• Memahami konsep state dalam aplikasi
• Membuat aplikasi interaktif sederhana

3. Dasar Teori

3.1 Jetpack Compose

Jetpack Compose adalah toolkit modern Android untuk membangun UI secara deklaratif. Artinya, tampilan ditentukan berdasarkan kondisi data (state).

3.2 Composable Function

Composable adalah fungsi khusus untuk membuat UI.

Contoh:

@Composable
fun Hello() {
    Text("Hello World")
}

3.3 State dalam Compose

State adalah data yang bisa berubah dan akan mempengaruhi tampilan UI.

4. Implementasi Program

Berikut adalah penjelasan kode yang digunakan dalam aplikasi Dice Roller.

4.1 MainActivity (Entry Point)

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

Penjelasan:

• ComponentActivity() → kelas dasar untuk activity di Android
• onCreate() → fungsi pertama yang dijalankan saat aplikasi dibuka
• enableEdgeToEdge() → membuat tampilan fullscreen
• setContent {} → digunakan untuk menampilkan UI berbasis Compose
• DicerollerTheme → tema aplikasi
• Surface → container dasar UI
• DiceRollerApp() → memanggil tampilan utama aplikasi

4.2 Fungsi Utama Aplikasi

@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.Center)
    )
}

Penjelasan:

• @Composable → menandakan fungsi UI
• Modifier.fillMaxSize() → membuat layout memenuhi layar
• wrapContentSize(Alignment.Center) → menempatkan konten di tengah layar
• Memanggil fungsi DiceWithButtonAndImage()

4.3 Fungsi UI Dice Roller

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {

Fungsi ini adalah inti dari aplikasi, karena berisi:

• State (nilai dadu)
• Gambar dadu
• Tombol

a. State (Nilai Dadu)

var result by remember { mutableStateOf(1) }

Penjelasan:

• result menyimpan angka dadu (1–6)
• remember → menyimpan nilai selama composable aktif
• mutableStateOf(1) → nilai awal = 1
• Jika result berubah → UI otomatis update

b. Menentukan Gambar Dadu

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
}

Penjelasan:

• when digunakan seperti if-else
• Setiap angka memiliki gambar dadu masing-masing
• R.drawable → mengambil gambar dari folder res/drawable

c. Layout UI (Column)

Column(
    modifier = modifier,
    horizontalAlignment = Alignment.CenterHorizontally
)

Penjelasan:

• Column → menyusun elemen secara vertikal
• horizontalAlignment → posisi tengah secara horizontal

d. Menampilkan Gambar

Image(
    painter = painterResource(imageResource),
    contentDescription = stringResource(R.string.dice_image_description, result)
)

Penjelasan:

• Image → menampilkan gambar
• painterResource() → mengambil gambar dari resource
• contentDescription → deskripsi untuk aksesibilitas

e. Memberi Jarak

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

Penjelasan:

• Memberi jarak antara gambar dan tombol
• 16.dp → ukuran jarak

f. Tombol Roll

Button(onClick = { result = (1..6).random() }) {
    Text(text = stringResource(R.string.roll))
}

Penjelasan:

• Button → tombol interaksi
• onClick → aksi saat tombol ditekan
• (1..6).random() → menghasilkan angka acak 1 sampai 6
• Text → tulisan di tombol

Saat tombol ditekan:
➡️ nilai result berubah
➡️ gambar otomatis ikut berubah

4.4 Preview UI

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

Penjelasan:

• Digunakan untuk melihat tampilan di Android Studio tanpa menjalankan aplikasi
• @Preview → fitur preview UI

5. Hasil dan Pembahasan

Hasil dari aplikasi:

• Tampilan awal menunjukkan dadu angka 1
• Saat tombol ditekan, angka berubah secara acak
• Gambar menyesuaikan hasil angka

Pembahasan:

• State berhasil mengontrol perubahan UI
• Interaksi tombol berjalan dengan baik
• Compose mempermudah pembuatan UI tanpa XML