PPB - Pertemuan 09 - Tugas 01

Nama: Hammuda Arsyad

NRP: 5025211146

Kelas: PPB G

Sourcecode: https://github.com/H-mD/woof-app

---

🐾 Woof: Aplikasi Android Lucu untuk Pecinta Anjing

Apa Itu Woof?

Woof adalah aplikasi Android sederhana namun menarik yang menampilkan daftar anjing lengkap dengan nama, usia, dan foto mereka. Aplikasi ini dibangun menggunakan Jetpack Compose, toolkit modern untuk membangun antarmuka pengguna Android dengan cara deklaratif dan efisien.

---

Fitur Utama

• 📸 Foto Anjing: Setiap anjing ditampilkan dengan foto lucu dan menggemaskan.

• 📛 Nama & Umur: Informasi dasar seperti nama dan umur ditampilkan dengan desain menarik.

• 🌙 Tema Terang & Gelap: Dukungan penuh untuk light dan dark mode sesuai dengan preferensi sistem pengguna.

• 🎨 Desain Modern: Memanfaatkan Material3 dengan typography dan bentuk khusus agar tampak profesional.

---

Struktur Kode

1. MainActivity.kt

Merupakan titik masuk utama aplikasi yang memanggil fungsi WoofApp(). Di sini, tema WoofTheme diterapkan dan Scaffold digunakan untuk menyusun layout utama:

Scaffold(
    topBar = { WoofTopAppBar() }
) {
    LazyColumn(contentPadding = it) {
        items(dogs) { dog ->
            DogItem(dog = dog)
        }
    }
}

2. Dog.kt

File ini mendefinisikan data class Dog dan daftar data dummy (dogs) yang akan ditampilkan:

data class Dog(
    val imageResourceId: Int,
    val name: Int,
    val age: Int,
    val hobbies: Int
)

3. Tema (Theme.kt, Color.kt, Shape.kt, Type.kt)

Aplikasi ini mengimplementasikan Material 3 dengan skema warna terang dan gelap yang dapat disesuaikan:

• Color.kt: Skema warna kustom.

• Shape.kt: Sudut membulat yang memberikan kesan modern.

• Type.kt: Typography menggunakan font Abril Fatface dan Montserrat untuk tampilan profesional.

• Theme.kt: Mengatur MaterialTheme dan menerapkan warna serta tipografi yang sesuai dengan mode sistem.

---

Tampilan Aplikasi

• Top Bar menampilkan logo dan nama aplikasi.

• Daftar Anjing tersusun dalam Card, lengkap dengan:

  • Gambar anjing.

  • Nama dan umur yang ditampilkan secara vertikal dengan gaya tipografi yang elegan.

---

Cuplikan Kode UI

Menampilkan gambar dan info anjing:

@Composable
fun DogItem(dog: Dog) {
    Card {
        Row {
            DogIcon(dog.imageResourceId)
            DogInformation(dog.name, dog.age)
        }
    }
}

---

📷Dokumentasi