PPB - Pertemuan 10 dan 11 - Marketplace Siswa
5025231245 | Rafie Zaidan Umara | Pertemuan 10 dan 11 | PPB C
Marketplace Siswa
StudentMart adalah aplikasi marketplace sederhana khusus mahasiswa untuk menjual dan membeli barang kebutuhan kuliah seperti buku, headset, keyboard, mouse, dan perlengkapan belajar lainnya. Aplikasi ini dibuat menggunakan Jetpack Compose dan menerapkan konsep Material Design 3 agar tampilan lebih modern, responsif, dan user-friendly.
1. Membuat New Project
Tahap pertama dalam pembuatan aplikasi marketplace siswa “Student Mart” adalah melakukan persiapan environment pengembangan menggunakan Android Studio. Setelah Android Studio berhasil diinstall dan dibuka, langkah berikutnya yaitu memilih menu “New Project” untuk membuat project aplikasi baru. Pada proses pembuatan project, digunakan template “Empty Activity” agar tampilan awal aplikasi lebih sederhana dan mudah dikembangkan menggunakan Jetpack Compose. Selanjutnya pengguna mengisi konfigurasi project seperti nama aplikasi yaitu “student_mart” serta memilih bahasa pemrograman Kotlin sebagai bahasa utama dalam pengembangan aplikasi Android modern.
2. Splash Screen & Window Setup
Bagian ini mengatur inisialisasi awal aplikasi. Fungsi installSplashScreen() dari Jetpack Core digunakan untuk menampilkan layar selamat datang (Splash Screen) menggunakan logo logo_ms sebelum aplikasi dimuat sepenuhnya. WindowCompat.setDecorFitsSystemWindows(window, false) dikonfigurasi agar tampilan aplikasi menjadi edge-to-edge (menyatu dengan status bar dan navigation bar sistem), memberikan kesan visual yang lebih modern dan luas.
class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {
installSplashScreen()
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
StudentmartTheme {
MainScreen()
}
}
}
}
3. Sistem Navigasi & Sealed Class
Kode ini menggunakan konsep sealed class untuk mendefinisikan rute halaman (screens) di dalam aplikasi secara aman (type-safe). Setiap halaman didefinisikan sebagai objek dengan parameter rute (route), ikon navigasi (icon), dan nama menu (label). Khusus untuk halaman Detail, ditambahkan fungsi createRoute untuk mempermudah pengiriman data nama produk sebagai argument navigasi antar halaman.
sealed class Screen(val route: String, val icon: ImageVector, val label: String) {object Home : Screen("home", Icons.Default.Home, "Home")
object Cart : Screen("cart", Icons.Default.ShoppingCart, "Cart")
object Profile : Screen("profile", Icons.Default.Person, "Profile")
object Detail : Screen("detail/{productName}", Icons.Default.Info, "Detail") {
fun createRoute(productName: String) = "detail/$productName"
}
}
4. State Management Keranjang Belanja Global
Kode di atas mendeklarasikan state keranjang belanja global menggunakan mutableStateListOf<Product>(). Penggunaan remember memastikan bahwa data barang yang dimasukkan oleh pengguna ke dalam keranjang tetap tersimpan selama aplikasi berjalan dan tidak hilang saat terjadi recomposition (penggambaran ulang layar) ketika pengguna berpindah-pindah halaman dari Home ke Cart atau Profile.
val cartItems = remember { mutableStateListOf<Product>() }
5. Notifikasi Toast Kustom Dinamis (Popup Notification)
Alih-alih menggunakan Toast bawaan Android yang kaku, bagian ini mengimplementasikan popup notifikasi kustom yang dinamis di bagian atas layar. Menggunakan AnimatedVisibility dengan efek transisi slideInVertically dan fadeIn untuk animasi masuk dan keluar yang halus. Di dalam LaunchedEffect, fungsi penundaan delay(2500) dijalankan menggunakan coroutine scope agar notifikasi ini otomatis tertutup sendiri setelah tampil selama 2,5 detik tanpa memblokir thread utama aplikasi (non-blocking delay).
AnimatedVisibility(
visible = showNotification,
enter = slideInVertically(initialOffsetY = { -it }) + fadeIn(),
exit = slideOutVertically(targetOffsetY = { -it }) + fadeOut(),
modifier = Modifier
.align(Alignment.TopCenter)
.padding(top = 48.dp, start = 24.dp, end = 24.dp)
) {
Card(
shape = RoundedCornerShape(16.dp),
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
elevation = CardDefaults.cardElevation(8.dp),
modifier = Modifier.fillMaxWidth().border(1.dp, notificationColor.copy(alpha = 0.3f), RoundedCornerShape(16.dp))
) {
Row(
modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Surface(
shape = CircleShape,
color = notificationColor,
modifier = Modifier.size(40.dp)
) {
Box(contentAlignment = Alignment.Center) {
Icon(
notificationIcon,
contentDescription = null,
tint = Color.White,
modifier = Modifier.size(20.dp)
)
}
}
Spacer(modifier = Modifier.width(16.dp))
Text(
text = notificationMessage,
fontWeight = FontWeight.SemiBold,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.weight(1f)
)
}
}
LaunchedEffect(showNotification) {
if (showNotification) {
delay(2500)
showNotification = false
}
}
}
6. Notifikasi Interaktif Berdasarkan Aksi Halaman Cart
Bagian ini mengatur logika interaksi pengguna di halaman keranjang belanja (CartScreen). Setiap kali tombol tambah, kurang, atau hapus ditekan, aplikasi akan memperbarui state keranjang belanja (cartItems) secara reaktif, lalu secara dinamis mengubah teks pesan, ikon, dan warna tema pada notifikasi popup di bagian atas layar agar pengguna mendapatkan umpan balik (feedback) yang instan dan interaktif.
composable(Screen.Cart.route) {CartScreen(
cartItems = cartItems,
onIncrease = { product ->
cartItems.add(product)
notificationMessage = "Increased quantity of ${product.name}! 📈"
notificationIcon = Icons.Default.Add
notificationColor = Color(0xFF2196F3) // Info Blue
showNotification = true
},
onDecrease = { product ->
cartItems.remove(product)
notificationMessage = "Decreased quantity of ${product.name}! 📉"
notificationIcon = Icons.Default.Remove
notificationColor = Color(0xFFFF9800) // Warning Orange
showNotification = true
},
onRemove = { product ->
cartItems.removeAll { it.name == product.name }
notificationMessage = "Removed ${product.name} from cart! 🗑️"
notificationIcon = Icons.Default.Delete
notificationColor = Color(0xFFF44336) // Danger Red
showNotification = true
},
7. File Product.kt
File ini berfungsi untuk mendefinisikan model data Product menggunakan data class Kotlin, yang efisien untuk representasi objek data. Kelas ini menggunakan anotasi @DrawableRes untuk validasi ID gambar, mendukung gambar opsional melalui properti imageRes yang nullable (menggunakan emoji sebagai fallback), serta memanfaatkan parameter default dan Map<String, String> untuk spesifikasi produk, sehingga instansiasi objek menjadi fleksibel dan terstruktur.
package com.example.student_mart
import androidx.annotation.DrawableRes
data class Product(
val name: String,
val price: String,
val description: String,
val emoji: String,
val category: String = "General",
@DrawableRes val imageRes: Int? = null,
val rating: Float = 4.5f,
val reviewCount: Int = 120,
val sellerName: String = "Student Store Official",
val sellerImage: String = "🎓",
val specifications: Map<String, String> = mapOf(
"Condition" to "New",
"Stock" to "Available",
"Shipping" to "Surabaya"
)
)
8. File ProductData.kt
File ProductData.kt berfungsi sebagai sumber data statis yang menyediakan daftar awal (productList) dari semua objek Product yang akan ditampilkan dan dijual di aplikasi Student Mart. Di dalamnya, setiap produk diinisialisasi secara eksplisit dengan nilai-nilai properti yang telah ditentukan dalam data class Product, seperti nama, harga, deskripsi, emoji, kategori, ID gambar (imageRes), rating, jumlah ulasan, nama dan gambar penjual, serta detail spesifikasi teknis dalam bentuk Map. Daftar produk ini bertindak sebagai basis data lokal yang dapat diakses oleh komponen UI, seperti HomeScreen dan ProductDetailScreen, untuk menampilkan informasi produk kepada pengguna.
9. ProductCard.kt
File ProductCard.kt mendefinisikan sebuah komponen UI Composable bernama ProductCard yang bertanggung jawab untuk menampilkan representasi visual singkat dari sebuah produk di aplikasi. Komponen ini menerima objek Product sebagai data utama, serta dua fungsi callback (onAddToCart dan onClick) untuk menangani interaksi pengguna. ProductCard menggunakan komponen Card dari Material Design 3 sebagai wadahnya, memberikan elevasi bayangan dan bentuk sudut membulat. Di dalamnya, tata letak vertikal (Column) digunakan untuk menampung gambar atau emoji produk (dengan imageRes sebagai prioritas dan emoji sebagai fallback), sebuah badge kategori yang diletakkan di sudut kiri atas, serta detail produk seperti nama, deskripsi singkat, dan harga. Komponen ini juga menyediakan tombol "Add to Cart" yang dapat diklik, memungkinkan pengguna untuk menambahkan produk ke keranjang belanja mereka, dan seluruh kartu produk dapat diklik untuk melihat detail produk lebih lanjut.
10. Kesimpulan
Proyek "Student Mart" adalah aplikasi e-commerce Android modern yang dikembangkan menggunakan Jetpack Compose. Aplikasi ini menyediakan platform bagi pelajar untuk berbelanja berbagai produk dengan fitur utama meliputi tampilan produk interaktif, manajemen keranjang belanja yang responsif dengan notifikasi dinamis untuk setiap aksi (tambah, kurang, hapus), serta navigasi antar halaman (Home, Cart, Profile, Detail).
Comments
Post a Comment