Market Place Siswa

Nama : Rafaela Shyra Ashma' Ramadhani

NRP : 5025231217

Kelas : Pemrograman Perangkat Bergerak - B

Tugas Material - Studi Kasus Marketplace Siswa

 

Source Code : GitHub

 

Penjelasan Code: 

Struktur Data dan Tema

Di bagian awal, didefinisikan sebuah data class Product yang menyimpan informasi produk seperti id, nama, harga, deskripsi, dan kategori. Id produk di-generate otomatis menggunakan timestamp. Setelah itu, StudentMartTheme mendefinisikan skema warna aplikasi berbasis pink dengan lightColorScheme dari Material 3, mulai dari warna primary, background, surface, hingga warna error.

MainScreen — Inti Navigasi

MainScreen adalah composable utama yang mengatur seluruh alur navigasi aplikasi. Navigasi dilakukan secara sederhana menggunakan variabel currentScreen bertipe String (nilainya bisa "home", "add", atau "profile"). Tidak menggunakan NavController, cukup dengan AnimatedContent yang menampilkan screen berbeda dengan animasi fade. Di sini juga dikelola productList (daftar produk dengan mutableStateListOf) dan snackbarHost untuk menampilkan notifikasi singkat. Saat pertama kali aplikasi dibuka, LaunchedEffect menambahkan tiga produk contoh secara otomatis. Layout keseluruhan dibungkus Scaffold yang memuat TopBar, BottomBar, FAB (tombol tambah produk), dan Snackbar.

HomeScreen

HomeScreen menampilkan daftar produk dalam LazyColumn. Di bagian teratas terdapat GreetingCard yang menyambut pengguna dan menampilkan jumlah produk aktif dengan latar belakang berwarna primary pink. Di bawahnya, setiap produk ditampilkan menggunakan ProductCard yang memuat nama, deskripsi singkat, kategori (dalam chip berwarna), harga terformat, dan tombol hapus berwarna merah. Fungsi formatPrice mengubah angka mentah seperti "120000" menjadi format rupiah yang lebih ramah baca seperti "Rp 120.000" menggunakan NumberFormat dengan locale Indonesia.

AddProductScreen

AddProductScreen adalah form untuk menambah produk baru. Pengguna mengisi nama, harga (hanya menerima angka), kategori (dipilih lewat FilterChip horizontal), dan deskripsi. Saat tombol "Save Product" ditekan, ada simulasi loading selama 1 detik menggunakan delay di dalam coroutine, kemudian produk baru dikirim ke MainScreen melalui callback onProductAdded dan halaman kembali ke Home.

ProfileScreen

ProfileScreen menampilkan halaman profil pengguna. Di bagian atas ada avatar inisial "SM" dalam lingkaran, diikuti nama dan jumlah produk. Dua StatCard menampilkan statistik produk dan pesanan secara berdampingan. Di bawahnya terdapat tiga menu navigasi (ProfileMenuItem) untuk Edit Profile, Notifications, dan About App — ketiganya saat ini belum memiliki aksi. Terakhir ada tombol Logout bergaya outlined berwarna merah, yang juga belum dihubungkan ke fungsi apapun.

Tampilan Aplikasi:

Penjelasan: 

Kode aplikasi StudentMart di atas sudah menerapkan konsep Material Design 3 (Material You) karena menggunakan berbagai komponen modern dari Jetpack Compose seperti Card, TopAppBar, NavigationBar, FloatingActionButton, dan MaterialTheme. Pada bagian StudentMartTheme, aplikasi menggunakan lightColorScheme() untuk menentukan kombinasi warna utama seperti pink, putih, dan warna pastel sehingga tampilan aplikasi terlihat konsisten, responsif, dan menarik secara visual. Penggunaan warna yang seragam pada tombol, card, dan navigation bar membuat antarmuka lebih nyaman digunakan serta mendukung prinsip user-friendly dalam Material Design.

Prinsip pertama yaitu “Material is the metaphor” terlihat dari penggunaan komponen Card pada tampilan produk dan profil. Card dibuat dengan RoundedCornerShape sehingga terlihat seperti lembaran material nyata yang memiliki bentuk dan lapisan tersendiri. Selain itu, penggunaan FloatingActionButton pada halaman home memberikan efek tombol yang tampak “mengambang” di atas layout utama, sesuai dengan konsep depth dan elevation pada Material Design. Penggunaan Surface, Box, dan background juga membantu membentuk layer visual yang menyerupai objek nyata di dalam UI aplikasi.

Prinsip kedua yaitu “Bold, graphic, intentional” diterapkan melalui penggunaan warna kontras dan tipografi yang jelas. Aplikasi menggunakan warna pink sebagai warna utama (primary) sehingga elemen penting seperti tombol “Add Product”, harga produk, dan kategori lebih mudah menarik perhatian pengguna. Teks judul seperti “StudentMart”, “Trending Products”, dan nama produk menggunakan FontWeight.Bold serta ukuran font yang lebih besar agar memiliki hierarki visual yang jelas. Layout juga dibuat rapi menggunakan Column, Row, LazyColumn, dan Spacer, sehingga setiap komponen memiliki jarak yang nyaman dan tidak terlihat berantakan.

Prinsip ketiga yaitu “Motion provides meaning” terlihat dari penggunaan AnimatedContent dengan efek fadeIn dan fadeOut saat berpindah halaman antara Home, Add Product, dan Profile. Animasi ini membantu pengguna memahami bahwa sedang terjadi perubahan tampilan tanpa terasa kaku. Selain itu, penggunaan CircularProgressIndicator saat proses penambahan produk memberikan feedback visual bahwa aplikasi sedang memproses data. Dengan adanya animasi dan feedback tersebut, interaksi aplikasi menjadi lebih hidup dan mudah dipahami oleh pengguna.