Tugas 4: Membuat Aplikasi Dice Roller Interaktif (PPB - A)
Nama : Fathin Muhashibi Putra
NRP : 5025211229
Kelas : PPB - A
Tugas 4:Membuat Aplikasi Dice Roller Interaktif
Pada tugas kali ini, Saya membuat aplikasi dice roller interaktid. Berikut adalah langkah-langkah yang dilakukan:
1. Sebelum Memulai
Pertama-tama siapkan komputer yang dilengkapi dengan Android Studio. Akan digunakan Jetpack Compose dengan Kotlin untuk membuat tata letak aplikasi, lalu menulis logika bisnis untuk menangani peristiwa yang terjadi saat composable Button diketuk.
Pertama-tama siapkan komputer yang dilengkapi dengan Android Studio. Akan digunakan Jetpack Compose dengan Kotlin untuk membuat tata letak aplikasi, lalu menulis logika bisnis untuk menangani peristiwa yang terjadi saat composable Button diketuk.
2. Menetapkan dasar pengukuran
Pada Android Studio membuat New Project (Empty Activity) dengan Nama Project yaitu "Dice Roller". Pilih Minimum SDK dengan level API minimum 24 (Nougat).
Pada Android Studio membuat New Project (Empty Activity) dengan Nama Project yaitu "Dice Roller". Pilih Minimum SDK dengan level API minimum 24 (Nougat).
3. Membuat infrastruktur tata letak
Untuk melihat pratinjau project, klik Build & Refresh di panel Split atau Design, lalu ubah struktur kode contoh dengan menghapus fungsi GreetingPreview(), membuat fungsi DiceWithButtonAndImage() dan DiceRollerApp(), serta memanggil DiceRollerApp() dalam lambda DiceRollerTheme{} di setContent{}; tambahkan pengubah dengan mengubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier, teruskan pengubah saat memanggil fungsi, dan buat rantai metode fillMaxSize() dan wrapContentSize() dengan Alignment.Center untuk memusatkan komponen.
Untuk melihat pratinjau project, klik Build & Refresh di panel Split atau Design, lalu ubah struktur kode contoh dengan menghapus fungsi GreetingPreview(), membuat fungsi DiceWithButtonAndImage() dan DiceRollerApp(), serta memanggil DiceRollerApp() dalam lambda DiceRollerTheme{} di setContent{}; tambahkan pengubah dengan mengubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier, teruskan pengubah saat memanggil fungsi, dan buat rantai metode fillMaxSize() dan wrapContentSize() dengan Alignment.Center untuk memusatkan komponen.
4. Membuat tata letak vertikal
Untuk membuat tata letak vertikal, dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column(). Teruskan argumen modifier dari tanda tangan metode DiceWithButtonAndImage() ke argumen pengubah Column(). Teruskan argumen horizontalAlignment ke fungsi Column(), lalu tetapkan ke nilai Alignment.CenterHorizontally.
Untuk membuat tata letak vertikal, dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column(). Teruskan argumen modifier dari tanda tangan metode DiceWithButtonAndImage() ke argumen pengubah Column(). Teruskan argumen horizontalAlignment ke fungsi Column(), lalu tetapkan ke nilai Alignment.CenterHorizontally.
5. Menambahkan tombol
Pada file strings.xml, tambahkan string dan tetapkan ke nilai Roll. Dalam isi lambda Column(), tambahkan fungsi Button(). Di file MainActivity.kt, tambahkan fungsi Text() ke Button() dalam isi lambda fungsi. Teruskan ID resource string dari string roll ke fungsi stringResource() dan teruskan hasilnya ke composable Text.
Pada file strings.xml, tambahkan string dan tetapkan ke nilai Roll. Dalam isi lambda Column(), tambahkan fungsi Button(). Di file MainActivity.kt, tambahkan fungsi Text() ke Button() dalam isi lambda fungsi. Teruskan ID resource string dari string roll ke fungsi stringResource() dan teruskan hasilnya ke composable Text.
6. Menambahkan gambar
Untuk menambahkan gambar dadu ke aplikasi, unduh dan ekstrak file zip gambar dadu, impor gambar ke Resource Manager di Android Studio, tambahkan composable Image di dalam fungsi Column() sebelum Button, teruskan argumen painter dengan ID resource drawable, berikan deskripsi konten untuk aksesibilitas, dan tambahkan Spacer untuk mengatur jarak antara Image dan Button.
Untuk menambahkan gambar dadu ke aplikasi, unduh dan ekstrak file zip gambar dadu, impor gambar ke Resource Manager di Android Studio, tambahkan composable Image di dalam fungsi Column() sebelum Button, teruskan argumen painter dengan ID resource drawable, berikan deskripsi konten untuk aksesibilitas, dan tambahkan Spacer untuk mengatur jarak antara Image dan Button.
7. Membuat logika pelemparan dadu
Setelah semua composable tersedia, modifikasi aplikasi agar tombol melempar dadu saat diketuk dengan membuat variabel result di DiceWithButtonAndImage(), menghapus komentar /TODO/ dari parameter onClick di Button dan menetapkan result ke angka acak antara 1 hingga 6, menggunakan composable remember dan mutableStateOf() untuk menyimpan nilai result, membuat variabel imageResource dengan ekspresi when berdasarkan result, mengubah ID resource drawable dan contentDescription di Image, serta menambahkan logika pelemparan dadu untuk memperbarui UI saat tombol Roll diketuk.
Setelah semua composable tersedia, modifikasi aplikasi agar tombol melempar dadu saat diketuk dengan membuat variabel result di DiceWithButtonAndImage(), menghapus komentar /TODO/ dari parameter onClick di Button dan menetapkan result ke angka acak antara 1 hingga 6, menggunakan composable remember dan mutableStateOf() untuk menyimpan nilai result, membuat variabel imageResource dengan ekspresi when berdasarkan result, mengubah ID resource drawable dan contentDescription di Image, serta menambahkan logika pelemparan dadu untuk memperbarui UI saat tombol Roll diketuk.
8. Selesai
Setelah mengikuti semua langkah-langkah tersebut, maka jadilah sebuah aplikasi Dice Roller interaktif yang dapat digunakan.
- Screenshot Hasil :
- Kode Lengkap (Github Code):
- Video Demo Compile/Run Application Hello World:
Referensi :
Setelah mengikuti semua langkah-langkah tersebut, maka jadilah sebuah aplikasi Dice Roller interaktif yang dapat digunakan.
- Screenshot Hasil :
- Kode Lengkap (Github Code):
- Video Demo Compile/Run Application Hello World:
.png)
.png)
Comments
Post a Comment