Paling banyak satu email per minggu. Berhenti kapan saja dengan satu klik.
Transkrip
Narasi lengkap video ini. Kalimat yang sedang diucapkan disorot saat video diputar; klik kalimat untuk melompat ke sana.
Tampilkan transkrip
Pembuka
Halo, selamat datang kembali. Lembar proyek dan CLAUDE.md sudah siap. Hari ini saatnya membangun. Kita akan membangun aplikasi kasir mini Kopi Senja bersama Claude Code: menyiapkan data menu, merancang tampilan, membangun, mencoba transaksi, sampai rekap harian.
Langkah 1: Siapkan data menu
Kita mulai dari data, bukan dari tampilan. Ini daftar menu resmi dari Laras. Produk pertama, kopi susu gula aren ukuran cup dua ratus lima puluh mililiter, delapan belas ribu rupiah. Kedua, kopi susu gula aren satu liter, delapan puluh lima ribu. Ketiga, cold brew lima ratus mililiter, lima puluh lima ribu. Keempat, paket hampers, seratus lima puluh ribu. Setiap produk diberi kode pendek supaya mudah dicatat di transaksi. Raka menyimpan daftar itu sebagai file CSV, lalu meminta Claude Code mengubahnya menjadi file menu. Perhatikan pesannya: jangan ubah harga apa pun. Claude Code membaca file CSV lebih dulu. Lalu ia menulis file menu berisi empat produk. Claude Code meminta Raka mencocokkan sekali lagi dengan daftar resmi. Ini kebiasaan baik: harga adalah data uang, jadi selalu dicek manusia.
Langkah 2: Rancang tampilan dengan Artifact
Sebelum membangun, kita buat rancangan tampilan. Raka meminta Claude membuat rancangan layar kasir: empat tombol menu besar, keranjang, total, uang diterima, kembalian, dan tombol simpan. Rancangan muncul di panel kanan. Di atas ada empat tombol menu besar. Di tengah keranjang: dua kopi susu cup dan satu cold brew, totalnya sembilan puluh satu ribu. Di bawah, uang diterima seratus ribu, kembalian sembilan ribu. Raka menunjukkan rancangan ini kepada Dimas, yang nanti memakai kasir setiap hari. Dimas minta ada pilihan tunai atau QRIS sebelum menyimpan. Claude menambahkan dua tombol metode bayar. Mengubah rancangan sekarang jauh lebih murah daripada mengubah aplikasi yang sudah jadi. Raka menyimpan rancangan ini sebagai gambar di folder proyek. Nanti Claude Code memakainya sebagai acuan, sehingga tampilan aplikasi sesuai dengan yang sudah disetujui Dimas.
Langkah 3: Claude Code membangun
Sekarang Claude Code bekerja. Raka meminta pembangunan sesuai CLAUDE.md dan rancangan, hanya tiga fitur wajib pertama, dan meminta rencana dulu. Claude Code menyusun rencana. Perhatikan poin ketiga: transaksi disimpan di penyimpanan browser, sehingga kasir tetap jalan walaupun internet kedai mati. Poin keempat, rekap harian menyusul setelah fitur pertama dicoba. Membangun bertahap seperti ini memudahkan mencari kesalahan. Rencananya masuk akal, jadi Raka memilih mulai. Claude Code menulis halaman kasir sesuai rancangan. Lalu file logika kasir, sekitar seratus dua belas baris: keranjang, total, dan kembalian. Semua harga dibaca dari file menu, sesuai aturan di CLAUDE.md. Lalu file gaya tampilan, dengan tombol besar untuk layar sentuh. Ia juga menjalankan server kecil di komputer Raka, supaya aplikasi bisa dibuka di browser. Alamat localhost artinya aplikasi berjalan di komputer ini sendiri, bukan di internet. Kasir siap dicoba. Seluruh proses hanya beberapa menit, dan Raka tidak mengetik satu baris kode pun. Kita tidak perlu membaca kodenya, tetapi perlu tahu peran tiap file. File index.html adalah kerangka layar: di mana tombol, keranjang, dan kolom bayar diletakkan. Bayangkan denah kedai. File kasir.js adalah otak hitungan: menambah barang ke keranjang, menghitung total dan kembalian, lalu menyimpan transaksi. Kalau ada salah hitung, biasanya masalahnya di sini. File gaya.css mengatur tampilan: warna, ukuran tombol, dan besar huruf. Kalau angka terlalu kecil, di sinilah perbaikannya. Dengan peta sederhana ini, Anda bisa memberi perintah yang lebih tepat ke Claude Code. Misalnya: perbesar angka kembalian di gaya tampilan, jangan ubah hitungannya.
Langkah 4: Mencoba transaksi
Saatnya mencoba. Raka membuka alamat localhost di browser. Empat tombol menu tampil sesuai rancangan. Ia mengetuk kopi susu cup, dan keranjang berisi satu cup seharga delapan belas ribu. Ia mengetuk sekali lagi. Jumlahnya menjadi dua, subtotal tiga puluh enam ribu. Lalu ia mengetuk cold brew. Total di keranjang menjadi sembilan puluh satu ribu. Raka mencocokkan dengan kalkulator: tiga puluh enam ribu ditambah lima puluh lima ribu sama dengan sembilan puluh satu ribu. Benar. Jangan pernah menganggap angka di aplikasi pasti benar sebelum dicek sendiri. Raka juga mencoba hal sederhana yang sering terlupa: mengurangi jumlah barang di keranjang dan menghapus barang yang salah ketuk. Keduanya berjalan. Kasir di dunia nyata pasti sering salah ketuk saat ramai. Sekarang pembayaran. Raka mengisi uang diterima seratus ribu rupiah. Kembalian muncul otomatis, sembilan ribu rupiah. Sesuai hitungan. Ia memilih tunai, lalu mengetuk tombol simpan transaksi. Transaksi pertama tersimpan, dan keranjang kosong lagi, siap untuk pelanggan berikutnya. Raka juga mencatat satu hal janggal: angka kembalian terlalu kecil di layar, padahal itulah angka yang paling sering dilihat Dimas saat ramai. Catatan seperti ini menjadi bahan perbaikan. Perhatikan cara Raka menguji: ia tidak hanya melihat apakah tombol bisa diklik, tetapi membayangkan Dimas di jam sibuk. Sudut pandang pemakai inilah yang membuat uji coba bermakna.
Langkah 5: Rekap harian dan ekspor CSV
Fitur dasar sudah jalan, jadi Raka meminta fitur wajib terakhir: rekap hari ini dan ekspor CSV. Ia sekalian meminta angka kembalian dibesarkan, sesuai catatan tadi. Claude Code menambahkan fungsi rekap dan ekspor ke file logika kasir. Ia juga membesarkan angka kembalian dua kali lipat. File hasil ekspor diberi nama sesuai tanggal dan tidak berisi data pribadi pelanggan, sesuai larangan di CLAUDE.md. Kenapa ekspor CSV penting? Data di penyimpanan browser bisa hilang bila riwayat browser dibersihkan. Dengan ekspor harian, Laras punya cadangan di Google Sheets sekaligus bahan laporan bulanan. Raka mencoba lima transaksi contoh, lalu mengekspor CSV dan membukanya di Google Sheets. Transaksi pertama, dua kopi susu cup, tunai. Kedua, satu kopi susu satu liter, dibayar QRIS. Ketiga, transaksi yang tadi kita coba: sembilan puluh satu ribu, tunai. Keempat, satu paket hampers, QRIS. Kelima, tiga kopi susu cup, tunai. Baris rekap menunjukkan lima transaksi dengan total empat ratus enam belas ribu: tunai seratus delapan puluh satu ribu, QRIS dua ratus tiga puluh lima ribu. Raka mencocokkannya dengan rumus SUM di Sheets, dan hasilnya sama. Rekap yang dulu makan tiga puluh menit kini tinggal satu ketukan. Tetapi ingat, aplikasi ini belum diuji menyeluruh. Jangan dipakai melayani pelanggan sungguhan sebelum tahap uji. Tampilan di video ini simulasi, jadi menu dan alamat di layar Anda bisa berbeda.
Selesai!
Kasir mini Kopi Senja sudah berjalan: harga dari file menu, total dan kembalian otomatis, metode bayar tercatat, serta rekap harian dengan ekspor CSV. Semua dibangun bertahap bersama Claude Code. Aplikasi yang jalan belum tentu siap dipakai. Di episode berikutnya kita menguji kasir ini dengan skenario sulit dan memperbaikinya sampai siap dipakai Dimas di kedai. Sampai jumpa!
Latihan mandiri
Kerjakan sendiri setelah menonton supaya materinya benar-benar melekat.
Buat file data utama proyek Anda, misalnya daftar produk atau daftar siswa
Rancang tampilan satu layar utama dengan Artifact sebelum meminta Claude Code membangun
Bangun fitur wajib pertama saja, lalu coba dengan tiga contoh data
Tanya materi kelas
Ketik pertanyaan atau kata kunci; kami carikan bagian episode ini yang menjelaskannya dan lompatkan videonya ke sana.
Catatan saya
Catatan disimpan bersama menit video saat ini dan hanya terlihat oleh Anda.
Tanya jawab
Bingung di salah satu langkah? Tanyakan di sini; pengajar dan peserta lain bisa menjawab.
Belum ada pertanyaan.
Pengajar
Tim Cerdas Inovasi Digital
Pengembang software, engineer BIM & 3D, dan praktisi AI
53 kelas video1.286 episode
Sehari-hari kami mengerjakan software, model BIM, game, dan otomasi AI untuk klien, lalu menjadikan pengalaman praktik itu kelas langkah demi langkah: setiap langkah diperlihatkan di layar dan dilengkapi panduan PDF.
