Aplikasi Pertamamu dengan AI: Pencatat Pengeluaran

Saatnya membuat aplikasi sungguhan. Di tutorial ini kamu akan membuat aplikasi pencatat pengeluaran harian dengan bantuan AI. Kamu tidak perlu memasang apa pun selain yang mungkin sudah ada di laptopmu, dan tidak perlu bisa ngoding.

Yang akan kamu kerjakan:

1. Mengirim spesifikasi ke AI.
2. Menyimpan hasilnya sebagai file dan membukanya di browser.
3. Menguji aplikasinya seperti pengguna yang iseng.
4. Menambah satu fitur dengan cara yang aman.
5. Memahami bagian-bagian penting kodenya.

Langkah 3 dan 5 yang membedakan vibe coding yang sehat dari sekadar “yang penting jalan”. Kalau belum membaca, sempatkan dulu apa itu vibe coding dan cara menulis prompt yang jelas.

Sebelum mulai

Yang kamu butuhkan:

• Chat AI apa saja yang bisa menulis kode, misalnya ChatGPT, Claude, atau Gemini. Versi gratis cukup untuk aplikasi sekecil ini.
• Editor teks. Notepad di Windows atau TextEdit di Mac sudah cukup. Kalau sudah punya VS Code, lebih nyaman lagi.
• Browser Chrome, Edge, atau Firefox.
• Waktu sekitar satu jam, dan secangkir kopi.

Aplikasinya akan berupa satu file index.html yang berisi tampilan dan logikanya sekaligus. Bentuk ini paling sederhana untuk aplikasi pertama: tanpa server, tanpa instalasi, cukup dibuka di browser.

Langkah 1: Kirim spesifikasi ke AI

Salin spesifikasi ini dan kirim ke chat AI pilihanmu. Ini spesifikasi yang kita susun di tutorial sebelumnya:

Buatkan aplikasi web sederhana dengan spesifikasi berikut.

TUJUAN
Mencatat pengeluaran harian supaya saya tahu uang habis ke mana.

PENGGUNA
Saya sendiri, dibuka di browser laptop atau HP.

FITUR (versi pertama, jangan tambahkan fitur lain)
1. Form untuk menambah catatan: keterangan (teks) dan jumlah (rupiah, bilangan bulat).
2. Daftar catatan hari ini, masing-masing dengan tombol hapus.
3. Total pengeluaran hari ini di bagian atas, dalam format Rupiah.

DATA
Disimpan di localStorage browser. Setiap catatan menyimpan tanggal,
supaya yang tampil hanya catatan hari ini.

BATASAN
- Satu file index.html saja (HTML, CSS, dan JavaScript di dalamnya).
- Tanpa library, tanpa login, tanpa server.
- Tampilan sederhana dan nyaman dipakai di layar HP.
- Teks dari pengguna harus ditampilkan sebagai teks biasa, jangan pakai innerHTML.

SELESAI JIKA
- Total benar setelah menambah dan menghapus catatan.
- Jumlah 0, negatif, desimal, atau keterangan kosong ditolak.
- Data tetap ada setelah halaman di-refresh.

Sebelum menulis kode, tanyakan dulu hal yang belum jelas.
Setelah selesai, jelaskan singkat cara kerjanya dan cara saya mengujinya.

Kalau AI balik bertanya (misalnya “mau warna apa?” atau “perlu konfirmasi sebelum menghapus?”), jawab singkat sesuai seleramu. Itu tanda baik: AI sedang memastikan, bukan menebak.

Langkah 2: Simpan hasilnya sebagai index.html

AI akan memberikan satu blok kode panjang yang diawali <!doctype html>. Lalu:

1. Buat folder baru, misalnya pencatat-pengeluaran.
2. Salin seluruh isi blok kode itu. Biasanya ada tombol Copy di pojok blok kode.
3. Buka Notepad, tempel, lalu pilih File → Save As.
4. Isi nama file index.html, ubah Save as type menjadi All files (*.*), dan pastikan Encoding UTF-8.
5. Simpan di folder tadi.

Langkah 4 penting. Kalau terlewat, Notepad diam-diam menyimpannya sebagai index.html.txt, dan browser akan menampilkan teks kode, bukan aplikasi.

Langkah 3: Buka di browser dan coba

Klik dua kali index.html. Aplikasinya terbuka di browser. Coba tambahkan beberapa catatan, misalnya “Kopi susu” 18000, “Makan siang” 25000, dan “Bensin” 30000. Totalnya harus menjadi Rp 73.000.

Selamat, aplikasimu jalan. Tapi jangan berhenti di sini. “Jalan” baru setengah dari “jadi”.

Langkah 4: Uji seperti pengguna yang iseng

Ingat bagian SELESAI JIKA di spesifikasi? Sekarang saatnya membuktikannya. Coba satu per satu:

Uji terakhir adalah uji keamanan kecil. Kalau teksnya berubah menjadi huruf tebal, berarti aplikasi menjalankan apa pun yang diketik pengguna sebagai kode HTML. Untuk aplikasi pribadi dampaknya kecil, tapi kebiasaan ini berbahaya di aplikasi yang dipakai banyak orang. Laporkan ke AI: “Keterangan berisi HTML ikut dirender. Tampilkan sebagai teks biasa dengan textContent.”

Kalau ada uji yang gagal, laporkan dengan pola yang sudah kita pelajari: yang kamu lakukan, yang kamu harapkan, dan yang terjadi.

Langkah 5: Tambah satu fitur, dengan aman

Setelah semua uji lulus, simpan salinan file yang sudah jalan, misalnya index-v1.html. Ini cadangan kalau perubahan berikutnya merusak sesuatu. (Nanti kebiasaan ini diganti dengan Git, yang jauh lebih rapi.)

Lalu minta satu fitur saja:

Tambahkan total pengeluaran bulan ini di bawah total hari ini.
Jangan ubah bagian lain. Berikan file index.html lengkap yang sudah diperbarui.

Simpan hasilnya, buka lagi, dan ulangi uji di langkah 4. Fitur baru tidak boleh merusak fitur lama. Pengecekan ulang seperti ini, dalam dunia developer, disebut regression testing.

Langkah 6: Pahami cara kerjanya

Minta AI menjelaskan:

Jelaskan cara kerja kode ini dengan bahasa sederhana untuk pemula.
Bagian mana yang menyimpan data, dan bagian mana yang paling berisiko kalau diubah?

Kode buatan AI-mu tidak akan sama persis dengan milik orang lain, dan itu wajar. Tapi hampir pasti ada tiga bagian penting ini:

1. Penyimpanan data dengan localStorage. Data disimpan di browser sebagai teks JSON. Fungsi muat() membacanya, simpan() menulisnya:

function muat() {
  try { return JSON.parse(localStorage.getItem(KUNCI)) || []; } catch { return []; }
}
function simpan(catatan) {
  localStorage.setItem(KUNCI, JSON.stringify(catatan));
}

2. Menampilkan teks dengan aman. textContent memperlakukan isi sebagai teks biasa. Kalau memakai innerHTML, teks seperti <b>tebal</b> akan dijalankan sebagai HTML:

ket.textContent = c.keterangan; // aman: selalu tampil sebagai teks

3. Validasi input. Jumlah harus bilangan bulat lebih dari nol, dan keterangan tidak boleh kosong. Pengecekan ini ada di HTML (required, min="1", step="1") dan diulang di JavaScript, supaya tetap aman walaupun salah satunya terlewat:

if (!keterangan || !Number.isInteger(jumlah) || jumlah <= 0) return;

Kamu tidak harus bisa menulis kode ini sendiri. Cukup tahu bagian mana melakukan apa. Itu sudah cukup untuk memberi instruksi yang lebih tepat ke AI, dan untuk curiga kalau ada yang aneh.

Kode lengkap

Sebagai pembanding, ini versi yang kami buat dari spesifikasi yang sama. Kode ini diuji di Chrome dengan semua uji di langkah 4: total, penghapusan, input tidak valid, teks berisi HTML, dan data setelah halaman dimuat ulang.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Pengeluaran</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 0 auto; padding: 24px 16px; background: #f6f7f9; color: #1b1f24; }
    h1 { font-size: 1.5rem; margin: 0 0 4px; }
    .total { font-size: 2rem; font-weight: 800; margin: 0 0 20px; }
    form { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; margin-bottom: 20px; }
    input, button { font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid #d0d7de; }
    button { background: #6d28d9; color: #fff; border: 0; cursor: pointer; }
    ul { list-style: none; padding: 0; margin: 0; }
    li { display: flex; align-items: center; gap: 8px; background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 8px; }
    li span:first-child { flex: 1; }
    li button { background: transparent; color: #9f1239; padding: 4px 8px; }
    .kosong { color: #59636e; }
  </style>
</head>
<body>
  <h1>Pengeluaran hari ini</h1>
  <p class="total" id="total">Rp0</p>

  <form id="form">
    <input id="keterangan" placeholder="Untuk apa?" required>
    <input id="jumlah" type="number" min="1" step="1" placeholder="Jumlah" required>
    <button type="submit">Catat</button>
  </form>

  <ul id="daftar"></ul>
  <p class="kosong" id="kosong">Belum ada catatan hari ini.</p>

  <script>
    const KUNCI = 'catatan-pengeluaran';
    const rupiah = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 });
    const hariIni = () => new Date().toLocaleDateString('sv'); // format YYYY-MM-DD sesuai zona waktu perangkat

    // Ambil semua catatan dari penyimpanan browser
    function muat() {
      try { return JSON.parse(localStorage.getItem(KUNCI)) || []; } catch { return []; }
    }
    function simpan(catatan) {
      localStorage.setItem(KUNCI, JSON.stringify(catatan));
    }

    // Gambar ulang daftar dan total untuk hari ini
    function tampilkan() {
      const semua = muat();
      const hari = semua.filter((c) => c.tanggal === hariIni());
      const daftar = document.getElementById('daftar');
      daftar.innerHTML = '';
      for (const c of hari) {
        const li = document.createElement('li');
        const ket = document.createElement('span');
        ket.textContent = c.keterangan; // textContent, bukan innerHTML: aman dari teks berisi kode
        const jml = document.createElement('span');
        jml.textContent = rupiah.format(c.jumlah);
        const hapus = document.createElement('button');
        hapus.textContent = 'Hapus';
        hapus.addEventListener('click', () => {
          simpan(muat().filter((x) => x.id !== c.id));
          tampilkan();
        });
        li.append(ket, jml, hapus);
        daftar.append(li);
      }
      const total = hari.reduce((jumlah, c) => jumlah + c.jumlah, 0);
      document.getElementById('total').textContent = rupiah.format(total);
      document.getElementById('kosong').hidden = hari.length > 0;
    }

    // Saat form dikirim: tambahkan catatan baru
    document.getElementById('form').addEventListener('submit', (e) => {
      e.preventDefault();
      const keterangan = document.getElementById('keterangan').value.trim();
      const jumlah = Number(document.getElementById('jumlah').value);
      if (!keterangan || !Number.isInteger(jumlah) || jumlah <= 0) return;
      const semua = muat();
      semua.push({ id: Date.now(), tanggal: hariIni(), keterangan, jumlah });
      simpan(semua);
      e.target.reset();
      document.getElementById('keterangan').focus();
      tampilkan();
    });

    tampilkan();
  </script>
</body>
</html>

Batasan aplikasi ini

Jujur soal batas itu bagian dari “jadi”:

• Data hanya ada di browser dan perangkat itu. Buka di HP atau browser lain, datanya kosong.
• Menghapus data browser (riwayat, cookies, data situs) juga menghapus catatanmu. Jangan jadikan ini satu-satunya catatan keuangan yang penting.
• Tidak ada login dan tidak ada sinkronisasi. Untuk itu dibutuhkan server dan database, topik di level berikutnya jalur ini.

Untuk aplikasi pribadi pertama, batas-batas ini tidak masalah. Yang penting kamu tahu batasnya.

Error yang sering muncul

Browser menampilkan teks kode, bukan aplikasi. File tersimpan sebagai index.html.txt. Di File Explorer, aktifkan View → File name extensions, lalu ubah namanya menjadi index.html.

Simbol, huruf beraksen, atau emoji berubah jadi �. File tidak tersimpan sebagai UTF-8. Simpan ulang dengan Encoding UTF-8.

Tombol Catat tidak melakukan apa-apa. Tekan F12, buka tab Console, dan lihat apakah ada pesan merah. Salin pesan itu ke AI dengan pola laporan bug. Penyebab paling umum: kode yang kamu salin terpotong, jadi pastikan bagian paling akhir file adalah </html>.

Data hilang setelah dibuka lagi. Pastikan kamu membuka file yang sama, dengan browser yang sama. Mode penyamaran (incognito) juga menghapus data setiap kali jendelanya ditutup.

Langkah berikutnya: rilis dan amankan

Aplikasimu sekarang hanya bisa dibuka dari laptopmu sendiri. Supaya bisa dibuka dari HP atau dibagikan ke orang lain, aplikasinya perlu di-deploy ke internet. Kabar baiknya, aplikasi satu file seperti ini termasuk yang paling mudah dan bisa gratis untuk dionlinekan. Caranya ada di Deploy Pertama: Online-kan Aplikasimu Gratis, bagian dari jalur Deploy & Production.

Sebelum itu, ingat dua aturan keamanan dari tutorial ini: tampilkan teks pengguna dengan textContent, dan jangan pernah menaruh kunci rahasia di dalam file yang bisa dibuka orang lain.

Pertanyaan yang sering diajukan

Bagaimana kalau hasil dari AI saya berbeda dengan kode di atas?

Wajar dan tidak masalah. Yang penting bukan kodenya sama, tetapi semua uji di langkah 4 lulus. Kalau ada yang gagal, laporkan ke AI. Kalau tetap mentok, bandingkan bagian yang bermasalah dengan kode lengkap di atas.

Bisakah aplikasi ini dipakai di HP?

Bisa, setelah aplikasinya online (lihat langkah berikutnya di atas). Tampilannya sudah dibuat nyaman untuk layar HP. Membuka file lokal langsung di HP memang lebih merepotkan, jadi cara termudah adalah deploy.

Apakah ini sudah termasuk belajar ngoding?

Ya, sedikit demi sedikit. Kamu sudah menulis spesifikasi, menguji, melaporkan bug, dan membaca tiga bagian penting kode. Itu pekerjaan sehari-hari seorang developer. Kalau ingin mendalami dasar-dasarnya, lanjutkan dengan Roadmap Belajar Ngoding untuk Pemula.

Kesimpulan

Dalam satu sesi kamu sudah membuat aplikasi yang jalan, mengujinya dengan sengaja, menambah fitur tanpa merusak yang lama, dan memahami bagian pentingnya. Itulah bedanya vibe coding yang sehat dengan sekadar “yang penting jalan”.

Dengan ini Level 1 jalur Vibe Coding selesai. Level berikutnya membawamu membangun aplikasi yang benar-benar dipakai: memahami kode buatan AI lebih dalam, lalu menambahkan database dan login. Isi lagi kopinya.