Tugas PPB Pertemuan 11

Nathanael Valen Susilo 
5025231099

Desain Aplikasi Market Siswa

MarketSiswa adalah aplikasi marketplace sederhana berbasis Android yang dibangun menggunakan Jetpack Compose dan Material Design 3 (Material You). Aplikasi ini dirancang sebagai platform jual-beli antar mahasiswa, di mana pengguna dapat melihat daftar produk, menambahkan produk baru dengan memilih kategori, serta mengelola profil pribadi.

Fitur utama:

  • Daftar produk dengan ikon kategori dan badge warna.
  • Form tambah produk dengan dropdown kategori (Makanan dan Minuman, Fashion, Elektronik, Buku dan Alat Tulis, Aksesoris, Jasa, Lainnya).
  • Opsi kategori kustom melalui pilihan "Lainnya".
  • Halaman profil dengan statistik dan menu pengaturan.
  • Animasi transisi antar halaman.
  • Notifikasi snackbar setelah produk ditambahkan.

Struktur Proyek

MarketSiswa/
  app/
    src/main/
      AndroidManifest.xml
      java/com/example/marketsiswa/
        MainActivity.kt            -- Activity utama yang berisi semua Composable screen
        ui/theme/
          Color.kt                 -- Palet warna biru MarketSiswa
          Theme.kt                 -- Konfigurasi tema Material 3
          Type.kt                  -- Tipografi
  build.gradle.kts                 -- Konfigurasi build root
  gradle/libs.versions.toml        -- Version catalog untuk dependensi

Prinsip Material Design

Material Design adalah sistem desain yang dikembangkan oleh Google untuk menciptakan antarmuka pengguna yang konsisten, responsif, menarik secara visual, dan mudah digunakan. Versi terbaru dikenal sebagai Material You (Material Design 3) yang lebih personal dan dinamis.

Berikut adalah tiga prinsip utama Material Design beserta penjelasan konsep dan contoh implementasinya di dalam kode MarketSiswa.

1. Material is the Metaphor

Prinsip pertama menyatakan bahwa elemen UI dianalogikan seperti benda nyata. Sebuah kartu memiliki bayangan yang menunjukkan bahwa ia terangkat dari permukaan. Tombol aksi mengambang (FAB) terlihat berada di layer paling atas. Sistem lapisan (layering) ini membantu pengguna memahami hierarki dan hubungan antar elemen secara intuitif, layaknya lembaran kertas yang bertumpuk di atas meja dengan ketinggian yang berbeda-beda.

Contoh implementasi pada kartu produk di Home Screen:

```kotlin
Card(
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(16.dp),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surface
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
) {
    Row(
        Modifier.fillMaxWidth().padding(14.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        // Kolom kiri: ikon kategori dalam box berwarna
        Box(
            modifier = Modifier.size(48.dp)
                .clip(RoundedCornerShape(12.dp))
                .background(MaterialTheme.colorScheme.primaryContainer),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                getCategoryIcon(product.category),
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onPrimaryContainer
            )
        }
        // Kolom kanan: nama, harga, deskripsi, badge kategori
        Column(Modifier.weight(1f)) {
            Text(product.name, fontWeight = FontWeight.Bold)
            Text("Rp ${product.price}",
                color = MaterialTheme.colorScheme.primary)
            Text(product.description,
                color = MaterialTheme.colorScheme.onSurfaceVariant)
        }
    }
}
```
Pada kode di atas, Card menggunakan elevation sebesar 2dp yang menghasilkan bayangan halus di bawahnya. Hal ini memberikan kesan bahwa kartu tersebut terangkat dari permukaan background biru muda, persis seperti selembar kertas yang diletakkan di atas meja. Warna surface (putih) pada kartu kontras dengan background (biru muda), memperkuat persepsi kedalaman. Di dalam kartu, Box dengan warna primaryContainer berfungsi sebagai elemen yang tampak berada di layer tersendiri, memberi kesan material bertingkat.

2. Bold, Graphic, Intentional

Prinsip kedua menekankan penggunaan tipografi yang tegas, warna yang kontras, dan layout yang tidak berantakan. Setiap keputusan desain harus memiliki tujuan yang jelas. Elemen penting diberi penekanan visual melalui ukuran font, ketebalan (font weight), dan warna, sehingga pengguna bisa langsung memahami hierarki informasi tanpa perlu membaca seluruh konten secara detail.

Contoh implementasi pada greeting card di Home Screen:

```kotlin
Card(
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(20.dp),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
    Column(Modifier.padding(20.dp)) {
        Text(
            "Halo, Siswa!",
            fontSize = 24.sp,
            fontWeight = FontWeight.ExtraBold,
            color = MaterialTheme.colorScheme.onPrimaryContainer
        )
        Spacer(Modifier.height(4.dp))
        Text(
            "Temukan ${products.size} produk dari sesama mahasiswa",
            fontSize = 14.sp,
            color = MaterialTheme.colorScheme
                .onPrimaryContainer.copy(alpha = 0.7f)
        )
    }
}
```

Pada kode di atas, terdapat dua tingkat hierarki visual yang jelas. Judul "Halo, Siswa!" menggunakan ukuran 24sp dengan fontWeight ExtraBold dan warna onPrimaryContainer (biru tua), menjadikannya elemen pertama yang dilihat pengguna. Subtitle di bawahnya menggunakan ukuran 14sp dengan opacity 70 persen, menciptakan kontras yang tegas antara informasi utama dan pendukung. Card menggunakan warna primaryContainer (biru muda) yang membedakannya secara grafis dari kartu produk berwarna putih di bawahnya. Semua keputusan warna, ukuran, dan ketebalan bersifat intentional: memandu mata pengguna dari greeting ke daftar produk secara alami.

3. Motion Provides Meaning

Prinsip ketiga menyatakan bahwa animasi bukan sekadar hiasan estetika, melainkan alat komunikasi yang membantu pengguna memahami perubahan yang terjadi di antarmuka. Transisi antar halaman menunjukkan arah navigasi. Indikator loading memberi feedback bahwa sistem sedang memproses permintaan. Elemen yang muncul atau menghilang secara animatif memberi konteks tentang hubungan antar komponen.

Contoh implementasi pada transisi halaman dan visibility kategori kustom:

```kotlin
// Transisi antar halaman
AnimatedContent(
    targetState = currentScreen,
    transitionSpec = {
        slideInHorizontally { it } + fadeIn() togetherWith
                slideOutHorizontally { -it } + fadeOut()
    },
    label = "nav"
) { screen ->
    when (screen) {
        "home" -> HomeScreen(productList)
        "add" -> AddProductScreen { /* callback */ }
        "profile" -> ProfileScreen()
    }
}

// Field kategori kustom muncul dengan animasi
AnimatedVisibility(visible = selectedCategory == "Lainnya") {
    OutlinedTextField(
        value = customCategory,
        onValueChange = { customCategory = it },
        label = { Text("Tulis kategori sendiri") },
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp),
        singleLine = true
    )
}
```

Pada kode di atas, AnimatedContent mengelola transisi antar tiga halaman. Ketika pengguna berpindah halaman, halaman baru masuk dari sisi kanan layar bersamaan dengan efek fade in, sementara halaman sebelumnya keluar ke sisi kiri dengan efek fade out. Kombinasi slide dan fade ini memberikan kesan bahwa pengguna sedang bergerak maju dalam alur navigasi. Selain itu, AnimatedVisibility digunakan pada field kategori kustom: ketika pengguna memilih "Lainnya" dari dropdown, field input tambahan muncul secara perlahan dengan animasi expand. Ketika pengguna memilih kategori lain, field tersebut menghilang secara animatif. Tanpa animasi ini, kemunculan dan hilangnya field akan terasa tiba-tiba dan dapat membingungkan pengguna tentang apa yang berubah di layar.

Tampilan Aplikasi 

Halaman Utama Aplikasi


Halaman Formulir Penjualan untuk Menambahkan Produk



Halaman Profile Pengguna









Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas PPB Pertemuan 1

Gambar
Nathanael Valen Susilo 5025231099 Perkembangan Teknologi Perangkat Bergerak Awal Perkembangan Ponsel (1993 - 2007) Pada awal tahun 1990-an hingga awal tahun 2000-an, fungsionalitas pada ponsel umumnya  masih sangat terbatas. Perilisan IBM Simon pada tahun 1994 menjadi satu kemajuan signigikan pada ponsel dengan menawarkan layar sentuh serta aplikasi seperti email dan faks, walaupun dengan jangkauan yang terbatas. Rilisan ponsel seperti IBM Simon ini kemudian diikuti oleh perusahaan lainnya seperti Motorola, Nokia, Sony, BBM, dan yang lainnya. Fitur pada perangkat-perangkat tersebut masih terbatas pada  aplikasi bawaan seperti kalender, permainan sederhana seperti  Snake , aplikasi kalkulator, dan fitur SMS. Aplikasi ini bersifat statis, memiliki interaktivitas minimal, dan beroperasi tanpa koneksi internet karena keterbatasan perangkat keras yang ada. Ponsel-ponsel yang muncul pada era ini hanya memiliki aplikasi bawaan dari pabrik. Tidak ada fitur yang memungkinkan pengg...
Baca selengkapnya

Tugas PBB Pertemuan 5

Gambar
Nathanael Valen Susilo 5025231099 Aplikasi Composable Button: Dice Roller Aplikasi Dice Roller sederhana ini akan memanfaatkan komponen button untuk melakukan fungsi Roll Dice dimana akan mengubah tampilan dadu pada aplikasi sesuai dengan hasil yang didapatkan. Kelas MainActivity class MainActivity : ComponentActivity() { override fun onCreate (savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { DiceRollerTheme { Surface ( modifier = Modifier. fillMaxSize (), color = MaterialTheme. colorScheme . background ) { DiceRollerApp () } } } } } Kelas ini akan memanggil fungsi onCreate dimana dijalankan pada saat aplikasi dibuka oleh pengguna. Fungsi tersebut akan menampilkan konten dengan DiceRollerTheme dan beberapa parameter tertentu seperti modifier ukuran dan juga warna background yang ditampilkan. Ko...
Baca selengkapnya

ETS PPB (Pertemuan 8)

Gambar
ETS PPB - MyWallet Anggota Kelompok :  - Stefanus Yosua Mamamoba (5025231066) (Link) - Nathanael Valen Susilo (5025231099) Source Code :  https://github.com/Kirytsu/MyWallet   Link App Download : Drive Link Presentasi : Canva Link Demo :  Youtube Deskripsi Aplikasi MyWallet :  Aplikasi MyWallet adalah aplikasi mobile untuk pencatatan finansial pribadi penggunanya. Pengguna dapat mencatat pengeluaran ataupun pemasukan ke dalam aplikasi sehingga memudahkan penggunanya dalam melacak transaksi yang pernah dilakukan. Aplikasi ini dibangun dengan android studio menggunakan bahasa Kotlin. Struktur Repositori com.example.mywallet/ ├── data/ │   ├── FinanceRepository.kt │   └── TransactionFactory.kt ├── model/ │   └── FinanceModels.kt ├── ui/ │   ├── components/ │   │   ├── dashboard/ │   │   │   └── DashboardSections.kt │   │   ├── report/ │   │  ...
Baca selengkapnya