Membangun Aplikasi To-Do iOS Sederhana: Kelola List & Input Pengguna

Woy gaes! Siapa nih di sini yang suka punya ide atau to-do list segambreng tapi suka kelewat atau lupa mana yang udah dikerjain? Atau mungkin bingung gimana sih caranya biar list impian lo itu bisa terorganisir rapi di iPhone? Nah, pas banget nih! Kali ini, kita bakal spill abis gimana caranya ngebangun aplikasi To-Do list sederhana di iOS. Dijamin gampang dan bikin lo makin produktif, anti wacana!

Gak perlu pusing, kita bakal fokus ke basic-nya dulu: gimana caranya nampilin daftar tugas dan gimana aplikasi lo bisa nerima input dari pengguna. Skuy, kita mulai ngoding!

Konsep Inti Biar App Lo On Point!

Sebelum nyemplung ke kode, ada beberapa konsep dasar yang wajib lo pahami biar vibes development-nya makin asik:

1. UITableView: Ini adalah komponen UI yang paling penting buat nampilin daftar atau list data yang banyak (kayak list tugas lo). Nanti setiap tugas bakal jadi satu "cell" di dalam table view ini.
2. UITextField: Nah, kalo ini buat nerima input dari pengguna. Misalnya, lo mau nambahin tugas baru, ya ngetiknya di UITextField ini.
3. UIButton: Tombol Add atau Tambahkan tugas, biar tugas baru yang udah diketik di UITextField bisa masuk ke UITableView.
4. Data Source (Sumber Data): Aplikasi lo butuh tempat buat nyimpen data tugas-tugas itu. Paling simpel, kita bisa pake Array of String.
5. Reload Data: Setiap kali ada perubahan di data (misalnya nambah tugas baru), UITableView itu gak akan otomatis update. Kita harus bilang ke table view-nya buat "reload" biar tampilannya ngikutin data terbaru.

Let's Get Started! Bikin Project Baru di Xcode

1. Buka Xcode: Tentunya, langkah pertama adalah buka Xcode kesayangan lo.
2. Create a new Xcode project: Pilih opsi ini.
3. Pilih Template: Pilih iOS -> App. Klik Next.
4. Konfigurasi Project:
   • Product Name: MySimpleToDoApp (atau nama keren lainnya).
   • Interface: Pilih Storyboard (buat pemula, ini paling gampang diajak ngobrol).
   • Language: Swift (tentu saja!).
   • Sisanya biarin default aja dulu. Klik Next dan pilih lokasi penyimpanan project lo.

Yess, project baru lo udah jadi! Sekarang kita masuk ke bagian seru, desain UI-nya di Storyboard.

Desain UI di Main.storyboard: Biar Tampilan Cakep!

Buka file Main.storyboard di folder project lo. Kita bakal nambahin tiga komponen utama:

1. UITextField:
   • Cari Text Field di Library Object (ikon + di pojok kanan atas).
   • Drag ke ViewController scene.
   • Atur posisinya di bagian atas, kasih placeholder text kayak "Apa tugasmu hari ini?".
   • Constraints: Penting banget ini gaes! Biar UI lo responsif di berbagai ukuran iPhone. Kasih constraint ke atas, kiri, dan kanan. Tinggi default biasanya udah pas.
2. UIButton:
   • Cari Button di Library Object.
   • Drag ke ViewController scene, posisikan di samping atau di bawah UITextField.
   • Ganti teksnya jadi "Tambah Tugas".
   • Constraints: Kasih constraint ke UITextField dan ke pinggir.
3. UITableView:
   • Cari Table View di Library Object.
   • Drag ke ViewController scene, posisikan di bawah UITextField dan UIButton.
   • Constraints: Kasih constraint ke bawah UIButton, kiri, kanan, dan bawah Safe Area.

Tips Kecil: Untuk UITableView, jangan lupa kasih Prototype Cell dengan identifier ToDoCell. Caranya: pilih Table View, di bagian Attributes Inspector (panel kanan), atur Prototypes jadi 1. Lalu pilih Table View Cell yang ada di dalamnya, di Attributes Inspector bagian Identifier, kasih nama ToDoCell.

Ngoding di ViewController.swift: Otak Aplikasinya!

Sekarang waktunya kita 'menghidupkan' UI yang udah kita desain. Buka file ViewController.swift.

1. Konekin Outlet & Action

Kita perlu konekin komponen UI di Storyboard ke kode Swift kita. Ini namanya IB Outlet dan IB Action.

• Buka Main.storyboard dan ViewController.swift secara bersamaan (pake Assistant Editor atau klik ikon adjust editor options di kanan atas editor, pilih Canvas -> Assistant).
• UITextField: Control-drag dari Text Field di Storyboard ke dalam class ViewController di Swift. Pilih Outlet, kasih nama taskTextField.
• UITableView: Control-drag dari Table View di Storyboard ke dalam class ViewController. Pilih Outlet, kasih nama toDoTableView.
• UIButton: Control-drag dari Button di Storyboard ke dalam class ViewController. Pilih Action, kasih nama addTaskButtonTapped, dan pastikan Typenya UIButton.

Setelah itu, kode lo harusnya punya IB Outlets dan IB Action mirip gini:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var taskTextField: UITextField!
    @IBOutlet weak var toDoTableView: UITableView!

    // Ini bakal jadi data source kita
    var tasks: [String] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        // Jangan lupa set delegate & data source buat table view
        toDoTableView.dataSource = self
        toDoTableView.delegate = self // Kita akan implement delegate buat hal lain, tapi for now, cukup dataSource.
    }

    @IBAction func addTaskButtonTapped(_ sender: UIButton) {
        // Logika saat tombol Tambah Tugas ditekan
    }
}

2. Implementasi UITableViewDataSource

Ini adalah "penyedia data" buat table view lo. Lo harus bilang ke table view berapa banyak baris yang harus ditampilin dan apa isi setiap barisnya.

Tambahkan ekstensi di bawah class ViewController lo:

extension ViewController: UITableViewDataSource {

    // Berapa banyak baris di setiap section?
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tasks.count // Jumlah baris sama dengan jumlah tugas yang ada
    }

    // Apa isi setiap cell-nya?
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ToDoCell", for: indexPath) // Ambil cell yang udah kita siapin di Storyboard
        
        // Atur teks di cell
        cell.textLabel?.text = tasks[indexPath.row]
        
        return cell
    }
}

Penting: Jangan lupa tambahin UITableViewDelegate di baris deklarasi ViewController lo biar self bisa jadi delegate dan data source: class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

3. Logika Tambah Tugas (addTaskButtonTapped)

Sekarang kita bikin tombol Tambah Tugas berfungsi.

    @IBAction func addTaskButtonTapped(_ sender: UIButton) {
        // Ambil teks dari text field
        if let newTask = taskTextField.text, !newTask.isEmpty {
            tasks.append(newTask) // Tambahin tugas baru ke array
            toDoTableView.reloadData() // Penting! Reload table view biar tampilannya update
            taskTextField.text = "" // Kosongin text field setelah tugas ditambahkan
            taskTextField.resignFirstResponder() // Sembunyiin keyboard
        }
    }

4. Menghilangkan Keyboard (Opsional tapi Good Practice)

Biar pengalaman pengguna makin smooth, keyboard harus bisa hilang setelah user selesai ngetik. Lo bisa tambahin ini di viewDidLoad dan juga saat addTaskButtonTapped:

override func viewDidLoad() {
    super.viewDidLoad()
    toDoTableView.dataSource = self
    toDoTableView.delegate = self // Tambahkan ini kalau mau pakai didSelectRowAt atau swipe to delete

    // Ini buat dismiss keyboard kalau tap di luar text field
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
    view.addGestureRecognizer(tapGesture)
}

@objc func dismissKeyboard() {
    view.endEditing(true)
}

Jalankan Aplikasi Lo!

Sekarang, coba Build and Run aplikasi lo (klik ikon Play di Xcode atau tekan Cmd + R). Harusnya, lo udah bisa:

• Melihat Text Field dan Button di bagian atas.
• Mengetik tugas di Text Field.
• Menekan tombol Tambah Tugas dan tugas itu muncul di Table View!

Gimana, asik kan? Lo baru aja sukses bikin aplikasi To-Do list paling basic di iOS!

Tips Lanjutan Buat Upgrade Aplikasi Lo!

• Delete Task (Swipe to Delete): Untuk bisa ngehapus tugas dengan swipe, lo perlu implementasi method tableView(_:commit:forRowAt:) dari UITableViewDelegate.
• Persist Data: Kalo aplikasi lo ditutup, tugas-tugas itu bakal hilang. Biar gak ilang, lo bisa nyimpen data ke UserDefaults (buat data kecil), Core Data, atau Realm (buat data yang lebih kompleks).
• Edit Task: Tambahin fitur buat ngedit tugas yang udah ada.
• Checkmark / Done Status: Bikin tugas bisa ditandai sebagai "selesai".
• Custom Cell: Bikin tampilan cell lo lebih menarik dari sekadar teks biasa, misalnya ada ikon atau checkbox.

Kesimpulan: Lo Udah Satu Langkah Lebih Maju!

Oke gaes, gimana? Vibes-nya ngoding aplikasi iOS itu emang seru banget kan! Dengan modal UITableView, UITextField, dan UIButton aja, lo udah bisa bikin aplikasi To-Do list yang fungsional. Ini pondasi penting banget buat ngembangin aplikasi iOS yang lebih kompleks lagi nantinya.

Terus eksplorasi, terus ngulik, dan jangan takut error! Setiap error adalah kesempatan buat belajar dan jadi makin jago. Semangat ngodingnya, ngab! Yuk, bikin iPhone lo makin produktif bareng hasil karya lo sendiri!