Tugas PPB Pertemuan 7

 Aplikasi Woof


Nama : Muhammad Ahyun Irsyada
NRP : 5025211251

Deskripsi singkat 

Woof adalah aplikasi sederhana yang dirancang untuk membantu pengguna dalam mengenal berbagai jenis anjing dengan cara yang menyenangkan dan interaktif. Aplikasi ini menawarkan beberapa fitur utama:

  1. Galeri Anjing: Pengguna dapat melihat berbagai foto anjing dari berbagai ras. Setiap gambar dilengkapi dengan informasi singkat tentang ras tersebut, termasuk karakteristik dan fakta menarik.

  2. Profil Anjing: Setiap anjing dalam aplikasi memiliki profil yang berisi informasi lebih mendetail tentang rasnya, kebiasaan, kebutuhan perawatan, dan temperamen.

  3. Fitur Pencarian: Pengguna dapat mencari anjing berdasarkan nama ras, ukuran, atau karakteristik tertentu, memudahkan mereka menemukan anjing yang sesuai dengan preferensi mereka.

  4. Favorit: Pengguna dapat menandai anjing favorit mereka untuk akses cepat di kemudian hari.

  5. Tips Perawatan: Aplikasi ini juga menyediakan tips perawatan anjing yang berguna bagi pemilik anjing atau mereka yang berencana untuk memelihara anjing.

Woof adalah alat yang sempurna bagi pecinta anjing dan mereka yang ingin belajar lebih banyak tentang berbagai ras anjing, menyediakan informasi yang bermanfaat dalam antarmuka yang ramah pengguna.



Penjelasan Kode:

  1. Annotation @Composable:

    • Menandakan bahwa fungsi ini adalah Composable, yang berarti fungsi ini dapat digunakan untuk membangun UI di Jetpack Compose.

  2. Fungsi WoofApp:

    • Ini adalah fungsi utama yang mendefinisikan tampilan aplikasi Woof.

  3. Scaffold:

    • Scaffold adalah layout dasar yang menyediakan struktur umum untuk aplikasi, seperti top bar, bottom bar, dan body content.
    • topBar parameter mendefinisikan bagian atas aplikasi, di sini menggunakan fungsi WoofTopBarApp() untuk menampilkan top bar.

  4. LazyColumn:

    • LazyColumn adalah komponen layout yang digunakan untuk menampilkan daftar item yang dapat digulir secara vertikal. Ini adalah versi Compose dari RecyclerView di Android klasik.
    • contentPadding diatur menggunakan parameter it, yang diberikan oleh Scaffold untuk memberikan padding ke konten utama.

  5. items(dogs):

    • items adalah fungsi dalam LazyColumn yang digunakan untuk menampilkan daftar elemen.
    • dogs adalah koleksi (list) dari objek Dog yang akan diiterasi oleh LazyColumn.

  6. DogItem:

    • Di dalam items, untuk setiap objek Dog dalam dogs, fungsi DogItem dipanggil.
    • dog = dog: Setiap item dog diteruskan ke fungsi DogItem.
    • modifier = Modifier.padding(dimensionResource(8dp)): Modifier digunakan untuk memberikan padding pada setiap item, dengan nilai padding yang diambil dari resource dimension.

Penjelasan Kode:

  1. Annotation @Composable:

    • Menandakan bahwa fungsi ini adalah Composable, yang berarti fungsi ini dapat digunakan untuk membangun UI di Jetpack Compose.

  2. Fungsi DogItem:

    • Fungsi ini bertanggung jawab untuk menampilkan informasi tentang satu objek Dog dalam aplikasi.

  3. Parameter dog:

    • Objek Dog yang diteruskan ke fungsi ini. Objek ini mungkin memiliki properti seperti name, age, dan imageResourceId.

  4. Parameter modifier:

    • Modifier adalah objek yang digunakan untuk mengubah atau menyesuaikan tampilan dan perilaku komponen UI. Di sini, modifier memiliki nilai default Modifier.

  5. Card:

    • Card adalah komponen UI yang menyediakan kontainer dengan gaya kartu. Modifier yang diteruskan ke Card digunakan untuk mengatur tampilan kartu tersebut.

  6. Row:

    • Row adalah komponen layout yang mengatur elemen-elemen anaknya secara horizontal. Dalam Row, elemen-elemen diatur dari kiri ke kanan.
    • Modifier diatur untuk Row agar memenuhi lebar penuh (fillMaxWidth()) dan menambahkan padding (padding(dimensionResource(id = R.dimen.padding_8dp))).

  7. DogIcon:

    • DogIcon adalah fungsi Composable lain yang menampilkan gambar anjing. Gambar diidentifikasi oleh dog.imageResourceId.

  8. DogInformation:

    • DogInformation adalah fungsi Composable lain yang menampilkan nama dan usia anjing. Nama dan usia diambil dari dog.name dan dog.age.




Penjelasan:

  1. Anotasi @Composable:

    • Menunjukkan bahwa fungsi ini adalah fungsi Composable, digunakan untuk membangun UI di Jetpack Compose.

  2. Fungsi DogIcon:

    • Bertanggung jawab untuk menampilkan gambar ikon anjing.

  3. Parameter @DrawableRes dogIcon: Int:

    • Diannotasi dengan @DrawableRes untuk menunjukkan bahwa ia mengharapkan ID sumber daya gambar sebagai input.

  4. Parameter modifier: Modifier = Modifier:

    • Parameter modifier memungkinkan penyesuaian penampilan dan perilaku dari komponen Image Composable. Ini memiliki nilai default Modifier.

  5. Image Composable:

    • Image digunakan untuk menampilkan gambar ikon anjing.
    • Modifiers:
      • .size(dimensionResource(id = R.dimen.size_64dp)): Mengatur ukuran gambar menggunakan sumber daya dimensi yang didefinisikan dalam dimens.xml.
      • .padding(dimensionResource(id = R.dimen.padding_8dp)): Menambahkan padding di sekitar gambar menggunakan sumber daya dimensi.
      • .clip(MaterialTheme.shapes.small): Memotong gambar dengan bentuk kecil yang didefinisikan dalam tema Material saat ini.

  6. ContentScale ContentScale.Crop:

    • Menentukan bagaimana konten harus diperbesar atau dipotong untuk cocok dalam batas gambar.

  7. Painter painterResource(dogIcon):

    • Memuat sumber daya gambar (dogIcon) dan menyediakannya kepada Image Composable untuk dirender.

  8. ContentDescription contentDescription = null:

    • Karena gambar bersifat dekoratif dan tidak menyampaikan informasi penting untuk tujuan aksesibilitas, contentDescription-nya diatur menjadi null. Hal ini memberitahukan layanan aksesibilitas untuk melewati elemen ini selama navigasi.


Penjelasan:

  1. Anotasi @Composable:

    • Menandakan bahwa fungsi ini adalah fungsi Composable, yang digunakan untuk membangun UI dalam Jetpack Compose.

  2. Fungsi WoofTopBarApp:

    • Berfungsi untuk menampilkan top app bar (bilah aplikasi atas) dengan judul "Woof".

  3. Parameter modifier: Modifier = Modifier:

    • Modifier parameter memungkinkan penyesuaian tampilan komponen sesuai kebutuhan.

  4. CenterAligned:

    • Wrapper composable yang memusatkan kontennya secara horizontal di tengah layar.

  5. TopAppBar:

    • Komponen yang menyediakan bilah aplikasi atas dengan judul dan aksi terkait.

  6. Row:

    • Komponen layout yang menyusun anak-anaknya secara horizontal.

  7. Image:

    • Menampilkan gambar logo "Woof".
    • Modifier:
      • .size(dimensionResource(id = R.dimen.size_64dp)): Mengatur ukuran gambar dengan menggunakan sumber daya dimensi yang didefinisikan di dimens.xml.
      • .padding(dimensionResource(id = R.dimen.padding_8dp)): Menambahkan padding di sekitar gambar menggunakan sumber daya dimensi.

  8. Text:

    • Menampilkan teks "Woof" sebagai judul.
    • text = stringResource(id = R.string.app_name): Mengambil string dari resource dengan ID yang sesuai.
    • style = MaterialTheme.typography.h4: Mengatur gaya teks menggunakan tema Material dengan gaya teks yang lebih besar (h4).




Penjelasan:

  1. Anotasi @Composable:

    • Menandakan bahwa fungsi ini adalah fungsi Composable, yang digunakan untuk membangun UI dalam Jetpack Compose.

  2. Fungsi DogInformation:

    • Berfungsi untuk menampilkan informasi tentang anjing, seperti nama dan usia.

  3. Parameter @StringRes dogName: Int:

    • Anotasi @StringRes menandakan bahwa parameter ini harus menjadi ID sumber daya string.

  4. Parameter dogAge: Int:

    • Menyimpan nilai usia anjing yang akan ditampilkan.

  5. Parameter modifier: Modifier = Modifier:

    • Modifier digunakan untuk menyesuaikan tampilan komponen, dengan nilai default Modifier.

  6. Column:

    • Komponen layout yang menyusun anak-anaknya secara vertikal.

  7. Text:

    • Menampilkan teks nama anjing dengan menggunakan string resource yang diidentifikasi oleh dogName.
    • style = MaterialTheme.typography.h5: Mengatur gaya teks menggunakan tema Material dengan gaya teks medium.

  8. Padding:

    • Modifier.padding(top = dimensionResource(id = R.dimen.padding_8dp)): Menambahkan padding di bagian atas teks nama anjing menggunakan sumber daya dimensi yang didefinisikan di dimens.xml.

  9. Text (lainnya):

    • Menampilkan teks usia anjing dengan format "x years old", di mana dogAge adalah nilai yang diteruskan.
    • stringResource(id = R.string.dog_age_format, dogAge): Menggunakan string resource dengan ID dog_age_format dari strings.xml yang menggabungkan usia anjing.

  10. Styling:

    • MaterialTheme.typography.body1 digunakan untuk mengatur gaya teks untuk teks usia anjing.

Hasil : 







Komentar

Posting Komentar

Postingan populer dari blog ini

ETS PPL-A

 EVALUASI TENGAH SEMESTER PEMPROGRAMAN PERANGKAT LUNAK  Nama      : Muhammad Ahyun Irsyada NRP        : 5025211251 Soal 1. Apakah perbedaan model analysis dengan model desain? 2. Jelaskan output proses Desain Aplikasi? 3. Visualisasikan Deskripsi dari aplikasi parkir berikut (Studi Kasus) 4. Buat HLD dan LLD dari rancangan desain aplikasi parkir (Studi Kasus) 5. Gambarkan Arsitektur dari Aplikasi Parkir yang akan dibangun (Studi Kasus) 6. Dokumentasikan dan Demokan dalam Video Youtube dari rancangan aplikasi yang telah dibangun Jawaban : 1.  Berikut adalah perbedaan antara model analysis dengan model desain :                Model Analysis :   Model analisis berfokus pada pemahaman dan interpretasi masalah atau situasi yang ada. Ini melibatkan identifikasi komponen-komponen penting dari sistem atau fenomena yang dipelajari, serta hubungan antara komponen-komponen tersebut. Tujuan...
Baca selengkapnya

Tugas PPL Pertemuan 11

Gambar
 ESTIMASI KAPASITAS SYSTEM Nama : Muhammad Ahyun Irsyada NRP : 5025211251 Kelas : A Estimasi Kapasitas WhatsApp Estimasi kapasitas dalam desain sistem melibatkan prediksi atau penentuan beban maksimum yang dapat ditangani oleh suatu sistem dalam parameter operasionalnya. Proses ini mencakup analisis aspek-aspek seperti kemampuan perangkat keras, kinerja perangkat lunak, lebar pita jaringan, dan pola perilaku pengguna. Tujuannya adalah untuk memastikan sistem dapat mengakomodasi beban kerja yang diharapkan tanpa mengalami penurunan kinerja, hambatan, atau kegagalan. Estimasi kapasitas sangat penting untuk merancang dan mengembangkan sistem yang efektif, sehingga dapat memenuhi permintaan saat ini dan di masa mendatang, baik untuk situs web, infrastruktur jaringan, atau sistem kompleks lainnya. Menjelajahi Sistem WhatsApp Pernahkah Anda bertanya-tanya bagaimana aplikasi pesan populer ini bekerja di belakang layar? Artikel ini akan menjadi panduan Anda untuk memahami desain sistem Wha...
Baca selengkapnya

Tugas 1 PPB-B

Gambar
 Tugas 1 PPB-B  Redesign Aplikasi Nama      : Muhammad Ahyun Irsyada NRP         : 5025211251 Aplikasi : MyITS Mahasiswa 1. Deskripsi Aplikasi      MyITS Mahasiswa adalah aplikasi mobile yang dirancang khusus untuk mahasiswa Institut Teknologi Sepuluh Nopember (ITS) Surabaya. Aplikasi ini menyediakan berbagai fitur yang memudahkan mahasiswa dalam mengakses informasi akademik, administratif, dan aktivitas kampus. Beberapa fitur utamanya termasuk jadwal perkuliahan, pengumuman kampus, informasi akademik, penilaian, serta fitur pengingat untuk deadline dan tugas. MyITS Mahasiswa juga memungkinkan mahasiswa untuk mengakses perpustakaan digital, informasi beasiswa, dan fasilitas lainnya yang disediakan oleh kampus. Dengan demikian, aplikasi ini menjadi alat yang berguna bagi mahasiswa untuk mengelola kegiatan akademik dan non-akademik mereka secara efisien. 2. Fitur Aplikasi   Beranda    Fitur Kemajuan ...
Baca selengkapnya