Pemrograman Perangkat Beregerak - Tugas Pertemuan 2 - Timothy Hosia

 

Aplikasi Sederhana Jetpack Compose

Nama: Timothy Hosia Budianto
NRP: 5025211098
Kelas: PPB - A

Pendahuluan

Pada tugas ini, saya mengembangkan sebuah aplikasi sederhana menggunakan Jetpack Compose. Aplikasi ini dirancang untuk memperkenalkan dasar-dasar pembuatan antarmuka pengguna secara deklaratif dengan memanfaatkan komponen-komponen seperti Button, Card, dan LazyColumn. Penerapan konsep state management seperti rememberSaveable dan animasi yang halus melalui animateContentSize() memungkinkan tampilan yang responsif dan menarik. Pustaka yang digunakan mengacu pada Jetpack Compose Codelabs untuk memastikan standar penerapan yang tepat.

---

Desain dan Alur Kerja Aplikasi

Aplikasi ini memiliki dua tampilan utama, yang masing-masing mengilustrasikan konsep dasar:

1. Onboarding Screen:
   Tampilan pertama yang menyambut pengguna dengan pesan sapaan dan tombol "Continue". Ketika tombol ditekan, pengguna dialihkan ke tampilan utama aplikasi.

2. Daftar Item dengan LazyColumn:
   Setelah menyelesaikan proses onboarding, aplikasi menampilkan daftar item yang dibuat secara dinamis menggunakan LazyColumn.

   • Setiap item di-render dalam sebuah kartu (Card) dengan latar belakang warna yang disesuaikan melalui MaterialTheme.
   • Fungsi Greeting() menampilkan teks sapaan dan nama, sementara fungsi CardContent() menyediakan animasi untuk memperluas atau memperkecil tampilan kartu.

---

Penjelasan Kode dan Fitur Utama

Penggunaan LazyColumn dan Card

Penggunaan LazyColumn memungkinkan aplikasi untuk menampilkan ribuan item tanpa mengurangi performa, karena hanya komponen yang terlihat di layar yang dirender. Komponen Card pada setiap item menampung:

• Teks Sapaan: Menampilkan kata "Hello" serta nomor urut yang merepresentasikan item.
• Fitur Ekspansi: Dengan memanfaatkan state expanded dan fungsi animateContentSize(), setiap kartu dapat diperbesar untuk menampilkan informasi tambahan, serta diperkecil kembali.

Penerapan Animasi

Animasi dipandu oleh spring() dengan parameter dampingRatio dan stiffness yang sudah diatur agar transisi antar status berjalan dengan natural. Selain itu, perbedaan ikon pada tombol ekspansi (antara ExpandMore dan ExpandLess) memberikan umpan balik visual kepada pengguna terkait interaksi yang terjadi.

Integrasi State Management

Penggunaan rememberSaveable memastikan bahwa status tampilan (contoh: apakah kartu sedang diperluas atau tidak) dipertahankan meskipun terjadi perubahan konfigurasi, seperti rotasi layar. Ini merupakan salah satu keunggulan Jetpack Compose dibandingkan cara tradisional yang lebih rentan kehilangan state.

Source Code

Link Github : github