Tugas 9 - PPB G Aplikasi Woof

 Muhammad Fahmi Syahputra 

5025221302 - PPB (G)

Link GitHub : https://github.com/fahmisyahputra/app-woof

Pada tugas kali ini, saya membuat sebuah aplikasi Woof dengan menerapkan Jetpack Compose dan bahasa pemrograman Kotlin. Aplikasi ini adalah katalog anjing yang menampilkan daftar anjing beserta detail nama dan usia dalam bentuk card.

File 1: MainActivity.kt

File ini adalah entry point utama aplikasi. Di dalam onCreate(), kita menggunakan setContent {} untuk mengatur UI berbasis Jetpack Compose.

Aplikasi dibungkus dengan WoofTheme {} agar seluruh tampilan konsisten mengikuti tema yang telah disediakan (baik untuk light mode maupun dark mode). Di dalamnya, fungsi WoofApp() dipanggil untuk menampilkan semua konten utama.


Fungsi WoofApp()

Fungsi ini memanfaatkan Scaffold sebagai layout utama, yang menyediakan Top App Bar dan isi konten di bawahnya.

  • Di bagian atas ada WoofTopAppBar() (menampilkan logo dan nama aplikasi).

  • Di bagian kontennya, ditampilkan list anjing menggunakan LazyColumn dan data dari dogs (berasal dari file Dog.kt).

  • Setiap item ditampilkan menggunakan DogItem().



Fungsi DogItem()

Menampilkan 1 kartu (Card) berisi:

  • Gambar anjing (dipanggil dari fungsi DogIcon)

  • Nama dan umur anjing (dipanggil dari DogInformation)

Layout-nya menggunakan Row (horizontal), sehingga gambar dan teks ada di satu baris.



Fungsi WoofTopAppBar()

Top app bar menampilkan logo ic_woof_logo dan teks "Woof" di tengah (CenterAlignedTopAppBar). Komponen di dalamnya ditata dengan Row agar gambar dan teks sejajar horizontal.

Ukuran gambar dan padding diatur pakai dimensionResource(...), yaitu nilai dimensi yang disimpan di res/values/dimens.xml agar konsisten di seluruh aplikasi.



Fungsi DogIcon() dan DogInformation()

DogIcon()

  • Menampilkan gambar anjing berdasarkan ID drawable (@DrawableRes).

  • Ukurannya disesuaikan dan dipotong (clip(...)) supaya tampilannya lebih estetik.

DogInformation()

  • Menampilkan nama anjing (@StringRes) dan usia anjing (dalam tahun).

  • Teks usia diambil dari string resource yang pakai placeholder: stringResource(R.string.years_old, age)


Fungsi WoofPreview() & WoofDarkThemePreview()

Ini dua fungsi preview Compose:

  • WoofPreview() menampilkan tampilan aplikasi pada light theme

  • WoofDarkThemePreview() menampilkan pada dark theme

Keduanya dibungkus dalam WoofTheme {} agar sesuai gaya aslinya, dan hanya aktif di panel Preview Design di Android Studio. Gak akan tampil di aplikasi saat dijalankan.




File 2: Dog.kt

File ini berisi:

  • Data class Dog: representasi tiap anjing dengan:

    • imageResourceId → gambar anjing (drawable)

    • name → nama anjing (string resource)

    • age → usia

    • hobbies → hobi anjing (string resource, belum digunakan di UI)

  • List dogs: data dummy berisi 9 anjing. Data ini dipakai oleh WoofApp() untuk menampilkan semua anjing di layar.

Desain & Resources

  • Semua dimensi seperti padding dan ukuran gambar diatur lewat dimensionResource(R.dimen.xxx) agar bisa lebih fleksibel jika ingin diubah semua sekaligus.

  • String dan drawable resource digunakan agar aplikasi bisa lebih mudah diterjemahkan atau dimodifikasi.


Hasil aplikasi :










Comments

Post a Comment

Popular posts from this blog

Tugas 2 PPB G - Membuat Aplikasi "Hello Android" dengan Jetpack Compose

Image
Muhammad Fahmi Syahputra  5025221302 - PPB (G) Pendahuluan Kali ini akan membahas cara membuat aplikasi Android sederhana dengan memanfaatkan Jetpack Compose. Jetpack Compose adalah framework deklaratif modern untuk membangun UI di Android. Dengan Compose, kita bisa membuat antarmuka pengguna secara langsung menggunakan bahasa Kotlin , tanpa perlu menggunakan XML. Disini kita akan membuat aplikasi sederhana yang menampilkan teks "Hello, Android!" menggunakan Jetpack Compose . Dan kita akan membahas tiga bagian utama dalam kode, yaitu: MainActivity – Entry point aplikasi. Greeting – Fungsi untuk menampilkan teks. GreetingPreview – Pratinjau/Preview UI nya tanpa menjalankan aplikasi. 1. MainActivity – Entry Point Aplikasi MainActivity adalah entry point aplikasi Android yang merupakan subclass dari ComponentActivity, yang mendukung Jetpack Compose. Disini terdapat beberapa fungsi seperti :  onCreate(savedInstanceState: Bundle?) Fungsi ini dipanggil ketika aplikasi pertama k...
Read more

Final Project PPB G

Image
Final Project PPB (G) 👤 Anggota Kelompok: 5025221302 - Muhammad Fahmi Syahputra 5025221315 - Fairuz Fuadi 1. Judul Proyek ClassMate: Aplikasi Manajemen Jadwal, Tugas, dan Catatan Mahasiswa 2. Deskripsi Singkat Proyek Tema: Produktivitas & Manajemen Akademik Tujuan: Membantu mahasiswa dalam mengelola jadwal perkuliahan, tugas, dan catatan penting secara terpusat dan terstruktur. Target Pengguna: Mahasiswa tingkat sarjana atau diploma yang ingin merapikan seluruh kegiatan akademiknya dalam satu aplikasi mobile yang ringan dan sederhana. ClassMate adalah aplikasi mobile berbasis Android yang dirancang untuk membantu mahasiswa dalam mengelola aktivitas perkuliahan sehari-hari. Aplikasi ini menyediakan empat layanan utama: Manajemen Jadwal Kuliah Manajemen Tugas Mahasiswa Catatan Pribadi  Profil Pengguna Figur utama dari aplikasi ini adalah seorang mahasiswa yang ingin tetap terorganisir dan produktif selama masa kuliah. Dengan tampilan yang simple dan modern, ClassMate memban...
Read more