Latihan Composable

 

Untuk materi awal Jetpack Compose, mini project sebaiknya sederhana tetapi masing-masing memperkenalkan pola @Composable yang berbeda. Saya sarankan 5 project berikut.

1. Greeting Card App 👋

Konsep: membuat kartu ucapan.

┌──────────────────────────┐
│       GREETING CARD      │
│                          │
│          👋              │
│                          │
│    Hello, Android!       │
│    Welcome to Compose    │
│                          │
│       [ Start ]          │
└──────────────────────────┘

Composable yang dikenalkan:

• Column
• Text
• Button
• Spacer
• Modifier
• @Preview

Contoh konsep kode:

@Composable
fun GreetingCard() {
    Column(
        modifier = Modifier.padding(24.dp)
    ) {
        Text("Hello, Android!")
        Spacer(Modifier.height(8.dp))
        Text("Welcome to Jetpack Compose")

        Button(onClick = {}) {
            Text("Start")
        }
    }
}

Nilai pembelajaran: mahasiswa memahami bahwa UI dapat dipecah menjadi composable kecil.

---

2. Simple Calculator 🧮

Konsep: kalkulator sederhana dua angka.

┌──────────────────────────┐
│      SIMPLE CALCULATOR   │
├──────────────────────────┤
│                          │
│   [ 10 ]   [ 5 ]        │
│                          │
│  [+] [-] [×] [÷]         │
│                          │
│       Result: 15         │
└──────────────────────────┘

Composable:

CalculatorScreen
│
├── Text
├── NumberInput
├── NumberInput
├── Row
│   ├── OperationButton
│   ├── OperationButton
│   ├── OperationButton
│   └── OperationButton
└── Result

Konsep yang diperkenalkan:

• Composable function
• TextField
• Row
• Column
• Button
• parameter composable
• event sederhana

Contoh reusable component:

@Composable
fun OperationButton(
    symbol: String,
    onClick: () -> Unit
) {
    Button(onClick = onClick) {
        Text(symbol)
    }
}

Nilai pembelajaran: mahasiswa mulai memahami reusable composable.

---

3. Food Menu App 🍔

Konsep: menampilkan menu makanan dalam bentuk card.

┌──────────────────────────┐
│       FOOD MENU          │
├──────────────────────────┤
│ 🍔  Burger       $5      │
│     Beef Burger          │
├──────────────────────────┤
│ 🍕  Pizza        $8      │
│     Cheese Pizza         │
├──────────────────────────┤
│ 🍜  Noodle       $4      │
│     Chicken Noodle       │
└──────────────────────────┘

Composable:

FoodMenuScreen
│
├── TopBar
│
├── FoodCard
│   ├── Image
│   ├── Text
│   ├── Text
│   └── Button
│
├── FoodCard
│
└── FoodCard

Contoh:

@Composable
fun FoodCard(
    name: String,
    price: String
) {
    Card {
        Row(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(name)

            Spacer(
                modifier = Modifier.weight(1f)
            )

            Text(price)
        }
    }
}

Konsep:

• Card
• Row
• Image
• Text
• Button
• parameter
• reusable component
• Modifier

Nilai pembelajaran: sangat bagus untuk menjelaskan componentization.

---

4. To-Do List App ✅

Konsep: aplikasi daftar tugas sederhana.

┌──────────────────────────┐
│       MY TODO LIST       │
├──────────────────────────┤
│ [ Enter task........ ]   │
│                  [ADD]   │
├──────────────────────────┤
│ ☑ Learn Kotlin           │
│ ☐ Learn Compose          │
│ ☐ Build Android App      │
│ ☐ Submit Assignment      │
└──────────────────────────┘

Composable:

TodoScreen
│
├── TodoInput
│   ├── TextField
│   └── Button
│
└── TodoList
    │
    ├── TodoItem
    ├── TodoItem
    └── TodoItem

Contoh reusable item:

@Composable
fun TodoItem(
    task: String
) {
    Row(
        modifier = Modifier.padding(12.dp)
    ) {
        Checkbox(
            checked = false,
            onCheckedChange = {}
        )

        Text(task)
    }
}

Konsep:

• TextField
• Checkbox
• Row
• Column
• state sederhana
• event
• list

Nilai pembelajaran: menjadi jembatan dari Composable → State → Event → List.

---

5. Digital Business Card 📱

Konsep: kartu bisnis digital untuk seorang developer.

┌──────────────────────────┐
│                          │
│          👤              │
│                          │
│       Fajar B.           │
│    Android Developer     │
│                          │
│ ───────────────────────  │
│ 📧 email@example.com     │
│ 📱 +62 xxx xxx           │
│ 🌐 portfolio.com         │
│                          │
│    [ Contact Me ]        │
└──────────────────────────┘

Struktur:

BusinessCard
│
├── ProfileImage
├── Name
├── JobTitle
├── Divider
│
├── ContactItem
├── ContactItem
├── ContactItem
│
└── Button

Contoh reusable component:

@Composable
fun ContactItem(
    icon: String,
    text: String
) {
    Row(
        modifier = Modifier.padding(8.dp)
    ) {
        Text(icon)
        Spacer(Modifier.width(12.dp))
        Text(text)
    }
}

Konsep:

• Column
• Row
• Image
• Text
• Divider
• Button
• reusable composable
• parameter
• layout

---

Perbandingan 5 Mini Project

Mini Project	Fokus Utama	Composable Utama	Level
👋 Greeting Card	Dasar Composable	Column, Text, Button	⭐
🧮 Calculator	Reusable Component	Row, TextField, Button	⭐⭐
🍔 Food Menu	Componentization	Card, Image, Row	⭐⭐
✅ To-Do List	State & Event	TextField, Checkbox, List	⭐⭐⭐
📱 Business Card	UI Composition	Column, Row, Image, Button	⭐⭐

Urutan yang saya rekomendasikan untuk kuliah

GREETING CARD
      ↓
Memahami @Composable
      ↓
CALCULATOR
      ↓
Reusable Composable + Parameter
      ↓
FOOD MENU
      ↓
Componentization
      ↓
BUSINESS CARD
      ↓
Layout Composition
      ↓
TO-DO LIST
      ↓
State + Event
      ↓
MINI PROJECT
      ↓
Aplikasi Android sederhana

Yang paling efektif untuk menjelaskan konsep Composable menurut saya adalah Food Menu App. Karena mahasiswa bisa langsung melihat bagaimana satu FoodCard() dibuat sekali, kemudian digunakan berkali-kali dengan data berbeda. Ini memperkenalkan ide penting Compose: UI dibangun dari composable kecil yang reusable dan dapat dikomposisikan.