Pertemuan 11 PPB (B)

 

TUGAS 11
Membuat MarketPlace Siswa

Nama : Tarisha Falah Basuki
NRP : 5025231043

Kelas : PPB (B)

Aplikasi Student Marketplace adalah platform jual-beli sederhana berbasis Android yang dirancang khusus untuk kalangan pelajar dan mahasiswa. Dibangun menggunakan Jetpack Compose dengan prinsip Material Design 3, aplikasi ini memungkinkan pengguna untuk menjelajahi daftar produk yang dijual sesama siswa, menambahkan produk baru lengkap dengan nama, harga, kategori, dan deskripsi, serta melihat profil pribadi beserta riwayat produk yang pernah diposting. Dengan arsitektur MVVM dan navigasi tiga layar utama: Beranda, Tambah Produk, dan Profi. Aplikasi ini menjadi solusi praktis bagi siswa yang ingin berjualan barang bekas seperti buku, alat tulis, atau perlengkapan kampus secara mudah dan efisien langsung dari genggaman tangan.

Berikut langkah-langkah membuat aplikasi MarketPlace Siswa menggunakan Android Studio:

1. Membuat Project Baru
- Buka Android Studio.
- Klik New Project.
- Pilih template Empty Activity.

2.  Mengisi Konfigurasi Project

- Isi data project seperti berikut:

    Name : MarketPlace

    Package name : com.example.marketplace

    Save location : pilih folder penyimpanan

    Language : Java atau Kotlin

    Minimum SDK : pilih API 24 (Android 7.0) 

- Klik Finish.

- Android Studio akan membuat project dan melakukan Gradle build (tunggu sampai selesai).

3. Menambahkan Dependency

Di build.gradle.kts (module level), tambahkan:

• Jetpack Compose BOM + Material3
• Navigation Compose (untuk pindah antar layar)
• ViewModel & Lifecycle Compose (state management)
• Room (jika ingin data tersimpan lokal) atau cukup data dummy di memori untuk versi sederhana
• Coil Compose (untuk load gambar produk)

4. Rancang Struktur Folder (MVVM)

app/
 ├─ data/        → model (Product, User), repository, data source
 ├─ ui/
 │   ├─ screens/ → ProductListScreen, AddProductScreen, ProfileScreen
 │   ├─ components/ → ProductCard, dll
 │   ├─ theme/   → Color.kt, Theme.kt, Type.kt (Material3)
 ├─ viewmodel/   → ProductViewModel, UserViewModel
 ├─ navigation/  → NavGraph.kt, Screen.kt (sealed class rute)

5. Buat Data Model
Definisikan data class Product (id, nama, harga, deskripsi, gambar, penjual) dan User (id, nama, email, foto profil). Jika pakai Room, tandai Product dengan @Entity.

6. Buat Data Layer
Buat ProductRepository yang menyediakan fungsi getProducts(), addProduct(). Untuk versi sederhana, bisa pakai MutableStateListOf di memori dulu; nanti bisa diupgrade ke Room DAO untuk persistensi.

7. Buat ViewModel
ProductViewModel mengatur state daftar produk (StateFlow/State) dan fungsi tambah produk. UserViewModel (atau cukup state lokal) untuk data profil pengguna.

8. Setup Theme Material 3
Di theme/Theme.kt, definisikan color scheme (lightColorScheme/darkColorScheme), typography, dan bungkus aplikasi dengan MaterialTheme.

9. Buat UI Screens

• ProductListScreen: LazyColumn/LazyVerticalGrid menampilkan ProductCard (gambar, nama, harga) — gunakan komponen Material3 seperti Card, Scaffold, TopAppBar.
• AddProductScreen: Form dengan OutlinedTextField untuk nama, harga, deskripsi, dan tombol upload gambar (opsional), lalu Button "Simpan".
• ProfileScreen: Tampilkan foto, nama, email pengguna, dan mungkin daftar produk yang sudah diposting.

10. Setup Navigasi
Buat NavHost dengan rute ke tiga layar di atas, plus BottomNavigationBar Material3 (NavigationBar + NavigationBarItem) agar siswa bisa berpindah antara Home, Tambah Produk, dan Profil.

11. Hubungkan UI dengan ViewModel
Gunakan viewModel() composable function untuk inject ViewModel ke setiap screen, lalu observe state dengan collectAsState().

Ringkasan apa yang ditambahkan setelah project baru dibuat di Android Studio:

1. Dependency — di app/build.gradle.kts, tambahkan navigation-compose, lifecycle-viewmodel-compose, dan material-icons-extended (lengkapnya ada di README.md dalam zip).

2. Layer data (data/) — Product.kt, User.kt sebagai model, dan ProductRepository.kt sebagai sumber data in-memory berisi 3 produk dummy.

3. Layer ViewModel (viewmodel/) — ProductViewModel.kt (ambil & tambah produk, validasi input) dan UserViewModel.kt (data profil pengguna).

4. Theme Material3 (ui/theme/) — Color.kt, Type.kt, Theme.kt ditimpa dengan versi custom (warna hijau sebagai tema marketplace).

5. Navigasi (navigation/) — Screen.kt (3 rute: Beranda, Tambah, Profil) dan NavGraph.kt (NavHost yang menghubungkan ketiga screen).

6. Komponen UI (ui/components/) — ProductCard.kt (kartu produk dengan placeholder inisial, harga format Rupiah) dan BottomNavBar.kt (navigasi bawah Material3).

7. Screens (ui/screens/) — ProductListScreen.kt (daftar produk), AddProductScreen.kt (form tambah produk dengan validasi), ProfileScreen.kt (info user + produk miliknya).

8. MainActivity.kt — entry point yang merangkai NavController, Scaffold, dan BottomNavBar jadi satu.

12. Hasil