Evaluasi Tengah Semester

 Nama: Thopaz Givangkara Rosadi

NRP: 5025231050

Kelas: PPB (C)

Source Code: https://github.com/rsthopaz/Pemrograman-Mobile/tree/main/ETS_2

Presentation:

Youtube Video:

Design Reference:

ANIME GALLERY

1. Overview Arsitektur Aplikasi

Aplikasi ini adalah aplikasi Android berbasis Jetpack Compose yang memiliki fitur:

• Menampilkan list anime (Gallery)

• Menampilkan detail anime

• Menambah data anime

• Toggle dark mode

Struktur utama:

• Model Data → Anime.kt

• Dummy Data → DummyData.kt

• UI Layer → Gallery, Detail, Add, Item

• Navigation → AppNavigation (NavHost)

---

2. Model Data

Anime.kt

data class Anime(
    val id: Int,
    val title: String,
    val season: String,
    val eps: String,
    val imageUri: String,
    val releaseDate: String,
    val genre: List<String>,
    val rating: String,
    val synopsis: String
)

Penjelasan

• Representasi 1 data anime

• Dipakai di seluruh UI

• Menggunakan data class agar otomatis punya:

  • equals

  • copy

  • toString

---

3. Dummy Data (Sumber Data Awal)

DummyData.kt

object DummyData {
    val animeList: List<Anime> = listOf(
        Anime(
            id = 1,
            title = "Naruto",
            season = "Finished Airing",
            eps = "220",
            imageUri = "https://cdn.myanimelist.net/images/anime/13/17405.jpg",
            releaseDate = "2002"
        )
    )
}

Penjelasan

• Data sementara (mock data)

• Digunakan sebelum backend tersedia

• Disimpan dalam object agar global

---

4. Main Activity (Entry Point)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            var darkMode by remember { mutableStateOf(false) }

            ETS_2Theme(darkTheme = darkMode) {
                AppNavigation(
                    darkMode = darkMode,
                    onToggleDarkMode = { darkMode = !darkMode }
                )
            }
        }
    }
}

Penjelasan

• Entry point Compose

• setContent menggantikan XML

• darkMode adalah state global tema

• Theme dikontrol dari root

• Semua UI masuk ke AppNavigation

---

5. Navigation System

AppNavigation

Fungsi

Mengatur perpindahan antar screen menggunakan NavHost

---

Setup NavController

val navController = rememberNavController()

• Mengontrol navigasi antar halaman

---

Shared State Data

val animeList = remember {
    mutableStateListOf<Anime>().apply {
        addAll(DummyData.animeList)
    }
}

• Reactive list (UI auto update jika berubah)

• Shared ke semua screen

---

Navigation Graph

NavHost(navController, startDestination = "gallery") {

Start screen: Gallery

---

Routes

Gallery Screen

composable("gallery") {
    GalleryScreen(...)
}

Detail Screen

composable("detail/{id}") { backStackEntry ->
    val id = backStackEntry.arguments?.getString("id")?.toInt() ?: 0
}

• Menggunakan parameter route {id}

• Dipakai untuk ambil detail anime

Add Screen

composable("add") {
    AddScreen(...)
}

---

6. Anime Item Component

Fungsi

@Composable
fun AnimeItem(anime: Anime, onClick: () -> Unit)

Struktur UI

• Card clickable

• Image anime

• Title

• Rating

---

Komponen Utama

Image

• Load dari URL (Coil)

• Crop agar proporsional

Title

• Max 2 baris

• Overflow pakai ellipsis

Rating

• Ditampilkan dengan icon bintang

---

Behavior

• Klik item → navigate ke detail

---

7. Gallery Screen (Home)

Fungsi

fun GalleryScreen(
    navController: NavController,
    animeList: MutableList<Anime>,
    onToggleDarkMode: () -> Unit
)

---

Struktur

Top Bar

• Judul aplikasi

• Button toggle dark mode

---

Floating Action Button

• Navigasi ke Add Screen

navController.navigate("add")

---

Content Layout

• Vertical scroll

• Beberapa section anime

---

Section Pembagian Data

animeList.take(5)
animeList.drop(5).take(5)
animeList.drop(10).take(6)

Penjelasan:

• Hanya pembagian dummy

• Bukan kategori asli

---

Anime Section

• Judul section

• Horizontal grid list

• Klik item → detail

navController.navigate("detail/${anime.id}")

---

8. Detail Screen

Fungsi

fun DetailScreen(animeId: Int, animeList: List<Anime>)

---

Flow Data

• Cari anime berdasarkan ID

val anime = animeList.find { it.id == animeId }

---

UI Structure

• TopBar (title + dark mode toggle)

• Scrollable content

---

Content

Header

• Image

• Title

• Basic info (release, eps, rating)

Genre

• Horizontal chip list

Synopsis

• Deskripsi anime

Additional Info

• Format label-value (table style)

---

Safety Check

anime?.let { }

• UI hanya tampil jika data ada

---

9. Add Screen (Form Input)

Fungsi

fun AddScreen(navController: NavController, animeList: MutableList<Anime>)

---

State Input

• title

• season

• episode

• rating

• synopsis

• genre

• image

Semua menggunakan:

remember { mutableStateOf("") }

---

Image Picker

rememberLauncherForActivityResult(GetContent())

• Membuka gallery

• Hasil berupa URI

---

Save Data

animeList.add(
    Anime(
        id = (0..99999).random(),
        title = title,
        genre = genre.split(",").map { it.trim() },
        imageUri = selectedImage ?: ""
    )
)

---

Navigasi Setelah Save

navController.popBackStack()

• Kembali ke Gallery

---

10. Konsep Penting (Ringkasan)

State Management

• remember → local state UI

• mutableStateListOf → shared reactive list

Navigation

• NavHost → routing system

• navController.navigate() → pindah screen

• popBackStack() → kembali

UI Pattern

• Gallery → list view

• Detail → data by ID

• Add → form input

Data Flow

DummyData → MutableList → UI → AddScreen → update list → UI refresh

---

11. Kesimpulan

Arsitektur aplikasi ini sederhana namun sudah mencakup:

• State management Compose

• Navigation multi-screen

• CRUD sederhana (Create + Read)

• Reactive UI

• Modular composable components