Hari 7: Tinjauan Minggu 1 — Refactor Project dan Progres UI Login

Fri, May 2025 14:32:41

Halo teman-teman! Nggak terasa ya, kita sudah sampai di hari ke-7 dalam perjalanan ngoding kita minggu ini. Di artikel kali ini, kita bakal melakukan tinjauan minggu pertama alias weekly review. Fokus utamanya adalah tentang proses refactor project yang sudah kita mulai dan tentu saja, progres penting: "Sudah bisa bikin UI login!". Mantap, kan?

Yuk, kita bedah bareng-bareng prosesnya, kenapa perlu refactor, gimana step-by-step bikin UI login, sampai rencana kita ke depan. Artikel ini gue tulis dengan gaya yang santai tapi tetap padat dan mendalam, supaya enak dibaca kayak lagi ngopi bareng sambil bahas coding.

🚀 Kenapa Refactor di Minggu Pertama?

Minggu pertama adalah fondasi. Kita udah setup project, bikin struktur awal, dan mulai nulis kode. Tapi, setelah 5-6 hari ngebut, biasanya ada hal-hal yang perlu diberesin lagi:

Penamaan file belum konsisten
Folder dan struktur belum rapi
Kode masih "trial & error", alias belum clean

Nah, refactor di hari ke-7 ini penting banget supaya project kita jadi lebih scalable dan maintainable ke depannya. Jangan sampai 3 minggu lagi kita bingung sendiri nyari file atau function. 😅

🔧 Apa Saja yang Direfactor?

Struktur Folder:
- Sebelumnya: lib/screens, lib/widgets, lib/pages
- Setelah refactor: lib/features/auth, lib/common, lib/core
Kita pakai pendekatan feature-based structure. Jadi semua yang berkaitan sama auth (login, register, dsb) ada di satu folder: features/auth. Lebih modular dan enak di-maintain.
Penamaan File:
- Dari: loginPage.dart jadi login_page.dart
- Konvensi pakai snake_case, biar konsisten dan lebih Flutter-style.
State Management:
- Mulai pisah-pisah StatefulWidget dan logic-nya
- Mulai pakai provider untuk simpan state login (walau masih basic)
Theme dan Styling:
- Pindahin warna-warna dan text style ke satu file theme.dart
- Supaya nggak ngulang-ngulang TextStyle(... fontSize: 16) di tiap file

Progres Minggu Ini: Bikin UI Login

Akhirnya, UI login berhasil dibuat! Mungkin masih sederhana, tapi ini milestone penting karena login adalah pintu utama ke semua fitur lain.

Desain UI

UI login kita punya komponen berikut:

Logo/Ilustrasi
Input Email
Input Password
Tombol Login
Link "Lupa password" dan "Belum punya akun? Daftar"

Desainnya simple, modern, dan tentunya responsive.

Implementasi UI Login

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Login', style: Theme.of(context).textTheme.headlineMedium),
            const SizedBox(height: 32),
            TextField(
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Login'),
            ),
            TextButton(
              onPressed: () {},
              child: const Text('Lupa password?'),
            ),
            TextButton(
              onPressed: () {},
              child: const Text('Belum punya akun? Daftar'),
            )
          ],
        ),
      ),
    );
  }
}

Gampang dimengerti, readable, dan gampang buat dimodifikasi nanti.

Tips dari Proses Ini:

Pakai const di mana-mana buat performa
Pikirin padding dan spacing dari awal
Coba semua di device/emulator berbeda ukuran

Catatan Progres Mingguan

Kalau disimpulkan, progres kita minggu pertama kayak gini:

Hari	Fokus	Status
1	Setup project + folder	✅ Done
2	Bikin UI basic	✅ Done
3	Bikin halaman login	✅ Done
4	Tambah navigasi sederhana	✅ Done
5	Coba konek ke backend mock	⚠️ Masih dummy
6	Fix bug padding/layout	✅ Done
7	Refactor + Review	✅ Done

Progress checklist ini penting buat ngelacak perkembangan dan bikin kita tetap termotivasi. Jangan lupa cek dan review tiap akhir minggu ya!

Rencana Minggu Kedua

Apa yang mau kita capai minggu depan?

Integrasi backend (login):
- Mulai coba konek ke API
- Simpan token user
Validasi Form Login:
- Cek email format, password kosong, dll
State Management lebih rapih:
- Pakai Provider atau Riverpod yang lebih advance
Coba pakai SharedPreferences:
- Simpan status login user di local
Mulai halaman Home setelah login berhasil

Penutup: Belajar Itu Iteratif

Minggu pertama bukan soal kesempurnaan. Tapi soal nyoba, gagal, refactor, belajar, dan ulangi. Refactor itu bagian dari belajar. UI login mungkin terlihat simpel, tapi itu batu loncatan ke fitur-fitur yang lebih kompleks.

Terus konsisten, evaluasi, dan jangan lupa nikmati prosesnya. Coding bukan cuma tentang hasil akhir, tapi tentang gimana kita berkembang bareng kode yang kita tulis.

Sampai ketemu di minggu kedua!

"Jangan tunggu sempurna untuk mulai. Tapi mulai dulu, nanti juga bakal disempurnakan." — Yudian Malik. 😄