Tugas 4 - Komponen Button Dice Roller

Nama : Christoforus Indra Bagus Pratama

NRP : 5025231124

Mata Kuliah : Pemrograman Perangkat Bergerak (C)

Tanggal : 26 Maret 2026

Pertemuan : 5

Penjelasan Kode Aplikasi Lempar Dadu Acak

Aplikasi lempar dadu acak ini dibangun menggunakan Jetpack Compose, yang menggunakan pendekatan deklaratif untuk mengelola state dan tata letak komponen antarmuka pengguna (UI). Berikut adalah penjelasan detail mengenai alur program dan fungsionalitas kode baris demi baris.

Alur Program Bekerja (Program Flow)

Secara garis besar, alur kerja aplikasi ini adalah sebagai berikut:

1. Saat aplikasi dijalankan, OS Android memanggil dan mengeksekusi MainActivity.
2. MainActivity memuat tema aplikasi (Pertemuan5Theme) dan memanggil komponen antarmuka utama, yaitu DiceRollerApp().
3. DiceRollerApp() mengatur agar elemen di dalamnya berada tepat di tengah layar, kemudian memanggil komponen inti: DiceRollerWithImageAndButton().
4. Di dalam DiceRollerWithImageAndButton(), aplikasi menyimpan nilai awal dadu (yaitu 1) menggunakan sistem State (mutableStateOf).
5. Tampilan awal dirender: sebuah gambar dadu angka 1 dan sebuah tombol "Roll" di bawahnya.
6. Interaksi: Ketika tombol "Roll" diklik, program menghasilkan angka acak dari 1 hingga 6, yang kemudian memperbarui nilai State.
7. Recomposition: Karena nilai State berubah, Jetpack Compose secara otomatis menggambar ulang (refresh) komponen UI yang terdampak. Logika when akan mencocokkan angka baru tersebut dengan sumber gambar dadu yang sesuai, lalu menampilkannya ke layar.

Bedah Kode Detail

Berikut adalah rincian fungsionalitas dari setiap bagian kode:

1. Deklarasi Package & Import

package com.example.pertemuan5

import android.os.Bundle
// ... (beberapa baris import lainnya disembunyikan agar ringkas)
import com.example.pertemuan5.ui.theme.Pertemuan5Theme

• package com.example.pertemuan5: Mendefinisikan lokasi atau identitas unik dari file ini di dalam struktur direktori proyek aplikasi.
• import ...: Mengimpor library dan fungsi bawaan Android serta Jetpack Compose yang diperlukan agar komponen seperti Image, Button, Text, dan Modifier dapat dikompilasi oleh sistem.

2. Entry Point (Pintu Masuk Aplikasi)

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

• class MainActivity : ComponentActivity(): Mendefinisikan kelas utama yang mewarisi sifat dari ComponentActivity, yang merupakan fondasi standar untuk membuat antarmuka layar aplikasi Android berbasis Compose.
• override fun onCreate(...): Fungsi siklus hidup (lifecycle) yang dipanggil pertama kali saat aktivitas (layar) baru saja diciptakan oleh sistem Android.
• setContent { ... }: Berfungsi sebagai jembatan antara kerangka kerja Android tradisional dengan Jetpack Compose. Semua hierarki komponen UI diletakkan di dalam blok ini.
• Pertemuan5Theme(): Menerapkan konfigurasi tema aplikasi (warna, tipografi, bentuk) ke dalam hierarki UI di bawahnya.
• DiceRollerApp(): Memanggil fungsi Composable yang mendefinisikan struktur tampilan utama aplikasi.

3. Komponen Layout Utama (Wrapper)

@Preview(showBackground=true)
@Composable
fun DiceRollerApp(){
    DiceRollerWithImageAndButton(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(align = Alignment.Center)
    )
}

• @Composable: Anotasi wajib yang menginformasikan kepada compiler bahwa fungsi ini berperan untuk membangun komponen UI.
• @Preview(...): Sebuah fitur tooling yang memungkinkan pengembang untuk melihat pratinjau desain (preview) secara langsung di dalam IDE tanpa harus menjalankan aplikasi di perangkat atau emulator.
• Modifier.fillMaxSize(): Atribut yang menginstruksikan komponen untuk membentang dan mengisi seluruh ruang layar yang tersedia secara maksimal, baik lebar maupun tinggi.
• wrapContentSize(align = Alignment.Center): Memastikan komponen-komponen di dalamnya diposisikan terpusat (tepat di tengah) dari ruang layar yang telah dialokasikan.

4. Logika Inti & Tampilan Dadu

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

• mutableStateOf(1): Menginisialisasi sebuah variabel State reaktif dengan nilai awal 1. Dalam paradigma Compose, setiap perubahan pada nilai State akan memicu pembaruan antarmuka secara otomatis.
• remember { ... }: Berfungsi untuk menjaga atau "mengingat" nilai state (dalam hal ini variabel result) agar tidak di-reset kembali ke nilai awal ketika proses penggambaran ulang (recomposition) terjadi.

    var 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
    }

• when(result): Blok kontrol aliran bersyarat yang mengevaluasi nilai integer saat ini yang tersimpan di dalam variabel result.
• Blok ini memetakan nilai numerik ke referensi sumber daya gambar yang sesuai. Sebagai contoh, jika result bernilai 3, maka referensi yang dikembalikan adalah R.drawable.dice_3. Kondisi else berfungsi sebagai penangkap nilai 6 (atau nilai di luar jangkauan 1-5).

    Column(
        horizontalAlignment = Alignment.CenterHorizontally
        ,modifier = modifier
    ){
        Image(painter = painterResource(id = imageOfDice), contentDescription = null)
        Button(onClick = {result = (1.. 6).random()}){
            Text(text = "Roll")
        }
    }
}

• Column { ... }: Kontainer tata letak yang menyusun komponen-komponen anak di dalamnya secara vertikal dari atas ke bawah.
• horizontalAlignment = Alignment.CenterHorizontally: Parameter yang memastikan semua elemen di dalam Column sejajar di bagian tengah sumbu horizontal.
• Image(...): Komponen untuk memuat dan merender aset gambar. Fungsi painterResource(id = imageOfDice) bertugas menarik file gambar dari direktori res/drawable berdasarkan ID yang dihasilkan oleh evaluasi blok when sebelumnya.
• Button(onClick = { result = (1..6).random() }): Komponen tombol yang dapat ditekan. Parameter onClick menangani *event listener* saat tombol disentuh: mengeksekusi fungsi (1..6).random() untuk menghasilkan bilangan bulat acak baru dari 1 hingga 6, lalu menetapkannya ke dalam variabel state result.
• Text(text = "Roll"): Menampilkan teks label "Roll" di dalam area tombol tersebut.

Dokumentasi