PPB G - Aplikasi Woof

 

Nama : Muhammad Hafidh Rosyadi

NRP : 5025211013

Kelas  : PPB G

 

Kode : https://github.com/Hfdrsyd/Tugas-PPB/tree/main/Woof

---

🐾 Woof – Aplikasi Android Lucu untuk Pecinta Anjing

Woof adalah aplikasi Android sederhana namun menyenangkan yang dirancang untuk para pecinta anjing. Dibuat menggunakan Jetpack Compose, aplikasi ini menampilkan daftar anjing dengan gaya modern, tema adaptif, dan antarmuka responsif.

Aplikasi ini sangat cocok untuk belajar:

• Menampilkan data dalam daftar menggunakan LazyColumn.

• Menggunakan Scaffold, TopAppBar, dan Card.

• Menerapkan Material Design 3 termasuk tema gelap dan terang.

• Mengelola sumber daya (stringResource, painterResource) secara efisien.

---

🎯 Fitur Utama

• 📸 Foto Anjing Lucu
  Menampilkan gambar anjing dari folder drawable yang dipanggil dengan painterResource.

• 📛 Nama & Umur
  Setiap anjing memiliki informasi nama, umur, dan hobi dengan tata letak vertikal.

• 🌗 Tema Terang & Gelap Otomatis
  Woof mengikuti preferensi sistem Android, mendukung tema terang dan gelap.

• 🎨 Desain Modern & Elegan
  Menggunakan MaterialTheme dengan Typography, ColorScheme, dan Shape kustom.

---

🏗️ Struktur Kode Utama

1. MainActivity.kt

Berfungsi sebagai titik masuk aplikasi dan menerapkan WoofTheme() secara global:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WoofTheme {
                WoofApp()
            }
        }
    }
}

2. WoofApp()

Menangani komposisi antarmuka utama menggunakan Scaffold dan LazyColumn:

@Composable
fun WoofApp() {
    Scaffold(
        topBar = { WoofTopAppBar() }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            items(dogs) { dog ->
                DogItem(dog = dog)
            }
        }
    }
}

3. Dog.kt – Model & Data Dummy

Mendefinisikan model Dog dan sumber data dummy:

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

val dogs = listOf(
    Dog(R.drawable.tuffy, R.string.dog_name_1, R.string.dog_age_1, R.string.dog_hobby_1),
    Dog(R.drawable.bella, R.string.dog_name_2, R.string.dog_age_2, R.string.dog_hobby_2),
    // Tambahkan data lain sesuai kebutuhan
)

Sumber daya (strings.xml) akan digunakan untuk mengisi informasi teks.

---

🎨 File Tema

1. Theme.kt

Mengatur warna, tipografi, dan bentuk global:

@Composable
fun WoofTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = if (useDarkTheme) DarkColorScheme else LightColorScheme

    MaterialTheme(
        colorScheme = colorScheme,
        typography = WoofTypography,
        shapes = WoofShapes,
        content = content
    )
}

2. Color.kt

Berisi skema warna untuk mode terang dan gelap.

val LightColorScheme = lightColorScheme(
    primary = Orange500,
    secondary = Orange200,
    background = Color.White,
    onPrimary = Color.White
)

val DarkColorScheme = darkColorScheme(
    primary = Orange200,
    secondary = Orange500,
    background = Color.Black,
    onPrimary = Color.Black
)

3. Shape.kt

Mendefinisikan bentuk UI seperti sudut membulat:

val WoofShapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large = RoundedCornerShape(12.dp)
)

4. Type.kt

Menerapkan font Montserrat dan Abril Fatface dari res/font/.

val WoofTypography = Typography(
    headlineLarge = TextStyle(
        fontFamily = AbrilFatface,
        fontWeight = FontWeight.Normal,
        fontSize = 30.sp
    ),
    bodyMedium = TextStyle(
        fontFamily = Montserrat,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
)

---

🧩 Komponen UI

WoofTopAppBar()

Top bar aplikasi dengan logo dan nama aplikasi:

@Composable
fun WoofTopAppBar() {
    CenterAlignedTopAppBar(
        title = {
            Text("Woof", style = MaterialTheme.typography.headlineLarge)
        }
    )
}

DogItem(dog: Dog)

Menampilkan satu item anjing dalam Card:

@Composable
fun DogItem(dog: Dog) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = CardDefaults.cardElevation(4.dp)
    ) {
        Row(modifier = Modifier.padding(16.dp)) {
            DogIcon(dog.imageResourceId)
            Spacer(Modifier.width(16.dp))
            DogInformation(dog.name, dog.age, dog.hobbies)
        }
    }
}

DogIcon(imageResId: Int)

Menampilkan gambar anjing:

@Composable
fun DogIcon(@DrawableRes imageResId: Int) {
    Image(
        painter = painterResource(id = imageResId),
        contentDescription = null,
        modifier = Modifier
            .size(64.dp)
            .clip(CircleShape)
    )
}

DogInformation(nameRes: Int, ageRes: Int, hobbiesRes: Int)

Menampilkan informasi anjing secara vertikal:

@Composable
fun DogInformation(nameRes: Int, ageRes: Int, hobbiesRes: Int) {
    Column {
        Text(stringResource(id = nameRes), style = MaterialTheme.typography.headlineSmall)
        Text(stringResource(id = ageRes), style = MaterialTheme.typography.bodyMedium)
        Text(stringResource(id = hobbiesRes), style = MaterialTheme.typography.bodySmall)
    }
}

---

🧪 Preview Composable

Gunakan preview untuk memeriksa tampilan cepat:

@Preview(showBackground = true)
@Composable
fun DogItemPreview() {
    WoofTheme {
        DogItem(dog = dogs[0])
    }
}

---

✅ Kesimpulan

Aplikasi Woof adalah contoh ideal untuk:

• 🐶 Menampilkan data daftar secara visual.

• 🎨 Menerapkan Material Design 3 dengan tema gelap/terang.

• 🧱 Membangun UI modular dan bisa dipreview.

• 📚 Belajar arsitektur dasar Jetpack Compose.