TUGAS 4 PPB F : Aplikasi Dice Roller Interaktif (implementasi komponen button)

TUGAS 4

 Aplikasi Dice Roller Interaktif (implementasi komponen button)

5025201003 - Rahmat Faris Akbar

PPB (F)

        Dalam Tugas 4 kelas Pemrograman Perangkat Bergerak (PPB) F, kita diberikan resource tutorial untuk membuat aplikasi Dice Roller interaktif menggunakan Jetpack Compose. Aplikasi ini akan menampilkan interaksi sederhana namun fundamental dalam pengembangan aplikasi Android modern yaitu penggunaan komponen button untuk menerima input dari pengguna dan menampilkan output berupa gambar yang berubah-ubah. Dengan menggunakan Jetpack Compose, kita akan membuat aplikasi yang tidak hanya menampilkan hasil lemparan dadu secara visual tetapi juga menawarkan interaktivitas melalui tombol. Berikut adalah langkah-langkah untuk membuat aplikasi ini:

Langkah 1: Buat Proyek Baru

Buka Android Studio dan buat proyek baru dengan memilih template "Empty Compose Activity". Ini akan memberikan kita struktur dasar untuk memulai pengembangan dengan Jetpack Compose.

Langkah 2: Menyiapkan Resource Gambar

Simpan gambar dadu (dice_1, dice_2, ..., dice_6) ke dalam folder `res/drawable` proyek kita. Gambar ini akan digunakan untuk menampilkan hasil dari lemparan dadu.

Langkah 3: Definisi Warna (`Color.kt`) 

Tentukan skema warna untuk aplikasi. Ini akan digunakan untuk menentukan warna utama, sekunder, dan tersier aplikasi kita.

Langkah 4: Tema Aplikasi (`Theme.kt`)

Sesuaikan tema aplikasi untuk mendukung mode terang dan gelap, serta pengaturan dinamis pada Android 12+.

Langkah 5: MainActivity (`MainActivity.kt`) 

Ini merupakan titik masuk utama aplikasi. Fungsi `setContent` digunakan untuk menentukan komponen UI yang akan ditampilkan.

Langkah 6: Tampilan Dadu dan Tombol

Membuat `@Composable` fungsi untuk menampilkan gambar dadu dan tombol yang memungkinkan pengguna melakukan lemparan dadu. Langkah-langkah Membuat Fungsi `@Composable` untuk Menampilkan Dadu dan Tombol:

Deklarasi Fungsi `@Composable`:

Dimulai dengan mendeklarasikan fungsi `@Composable` yang bernama `DiceWithButtonAndImage`. Fungsi ini menerima `modifier` sebagai parameter dengan tipe `Modifier` dan nilai default `Modifier`. `Modifier` digunakan untuk mengatur tata letak dan tampilan komponen UI di Jetpack Compose.

Pengelolaan State dengan `remember`: 

Gunakan `remember` untuk menyimpan state hasil lemparan dadu. State ini direpresentasikan dengan variabel `result` yang mengandalkan fungsi `mutableStateOf` dengan nilai awal `1`. Fungsi `remember` memastikan nilai state tetap persisten di antara recomposition yang dipicu oleh UI updates atau event lainnya.

Menentukan Gambar Dadu:

Gunakan struktur kontrol `when` untuk menentukan resource gambar dadu yang sesuai dengan nilai `result`. Resource gambar tersebut disimpan dalam variabel `imageResource`. Contoh, jika `result` adalah `1`, maka `imageResource` akan diatur ke `R.drawable.dice_1`.

Membangun UI dengan `Column`:

Gunakan komponen `Column` untuk mengatur komponen `Image` dan `Button` secara vertikal. `Column` menerima `modifier` yang diberikan ke fungsi `DiceWithButtonAndImage`. Properti `horizontalAlignment` diset ke `Alignment.CenterHorizontally` untuk memusatkan komponen-komponen di dalamnya secara horizontal.

Menampilkan Gambar Dadu:

Tambahkan komponen `Image` di dalam `Column` untuk menampilkan gambar dadu. Gunakan `painterResource` untuk memuat gambar dari `imageResource`. `contentDescription` diset ke `result.toString()` untuk keperluan aksesibilitas.

Tombol untuk Lempar Dadu:

Terakhir, tambahkan komponen `Button` dengan teks "Roll". Ketika tombol diklik, nilai `result` diperbarui dengan bilangan acak antara 1 sampai 6 menggunakan `(1..6).random()`. Ini mensimulasikan lemparan dadu.

Melalui fungsi `DiceWithButtonAndImage`, kita dapat menciptakan pengalaman interaktif bagi pengguna untuk melempar dadu virtual dengan mengetuk tombol, dan melihat hasilnya langsung pada layar.

Tampilan:

Repository Kode:

klik disini!