Muhammad Risyad Himawan Putra: PPB Pertemuan 11

Penerapan Material Design pada Aplikasi "MarketSiswa" dengan Jetpack Compose

Muhammad Risyad Himawan Putra - 5025231205

MarketSiswa adalah aplikasi marketplace sederhana berbasis Android yang dirancang untuk memudahkan siswa dalam melakukan jual-beli di lingkungan sekolah. Aplikasi ini dibangun dengan antarmuka modern Jetpack Compose dan menerapkan prinsip-prinsip Material Design 3 (Material You) untuk menciptakan UI yang konsisten, responsif, menarik secara visual, dan ramah pengguna.

Akses Project:
Source Code:https://github.com/MRHP1/Mobile-Programming/tree/main/Marketsiswa

1. Deskripsi & Fitur Utama Material Design

Aplikasi ini menganut pedoman Material Design untuk memastikan antarmuka yang terstruktur. Fitur dan implementasi utamanya meliputi:

Material is the metaphor: UI mengadopsi konsep benda nyata. Penggunaan komponen Card memberikan efek bayangan (elevation) seperti kertas yang bertumpuk, ditambah dengan tombol "Jual" yang mengambang.
Bold, graphic, intentional: Hierarki visual sangat tegas dengan font tebal (FontWeight.ExtraBold) serta warna kontras dari skema tema khusus agar tulisan mudah dibaca.
Motion provides meaning: Efek animasi ripple otomatis ketika tombol disentuh, serta adanya indikator animasi memutar saat data sedang diproses untuk memberikan feedback visual.

2. Titik Masuk (Entry Point) & Tema

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MarketplaceTheme {
                MainScreen()
            }
        }
    }
}

Penjelasan: Ini adalah fungsi utama Compose yang menggantikan setContentView pada Android tradisional. Kode ini memanggil MarketplaceTheme yang berfungsi menimpa warna bawaan perangkat dengan skema warna buatan kita (Primary: Ungu, Secondary: Teal).

3. Struktur Data (Entitas Produk)

data class Product(
    val id: Long = System.currentTimeMillis(),
    val name: String,
    val price: String,
    val description: String
)

Penjelasan: Data class merupakan cara ringkas di Kotlin untuk membuat kerangka data. Setiap produk yang dibuat secara otomatis diberikan ID unik yang diambil dari System.currentTimeMillis() untuk membedakan antar item produk.

4. Layar Utama & Manajemen State (MainScreen)

State Management: Menyimpan posisi halaman aktif menggunakan var currentScreen by remember { mutableStateOf("home") }. Jika nilainya diubah (misalnya menjadi "add"), maka Compose akan merender ulang tampilan secara dinamis secara instan.
Inisialisasi Data Cerdas: Memanfaatkan blok LaunchedEffect untuk menjalankan eksekusi kode *hanya satu kali* saat aplikasi pertama kali terbuka, guna menyisipkan produk awalan (dummy data).
Kerangka Scaffold: Bertindak sebagai kanvas tata letak Material. Secara otomatis menempatkan letak CenterAlignedTopAppBar (Judul di atas), NavigationBar (Menu di bawah), dan ExtendedFloatingActionButton di posisi standar agar rapi.
Routing Halaman: Menggunakan blok statemen when (currentScreen) sebagai "saklar" penukar halaman (menukar Composable HomeScreen, AddProductScreen, dan ProfileScreen).

5. Komponen Dinamis & Form Input

Menampilkan Daftar (LazyColumn): HomeScreen memakai LazyColumn—versi modern dan super ringan dari RecyclerView—untuk menampilkan deretan list produk tanpa menguras memori perangkat. Data produk dibaca satu per satu memakai items(products).
Input Validasi (OutlinedTextField): Halaman form menangkap teks pengguna dan dilengkapi kondisi keamanan `enabled = name.isNotBlank() && price.isNotBlank()`. Tombol simpan akan dibekukan jika ada kolom yang dibiarkan kosong oleh pengguna.
Simulasi Proses Server (Coroutine): Saat form disubmit, fungsi mengandalkan scope.launch dan memicu delay(1000) untuk menunda proses. Di momen singkat ini, tombol digantikan oleh animasi bulat lambang Loading, sebelum memunculkan notifikasi sukses pop-up menggunakan Snackbar.