View Model and State - Unscramble App
Pada pertemuan minggu ke-11 perkuliahan mata kuliah Pemrograman Perangkat Bergerak, kami membahas tentang View Model dan State pada Compose dalam pengembangan aplikasi perangkat lunak berbasis Android. Sebagai tugas latihan, kami diminta memodifikasi aplikasi Unscramble App dan mengimplementasikan view model dan state.
Aplikasi Unscramble adalah permainan pengacak kata pemain tunggal. Aplikasi ini menampilkan kata yang diacak, dan pemain harus menebak kata tersebut menggunakan semua huruf yang ditampilkan. Pemain mendapat poin jika kata-katanya benar. Jika tidak, pemain dapat mencoba menebak kata tersebut beberapa kali. Aplikasi ini juga memiliki opsi untuk melewatkan kata saat ini. Di pojok kanan atas, aplikasi menampilkan jumlah kata, yaitu jumlah kata acak yang dimainkan dalam game saat ini. Ada 10 kata acak per game.
Untuk dapat menjalankan aplikasi Unscramble, langkah pertama yang dilakukan adalah mendownload proyek awal dari GitHub, kemudian mengekstraknya dari zip. Setelah itu, buka proyek tersebut di Android Studio dan jalankan aplikasi. Ketika aplikasi dijalankan pertama kali, kita akan melihat bug di aplikasi. Kata yang diacak tidak ditampilkan, tetapi dikodekan secara keras menjadi "scrambleun" dan tidak terjadi apa-apa saat kita menekan tombolnya. Kita diminta untuk memodifikasi aplikasi dan mengimplementasikan fungsionalitas dari aplikasi Unscramble.
Langkah selanjutnya yang dapat dilakukan adalah membuat berkas GameViewModel.kt untuk view model dan GameUiState.kt untuk menyimpan state aplikasi. Kode dari GameViewModel.kt dan GameUiState.kt dapat dilihat dibawah ini.
GameUiState digunakan untuk menyimpan dan mengelola status dari permainan, seperti kata yang sedang dimainkan, apakah tebakan pemain benar atau salah, apakah permainan telah selesai, skor pemain saat ini, dan jumlah kata yang telah ditebak.
GameViewModel merupakan turunan dari kelas ViewModel dalam arsitektur MVVM (Model-View-ViewModel) di Android. Kelas ini mengelola logika dan status permainan tebak kata. Properti _uiState adalah aliran data (StateFlow) yang menyimpan status UI permainan, seperti kata acak saat ini, skor, dan status permainan. Kelas ini memiliki beberapa fungsi utama:
- resetGame(): Mengatur ulang permainan dengan membersihkan kata-kata yang sudah digunakan dan memilih kata acak baru.
- updateUserGuess(): Memperbarui tebakan pengguna.
- checkUserGuess(): Memeriksa apakah tebakan pengguna benar dan memperbarui status permainan serta skor.
- skipWord(): Melewati kata saat ini dan melanjutkan ke kata berikutnya.
- updateGameState(): Memperbarui status permainan berdasarkan skor dan jumlah kata yang digunakan.
- shuffleCurrentWord(): Mengacak huruf dalam sebuah kata.
- pickRandomWordAndShuffle(): Memilih kata acak yang belum digunakan dan mengacaknya.
Secara keseluruhan, GameViewModel mengelola status dan logika permainan tebak kata, termasuk mengacak kata, memeriksa tebakan pengguna, mengatur ulang permainan, dan melanjutkan ke kata berikutnya.
Kemudian, langkah berikutnya adalah memodifikasi berkas GameScreen.kt, menghubungkan view model dan state yang telah dibuat, agar fungsionalitas aplikasi Unscramble dapat berjalan. Berikut ini flow diagram antara GameUiState, GameViewModel, dan GameScreen.
Teruskan instance ViewModel ke UI–yaitu, dari GameViewModel ke GameScreen() di file GameScreen.kt. Di GameScreen(), gunakan instance ViewModel untuk mengakses uiState menggunakan collectorAsState(). Fungsi collectAsState() mengumpulkan nilai dari StateFlow ini dan mewakili nilai terbarunya melalui State. StateFlow.value digunakan sebagai nilai awal. Setiap kali ada nilai baru yang diposting ke StateFlow, State yang dikembalikan diperbarui, menyebabkan komposisi ulang setiap penggunaan State.value.
Detail lebih lanjut terkait perubahan yang dilakukan pada GameScreen.kt dapat dilihat pada kode dibawah ini.
Berikut adalah penjelasan singkat tentang bagaimana screen, view model, dan state dihubungkan:
- ViewModel: GameViewModel dideklarasikan sebagai parameter default dalam fungsi GameScreen. GameViewModel ini mengelola status permainan dan menyediakan berbagai fungsi untuk mengubah status tersebut, seperti resetGame(), updateUserGuess(), checkUserGuess(), dan skipWord().
- State Management: gameUiState adalah aliran data yang berasal dari GameViewModel dan dikumpulkan sebagai state menggunakan fungsi collectAsState(). Ini memungkinkan UI untuk bereaksi secara otomatis terhadap perubahan status permainan yang dikelola oleh GameViewModel.
- Composable Functions: Beberapa fungsi composable digunakan untuk membangun UI permainan:
- GameScreen: Fungsi utama yang menampilkan seluruh layar permainan, mengatur tata letak dan elemen-elemen UI seperti judul, status permainan, dan tombol.
- GameLayout: Mengatur tata letak utama untuk menampilkan kata yang diacak, input pengguna, dan instruksi.
- GameStatus: Menampilkan skor pemain.
- FinalScoreDialog: Menampilkan dialog skor akhir ketika permainan selesai.
- Interaksi Pengguna: Interaksi pengguna seperti mengubah tebakan (onUserGuessChanged), menekan tombol submit (onKeyboardDone), dan melewati kata (skipWord()) dihubungkan dengan metode yang sesuai di GameViewModel. Ini memastikan bahwa setiap interaksi pengguna diperbarui dalam status permainan dan UI secara bersamaan.
Secara keseluruhan, kode ini menggunakan Jetpack Compose untuk membuat UI permainan yang reaktif, di mana state permainan diatur oleh GameViewModel, dan setiap perubahan state tersebut secara otomatis memperbarui tampilan UI melalui composable functions.
Terakhir, kita dapat menjalankan aplikasi. Berikut adalah tampilan aplikasi pada perangkat Android:
Komentar
Posting Komentar