Tugas 10 PPB

TUGAS 10 PPB

DESSERT CLICKER APPLICATION

Nama: Muhammad Lintang Panjerino

NRP: 5025201045

Kelas: PPB I

Tahun: 2024

Link Github: Tugas 10 - Dessert Clicker Application (Activity Lifecycle)

Pada Tugas 10 PPB kali ini, diberikan tugas untuk membuat proyek Dessert Clicker Application (Activity Lifecycle) dengan menggunakan Jetpack Compose pada Android Studio. Secara garis besar, proyek Dessert Clicker Application (Activity Lifecycle) ini adalah sebuah aplikasi yang menampilkan makanan berupa macam-macam dessert yang dijual. Aplikasi ini menampilkan gambar dessert, jumlah dessert yang terjual, dan total pendapatan dari penjualan dessert. Ketika gambar dessert diklik, jumlah dessert yang terjual dan total pendapatan akan bertambah, kemudian ketika jumlah dessert mencapai angka tertentu, gambar dessert dan harga satuan dessert akan berubah. Proyek ini bertujuan untuk mempelajari lebih dalam tentang konsep Activity, Log, Logcat, Overridable Callback Method, dan rememberSaveable pada Jetpack Compose.

Untuk memulai pengerjaan proyek, langkah awal yang dilakukan adalah mengunduh file zip dari repository github berikut https://github.com/google-developer-training/basic-android-kotlin-compose-training-dessert-clicker dan pilih branch dengan nama "starter". Kemudian ekstrak file zip tersebut pada folder lokal PC/laptop dan ubah nama folder hasil ekstrak menjadi "Dessert Clicker". Pada Android Studio, pilih "File" > pilih "Open" > pilih file tempat folder projek diekstrak > pilih "OK".

Setelah folder proyek terbuka, masih ada proses gradle build. Proses ini akan memakan waktu beberapa menit. Berikut adalah tampilan awal pada file MainActivity.kt. File ini merupakan file utama dari aplikasi Dessert Clicker Application (Activity Lifecycle). Setelah terbuka, klik "Run app" untuk langsung melihat tampilan awal aplikasi.

Aplikasi ini terbagi menjadi 3 bagian besar, yaitu menambahkan log, mengeksplor use case, dan mengatasi perubahan konfigurasi pada aplikasi Android sesuai state pada Activity Lifecycle.

1. Menambahkan Log Sesuai Activity Lifecycle

Pada Activity Lifecycle, terdapat 7 method utama yang berfungsi untuk menandakan perubahan state pada aplikasi. Beberapa method tersebut adalah onCreate(), onStart(), onResume(), onRestart(), onPause(), onStop(), onDestroy(). Selain itu, ada 5 state utama pada suatu Activity Lifecycle, antara lain Initialized, Created, Started, Resumed, Destroyed. Berikut adalah langkah-langkah untuk menambahkan logging pada aplikasi sesuai state pada Activity Lifecycle.

Menambahkan logging pada method onCreate()

a. Lakukan "Run app" untuk menjalankan aplikasi Dessert Clicker. Ketika gambar dessert ditekan berkali-kali, maka nilai "Dessert Sold" dan "Total Revenue" akan berubah.

b. Buka file MainActivity.kt dan tambahkan variabel konstanta berikut

private const val TAG = "MainActivity"

c. Kemudian di method onCreate(), setelah memanggil fungsi super.onCreate(), tambahkan kode berikut

Log.d(TAG, "onCreate Called")

d. Lakukan "Run app" ulang aplikasi Dessert Clicker dan cek tab Logcat. Ketik tag:MainActivity di bagian filter pada tab Logcat untuk melihat hasilnya.

2024-04-26 14:54:48.721  5386-5386  MainActivity com.example.dessertclicker D onCreate Called

Menambahkan method onStart() beserta logging

a. Di file MainActivity.kt pada topbar, pilih Code > Override Methods... atau tekan Ctrl+O. Akan muncul dialog yang menampilkan daftar berisi semua overridable method. Pilih fungsi onStart() dan klik OK. Setelah itu, akan muncul override fungsi onStart() yang dapat diganti.

b. Di dalam metode onStart(), tambahkan pesan log seperti berikut:

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

c. Lakukan "Run app" ulang aplikasi Dessert Clicker dan cek tab Logcat. Ketik tag:MainActivity di bagian filter pada tab Logcat untuk melihat hasilnya. Method onCreate() dan onStart() dipanggil satu per satu. Tetapi, ketika menekan tombol "Home" dan kemudian kembali ke aplikasi, hanya method onStart() yang dipanggil.

2024-04-26 14:54:48.721  5386-5386  MainActivity com.example.dessertclicker D  onCreate Called
2024-04-26 14:54:48.756  5386-5386  MainActivity com.example.dessertclicker D  onStart Called
2024-04-26 14:55:41.674  5386-5386  MainActivity com.example.dessertclicker D  onStart Called

Menambahkan method lain beserta logging

a. Tambahkan method Activity Lifecycle yang lain di MainActivity.kt beserta logging untuk setiap method, seperti pada kode berikut:

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

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

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

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

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

b. Lakukan "Run app" ulang aplikasi Dessert Clicker dan cek tab Logcat.

2. Mengeksplor Use Case pada Activity Lifecycle

Di bawah ini terdapat 3 use case untuk mengkesplor lebih jauh tentang Activity Lifecycle. Tujuan dari eksplorasi use case ini adalah untuk memahami pemanggilan suatu method pada Activity Lifecycle pada state tertentu.

Use case 1: Membuka dan menutup aktivitas

a. Lakukan "Run app" untuk menjalankan aplikasi Dessert Clicker. Pada awal saat aplikasi dimulai, akan ada 3 method yang dipanggil, yaitu onCreate(), onStart(), dan onResume().

2024-04-26 14:56:48.684 5484-5484 MainActivity com.example.dessertclicker D onCreate Called
2024-04-26 14:56:48.709 5484-5484 MainActivity com.example.dessertclicker D onStart Called
2024-04-26 14:56:48.713 5484-5484 MainActivity com.example.dessertclicker D onResume Called

b. Tekan gambar makanan (dessert) beberapa kali. Kemudian tekan tombol "Back" dan pada Logcat tercatat ada 2 method yang dipanggil, yaitu onPause() dan onStop(). Hal ini dikarenakan penggunaan tombol "Back" akan menyebabkan aktivitas (dan aplikasi) dihapus dari layar dan dipindahkan ke bagian belakang tumpukan aktivitas.

2024-04-26 14:56:48.684 5484-5484 MainActivity com.example.dessertclicker D onPause Called
2024-04-26 14:56:48.709 5484-5484 MainActivity com.example.dessertclicker D onStop Called

Use case 2: Bernavigasi dari dan kembali ke aktivitas

a. Saat aplikasi Dessert Clicker sedang berjalan, klik gambar dessert beberapa kali.

b. Tekan tombol "Home" cek tab Logcat. Ketika kembali ke layar utama, aplikasi tidak akan dimatikan, tetapi akan tetap berjalan di latar belakang. Method onPause() dan onStop() akan dipanggil. Saat onPause() dipanggil, aplikasi tidak lagi memiliki fokus. Sedangkan saat onStop() dipanggil, aplikasi tidak lagi akan terlihat di layar.

c. Kemudian, gunakan "Recent screen" untuk kembali ke aplikasi. Pada tab Logcat terlihat bahwa aktivitas dimulai ulang dengan onRestart() dan onStart(), lalu dilanjutkan dengan onResume().

2024-04-26 14:56:48.684 5484-5484 MainActivity com.example.dessertclicker D onRestart Called
2024-04-26 14:56:48.709 5484-5484 MainActivity com.example.dessertclicker D onStart Called
2024-04-26 14:56:48.713 5484-5484 MainActivity com.example.dessertclicker D onResume Called

Use case 3: Menyembunyikan sebagian aktivitas

a. Ketika aplikasi Dessert Clicker masih berjalan, klik tombol "Share" di kanan atas layar. Aktivitas berbagi muncul di paruh bawah layar, tetapi aktivitas aplikasi juga masih terlihat di paruh atas.

b. Cek tab Logcat dan perhatikan bahwa hanya method onPause() yang dipanggil.

2024-04-26 14:56:48.684 5484-5484 MainActivity com.example.dessertclicker D onPause Called

c. Klik di luar dialog berbagi untuk kembali ke aplikasi, dan perhatikan di tab Logcat bahwa onResume() dipanggil.

3. Mengatasi Perubahan Konfigurasi Sesuai State pada Activity Lifecycle

Perubahan konfigurasi terjadi ketika status perangkat berubah secara drastis sehingga cara termudah bagi sistem untuk menyelesaikan perubahan adalah dengan menonaktifkan dan membangun ulang aktivitas. Misalnya, jika pengguna mengubah bahasa perangkat, seluruh tata letak mungkin perlu diubah untuk mengakomodasi arah teks dan panjang string yang berbeda. Jika pengguna mencolokkan perangkat atau keyboard, tata letak aplikasi mungkin perlu memanfaatkan ukuran tampilan atau tata letak yang berbeda. Selain itu juga, jika orientasi perangkat berubah—jika perangkat ditortasi dari mode potret ke mode lanskap atau kembali sebaliknya—tata letak mungkin perlu diubah agar sesuai dengan orientasi baru.

Method onDestroy() dipanggil ketika mengubah konfigurasi

a. Lakukan "Run app" untuk menjalankan aplikasi Dessert Clicker.

b. Pastikan kunci rotasi layar di emulator dinonaktifkan. Kemudian, putar perangkat atau emulator ke mode "landscape" (ke kiri ataupun ke kanan).

c. Cek tab Logcat dan ketika dihentikan, aktivitas akan memanggil onPause(), onStop(), dan onDestroy().

2024-04-26 14:56:48.684 5484-5484 MainActivity com.example.dessertclicker D onPause Called
2024-04-26 14:56:48.709 5484-5484 MainActivity com.example.dessertclicker D onStop Called
2024-04-26 14:56:48.713 5484-5484 MainActivity com.example.dessertclicker D onDestroy Called

Kehilangan data ketika rotasi perangkat

a. Lakukan "Run app" untuk menjalankan aplikasi Dessert Clicker. Klik gambar dessert beberapa kali dan pastikan bahwa nilai "Dessert sold" dan "Total Revenue" tidak nol.

b. Pastikan kunci rotasi layar di emulator dinonaktifkan. Kemudian, putar perangkat atau emulator ke mode "landscape" (ke kiri ataupun ke kanan).

c. Setelah itu, cek tab Logcat. Perhatikan bahwa ketika emulator dirotasi, sistem akan memanggil semua callback siklus proses untuk menghentikan aktivitas. Kemudian, saat aktivitas dibuat ulang, sistem akan memanggil semua callback siklus proses untuk memulai aktivitas. Saat perangkat diputar, dan aktivitas dihentikan serta dibuat ulang, aktivitas dimulai ulang dengan nilai default—gambar dessert, jumlah dessert yang terjual, dan total pendapatan direset ke nol.

2024-04-26 15:04:29.356 5809-5809 MainActivity com.example.dessertclicker D onCreate Called
2024-04-26 15:04:29.378 5809-5809 MainActivity com.example.dessertclicker D onStart Called
2024-04-26 15:04:29.382 5809-5809 MainActivity com.example.dessertclicker D onResume Called
2024-04-26 15:06:52.168 5809-5809 MainActivity com.example.dessertclicker D onPause Called
2024-04-26 15:06:52.183 5809-5809 MainActivity com.example.dessertclicker D onStop Called
2024-04-26 15:06:52.219 5809-5809 MainActivity com.example.dessertclicker D onDestroy Called
2024-04-26 15:06:52.302 5809-5809 MainActivity com.example.dessertclicker D onCreate Called
2024-04-26 15:06:52.308 5809-5809 MainActivity com.example.dessertclicker D onStart Called
2024-04-26 15:06:52.312 5809-5809 MainActivity com.example.dessertclicker D onResume Called

Menggunakan rememberSaveable untuk menyimpan nilai

Developer dapat menggunakan fungsi rememberSaveable untuk menyimpan nilai yang diperlukan jika Android OS menghancurkan dan membuat ulang aktivitas. Untuk menyimpan nilai selama rekomposisi, developer perlu menggunakan remember. Gunakan fungsi rememberSaveable untuk menyimpan nilai selama rekomposisi dan perubahan konfigurasi. Menyimpan nilai menggunakan rememberSaveable akan memastikan bahwa nilai tersedia saat aktivitas dipulihkan, jika diperlukan.

a. Pada file MainActivity.kt, update grup yang terdiri dari lima variabel yang saat ini menggunakan remember dan ganti masing-masing rememberSaveable.

Dari kode seperti ini

var revenue by remember { mutableStateOf(0) }
...
var currentDessertImageId by remember {
    mutableStateOf(desserts[currentDessertIndex].imageId)
}

Menjadi seperti kode di bawah

var revenue by rememberSaveable { mutableStateOf(0) }
...
var currentDessertImageId by rememberSaveable {
    mutableStateOf(desserts[currentDessertIndex].imageId)
}

b. Lakukan "Run app" untuk menjalankan aplikasi Dessert Clicker. Klik gambar dessert beberapa kali dan pastikan bahwa nilai "Dessert sold" dan "Total Revenue" tidak nol.

c. Pastikan kunci rotasi layar di emulator dinonaktifkan. Kemudian, putar perangkat atau emulator ke mode "landscape" (ke kiri ataupun ke kanan).

d. Perhatikan bahwa setelah aktivitas dihancurkan dan dibuat ulang, gambar dessert, jumlah dessert yang terjual, dan total pendapatan akan dipulihkan ke nilai sebelumnya dan nilainya tidak nol.