PPB G - Pertemuan 4

 Nama: Moh rosy haqqy aminy

NRP: 5025211012

Kelas: PPB G

Memahami Jetpack Compose Melalui Aplikasi Dice Roller

link github: https://github.com/rosyhaqqy/Tugas_Tugas_PPB/tree/main/dice

Jetpack Compose kini menjadi metode modern dalam pengembangan UI di Android. Sebagai toolkit UI deklaratif, Compose memungkinkan pengembang merancang antarmuka yang menarik dengan kode yang lebih ringkas dan mudah dipahami. Dalam artikel ini, kita akan membahas konsep dasar Jetpack Compose melalui contoh aplikasi Dice Roller yang sederhana.

MainActivity – Entry Point Aplikasi

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContent {

            DierollerTheme {

                DiceRollerApp()

            }

        }

    }

} 

- MainActivity adalah activity utama dari aplikasi.

- setContent digunakan untuk mendefinisikan UI menggunakan Jetpack Compose.

- DierollerTheme membungkus aplikasi agar konsisten dengan tema visual yang digunakan.

- DiceRollerApp() adalah composable function yang menampilkan konten utama aplikasi.

DiceRollerApp() – Fungsi Tampilan Utama

@Composable

fun DiceRollerApp() {

    DiceWithButtonAndImage()

}

- Fungsi ini memanggil DiceWithButtonAndImage(), yaitu fungsi yang menampilkan UI utama (gambar dadu + tombol roll).

DiceWithButtonAndImage() – UI Dadu dan Tombol

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

a. State Management:

var result by remember { mutableIntStateOf(1) }

• Menyimpan nilai hasil dadu saat ini.

• remember digunakan agar nilai tetap tersimpan saat UI di-recompose.

• mutableIntStateOf(1) artinya nilai awal dadu adalah 1.

b. Pemilihan Gambar Dadu:

val imageResource = when (result){
    1 -> R.drawable.dice_1
    ...
    else -> R.drawable.dice_6
}

• Berdasarkan nilai result, dipilih gambar dadu yang sesuai (misalnya dice_3.png untuk angka 3).

c. Tampilan Layout:

Column (
    modifier = modifier.fillMaxSize().wrapContentSize(Alignment.Center),
    horizontalAlignment = Alignment.CenterHorizontally
)

• Menampilkan elemen secara vertikal dan dipusatkan di layar.

d. Isi Layout:

Image(...) // Gambar dadu sesuai angka
Spacer(...) // Jarak antar elemen
Text(...)   // Menampilkan teks hasil dadu
Button(onClick = { result = (1..6).random() }) {
    Text(stringResource(R.string.roll))
}

• Image: Menampilkan gambar dadu berdasarkan angka yang di-roll.

• Text: Menampilkan angka hasil dadu.

• Button: Saat ditekan, angka result akan diacak dari 1 sampai 6, menyebabkan UI di-recompose dan gambar serta teks berubah.

• stringResource(R.string.roll): Mengambil string dari res/values/strings.xml agar bisa diterjemahkan jika perlu.