Tugas 4 PPB-A Dice Roller Interaktif

          

Nama : Danar Sodik Priyambodo

NRP : 5025211145

PBKK-A

Aplikasi Dice Roller Interaktif

 

    Pada pertemuan keempat kita membuat aplikasi dice roller interaktif yang dapat menampilkan acakan dadu saat menekan tombol roll, berikut kode yang digunakan : 

package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
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.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.example.diceroller.ui.theme.DiceRollerTheme

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

@Preview(showBackground = true)
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(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()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(stringResource(R.string.roll))
        }
    }
}

    Pada proyek ini, terdapat aplikasi Android yang bernama Dice Roller, yang memungkinkan pengguna untuk melempar dadu secara acak dengan menekan tombol. Berikut adalah penjelasan kode dan struktur proyek ini:

Struktur Proyek:

• MainActivity: Ini adalah kelas utama yang memulai aplikasi. Kelas ini mengimplementasikan ComponentActivity, yang memungkinkan penggunaan fitur Jetpack Compose untuk antarmuka pengguna. Pada onCreate(), konten aplikasi diatur menggunakan setContent, yang kemudian memanggil fungsi DiceRollerApp().

• DiceRollerApp: Ini adalah fungsi komposabel yang bertanggung jawab untuk menampilkan antarmuka utama aplikasi. Fungsi ini mendeklarasikan komponen DiceWithButtonAndImage, yang menyusun antarmuka aplikasi.

• DiceWithButtonAndImage: Fungsi komposabel ini adalah bagian yang menampilkan gambar dadu dan tombol. Gambar dadu berubah berdasarkan hasil lemparan dadu, yang diwakili oleh variabel result yang di-set secara acak antara 1 hingga 6 ketika tombol ditekan.

• strings.xml: Di dalam berkas ini terdapat dua string sumber daya. Satu untuk nama aplikasi (app_name) dan satu lagi untuk teks tombol (roll).

Alur Kode:

• Ketika aplikasi dimulai, fungsi DiceRollerApp dipanggil, yang pada gilirannya memanggil DiceWithButtonAndImage.

• Fungsi DiceWithButtonAndImage berfungsi menampilkan gambar dadu sesuai dengan nilai result. Gambar dadu diambil dari sumber daya menggunakan painterResource dengan mengganti nilai result.

• Tombol Roll (yang tekstual dari string sumber daya) memungkinkan pengguna untuk melempar dadu, yang akan menghasilkan angka acak antara 1 dan 6, kemudian mengganti gambar dadu sesuai dengan hasil lemparannya.

Resource Manager:

• Gambar dadu yang ada pada Resource Manager diatur dalam sumber daya dengan nama dice_1, dice_2, ..., dice_6, yang masing-masing menggambarkan gambar dadu dengan angka yang sesuai.

• Terdapat juga gambar lain, seperti ic_launcher_background dan ic_launcher_foreground, yang kemungkinan digunakan untuk ikon peluncur aplikasi.

    Pada dasarnya, proyek ini adalah aplikasi sederhana untuk melempar dadu. Aplikasi ini menggunakan Jetpack Compose, sebuah framework UI deklaratif milik Android, untuk membuat tampilan dan interaksi pengguna. Dalam tampilan aplikasi ini, ada gambar yang mewakili dadu dengan angka yang berbeda, dan gambar tersebut akan berubah setiap kali pengguna menekan tombol Roll. Tombol tersebut akan menghasilkan angka acak, yang kemudian dipetakan ke gambar dadu yang sesuai. Semua gambar dadu tersebut diatur di dalam folder drawable dan dipanggil sesuai hasil lemparan.

source: Dice Roller

Video Demo: