Tugas 8 PPB

TUGAS 8 PPB

SCROLLABLE IMAGE LIST

Nama: Muhammad Lintang Panjerino

NRP: 5025201045

Kelas: PPB I

Tahun: 2024

Link Github: Tugas 8 - Scrollable Image List

Pada Tugas 8 PPB kali ini, diberikan tugas untuk membuat proyek Scrollable Image List dengan menggunakan Jetpack Compose pada Android Studio. Secara garis besar, aplikasi Scrollable Image List ini adalah sebuah aplikasi yang memuat daftar beberapa card yang berisi gambar dan tulisan yang dapat di-scroll. Proyek ini bertujuan untuk mempelajari lebih dalam tentang konsep Card, Lazy Column, List, Data class, Column, Text, dan Image pada Jetpack Compose. Selain itu, proyek ini juga mencakup implementasi tentang materi Modifier, LocalContext, items, listOf, @StringRes, dan @DrawableRes.

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-affirmations dan pilih branch dengan nama "starter". Kemudian ekstrak file zip tersebut pada folder lokal PC/laptop dan ubah nama folder hasil ekstrak menjadi "Image Scroll". 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 yang akan digunakan sebagai tempat untuk fungsi pembuatan card dan menampilkan daftar card.

Secara keseluruhan, aplikasi Scrollable Image List ini terbagi menjadi 5 tahap. Berikut adalah detail kelima tahap tersebut

1. Membuat data class untuk Affirmation

Pada tahap pertama, buat data class untuk Affirmation. Data class adalah sebuah class yang hanya berisi properti dan dapat juga berisi beberapa metode. Pada aplikasi ini diperlukan data class karena data yang akan digunakan bukan merupakan data yang bertipe primitif, seperti integer atau string, melainkan data berupa gambar dan teks.

i) Langkah pertama di tahap ini adalah membuat package baru dengan nama "model" di dalam package "com/example/affirmations". Pada package "com/example/affirmations" klik kanan > pilih "New" > pilih "Package" > isi nama package dengan "com.example.affirmations.model".

ii) Langkah kedua adalah membuat data class dengan nama "Affirmation" di dalam package "model" yang sudah dibuat. Untuk membuatnya, klik kanan pada package "model" > pilih "New" > pilih "Kotlin Class/File" > pilih "Data Class" > isi nama data class dengan "Affirmation".

iii) Langkah ketiga adalah membuat sebuah data class Affirmation dan membuat dua properti di dalam class tersebut. Kedua properti dideklarasikan menggunakan val karena tidak akan diubah nilainya. Properti pertama adalah stringResourceId dengan tipe data integer dan anotasi @StringRes yang digunakan untuk menampung teks pada card. Properti kedua adalah imageResourceId dengan tipe data integer dan anotasi @DrawableRes yang digunakan untuk menampung gambar pada card.

iv) Langkah keempat adalah membuat data yang berisi list Affirmation. File ini berada di package "data" dengan nama file Datasource.kt. Pada file tersebut terdapat sebuah class Datasource yang berisi sebuah fungsi loadAffirmations. Fungsi ini mengembalikan sekumpulan atau list Affirmation. Di setiap Affirmation akan memanggil data teks dari file strings.xml dan data gambar dari folder drawable.

2. Membuat card untuk Affirmation

Pada tahap kedua, buat fungsi yang bertugas membentuk sebuah card dengan isi gambar dan teks. Buat fungsi dengan nama AffirmationCard dengan parameter Affirmation dan Modifier. Di dalam fungsi, panggil fungsi composable Card dan isi dengan parameter modifier. Fungsi composable Card berfungsi untuk membuat sebuah bentuk kartu yang di dalamnya dapat diisi dengan gambar ataupun teks. Di dalam fungsi Card, panggil fungsi Column supaya daftar kartu akan tersusun secara vertikal. Di dalam fungsi Column panggil fungsi Image dan Text. Fungsi Image akan memanggil gambar dari folder drawable dan fungsi Text akan memanggil teks dari file strings.xml.

3. Melihat preview kartu

Pada tahap ini, buat sebuah fungsi sederhana untuk melihat apakah card sudah terbentuk sesuai yang diinginkan. Buat fungsi private dengan nama AffirmationCardPreview pada bagian bawah file serta beri anotasi @Preview dan @Composable supaya preview dapat dilihat. Panggil fungsi AffirmationCard dan isi argumen dengan memanggil salah satu gambar dan teks yang sesuai, misal untuk card kedua memanggil affirmation2 dan image2. Klik menu "Split" pada kanan atas dan apabila diperlukan klik "Build & Refresh" untuk memperbarui preview. Tampilan preview dapat dilihat di sebelah kanan file.

4. Membuat daftar kartu

Setelah membuat card, tahap selanjutnya adalah membuat daftar dari semua item card. Buat fungsi dengan nama AffirmationList yang memiliki 2 parameter, yaitu List dari objek Affirmation dan Modifier. Di dalam fungsi tersebut, panggil fungsi LazyColumn dengan isi parameter modifier. Di Jetpack Compose, daftar yang dapat di-scroll dapat dibuat menggunakan composable LazyColumn. Perbedaan antara LazyColumn dan Column adalah Column digunakan ketika item yang yang akan ditampilkan tidak banyak karena akan ditampilkan seluruhnya oleh Jetpack Compose, sedangkan LazyColumn dapat menambahkan konten sesuai keperluan, yang menjadikannya cocok untuk daftar panjang, terutama jika panjang daftar tidak diketahui. Selain itu, LazyColumn juga menyediakan scroll secara default, tanpa tambahan kode. Di dalam fungsi LazyColumn, panggil metode items() dengan isi parameter berupa list dari objek Affirmation. Kemudian, buat satu variabel dengan nama "affirmation" yang akan mengiterasi list dari objek Affirmation dan mewakili setiap objek Affirmation. Di setiap objek, panggil fungsi AffirmationCard sehingga tiap 1 objek Affirmation akan membentuk 1 card.

5. Menampilkan semua daftar kartu

Tahap terakhir adalah menampilkan semua daftar kartu di satu aplikasi. Pada fungsi AffirmationsApp, panggil fungsi AffirmationList dan isi parameter affirmationList dengan memanggil fungsi loadAffirmations di class Datasource. Fungsi loadAffirmations akan mengembalikan semua list objek Affirmation yang akan ditampilkan. Lihat hasil akhir dengan klik Run 'app' dan emulator akan menampilkan aplikasi berisi daftar card yang dapat di-scroll.