TUGAS 6 - Create Woof Application

Nama: Rule Lulu Damara

NRP: 5025211050

Kelas: PPB B

Create Woof Application

1. Deskripsi

Jawab:

Aplikasi Woof dirancang dengan prinsip Desain Material dari Google untuk menampilkan daftar anjing secara teratur. Setiap entri daftar mencakup gambar, nama, dan umur anjing. App Bar di bagian atas menyajikan logo dan nama aplikasi untuk identitas visual yang konsisten. Aplikasi ini menggunakan elemen Desain Material seperti Card untuk item daftar, Typography untuk gaya teks, dan Shapes untuk tampilan gambar, menciptakan pengalaman pengguna modern dan menarik. Menggunakan Scaffold sebagai struktur dasar, aplikasi ini mengatur tata letaknya untuk memastikan responsivitas dan keintuitifan di berbagai perangkat.

 2. Implementations

Langkah-Langkah Memulai Proyek Woof di Android Studio

1. Membuka Kode Awal di Android Studio:
• Buka Android Studio.
• Buka proyek Woof yang telah disediakan.
2. Membuka dan Memahami File Dog.kt:
• Arahkan ke com.example.woof > data > Dog.kt.
• File ini berisi data class Dog yang digunakan untuk mewakili informasi anjing seperti foto, nama, usia, dan hobi.
• Perhatikan juga daftar anjing yang disediakan di dalam file ini, karena data ini akan digunakan di aplikasi.
3. Meninjau Aset Gambar:
• Buka folder res > drawable.
• Periksa semua aset gambar yang disertakan dalam proyek, termasuk ikon aplikasi, gambar anjing, dan ikon lainnya.
4. Meninjau File strings.xml:
• Buka folder res > values > strings.xml.
• File ini berisi string yang digunakan dalam aplikasi, termasuk nama aplikasi, nama anjing, deskripsi, dan lainnya.
5. Meninjau MainActivity.kt:
• Buka file MainActivity.kt.
• File ini berisi kode untuk membuat daftar sederhana yang menampilkan foto, nama, dan usia anjing.
• Perhatikan beberapa composable utama:
• WoofApp(): Berisi LazyColumn yang menampilkan DogItem.
• DogItem(): Berisi Row yang menampilkan foto anjing dan informasi tentangnya.
• DogIcon(): Menampilkan foto anjing.
• DogInformation(): Menampilkan nama dan usia anjing.
• WoofPreview(): Memungkinkan Anda melihat pratinjau aplikasi di panel Design.
6. Memastikan Emulator/Perangkat Bertema Terang:
• Buka aplikasi Setelan di perangkat/emulator Anda.
• Cari opsi Tema gelap.
• Pastikan Tema gelap tidak aktif (nonaktifkan jika aktif).
7. Menjalankan Kode Awal:
• Jalankan aplikasi di emulator atau perangkat fisik.
• Lihat daftar yang menampilkan anjing beserta foto, nama, dan usianya.
• Perhatikan bahwa meskipun aplikasi sudah berfungsi, tampilannya masih perlu diperbaiki untuk terlihat lebih menarik.

 Kemudian berikut merupakan kode yang telah dimodifikasi :

1. Kemudian berikut merupakan kode yang telah dimodifikasi :
   1. Penggunaan Scaffold dan Penambahan App Bar:

   

   • Scaffold:
     • Scaffold adalah composable dari Jetpack Compose yang menyediakan struktur tata letak dasar aplikasi dengan slot untuk elemen-elemen umum seperti topBar, bottomBar, floatingActionButton, dll. Ini membantu dalam mengatur tata letak aplikasi dengan cara yang konsisten.
     • topBar di sini diisi dengan WoofTopBarApp, yang merupakan composable baru yang ditambahkan untuk menampilkan App Bar.
   • LazyColumn dengan contentPadding:
     • LazyColumn di dalam Scaffold diberikan contentPadding yang berasal dari lambda it. Ini memastikan bahwa konten daftar tidak tertutup oleh elemen-elemen dari Scaffold seperti topBar.

          2. Penambahan Card untuk Item Daftar:
   

         

   

   
   

   • Card:
     • Card adalah composable yang digunakan untuk menampilkan item dalam bentuk kartu dengan efek elevasi dan batas yang memberikan tampilan yang lebih menarik dan terstruktur.
     • Di sini, Card membungkus seluruh konten DogItem, memberikan tampilan yang lebih baik pada item daftar.
   1. Penambahan clip dan ContentScale pada Gambar:
      
   
   
   • clip:
     • clip digunakan untuk memotong gambar dengan bentuk tertentu. Di sini, gambar dipotong dengan bentuk kecil dari tema material menggunakan MaterialTheme.shapes.small.
   • ContentScale:
     • contentScale diatur ke ContentScale.Crop yang memastikan bahwa gambar di-crop agar sesuai dengan ukuran yang ditentukan, mengisi seluruh ruang yang tersedia dan memotong bagian yang berlebih.
   2. Penambahan WoofTopBarApp:

    

   

   
   

   
   

   • CenterAlignedTopAppBar:

     • CenterAlignedTopAppBar adalah composable dari Material 3 yang menampilkan App Bar dengan judul yang disejajarkan di tengah.

   • Row:

     • Di dalam CenterAlignedTopAppBar, sebuah Row digunakan untuk menampilkan logo aplikasi dan nama aplikasi secara horizontal.
     • verticalAlignment = Alignment.CenterVertically memastikan bahwa elemen-elemen dalam Row disejajarkan secara vertikal di tengah.

   • Image:

     • Menampilkan logo aplikasi menggunakan painterResource(R.drawable.ic_woof_logo).

   • Text:

     • Menampilkan nama aplikasi menggunakan stringResource(R.string.app_name) dan gaya teks yang diatur menggunakan MaterialTheme.typography.displayLarge.
   1. Penggunaan MaterialTheme.typography pada DogInformation:

   

   • Text dengan MaterialTheme.typography:
     • MaterialTheme.typography.displayMedium: Digunakan untuk gaya teks nama anjing, memberikan tampilan yang lebih besar dan mencolok.
     • MaterialTheme.typography.bodyLarge: Digunakan untuk gaya teks umur anjing, memberikan tampilan teks yang lebih besar dan mudah dibaca.
   Berikut ini merupakan hasil modifikasi yang telah dilakukan :

   4. Berikut merupakan tampilan dari kode awal ketika dijalankan :

   

Github : 

https://github.com/RuleLuluDamara/woof-app