Membuat Aplikasi Interaktif "Dice Roller"

Pertemuan 4 

Nama : Hafidz Panji Ashari
NRP : 5025231278

Langkah-Langkah Pembuatan Aplikasi Interaktif "Dice Roller"

Pada praktikum pertemuan keempat ini, tugas yang dikerjakan adalah membuat aplikasi pengacak dadu interaktif menggunakan Jetpack Compose. Berikut adalah langkah-langkah pengerjaannya di Android Studio:

1. Membuat Proyek Baru

• Buka Android Studio dan pilih New Project.

• Pilih template Empty Activity agar struktur proyek langsung mendukung Jetpack Compose.

• Beri nama proyek DiceRoller, pastikan bahasa menggunakan Kotlin, dan Minimum SDK disetel ke API 24. Klik Finish dan tunggu proses build selesai.

2. Menyiapkan Sumber Daya (Resources) Aplikasi Agar penulisan kode lebih rapi, aset gambar dan teks dipisahkan dari logika utama:

• Mengimpor Gambar Dadu: Unduh file dice_images.zip dari tautan Codelab, lalu ekstrak. Salin (copy) keenam file gambar tersebut (dice_1.xml hingga dice_6.xml), lalu tempel (paste) ke dalam direktori app > res > drawable di Android Studio.

• Menyiapkan Teks Tombol: Buka direktori app > res > values dan buat/buka file strings.xml. Tambahkan kode <string name="roll">Roll</string> untuk menyimpan teks tombol secara terpusat (best practice untuk menghindari hardcoding teks).

<resources>
    <string name="app_name">Dice Roller</string>
    <string name="roll">Roll</string>
</resources>

3. Menulis Kode Antarmuka dan Logika (MainActivity.kt)

• Buka file MainActivity.kt. Buat fungsi Composable baru bernama DiceRollerApp() sebagai wadah utama, dan DiceWithButtonAndImage() untuk menampung komponen UI.

• Menyiapkan State: Di dalam fungsi DiceWithButtonAndImage(), tambahkan kode var result by remember { mutableStateOf(1) }. Variabel ini bertugas "mengingat" angka dadu saat ini. Jika angkanya berubah, Jetpack Compose akan otomatis menggambar ulang (recomposition) layar.

• Membuat Logika Gambar: Tambahkan fungsi kondisional when(result) untuk mencocokkan angka 1-6 dengan file gambar yang sesuai (misal: jika hasilnya 1, maka panggil R.drawable.dice_1).

• Menyusun Layout UI: Gunakan Column agar elemen tersusun secara vertikal. Di dalamnya, masukkan komponen Image untuk menampilkan gambar dadu, Spacer untuk memberi jarak, dan Button untuk tombol.

• Menambahkan Aksi Tombol: Pada parameter tombol, berikan perintah pengacakan angka: onClick = { result = (1..6).random() }.

package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.diceroller.ui.theme.DiceRollerTheme

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

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

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf( 1) }
    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
    }
    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
        Image(painter = painterResource(imageResource), contentDescription = result.toString())

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

4. Menjalankan Aplikasi

• Jalankan aplikasi (Run) ke perangkat target (HP fisik atau Emulator).

• Hasilnya, layar akan menampilkan gambar dadu dengan tombol "Roll" di bawahnya. Setiap kali tombol diklik, kode akan mengacak angka 1 sampai 6, dan antarmuka akan langsung mengubah gambar dadu di layar menyesuaikan angka hasil acakan tersebut.