Mochamad Kolbi Nuron_5025231183_Marketplace_PPB B

 Nama: Mochamad Kolbi Nuron

NRP: 5025231183

Tugas: PPB (B)

Membuat MarketPlace siswa

PENDAHULUAN:

Pada tahap implementasi ini dilakukan proses pengembangan aplikasi MarketSiswa menggunakan bahasa pemrograman Kotlin dengan framework Jetpack Compose serta menerapkan konsep MVVM (Model-View-ViewModel). Aplikasi ini dirancang sebagai marketplace sederhana yang memungkinkan pengguna melihat daftar produk, menambahkan produk baru, dan melihat profil pengguna.

Implementasi dilakukan menggunakan Android Studio dengan dukungan Material Design 3 untuk menghasilkan tampilan antarmuka yang modern dan responsif. Struktur aplikasi dibuat secara modular sehingga memudahkan proses pengembangan, pemeliharaan, dan pengembangan fitur di masa mendatang.

Pada bagian ini akan dijelaskan implementasi kode program utama yang berfungsi sebagai pengatur navigasi antar halaman, pengelolaan data melalui ViewModel, serta penyusunan antarmuka pengguna menggunakan Jetpack Compose.

IMPLEMENTASI: 

File MainActivity.kt merupakan entry point atau halaman utama yang pertama kali dijalankan ketika aplikasi MarketSiswa dibuka. Pada file ini digunakan ComponentActivity sebagai dasar Activity yang mendukung Jetpack Compose. Fungsi onCreate() digunakan untuk menginisialisasi tampilan aplikasi dengan memanggil tema MarketplaceSiswaTheme dan menampilkan fungsi utama MarketSiswaApp().

Fungsi MarketSiswaApp() berperan sebagai pusat pengaturan antarmuka aplikasi. Pada fungsi ini dibuat objek NavController yang digunakan untuk mengatur navigasi antar halaman serta MarketViewModel yang berfungsi sebagai pengelola data aplikasi sesuai arsitektur MVVM. Selain itu, terdapat SnackbarHostState yang digunakan untuk menampilkan notifikasi singkat kepada pengguna.

Daftar menu navigasi bawah disimpan dalam variabel items yang berisi tiga halaman utama, yaitu Home, Add Product, dan Profile. Data tersebut kemudian digunakan untuk membangun komponen Bottom Navigation sehingga pengguna dapat berpindah halaman dengan mudah.

Kode LaunchedEffect() digunakan untuk mengamati perubahan pesan yang dikirim oleh ViewModel. Ketika terdapat pesan baru, aplikasi akan menampilkan Snackbar sebagai notifikasi, misalnya saat produk berhasil ditambahkan ke daftar produk.

Komponen Scaffold digunakan sebagai kerangka utama aplikasi yang terdiri dari Top App Bar, Bottom Navigation Bar, area konten utama, dan Snackbar. Top App Bar menampilkan judul aplikasi "MarketSiswa", sedangkan Bottom Navigation digunakan sebagai menu utama untuk berpindah antar halaman.

Navigasi antar halaman diatur menggunakan NavHost. Pada bagian ini didefinisikan tiga tujuan navigasi, yaitu HomeScreen untuk menampilkan daftar produk, AddProductScreen untuk menambahkan produk baru, dan ProfileScreen untuk menampilkan informasi profil pengguna. Ketika pengguna berhasil menambahkan produk, aplikasi secara otomatis mengarahkan kembali ke halaman Home untuk melihat produk yang telah ditambahkan.

Secara keseluruhan, file MainActivity.kt berfungsi sebagai pengatur utama aplikasi yang menghubungkan tampilan, navigasi, dan ViewModel sehingga seluruh fitur dalam aplikasi MarketSiswa dapat berjalan dengan baik dan terintegrasi.

package com.example.marketplacesiswa

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.example.marketplacesiswa.navigation.Screen
import com.example.marketplacesiswa.ui.screens.AddProductScreen
import com.example.marketplacesiswa.ui.screens.HomeScreen
import com.example.marketplacesiswa.ui.screens.ProfileScreen
import com.example.marketplacesiswa.ui.theme.MarketplaceSiswaTheme
import com.example.marketplacesiswa.viewmodel.MarketViewModel
import kotlinx.coroutines.flow.collectLatest

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MarketplaceSiswaTheme {
                MarketSiswaApp()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MarketSiswaApp() {
    val navController = rememberNavController()
    val viewModel: MarketViewModel = viewModel()
    val snackbarHostState = remember { SnackbarHostState() }
    
    val items = listOf(
        Screen.Home,
        Screen.AddProduct,
        Screen.Profile
    )

    // Handle Snackbar messages from ViewModel
    LaunchedEffect(viewModel.snackbarMessage) {
        viewModel.snackbarMessage.collectLatest { message ->
            snackbarHostState.showSnackbar(message)
        }
    }

    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = { 
                    Text(
                        "MarketSiswa",
                        style = MaterialTheme.typography.titleLarge
                    ) 
                },
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
                )
            )
        },
        bottomBar = {
            NavigationBar {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentRoute = navBackStackEntry?.destination?.route

                items.forEach { screen ->
                    NavigationBarItem(
                        icon = { Icon(screen.icon, contentDescription = screen.title) },
                        label = { Text(screen.title) },
                        selected = currentRoute == screen.route,
                        onClick = {
                            navController.navigate(screen.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        },
        snackbarHost = { SnackbarHost(snackbarHostState) }
    ) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = Screen.Home.route,
            modifier = Modifier.padding(innerPadding)
        ) {
            composable(Screen.Home.route) {
                HomeScreen(viewModel)
            }
            composable(Screen.AddProduct.route) {
                AddProductScreen(
                    viewModel = viewModel,
                    onProductAdded = {
                        navController.navigate(Screen.Home.route) {
                            popUpTo(Screen.Home.route) { inclusive = false }
                        }
                    }
                )
            }
            composable(Screen.Profile.route) {
                ProfileScreen()
            }
        }
    }
}