Tugas Week 4 - PPB G - 5025221005

   

Tugas 4 - Komponen Button

     

NAMA        : Nabilah Atika Rahma

NRP            : 5025221005

KELAS         : Pemrograman Perangkat Bergerak - PPB G

TAHUN       : 2025

Create an interactive Dice Roller app

GitHub           : https://github.com/ranabel/Dice-Roller-App-5025221005 

1. Before You Begin: Setting the Stage for Interactive App Development:

Sebelum memulai, pastikan Anda telah menyiapkan lingkungan pengembangan Android Studio dan memiliki pemahaman dasar tentang bahasa pemrograman Kotlin serta kerangka kerja Jetpack Compose. Dalam codelab ini, Anda akan membangun aplikasi interaktif "Dice Roller" yang memungkinkan pengguna menggulirkan dadu dengan menekan tombol. Hasil gulungan akan ditampilkan sebagai gambar, memberikan pengalaman pengguna yang sederhana namun menarik. Anda akan belajar bagaimana menggunakan Jetpack Compose untuk membangun tata letak aplikasi dan mengimplementasikan logika bisnis untuk menangani interaksi pengguna dengan tombol.

2. Establish a Baseline: Creating the Foundation of Your Project:

Langkah awal adalah membuat proyek baru di Android Studio. Pilih template "Empty Activity" untuk memulai dengan kanvas kosong. Beri nama proyek "Dice Roller" dan tetapkan Minimum SDK ke API level 24 (Nougat) atau lebih tinggi. Ini akan menciptakan struktur proyek dasar yang akan Anda gunakan untuk membangun aplikasi Anda.

3. Create the Layout Infrastructure: Structuring Your User Interface:

Untuk memulai, pratinjau proyek Anda untuk memastikan semuanya berfungsi dengan benar. Kemudian, restrukturisasi kode sampel yang dihasilkan secara otomatis agar sesuai dengan tema aplikasi pengocok dadu. Hapus fungsi GreetingPreview() dan Greeting(), dan buat fungsi @Composable baru bernama DiceWithButtonAndImage() dan DiceRollerApp(). Fungsi DiceWithButtonAndImage() akan mewakili komponen UI utama aplikasi, sementara DiceRollerApp() akan menjadi titik masuk utama aplikasi Anda. Gunakan Modifier untuk mengatur tata letak dan tampilan komponen, memastikan bahwa mereka mengisi layar dan dipusatkan dengan benar.

4. Create a Vertical Layout: Arranging Components in a Column:

Jetpack Compose menggunakan fungsi Column() untuk menyusun komponen UI secara vertikal. Dalam aplikasi ini, gambar dadu akan ditampilkan di atas tombol "Roll". Tambahkan fungsi Column() ke dalam fungsi DiceWithButtonAndImage() dan gunakan horizontalAlignment = Alignment.CenterHorizontally untuk memusatkan komponen secara horizontal. Ini akan memastikan bahwa gambar dadu dan tombol ditempatkan dengan rapi di tengah layar.

5. Add a Button: Implementing User Interaction:

Tambahkan tombol interaktif ke dalam Column() menggunakan fungsi Button(). Tampilkan teks "Roll" pada tombol dengan menggunakan Text(stringResource(R.string.roll)). Anda perlu menambahkan string "Roll" ke file strings.xml. Tombol ini akan memicu logika pengocokan dadu ketika ditekan.

6. Add an Image: Displaying the Dice Roll Result

Tambahkan gambar dadu ke dalam Column() di atas tombol "Roll". Pertama, unduh gambar dadu dari URL yang disediakan dan impor ke dalam proyek Anda menggunakan Resource Manager di Android Studio. Kemudian, tambahkan fungsi Image() ke dalam Column() dan gunakan painterResource() untuk menampilkan gambar dadu. Pastikan untuk menambahkan contentDescription untuk aksesibilitas. Gunakan Spacer() untuk memberikan ruang antara gambar dan tombol.

7. Build the Dice-Roll Logic: Adding Functionality to Your App:

Implementasikan logika pengocokan dadu dengan membuat variabel result yang menyimpan hasil gulungan. Gunakan remember { mutableStateOf(1) } untuk membuat variabel result stateful, sehingga nilai variabel dapat diperbarui dan UI dapat di-rekomposisi. Di dalam onClick dari tombol "Roll", gunakan (1..6).random() untuk menghasilkan angka acak antara 1 dan 6. Kemudian, gunakan ekspresi when untuk menentukan gambar dadu yang akan ditampilkan berdasarkan nilai result. Perbarui contentDescription dari gambar untuk mencerminkan hasilnya.

Dalam codelab ini, Kita telah belajar bagaimana membangun aplikasi interaktif "Dice Roller" menggunakan Jetpack Compose. Mempelajari dasar-dasar Compose, termasuk penggunaan komponen UI seperti Button dan Image, serta cara mengimplementasikan logika untuk menangani interaksi pengguna. Selain itu juga terdapat konsep stateful composables dan bagaimana menggunakannya untuk memperbarui UI secara dinamis.

---

Thank You - 🚀 Happy Coding with Jetpack Compose! 🎉