Tugas 8 PPB G 2025 - Farhan Dwi Putra 5025211093

Nama : Farhan Dwi Putra

NRP : 5025211093

Kelas : Pemrograman Perangkat Bergerak (G)

Tugas Pertemuan 8

Deskripsi Tugas

Pada pertemuan ke-8, saya diminta mengembangkan sebuah aplikasi Android sederhana yang menerapkan image scroll menggunakan Jetpack Compose. Aplikasi ini diberi nama Affirmations, yang berisi kumpulan afirmasi positif yang ditampilkan secara scrollable, lengkap dengan gambar pendukung untuk memperkuat pesan dari setiap afirmasi.

Tujuan dari pembuatan aplikasi ini adalah untuk memahami cara membangun daftar data dengan elemen visual (gambar dan teks) dalam Compose, sekaligus mempraktikkan pemisahan struktur kode ke dalam model, data, dan tampilan (UI).

---

Struktur dan Penjelasan Komponen Kode

Aplikasi dibangun berdasarkan arsitektur modular yang terbagi menjadi tiga bagian utama: model, data, dan UI. Berikut penjelasannya:

---

1. File Affirmation.kt (Model)

File ini mendefinisikan struktur data dari satu item afirmasi. Setiap item memiliki dua properti utama:

data class Affirmation(
    val stringResourceId: Int,
    val imageResourceId: Int
)

• stringResourceId: Menyimpan ID dari string resource (berisi teks afirmasi).

• imageResourceId: Menyimpan ID dari gambar yang akan ditampilkan bersama afirmasi.

---

2. File Datasource.kt (Data)

Bagian ini bertugas menyediakan daftar afirmasi secara statis.

class Datasource {
    fun loadAffirmations(): List<Affirmation> {
        return listOf(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            // ... dan seterusnya
        )
    }
}

Data dimuat dalam bentuk list berisi objek Affirmation yang mengambil data dari file resource (baik string maupun drawable).

---

3. File MainActivity.kt (UI Utama)

File ini merupakan titik masuk aplikasi, dan berfungsi untuk menampilkan konten utama aplikasi dalam tema yang sudah ditentukan.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AffirmationsTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    AffirmationsApp()
                }
            }
        }
    }
}

---

4. Fungsi AffirmationsApp()

Merupakan fungsi utama yang menjalankan UI. Di sini data dari Datasource diambil dan diteruskan ke AffirmationList() untuk ditampilkan.

@Composable
fun AffirmationsApp() {
    val affirmationList = Datasource().loadAffirmations()
    AffirmationList(affirmationList)
}

---

5. Fungsi AffirmationList()

Menampilkan semua data afirmasi dalam bentuk scrollable list menggunakan LazyColumn.

@Composable
fun AffirmationList(affirmationList: List<Affirmation>) {
    LazyColumn {
        items(affirmationList) { affirmation ->
            AffirmationCard(affirmation, modifier = Modifier.padding(8.dp))
        }
    }
}

---

6. Fungsi AffirmationCard()

Menampilkan satu item afirmasi yang terdiri dari gambar dan teks dalam tampilan Card.

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {
    Card(modifier = modifier) {
        Column {
            Image(
                painter = painterResource(id = affirmation.imageResourceId),
                contentDescription = stringResource(id = affirmation.stringResourceId),
                modifier = Modifier
                    .fillMaxWidth()
                    .height(194.dp),
                contentScale = ContentScale.Crop
            )
            Text(
                text = LocalContext.current.getString(affirmation.stringResourceId),
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.headlineSmall
            )
        }
    }
}

---

7. Fungsi AffirmationCardPreview()

Preview tampilan satu kartu afirmasi secara langsung di editor Android Studio, tanpa perlu menjalankan emulator.

@Preview
@Composable
fun AffirmationCardPreview() {
    AffirmationCard(affirmation = Affirmation(R.string.affirmation1, R.drawable.image1))
}

---

Hasil

Source Code : Github