Tugas Minggu 5: Aplikasi Dice Roller Interaktif

March 30, 2024

Tugas Minggu 5: Aplikasi Dice Roller Interaktif

Oleh Arya Widia Putra / 5025201016

Aplikasi Dice Roller Interaktif

Pelemparan dadu adalah salah satu cara untuk mendapatkan angka secara acak. Dalam aplikasi Dice Roller ini, pelemparan dadu direpresentasikan dengan gambar dan tombol untuk melempar dadu. Project ini didasarkan pada Android Basics with Compose course oleh Android Developers.

1. Dokumentasi

Programming language (bahasa): Kotlin (Android Studio dan Jetpack Compose)
Goal (tujuan): Membuat aplikasi pelempar dadu yang dapat dimainkan oleh user.
Full code (kode): https://github.com/aryawidiap/DiceRoller/

Code explanation

Logika utama dari aplikasi Dice Roller

Logika utama aplikasi dan layout aplikasi terdapat di dalam fungsi ini.

                    
@Composable
fun DiceRollerWithImageAndButton(modifier: Modifier = Modifier){
    ...
}

Membuat logika percabangan dari pelemparan dadu

Variable `result` berfungsi untuk menyimpan angka yang dihasilkan secara acak saat pelemparan dadu. Dalam aplikasi ini, gambar akan digunakan untuk melambangkan angka yang didapatkan pada pelemparan dadu. Hal ini ditunjukkan dengan kode melalui variabel `imageResource` yang nilainya berubah sesuai dengan nilai `result` (menggunakan percabangan `when`). Nilai `imageResource` akan menjadi file gambar yang sesuai dengan `result`.
```
                    
@Composable
fun DiceRollerWithImageAndButton(modifier: Modifier = Modifier){
    var result by remember { mutableIntStateOf(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
    }
    ...
}
                    
                   
```
Membuat layout dari aplikasi

Nilai variabel `result` dan `imageResource` akan digunakan dan ditampilkan melalui kode yang menyertai. Fungsi composable `Column` berfungsi untuk menata agar komponen UI tertata berurutan secara vertikal. Argumen `horizontalAlignment = Alignment.CenterHorizontally` diteruskan ke fungsi `Column` untuk membuat konten di dalam komponen `Column` menjadi rata tengah.

Terdapat tiga fungsi composable di dalam `Column`. `Image` berfungsi untuk menampilkan gambar dari dadu. `Spacer` berfungsi untuk memberikan jarak antara komponen `Image` dan `Button`. `Button` berfungsi untuk alat berinteraksi user dengan aplikasi. `Button` sendiri memiliki satu fungsi composable di dalamnya, `Text` yang berfungsi untuk menampilkan teks "Roll". Satu logika penting terdapat dalam potongan kode ini: Argumen `onClick` diteruskan ke `Button`. Argumen ini menunjukkan fungsi yang akan dipanggil saat tombol (`Button`) ditekan. Fungsi yang diberikan ke dalam argumen `onClick` di dalam kode ini adalah `result = (1..6).random()`, yang berarti `result` akan diberikan nilai acak (`random`) yang terdapat pada rentang 1 sampai 6.
```
                    
@Composable
fun DiceRollerWithImageAndButton(modifier: Modifier = Modifier){
    ...
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(painter = painterResource(id = imageResource), contentDescription = result.toString())
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(text = stringResource(R.string.roll))
        }
    }
}
                    
                
```

Fungsi untuk penampilan pada perangkat dan kelas utama

Fungsi composable `DiceRollerApp` mengatur tampilan aplikasi dengan meneruskan argumen `modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center))` ke `DiceRollerWithImageAndButton` untuk membuat tampilan memenuhi layar perangkat dan membuat konten rata tengah.

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

Akhirnya, fungsi `onCreate` dari kelas `MainActivity` memanggil `DiceRollerApp` sebagai fungsi utama untuk menjalankan aplikasi.

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