Tugas 9

Nama: Yusuf Hsan Nazila

NRP: 5025211225

---

Analisis dan Implementasi Aplikasi "Dessert Clicker" dengan Jetpack Compose

"Dessert Clicker" merupakan aplikasi permainan sederhana yang dikembangkan sebagai bagian dari modul pembelajaran "Android Basics with Compose". Tujuan fundamental dari aplikasi ini adalah untuk menjadi sarana pembelajaran konsep-konsep dasar dalam pengembangan aplikasi Android modern, dengan fokus utama pada Siklus Hidup Aktivitas (Android Activity Lifecycle) dan Manajemen Status (State Management) dalam Jetpack Compose.

Mekanisme permainan ini cukup sederhana: pengguna menekan (melakukan klik) pada gambar makanan penutup (dessert) untuk "menjualnya". Setiap klik akan meningkatkan total pendapatan (revenue) dan jumlah dessert yang berhasil terjual. Seiring bertambahnya jumlah dessert yang terjual, jenis dessert yang ditampilkan akan berganti ke varian lain yang memiliki harga lebih tinggi, sesuai dengan data yang telah ditentukan.

Tampilan Antarmuka Aplikasi

Berikut adalah hasil tangkapan layar dari aplikasi Dessert Clicker ketika dijalankan pada emulator Android:

Demonstrasi Fungsionalitas Aplikasi

Video di bawah ini menyajikan demonstrasi fungsionalitas aplikasi. Terlihat bahwa interaksi klik pada gambar cupcake akan secara dinamis memperbarui nilai "Desserts Sold" dan "Total Revenue". Video ini juga menampilkan struktur kode pada Android Studio yang menjadi dasar implementasi aplikasi ini.

---

Analisis Kode Sumber

Untuk memahami arsitektur dan fungsionalitas aplikasi, berikut adalah analisis dari beberapa komponen kode yang esensial.

1. Struktur Data: `Dessert.kt` dan `Datasource.kt`

Aplikasi ini mengadopsi struktur data yang jelas dan ringkas untuk merepresentasikan setiap entitas dessert dengan memanfaatkan sebuah `data class` pada Kotlin.

`app/src/main/java/com/example/dessertclicker/model/Dessert.kt`

data class Dessert(val imageId: Int, val price: Int, val startProductionAmount: Int)

Struktur data ini memiliki tiga properti utama:

• `imageId`: Merupakan ID dari resource drawable yang digunakan sebagai gambar visual untuk dessert.
• `price`: Merepresentasikan harga dari setiap unit dessert.
• `startProductionAmount`: Menentukan jumlah minimum dessert yang harus terjual sebelum dessert jenis ini ditampilkan kepada pengguna.

Kumpulan data dessert yang digunakan oleh aplikasi ini disediakan oleh berkas `Datasource.kt`, yang berisi sebuah `List` statis dari objek-objek `Dessert`.

2. Antarmuka Pengguna (UI) dengan Jetpack Compose

Seluruh antarmuka pengguna aplikasi ini dibangun secara deklaratif menggunakan Jetpack Compose, yang logikanya terpusat pada berkas `MainActivity.kt`.

Manajemen Status (State Management)

Prinsip dasar Jetpack Compose adalah mengandalkan "state" untuk mengelola data yang bersifat dinamis. Ketika nilai sebuah state berubah, antarmuka pengguna yang bergantung pada state tersebut akan secara otomatis diperbarui (recomposed). Dalam aplikasi ini, `rememberSaveable` digunakan untuk memastikan bahwa state (seperti pendapatan dan jumlah dessert terjual) dapat bertahan dan dipulihkan meskipun terjadi perubahan konfigurasi, contohnya saat layar dirotasi.

@Composable
private fun DessertClickerApp(desserts: List<Dessert>) {

    var revenue by rememberSaveable { mutableStateOf(0) }
    var dessertsSold by rememberSaveable { mutableStateOf(0) }

    // ... sisa implementasi
}

Variabel `revenue` dan `dessertsSold` di atas adalah contoh dari state yang dikelola.

Fungsi Composable untuk UI

Fungsi `DessertClickerScreen` bertanggung jawab untuk menyusun elemen-elemen visual utama, termasuk gambar latar, gambar dessert interaktif, serta panel informasi transaksi di bagian bawah.

@Composable
fun DessertClickerScreen(
    revenue: Int,
    dessertsSold: Int,
    @DrawableRes dessertImageId: Int,
    onDessertClicked: () -> Unit,
    modifier: Modifier = Modifier
) {
    Box(modifier = modifier) {
        // ... Implementasi gambar latar
        Column {
            Box(
                modifier = Modifier.weight(1f).fillMaxWidth()
            ) {
                Image(
                    painter = painterResource(dessertImageId),
                    contentDescription = null,
                    modifier = Modifier
                        // ... atribut lainnya
                        .clickable { onDessertClicked() },
                    contentScale = ContentScale.Crop,
                )
            }
            TransactionInfo(
                revenue = revenue,
                dessertsSold = dessertsSold
            )
        }
    }
}

Modifier `.clickable { onDessertClicked() }` merupakan implementasi yang memungkinkan gambar dessert untuk merespons input klik dari pengguna.

3. Logika Aplikasi dan Siklus Hidup Aktivitas (Activity Lifecycle)

Logika inti aplikasi ini dapat dipecah menjadi dua komponen utama: penanganan interaksi pengguna dan implementasi observasi siklus hidup.

Logika Pergantian Dessert (`determineDessertToShow`)

Fungsi ini bertugas mengevaluasi daftar dessert yang ada. Dengan membandingkan `startProductionAmount` dari setiap dessert dengan jumlah `dessertsSold` saat ini, fungsi ini secara logis menentukan dessert mana yang seharusnya ditampilkan di layar.

fun determineDessertToShow(
    desserts: List<Dessert>,
    dessertsSold: Int
): Dessert {
    var dessertToShow = desserts.first()
    for (dessert in desserts) {
        if (dessertsSold >= dessert.startProductionAmount) {
            dessertToShow = dessert
        } else {
            // Karena daftar sudah diurutkan, iterasi bisa dihentikan
            break
        }
    }
    return dessertToShow
}

Integrasi dengan Siklus Hidup Aktivitas

Salah satu tujuan edukatif utama dari aplikasi ini adalah untuk mendemonstrasikan siklus hidup (lifecycle) dari sebuah `Activity` Android. Untuk mencapai ini, berkas `MainActivity.kt` melakukan override terhadap beberapa metode siklus hidup yang krusial, seperti `onCreate()`, `onStart()`, `onResume()`, `onPause()`, `onStop()`, dan `onDestroy()`.

// Mendefinisikan tag untuk logging
private const val TAG = "MainActivity"

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        Log.d(TAG, "onCreate Called")
        // ...
    }

    override fun onStart() {
        super.onStart()
        Log.d(TAG, "onStart Called")
    }

    // ... implementasi override untuk metode lifecycle lainnya
}

Setiap kali sistem operasi Android memanggil salah satu dari metode tersebut, sebuah pesan log akan dicatat pada Logcat dengan tag "MainActivity". Fitur ini sangat bermanfaat bagi pengembang untuk dapat mengamati secara langsung transisi antar-status dalam siklus hidup sebuah aktivitas, misalnya ketika aplikasi pertama kali dibuat, ditampilkan, dijeda, atau dihancurkan.

---

Kesimpulan

Proyek "Dessert Clicker" berfungsi sebagai sarana perkenalan yang sangat efektif terhadap paradigma pengembangan aplikasi Android modern menggunakan Kotlin dan Jetpack Compose. Melalui analisis dan implementasi proyek ini, dapat ditarik beberapa poin pembelajaran utama, antara lain:

• Membangun antarmuka pengguna secara deklaratif dengan menggunakan fungsi-fungsi Composable.
• Mengelola status (state) pada aplikasi dengan `rememberSaveable` untuk menjaga konsistensi data selama perubahan konfigurasi.
• Mengimplementasikan logika bisnis sederhana sebagai respons terhadap interaksi pengguna (misalnya, event klik).
• Mengobservasi dan memahami tahapan-tahapan krusial dalam siklus hidup sebuah `Activity` melalui mekanisme logging.

Kode Sumber Proyek

Jelajahi kode sumber lengkap proyek ini di GitHub.

Lihat di GitHub