Tutorial Vibe Coding: Aplikasi Uang Saku (Part 1)

Posted by By asmaul husna 11 Min Read

Dalam pengembangan aplikasi mobile, efisiensi waktu adalah hal yang sangat penting. Oleh karena itu, penerapan Vibe Coding hadir sebagai solusi cerdas bagi pengembang. Selain itu, pendekatan ini memudahkan kita dalam merancang antarmuka tanpa membuang waktu. Namun, kita tetap harus memahami logika kode yang dihasilkan. Sebagai contoh, pada tutorial ini kita akan menyusun komponen langkah demi langkah. Dalam tutorial ini, kita akan belajar cara membuat aplikasi uang saku mahasiswa kost menggunakan Flutter dengan metode Vibe Coding.

1. Apa Itu Vibe Coding?

Vibe Coding adalah paradigma pemrograman modern di era AI di mana developer tidak lagi menghabiskan 80% waktunya untuk mengetik sintaks boilerplate secara manual atau berkutat mencari tanda titik-koma yang hilang.

Sebaliknya, pengembang bertindak sebagai Arsitek & Sutradara Kreatif:

  • Mengarahkan ide, logika bisnis, dan nuansa (vibe) aplikasi lewat instruksi bahasa alami (prompt).
  • Membaca dan memvalidasi kode yang dihasilkan AI secara kritis.
  • Melakukan iterasi cepat terhadap estetika desain, responsivitas, dan pengalaman pengguna (user experience).

2. Mengapa Studi Kasus “Uang Saku Mahasiswa Kost”?

Masalah terbesar mahasiswa perantau (anak kost) adalah ketidaksadaran finansial harian. Seringkali uang kiriman bulanan habis di pertengahan bulan karena tidak ada batasan kuota harian. Aplikasi “UangSaku Kost” dirancang untuk memecahkan masalah ini dengan fitur kunci:

  • Menghitung sisa saldo bulanan.
  • Membagi dan memantau batas jatah harian (indikator otomatis apakah hari ini hemat atau boros).
  • Tombol pencatatan instan 1-Tap untuk kebutuhan mahasiswa (Makan, Kost, Tugas).

3. Mengapa Memilih Flutter?

  • Single Codebase: Satu kode Dart bisa dijalankan langsung di Android, iOS, dan Web.
  • Widget-Centric & Deklaratif: Sangat cocok dengan pola Vibe Coding karena komponen dapat dirombak secara modular.
  • Material 3 Ready: Memudahkan pembuatan tampilan modern dengan sudut melengkung halus (rounded corner).

Dalam tutorial ini, kita akan menerapkan paradigma modern bernama Vibe Coding, yaitu cara membangun aplikasi di mana kita berfokus pada visi desain dan arahan kreatif bersama kecerdasan buatan, alih-alih disibukkan oleh penulisan kode manual yang rumit. Studi kasus yang kita angkat sangat dekat dengan kehidupan mahasiswa, yaitu memecahkan masalah keuangan anak kost agar uang saku bulanan tidak cepat habis melalui aplikasi pelacak pengeluaran harian.

Aplikasi yang kita bangun bernama UangSaku Kost, dirancang khusus dengan tema pastel lembut Baby Pink & Baby Blue serta personalisasi profil Asmaul Husna dari jurusan Sistem Informasi sebagai contoh. Menggunakan kerangka kerja Flutter https://flutter.dev/, aplikasi ini dilengkapi fitur pemantau sisa saldo bulanan, indikator otomatis jatah harian agar tidak boros, tombol catat cepat kebutuhan mahasiswa, hingga layar pembuka animasi dengan logo dompet yang manis.

Melalui pendekatan ini, Anda akan melihat bagaimana ide sederhana dapat diwujudkan secara cepat menjadi aplikasi mobile yang rapi, responsif, dan siap digunakan di ponsel pintar. Sekarang, mari kita mulai langkah demi langkah pembuatannya.

A. Panduan Lengkap: Penerapan Vibe Coding dalam Pengembangan Aplikasi Uang Saku Anak Kost Menggunakan Flutter

FASE 1: Persiapan Antigravity & Android Studio

Pada fase ini, kita menyiapkan dua senjata utama: Antigravity (sebagai partner AI coding) dan Android Studio (sebagai dapur kompilasi aplikasi Android).

1. Mengunduh & Membuka Antigravity

Langkah:

  1. Unduh aplikasi Antigravity dari portal resmi Google DeepMind / Antigravity IDE.
  2. Lakukan instalasi pada laptop/komputer Anda (Windows/Mac) dan lakukan login akun.
  3. Buka Antigravity, lalu buat sesi percakapan kerja baru (New Workspace / Chat).

Penjelasan: Antigravity bertindak sebagai agen AI coding yang mampu merancang arsitektur, menulis kode Flutter, memperbaiki overflow, hingga menyusun file konfigurasi proyek secara mandiri.

2. Memastikan Android Studio & Flutter Terpasang

Langkah:

  1. Unduh dan pasang Android Studio (resmi dari developer.android.com).
  2. Buka Android Studio -> Masuk ke menu Plugins -> Cari dan instal plugin Flutter dan Dart.
  3. Pastikan komponen Android SDK terpasang lengkap melalui SDK Manager.

Penjelasan: Android Studio menyediakan alat kompilasi (Gradle & Java SDK) yang bertugas membungkus kode Flutter menjadi paket biner .apk yang dimengerti oleh sistem operasi Android.

FASE 2: Ekskusi Vibe Coding di Antigravity (Rangkaian Prompt)

Di tahap ini, kita menerapkan metode Vibe Coding: memberi instruksi berbasis kebutuhan dan menyempurnakan rasa (vibe) secara iteratif.

1. Prompt Pertama (Konsep & Fondasi UI)

Ketik dan kirimkan prompt pertama ke Antigravity:

Prompt 1:
“Sebagai mobile software developer, tolong buatkan layar utama (Home Screen) untuk aplikasi UangSaku Kost (Budgeting Harian Mahasiswa) menggunakan Flutter.
Spesifikasi Desain Antarmuka:
1. Bagian Header: Sambutan pengguna, foto profil avatar melingkar, dan judul aplikasi yang bersih.
2. Komponen Utama: Riwayat transaksi & badge kategori.
3. Tampilan Modern: Desain flat/modern dengan rounded corner 12px, elevasi halus, kartu ringkasan saldo bulanan & sisa harian, serta form cepat catat pengeluaran (Makan, Kost, Tugas).
4. Batasan Teknis: Layout responsif, modular, bebas render overflow pada layar kecil. Sediakan kode lengkap siap jalan dengan data dummy realistis.”

Penjelasan: Antigravity akan langsung menyusun seluruh arsitektur lib/main.dart, menyiapkan data model transaksi, kalkulasi saldo otomatis, dan antarmuka modular.

2. Prompt Kedua (Personalisasi Identitas & Warna Pastel)

Setelah fondasi aplikasi selesai, lakukan iterasi vibe untuk menyesuaikan nama pemilik dan tema visual:

Prompt 2:
“UBAH USERNAME MENJADI ASMAUL HUSNA DAN USERSUBTITLE MENJADI SISTEM INFORMASI DAN TAMPILAN BERWARNA BABY PINK DAN BABY BLUE”

Penjelasan: Antigravity secara cerdas merombak seluruh token warna aplikasi menjadi gradasi Baby Pink (#F472B6) dan Baby Blue (#60A5FA), mengubah nama pengguna menjadi Asmaul Husna, serta memperbarui inisial avatar menjadi AH.

3. Prompt Ketiga (Logo Dompet & Animated Splash Screen)

Agar tampilan aplikasi menyerupai aplikasi komersial di Play Store:

Prompt 3:
“Tambahkan layar awal (Splash Screen) berlogo resmi seperti Dompet Uang Saku berwarna Baby Pink dan Baby Blue sebelum masuk ke menu utama.”

Penjelasan: Antigravity menambahkan widget SplashScreen dengan animasi logo dompet uang saku beraksen koin “Rp” selama 2 detik sebelum berpindah otomatis ke halaman dashboard.

FASE 3: Merakit File APK Menggunakan Android Studio

Setelah seluruh kode selesai dibuat oleh Antigravity, sekarang kita memindahkannya ke Android Studio untuk dicetak menjadi file APK.

1. Menyiapkan Proyek di Android Studio
  1. Buka Android Studio.
  2. Pilih menu File -> New -> New Flutter Project.
  3. Beri nama proyek: uangsaku_kost, lalu klik Create.
  4. Tunggu beberapa saat hingga Android Studio selesai mengunduh file pendukung (Gradle sync).
2. Memasukkan Kode Hasil dari Antigravity
  1. Di panel kiri Android Studio, buka folder: uangsaku_kost -> lib -> main.dart.
  2. Hapus seluruh isi file bawaan tersebut.
  3. Buka file hasil buatan Antigravity di folder: 👉 lib/main.dart
  4. Salin seluruh kode (Copy-Paste) ke dalam lib/main.dart di Android Studio, lalu tekan Ctrl + S (Simpan).
3. Proses Kompilasi APK (Build APK)

Ada 2 cara mudah di Android Studio:

  • Cara Menu Visual (Tanpa Terminal):
    1. Klik menu bar atas: Build ➔ pilih Flutter ➔ klik Build APK.
  • Cara Terminal Android Studio:
    1. Buka tab Terminal di bagian bawah Android Studio.
    2. Ketik perintah berikut lalu tekan Enter: bashflutter build apk –release
  • Penjelasan: Android Studio akan menjalankan mesin Gradle untuk mengubah kode Dart menjadi format biner ARM Android. Tunggu sekitar 1–3 menit hingga muncul pesan:
    ✓ Built build/app/outputs/flutter-apk/app-release.apk.

LANGKAH 1: Persiapan Proyek & Desain Tema Pastel

Tujuan: Membuat proyek baru dan menentukan identitas warna aplikasi sejak awal agar konsisten di semua komponen antarmuka.

Penjelasan: Kita mengaktifkan useMaterial3: true dan memilih warna dasar seedColor Baby Pink (#F472B6) serta warna sekunder Baby Blue (#60A5FA). Warna latar belakang menggunakan #FDF8FA (putih pastel lembut) agar nyaman dipandang.

Buka lib/main.dart di android studio dan buat kerangka utamanya:

LANGKAH 2: Layar Pembuka Animasi (Animated Splash Screen)

Tujuan: Menghadirkan layar pembuka berlogo resmi layaknya aplikasi komersial di Play Store. Penjelasan:

  1. SingleTickerProviderStateMixin: Menyediakan pengatur waktu (ticker) agar animasi berjalan mulus pada 60 fps.
  2. _scaleAnimation: Memberikan efek pantulan lembut (Curves.easeOutBack) pada kartu logo dompet sehingga tampak hidup saat muncul.
  3. Future.delayed: Memberi jeda waktu selama 2 detik sebelum berpindah halaman.
  4. Navigator.pushReplacement: Mengalihkan layar ke HomeScreen sekaligus menghapus SplashScreen dari tumpukan memori, sehingga tombol Back di HP tidak akan kembali ke layar pembuka.
  5. LinearGradient: Menghasilkan latar belakang gradasi halus tiga warna (Baby Pink, Rose, dan Baby Blue).

LANGKAH 3: Model Data, Enum Kategori, & Currency Formatter

Tujuan: Menyiapkan struktur data pengeluaran dan konversi nominal angka ke format Rupiah secara mandiri.

Penjelasan Poin-Poin:

  1. ExpenseCategory: Enum yang memetakan 4 kategori utama (Makan, Kost, Tugas, Lainnya). Setiap kategori memiliki ikon serta kombinasi warna primer dan warna latar belakang pastel.
  2. TransactionItem: Model entitas yang menyimpan data ID, judul transaksi, nominal angka (amount), kategori, dan waktu transaksi (dateTime).
  3. formatRupiah(): Algoritma penyisipan tanda titik (.) setiap 3 digit angka ribuan tanpa bantuan pustaka eksternal (intl), membuat kode mandiri dan bebas galat versi pustaka.
  4. formatDate(): Menentukan label tanggal secara ramah pengguna (menampilkan kata “Hari ini” atau “Kemarin”).

LANGKAH 4: State Utama & Logika Finansial (HomeScreen)

Tujuan: Mengelola logika kalkulasi sisa anggaran, penyaringan kategori, dan penambahan transaksi baru.

Penjelasan Poin-Poin:

  1. monthlyBudget = 2000000: Batas total uang saku bulanan mahasiswa kost (Rp 2.000.000).
  2. dailyAllowance = 50000: Kuota aman pengeluaran per hari (Rp 50.000).
  3. totalExpenses: Getter matematika yang menghitung jumlah kumulatif seluruh nominal transaksi dengan fungsi .fold().
  4. todayExpenses: Menyaring transaksi khusus pada tanggal hari ini untuk dibandingkan dengan jatah harian.
  5. _addNewTransaction(): Menyisipkan transaksi baru ke indeks teratas (0) daftar transaksi dan memicu setState() agar antarmuka terperbarui secara real-time.

LANGKAH 5: Komponen Header & Identitas Pengguna Aplikasi

Tujuan: Menampilkan identitas personal aplikasi (Asmaul Husna – Sistem Informasi).

Penjelasan Poin-Poin:

  1. Badge UangSaku Kost: Tag kecil berwarna Baby Blue (#E0F2FE) yang menegaskan nama produk.
  2. TextOverflow.ellipsis: Mencegah teks meluber (overflow) jika nama pengguna panjang di layar ponsel berukuran kecil.
  3. Circular Avatar: Lingkaran foto profil bergradasi Baby Pink ke Baby Blue yang memuat inisial AH.

Lanjut membaca tutorial
👉Tutorial Aplikasi Uang Saku (Part 2)