MEMBUAT APLIKASI DICE ROLLER INTERAKTIF

Nama : Naily Khairiya
NRP : 5025201244
Kelas : PBB - I

Dalam blog ini, kita akan membuat aplikasi Dice Roller yang interaktif. Pengguna dapat melakukan lemparan dadu dengan mengetuk tombol yang tersedia. Hasil lemparan akan ditampilkan menggunakan gambar di layar. Kita akan menggunakan Jetpack Compose dengan Kotlin untuk merancang tata letak aplikasi. Selain itu, kita akan menulis logika bisnis untuk mengatasi kejadian yang terjadi saat tombol ditekan. 

1️⃣ Membuat Project Baru
Buka Android Studio dan navigasikan ke menu File > New > New Project.
Pilih opsi Empty Activity dari dialog New Project, lalu lanjutkan dengan mengklik Next.
Pada kolom Name, ketikkan Dice Roller untuk memberi nama proyek baru.

2️⃣  Membuat infrastruktur tata letak 

Untuk melihat pratinjau project, kita dapat mengklik Build & Refresh di panel Split atau Design.

Untuk mengubah struktur kode contoh, langkah-langkah yang diperlukan meliputi menghapus fungsi DefaultPreview(), membuat fungsi DiceWithButtonAndImage() dengan anotasi @Composable, serta membuat dan memanggil fungsi DiceRollerApp() dengan anotasi @Preview dan @Composable.

Panggilan ke fungsi Greeting("Android") dalam isi lambda DiceRollerTheme() disorot dengan warna merah karena fungsi tersebut telah dihapus, dan perlu dihapus semua kode di dalam lambda setContent{} yang terdapat dalam metode onCreate(). Selanjutnya, di dalam lambda setContent{}, panggil lambda DiceRollerTheme(), lalu di dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp(). Untuk menambahkan pengubah, ubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier dari jenis Modifier dan tetapkan nilai default Modifier. Kemudian, buat rantai metode fillMaxSize() ke objek Modifier sehingga tata letak mengisi seluruh layar. Terakhir, buat rantai metode wrapContentSize() ke objek Modifier, lalu teruskan Alignment.Center sebagai argumen untuk memusatkan komponen.

3️⃣  Membuat tata letak vertikal

Dalam Jetpack Compose, tata letak vertikal dapat dibuat menggunakan fungsi Column(). Fungsi Column() adalah tata letak composable yang menempatkan turunannya dalam urutan vertikal. Untuk membuat tata letak vertikal dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column(). Teruskan argumen modifier dari tanda tangan metode DiceWithImageAndButton() ke argumen pengubah Column(). Argumen modifier memastikan bahwa composable dalam fungsi Column() mematuhi batasan yang dipanggil pada instance modifier. Teruskan argumen horizontalAlignment ke fungsi Column(), lalu tetapkan ke nilai Alignment.CenterHorizontally. Ini memastikan bahwa turunan dalam kolom dipusatkan pada layar perangkat sesuai dengan lebarnya.

4️⃣  Menambahkan Tombol

Di file strings.xml, tambahkan string dengan nama "roll" dan tetapkan nilainya ke "Roll". 

Dalam isi lambda Column(), tambahkan fungsi Button() untuk menampilkan tombol. Di dalam fungsi Button() dalam file MainActivity.kt, tambahkan fungsi Text() yang menampilkan teks "Roll". Gunakan stringResource() dengan ID resource string yang sesuai dari "roll" yang telah ditambahkan sebelumnya.

5️⃣   Menambahkan gambar

Untuk menambahkan gambar dadu ke aplikasi, kita perlu mendownload gambar dadu terlebih dahulu dan mengimpornya ke dalam proyek menggunakan Resource Manager.

Setelah gambar-gambar dadu tersedia dalam proyek, kita dapat menambahkan komposable Image ke dalam fungsi Column() di MainActivity.kt. Pastikan untuk memberikan deskripsi konten kepada setiap gambar yang ditambahkan untuk meningkatkan aksesibilitas aplikasi kita. Untuk memperbaiki tata letak yang saling bersinggungan antara Button dan Image, kita dapat menambahkan komposable Spacer dengan tinggi tertentu di antara keduanya menggunakan Modifier.height().

6️⃣  Membuat Logika Pelemparan Dadu

Untuk membuat tombol menjadi interaktif, kita perlu menetapkan fungsi onClick pada komposable Button. Dalam fungsi Button, hapus komentar dari nilai lambda onClick dan tetapkan variabel result ke nilai acak antara 1 hingga 6 menggunakan metode random() pada rentang tersebut. Untuk memastikan bahwa nilai result tetap terjaga selama siklus hidup komponen, kita dapat menggunakan composable remember dengan fungsi mutableStateOf untuk menyimpan nilai result.

Kemudian, kita dapat menggunakan nilai result untuk menentukan gambar dadu yang akan ditampilkan. Ubah drawable yang digunakan oleh komposable Image berdasarkan nilai result yang dihasilkan. Pastikan untuk memberikan deskripsi konten yang sesuai kepada gambar dengan menggunakan nilai result sebagai contentDescription.

7️⃣   Hasil 

8️⃣   Source Code