Tugas 7 (Pertemuan 14): ViewModel and State in Compose

 Oleh Arya Widia Putra / 5025201016

ViewModel and State in Compose

Komponen ViewModel adalah komponen yang menyimpan dan menunjukkan state untuk user interface. Penggunaan ViewModel adalah cara untuk mengimplementasikan pengarahan UI dari model. Pada latihan kali ini, kita menyempurnakan sebuah aplikasi game Unscramble (membuat kata dari huruf yang diacak). Kode awal dapat diperoleh dari https://github.com/google-developer-training/basic-android-kotlin-compose-training-unscramble/tree/starter. Lalu, kita sempurnakan aplikasi tersebut agar fungsi-fungsi, seperti score, limit kata dalam satu sesi, fitur skip, dan acak huruf dapat berjalan sesuai yang diinginkan.

1. Dokumentasi

  • Programming language (bahasa): Kotlin (Android Studio dan Jetpack Compose)
  • Goal (tujuan): Memahami ViewModel dan State pada Compose, studi kasus game acak kata
  • Full code (kode): https://github.com/aryawidiap/unscramble-app

Penjelasan kode

  1. Data class GameUiState

    Class ini merupakan template untuk data yang akan digunakan dalam aplikasi.

  2. Fungsi GameViewModel

    Fungsi ini bertindak sebagai View Model dalam aplikasi ini, menyimpan dan menunjukkan state untuk ditampilkan pada UI.

  3. Fungsi GameScreen

    Fungsi ini bertindak sebagai fungsi yang mengatur elemen UI (UI element).

2. Tampilan UI


Gambar 1. Tampilan awal untuk aplikasi Unscramble

Gambar 2. Tampilan aplikasi saat user menjawab dengan benar. Nilai pada score bertambah dari 0 ke 20.


Gambar 3. Tampilan aplikasi saat kata sudah menyentuh banyak maksimal



3. Video Demonstrasi






Comments

Post a Comment