Tugas 6 PPB - Woof App

Nama : I Gusti Ngurah Ervan Juli Ardana

NRP : 5025211205

Kelas : Pemrograman Perangkat Bergerak B

Tahun : 2024

Pada pertemuan kelas Pemrograman Perangkat Bergerak B kali ini, kami diperkenalkan dengan pengenalan Woof Application pada  android studio. Pada pertemuan ini, saya akan  akan membuat sebuah aplikasi bernama woof application

Woof Application

• Deskripsi Aplikasi

Aplikasi "Woof" adalah platform yang menyediakan berbagai fitur untuk membantu pemilik anjing dalam mengelola perawatan, interaksi sosial, pelatihan, pencarian layanan, dan adopsi. Dengan mengintegrasikan jadwal perawatan, grup diskusi, tutorial pelatihan, pencarian layanan lokal, dan fasilitas adopsi, Woof bertujuan menjadi aplikasi tunggal bagi para pecinta hewan peliharaan untuk mengelola dan berinteraksi dalam komunitas mereka.

• Langkah Pembuatan Aplikasi

1. Buatlah Empty Activity pada android studio

2. Buka Dog.kt pada com.example.xx / data: File ini berisi kelas data Dog yang digunakan untuk mewakili informasi anjing

3. Buka Folder drawable: Direktori ini berisi semua aset gambar yang dibutuhkan untuk aplikasi "Woof". berikut merupakan beberapa asset yang saya gunakan : 

4. Buka strings.xml: File ini berisi string yang digunakan dalam aplikasi ubahlah data strings.xml sebagai berikut:

<!--

 ~ Copyright (C) 2023 The Android Open Source Project.

 ~

 ~ Licensed under the Apache License, Version 2.0 (the "License");

 ~ you may not use this file except in compliance with the License.

 ~ You may obtain a copy of the License at

 ~

 ~     https://www.apache.org/licenses/LICENSE-2.0

 ~

 ~ Unless required by applicable law or agreed to in writing, software

 ~ distributed under the License is distributed on an "AS IS" BASIS,

 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 ~ See the License for the specific language governing permissions and

 ~ limitations under the License.

 -->

<resources>

   <string name="app_name">Woof</string>

   <string name="dog_name_1">Koda</string>

   <string name="dog_name_2">Lola</string>

   <string name="dog_name_3">Frankie</string>

   <string name="dog_name_4">Nox</string>

   <string name="dog_name_5">Faye</string>

   <string name="dog_name_6">Bella</string>

   <string name="dog_name_7">Moana</string>

   <string name="dog_name_8">Tzeitel</string>

   <string name="dog_name_9">Leroy</string>

   <string name="dog_description_1">Eating treats on the terrace</string>

   <string name="dog_description_2">Barking at Daddy</string>

   <string name="dog_description_3">Stealing socks</string>

   <string name="dog_description_4">Meeting new animals</string>

   <string name="dog_description_5">Digging in the garden</string>

   <string name="dog_description_6">Chasing sea foam</string>

   <string name="dog_description_7">Bothering her paw-rents</string>

   <string name="dog_description_8">Sunbathing</string>

   <string name="dog_description_9">Sleeping in dangerous places</string>

   <string name="about">About:</string>

   <string name="years_old">%d years old</string>

   <string name="expand_button_content_description">See more or less information about a dog.</string>

</resources>

5. Buka MainActivity.kt: File ini berisi kode untuk membuat daftar yang menampilkan foto anjing, nama anjing, dan usia anjing tersebut. ubahlah mainactivity sebagai berikut:
   
   
   - Class Main Activity:
   Pada metode onCreate, yang merupakan bagian dari siklus hidup aktivitas, aktivitas tersebut diinisialisasi. super.onCreate(savedInstanceState) memanggil implementasi dari kelas induk untuk memastikan bahwa semua inisialisasi standar dilakukan. Kemudian, metode setContent digunakan untuk menentukan tampilan UI dengan menggunakan Jetpack Compose. Di dalam setContent, tema aplikasi diatur dengan WoofTheme(darkTheme = true), yang memaksa penggunaan tema gelap.

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               WoofTheme(darkTheme = true) {  // Force light theme
                   // A surface container using the 'background' color from the theme
                   Surface(
                       modifier = Modifier.fillMaxSize()
                   ) {
                       WoofApp()
                   }
               }
           }
       }

   - Fungsi Woof App : Fungsi WoofApp adalah sebuah fungsi Composable yang mendefinisikan antarmuka pengguna untuk aplikasi menggunakan Jetpack Compose. Fungsi ini menggunakan Scaffold, sebuah layout yang menyediakan struktur dasar aplikasi dengan slot untuk komponen seperti topBar.

   @Composable
   fun WoofApp() {
       Scaffold(
           topBar = {
               WoofTopAppBar()
           }
       ) { it ->
           LazyColumn(contentPadding = it) {
               items(dogs) {
                   DogItem(
                       dog = it,
                       modifier = Modifier.padding(dimensionResource(R.dimen.padding_small))
                   )
               }
           }
       }
   }

   - Fungsi Dogitem: Fungsi DogItem adalah fungsi Composable yang digunakan untuk menampilkan informasi setiap anjing dalam daftar. Fungsi ini menerima dua parameter: dog, yang merupakan objek Dog berisi data tentang anjing tersebut, dan modifier, yang digunakan untuk menyesuaikan tampilan dengan modifikasi tambahan seperti padding atau ukuran

   @Composable
   fun DogItem(
       dog: Dog,
       modifier: Modifier = Modifier
   ) {
       Card(
           modifier = modifier
       ) {
           Row(
               modifier = Modifier
                   .fillMaxWidth()
                   .padding(dimensionResource(R.dimen.padding_small))
           ) {
               DogIcon(dog.imageResourceId)
               DogInformation(dog.name, dog.age)
           }
       }
   }

   - Fungsi WoofTopBar Fungsi WoofTopAppBar adalah fungsi Composable yang digunakan untuk menampilkan bilah aplikasi bagian atas dengan tata letak yang terpusat. Fungsi ini menerima parameter modifier yang memungkinkan penyesuaian tambahan pada tampilan bilah aplikasi.

   @Composable
   fun WoofTopAppBar(modifier: Modifier = Modifier) {
       CenterAlignedTopAppBar(
           title = {
               Row(
                   verticalAlignment = Alignment.CenterVertically
               ) {
                   Image(
                       modifier = Modifier
                           .size(dimensionResource(R.dimen.image_size))
                           .padding(dimensionResource(R.dimen.padding_small)),
                       painter = painterResource(R.drawable.ic_woof_logo),
   
                       contentDescription = null
                   )
                   Text(
                       text = stringResource(R.string.app_name),
                       style = MaterialTheme.typography.displayLarge
                   )
               }
           },
           modifier = modifier
       )
   }

   - Fungsi DogIcon Fungsi DogIcon adalah fungsi Composable yang digunakan untuk menampilkan gambar ikon anjing dengan berbagai modifikasi tampilan. Fungsi ini menerima dua parameter: dogIcon, yang merupakan ID sumber daya gambar anjing (@DrawableRes), dan modifier, yang memungkinkan penyesuaian tambahan pada tampilan gambar.

   @Composable
   fun DogIcon(
       @DrawableRes dogIcon: Int,
       modifier: Modifier = Modifier
   ) {
       Image(
           modifier = modifier
               .size(dimensionResource(R.dimen.image_size))
               .padding(dimensionResource(R.dimen.padding_small))
               .clip(MaterialTheme.shapes.small),
           contentScale = ContentScale.Crop,
           painter = painterResource(dogIcon),
   
           contentDescription = null
       )
   }

   - Fungsi DogInformation Fungsi DogInformation adalah fungsi Composable yang digunakan untuk menampilkan informasi tentang nama dan usia anjing. Fungsi ini menerima tiga parameter: dogName, yang merupakan ID sumber daya string untuk nama anjing (@StringRes), dogAge, yang merupakan usia anjing dalam bentuk integer, dan modifier, yang memungkinkan penyesuaian tambahan pada tampilan kolom informasi. :

   @Composable
   fun DogInformation(
       @StringRes dogName: Int,
       dogAge: Int,
       modifier: Modifier = Modifierdf
   ) {
       Column(modifier = modifier) {
           Text(
               text = stringResource(dogName),
               style = MaterialTheme.typography.displayMedium,
               modifier = Modifier.padding(top = dimensionResource(R.dimen.padding_small))
           )
           Text(
               text = stringResource(R.string.years_old, dogAge),
               style = MaterialTheme.typography.bodyLarge
           )
       }
   }

   - Fungsi Preview Fungsi WoofPreview dan WoofDarkThemePreview adalah fungsi Composable yang digunakan untuk menampilkan pratinjau UI aplikasi dalam tema terang dan gelap, masing-masing.

   @Preview
   @Composable
   fun WoofPreview() {
       WoofTheme(darkTheme = false) {
           WoofApp()
       }
   }
   
   @Preview
   @Composable
   fun WoofDarkThemePreview() {
       WoofTheme(darkTheme = true) {
           WoofApp()
       }
   }
   

6. Jika ingin membuaat tampilan darkmode pada aplikasi, kita dapat mengubah pada bagian class mainactivity di dalam setContent. ubah darkTheme menjadi true:
   
   

class MainActivity : ComponentActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {

       super.onCreate(savedInstanceState)

       setContent {

           WoofTheme(darkTheme = true) {  // Force light theme

               // A surface container using the 'background' color from the theme

               Surface(

                   modifier = Modifier.fillMaxSize()

               ) {

                   WoofApp()

               }

           }

       }

   }

}

• Dokumentasi

Berikut merupakan beberapa gambar dokumentasi hasil aplikasi woof yang telah saya buat

Gambar 1. Preview Mode Terang

Gambar 2. Hasill Mode Terang

Gambar 3. Preview Mode Gelap

Gambar 2. Hasill Mode Gelap

Link Repository : https://github.com/NgurahErvan/Woof-Application---Android