Tugas-8 PPB

Nama : Layyinatul Fuadah

NRP    : 5025211207

Kelas  : Pemrograman Perangkat Bergerak (B)

Game Unscramble

Aplikasi Unscramble adalah permainan kata satu pemain di mana pemain harus menyusun kembali huruf-huruf yang diacak untuk menebak kata aslinya. Aplikasi akan menampilkan kata yang sudah diacak, dan pemain harus menggunakan semua huruf yang ditampilkan untuk menebak kata tersebut. Pemain akan mendapatkan poin jika tebakannya benar, namun jika salah, pemain dapat mencoba menebak kembali beberapa kali. Aplikasi juga menyediakan opsi untuk melewati kata saat ini jika pemain tidak dapat menemukannya. Di sudut kanan atas, aplikasi akan menampilkan jumlah total kata acak yang dimainkan dalam satu permainan, yang berjumlah 10 kata. 

Implementasi

1. Membuat WordsData.kt

File ini berisi daftar kata yang digunakan dalam game, konstanta untuk jumlah maksimum kata per game, dan jumlah poin skor pemain untuk setiap kata yang benar.

2. Membuat MainActivity.kt

File ini sebagian besar berisi kode yang dihasilkan oleh template. Anda menampilkan composable GameScreen di blok setContent{}.

3. Membuat GameScreen.kt

Semua composable UI ditentukan dalam file GameScreen.kt. Bagian berikut memberikan panduan tentang beberapa fungsi composable.

4. GameStatus

GameStatus adalah fungsi composable yang menampilkan skor game di bagian bawah layar. Fungsi composable berisi composable teks di Card. Untuk saat ini, skor di-hardcode menjadi 0.

5. GameLayout

GameLayout adalah fungsi composable yang menampilkan fungsi game utama, yang mencakup kata acak, petunjuk game, dan kolom teks yang menerima tebakan pengguna.

6. GameScreen

Composable GameScreen berisi fungsi composable GameStatus dan GameLayout, judul game, jumlah kata, dan composable untuk tombol Submit dan Skip.

7. FinalScoreDialog

Composable FinalScoreDialog menampilkan dialog, yaitu jendela kecil yang memberikan permintaan kepada pengguna, dengan opsi untuk Play Again atau Exit game. Nanti dalam codelab ini, Anda akan menerapkan logika untuk menampilkan dialog ini di akhir game.

8. ViewModel

Langkah selanjutnya adalah memperkenalkan komponen ViewModel ke dalam aplikasi. ViewModel berfungsi untuk menyimpan dan menampilkan status antarmuka pengguna, serta menjaga data aplikasi saat aktivitas dihancurkan dan dibuat ulang oleh framework Android. Untuk mengimplementasikannya, perlu memperluas kelas ViewModel dari library komponen arsitektur Android dan menyimpan data aplikasi di dalamnya. Dengan menggunakan ViewModel, data aplikasi dapat dijaga dan tetap tersedia meskipun terjadi perubahan dalam siklus hidup aktivitas. 

9. Status UI

UI adalah apa yang dilihat oleh pengguna, sementara status UI adalah tampilan yang mencerminkan informasi dari aplikasi. UI mewakili visual dari status UI, dan setiap perubahan pada status UI akan langsung terlihat di UI karena elemen-elemen UI di layar terikat dengan status UI.

10. Menambahkan ViewModel

Dalam tugas ini, Anda menambahkan ViewModel ke aplikasi untuk menyimpan status UI game (kata acak, jumlah kata, dan skor). Untuk mengatasi masalah pada kode awal yang Anda lihat di bagian sebelumnya, Anda perlu menyimpan data game di ViewModel.

1. Buka build.gradle.kts (Module :app), scroll ke blok dependencies, lalu tambahkan dependensi berikut untuk ViewModel. Dependensi ini digunakan untuk menambahkan viewmodel berbasis siklus proses ke aplikasi compose Anda.
2. Di paket ui, buat class/file Kotlin bernama GameViewModel. Perluas dari class ViewModel.
3. Dalam paket ui, tambahkan class model untuk UI status yang disebut GameUiState. Jadikan class data dan tambahkan variabel untuk kata acak saat ini.

11. StateFlow

StateFlow adalah alur holder data yang dapat diamati, yang menampilkan pembaruan status saat ini dan yang baru. Properti value mencerminkan nilai status saat ini. Untuk memperbarui status dan mengirimkannya ke alur, setel nilai baru ke properti nilai dari class MutableStateFlow. Di Android, StateFlow berfungsi baik dengan class yang harus mempertahankan status tetap yang dapat diamati. StateFlow dapat ditampilkan dari GameUiState agar composable dapat memproses pembaruan status UI dan membuat status layar tetap bertahan saat terjadi perubahan konfigurasi.

12. Menampilkan kata acak tanpa pola

Dalam tugas ini, kita akan menambahkan metode bantuan untuk memilih kata acak dari WordsData.kt dan mengacak kata.

1. Di GameViewModel, tambahkan properti bernama currentWord dari jenis String untuk menyimpan kata acak saat ini.
2. Tambahkan metode bantuan untuk pilih kata acak dari daftar dan acaklah. Beri nama pickRandomWordAndShuffle() tanpa parameter input, lalu buat fungsi tersebut menampilkan String.
3. Di GameViewModel, tambahkan properti berikut setelah properti currentWord agar berfungsi sebagai kumpulan yang dapat diubah untuk menyimpan kata yang telah digunakan dalam game.
4. Tambahkan metode helper lain untuk mengacak kata saat ini yang disebut shuffleCurrentWord() yang menggunakan String dan menampilkan String yang diacak.
5. Tambahkan fungsi bantuan untuk melakukan inisialisasi game yang disebut resetGame(). Gunakan fungsi ini nanti untuk memulai dan memulai ulang game. Pada fungsi ini, hapus semua kata dalam kumpulan usedWords, lakukan inisialisasi _uiState. Pilih kata baru untuk currentScrambledWord menggunakan pickRandomWordAndShuffle().
6. Tambahkan blok init ke GameViewModel dan panggil resetGame() dari blok tersebut.

13. Merancang Compose UI Anda

Di Compose, satu-satunya cara untuk mengupdate UI adalah dengan mengubah status aplikasi. Yang dapat Anda kontrol adalah status UI Anda. Setiap kali status UI berubah, Compose membuat ulang bagian hierarki UI yang telah berubah. Composable dapat menerima status dan menampilkan peristiwa. Misalnya, TextField/OutlinedTextField menerima nilai dan menampilkan callback onValueChange yang meminta pengendali callback untuk mengubah nilai.

14. Memverifikasi kata tebakan dan memperbarui skor

Tugas selanjutnya adalah mengimplementasikan mekanisme untuk memverifikasi kata yang ditebak oleh pengguna. Setelah pengguna memasukkan tebakannya, aplikasi harus memeriksa apakah tebakan tersebut benar. Jika benar, maka skor permainan harus diperbarui. Jika salah, maka aplikasi harus menampilkan pesan kesalahan. Selanjutnya, status antarmuka pengguna harus diperbarui untuk menampilkan skor terbaru dan kata acak yang baru. Langkah ini bertujuan untuk mengimplementasikan logika verifikasi tebakan, pembaruan skor, dan pembaruan tampilan antarmuka pengguna sesuai dengan status permainan.

15. Memperbarui skor dan jumlah kata

Memperbarui skor permainan dan jumlah kata yang telah ditebak oleh pengguna untuk mencerminkan kemajuan mereka dalam permainan.. Skor harus bagian dari _ uiState.

16.  Menangani putaran terakhir game dan menampilkan dialog akhir game

Dalam implementasi selanjutnya, perlu menangani situasi saat pemain mencapai putaran terakhir permainan dan menampilkan dialog akhir permainan. Pengguna dapat memilih untuk melewati atau bermain lebih dari 10 kata, sehingga aplikasi harus menambahkan logika untuk mendeteksi kapan permainan telah berakhir. Untuk melakukan ini, data variabel "isGameOver" perlu diteruskan dari ViewModel ke GameScreen. Saat permainan berakhir, aplikasi harus menampilkan dialog pemberitahuan yang menawarkan opsi untuk mengakhiri atau memulai ulang permainan. Dialog ini akan menjadi jendela kecil yang meminta pengguna untuk membuat keputusan atau memasukkan informasi tambahan sebelum permainan berakhir atau dimulai ulang.

17. Membuat status dalan rotasi perangkat

ViewModel berfungsi untuk menyimpan data terkait aplikasi yang tidak akan hilang ketika aktivitas dihancurkan dan dibuat ulang oleh framework Android. Dengan menggunakan ViewModel, data aplikasi akan tetap tersedia dan dapat langsung digunakan setelah aktivitas direkomposisi. Dalam hal ini, aplikasi harus memastikan status antarmuka pengguna (UI) tetap dipertahankan selama perubahan konfigurasi perangkat. Untuk menguji hal ini, aplikasi dapat dijalankan, beberapa kata diacak dan dimainkan, lalu konfigurasi perangkat diubah dari mode potret ke lanskap atau sebaliknya. Pengembang harus memastikan bahwa data yang disimpan di dalam status UI ViewModel tetap dipertahankan dan dapat langsung diakses setelah perubahan konfigurasi terjadi.

Hasil :

Demo :

Github : ayyfuadh/UnscrambleApp (github.com)