Tugas 10

Analisis Kode Aplikasi Android "Unscramble"

Yusuf Hasan Nazila - 5025211225

---

Pendahuluan

Unscramble adalah aplikasi permainan tebak kata untuk satu pemain. Aplikasi ini menampilkan kata-kata yang hurufnya diacak, dan tugas pemain adalah menebak kata yang benar. Proyek ini merupakan contoh implementasi yang sangat baik untuk komponen Arsitektur Android modern seperti ViewModel dan StateFlow dalam pengembangan aplikasi reaktif menggunakan Jetpack Compose.

Tampilan Aplikasi

Berikut adalah tangkapan layar dari aplikasi Unscramble saat dijalankan:

Video Demonstrasi

---

Analisis Kode Sumber

Aplikasi ini dibangun dengan arsitektur yang modern, memisahkan data, logika, dan tampilan untuk menciptakan kode yang bersih dan mudah dikelola.

1. Sumber Data (data/WordsData.kt)

File ini adalah satu-satunya sumber data (single source of truth) untuk permainan. Di dalamnya, terdapat semua kata yang akan digunakan beserta konfigurasi permainan.

• MAX_NO_OF_WORDS: Menentukan bahwa setiap sesi permainan terdiri dari 10 kata.
• SCORE_INCREASE: Menetapkan bahwa setiap jawaban yang benar akan memberikan 20 poin.
• allWords: Sebuah koleksi Set yang berisi daftar kata-kata yang akan diacak. Penggunaan Set mencegah adanya kata duplikat.

// Set with all the words for the Game
val allWords: Set =
    setOf(
        "animal",
        "auto",
        "anecdote",
        "alphabet",
        // ... dan seterusnya
    )

2. State UI (ui/GameUiState.kt)

Kelas data ini merepresentasikan semua elemen yang dibutuhkan oleh UI pada satu waktu. Ini adalah pendekatan yang baik untuk manajemen state, di mana semua data untuk UI dikelompokkan dalam satu objek.

data class GameUiState(
    val currentScrambledWord: String = "",
    val currentWordCount: Int = 1,
    val score: Int = 0,
    val isGuessedWordWrong: Boolean = false,
    val isGameOver: Boolean = false
)

3. Logika dan State Holder (ui/GameViewModel.kt)

Sebagai inti dari aplikasi, GameViewModel memegang semua logika bisnis dan state aplikasi. Ini memisahkan logika dari UI, sehingga UI hanya bertugas menampilkan data.

• StateFlow: Menggunakan MutableStateFlow untuk menyimpan state `GameUiState`. State ini diekspos ke UI sebagai `StateFlow` yang tidak dapat diubah dari luar, menciptakan aliran data satu arah (unidirectional data flow).
• Pengelolaan Kata: Fungsi pickRandomWordAndShuffle() memilih kata acak, memastikannya belum pernah digunakan, lalu mengacaknya sebelum ditampilkan ke pengguna.
• Validasi Jawaban: Fungsi checkUserGuess() memvalidasi tebakan pengguna. Jika benar, skor diperbarui; jika salah, UI akan menampilkan pesan kesalahan.
• Pembaruan State: Setiap aksi dari pengguna (menebak, melewati kata) akan memanggil fungsi di ViewModel, yang kemudian memperbarui `_uiState`. Perubahan ini secara otomatis akan diterima dan ditampilkan oleh UI.

class GameViewModel : ViewModel() {
    // Game UI state
    private val _uiState = MutableStateFlow(GameUiState())
    val uiState: StateFlow = _uiState.asStateFlow()
    // ...
}

4. Antarmuka Pengguna (ui/GameScreen.kt)

File ini berisi semua fungsi Composable yang membangun antarmuka pengguna secara deklaratif.

• Observasi State: Composable `GameScreen` "mendengarkan" atau mengobservasi `uiState` dari `GameViewModel` menggunakan `collectAsState()`. Setiap kali `uiState` berubah di ViewModel, UI akan otomatis di-render ulang (recomposition) untuk menampilkan data terbaru.
• Struktur Layout: UI utama diatur dalam `GameLayout`, yang menampilkan skor, kata yang diacak, input teks untuk jawaban, dan tombol "Submit" serta "Skip".
• Dialog Akhir Permainan: Ketika state `isGameOver` menjadi `true`, sebuah `FinalScoreDialog` akan muncul, menampilkan skor akhir dan opsi untuk memulai permainan baru atau keluar.

5. Aktivitas Utama (MainActivity.kt)

Aktivitas ini adalah titik masuk aplikasi. Tugas utamanya sangat sederhana: mengatur tema dan menyediakan "wadah" untuk `GameScreen`, di mana seluruh logika dan UI permainan berlangsung.

---

Kesimpulan

Proyek "Unscramble" ini adalah contoh nyata dari praktik terbaik dalam pengembangan Android modern. Dengan memisahkan data, logika (ViewModel), dan UI (Compose), aplikasi menjadi lebih terstruktur, mudah diuji, dan mudah dipelihara. Penggunaan `StateFlow` untuk mengelola state secara reaktif memastikan bahwa UI selalu konsisten dengan data aplikasi terkini.

Kode Sumber Proyek

Jelajahi kode sumber lengkap proyek ini di GitHub.

Lihat di GitHub