Android - Task Manager

 

Untuk membangun aplikasi Simple Task Manager menggunakan Jetpack Compose. Struktur ini mengikuti standar profesional dengan memisahkan data, komponen, dan layar utama.

---

1. Struktur File Proyek

Buatlah folder (package) di dalam com.example.taskapps sehingga strukturnya menjadi seperti ini:

• data/

  • Task.kt (Model data)

• ui/components/

  • TaskItem.kt (Komponen kartu tugas)

• ui/screens/

  • TaskListScreen.kt (Tampilan utama daftar tugas)

• MainActivity.kt (Titik masuk aplikasi)

---

2. Implementasi Kode

A. Model Data (data/Task.kt)

Kotlin

package com.example.taskapps.data

data class Task(
    val id: Int,
    val title: String,
    val description: String
)

B. Komponen UI (ui/components/TaskItem.kt)

Kotlin

package com.example.taskapps.ui.components

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.taskapps.data.Task

@Composable
fun TaskItem(task: Task) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp, horizontal = 8.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = task.title, style = MaterialTheme.typography.titleMedium)
            Text(text = task.description, style = MaterialTheme.typography.bodySmall)
        }
    }
}

C. Layar Utama (ui/screens/TaskListScreen.kt)

Kotlin

package com.example.taskapps.ui.screens

import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.example.taskapps.data.Task
import com.example.taskapps.ui.components.TaskItem

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TaskListScreen() {
    // Data dummy untuk ditampilkan
    val tasks = listOf(
        Task(1, "Install Android Studio", "Versi Ladybug 2024"),
        Task(2, "Belajar Kotlin", "Memahami data class dan fungsi"),
        Task(3, "Implementasi Compose", "Membuat UI deklaratif")
    )

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Task Manager") })
        }
    ) { paddingValues ->
        LazyColumn(modifier = Modifier.padding(paddingValues)) {
            items(tasks) { task ->
                TaskItem(task = task)
            }
        }
    }
}

D. Titik Masuk Utama (MainActivity.kt)

Kotlin

package com.example.taskapps

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.taskapps.ui.screens.TaskListScreen
import com.example.taskapps.ui.theme.TaskAppsTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Membungkus aplikasi dengan tema bawaan
            TaskAppsTheme { 
                TaskListScreen() 
            }
        }
    }
}

---

3. Ringkasan Langkah Menjalankan (Running)

1. Sync Gradle: Klik ikon gajah di pojok kanan atas untuk memastikan semua dependencies terunduh.

2. Pilih Device: Hubungkan HP Android (USB Debugging aktif) atau pilih Emulator di toolbar atas.

3. Klik Run (▶️): Tunggu proses Gradle Build selesai.

4. Verifikasi: Aplikasi akan terinstal otomatis di perangkat dan menampilkan daftar tugas yang sudah kita buat di data dummy.

---

Tips Pengembangan Selanjutnya:

• State Management: Gunakan remember { mutableStateListOf(...) } jika ingin daftar tugas bisa ditambah atau dihapus oleh pengguna secara real-time.

• Navigation: Tambahkan Jetpack Navigation jika ingin berpindah ke halaman "Detail Tugas" saat sebuah item di-klik.

      
Menuliskan Kode

---

Cara Membuatnya di Android Studio

1. Buka panel "Project" di sebelah kiri.

2. Cari folder java (atau kotlin+java) > com.example.taskapps.

3. Membuat Folder data:

   • Klik kanan pada com.example.taskapps.

   • Pilih New > Package.

   • Ketik data lalu tekan Enter.

4. Membuat Folder ui dan sub-folder:

   • Klik kanan pada com.example.taskapps.

   • Pilih New > Package.

   • Ketik ui.components (ini akan otomatis membuat folder ui dan folder components di dalamnya).

   • Ulangi lagi: Klik kanan pada com.example.taskapps, pilih New > Package, ketik ui.screens.

---

Cara Mengisi File ke Dalam Folder

Setelah folder siap, sekarang buat file kodenya:

Lokasi Folder	Cara Buat File	Nama File
data	Klik kanan folder > New > Kotlin Class/File	Task (Pilih Class)
ui.components	Klik kanan folder > New > Kotlin Class/File	TaskItem (Pilih File)
ui.screens	Klik kanan folder > New > Kotlin Class/File	TaskListScreen (Pilih File)

---

Tips Penting saat Copy-Paste Kode:

Pastikan baris paling atas di setiap file (package ...) sesuai dengan lokasinya.

• Di file Task.kt, baris pertamanya harus:

  package com.example.taskapps.data

• Di file TaskItem.kt, baris pertamanya harus:

  package com.example.taskapps.ui.components

• Di file TaskListScreen.kt, baris pertamanya harus:

  package com.example.taskapps.ui.screens

Jika ada tanda lampu merah (error) setelah Anda membuat folder ini, biasanya itu karena masalah import. Cukup arahkan kursor ke kode yang merah, lalu tekan Alt + Enter untuk memperbaikinya secara otomatis.