Tutorial membuat aplikasi manajemen laundry

Tutorial ini memandu Anda membuat aplikasi manajemen laundry multi-cabang dari percakapan pertama sampai setiap fitur diperiksa melalui browser. Anda tidak perlu memahami kode. Tugas Anda adalah menjelaskan proses bisnis, memeriksa rencana, mencoba hasil, dan mengatakan jika hasilnya belum sesuai.

Versi pertama aplikasi dalam contoh ini akan membantu:

• owner mengelola cabang, layanan, pegawai, pengeluaran, dan laporan;
• admin atau kasir mencatat pelanggan, pesanan, dan pembayaran;
• operator memperbarui status cucian;
• setiap pegawai hanya membuka data cabang tempatnya bekerja.

Nama file dan nomor task yang dibuat agent dapat berbeda dari contoh. Selalu gunakan nama yang benar-benar dilaporkan oleh agent di project Anda.

Sebelum mulai

Pastikan folder utama Planora sudah dibuka di Antigravity, setup awal sudah selesai, Convex development sudah terhubung, dan aplikasi starter dapat dibuka di http://localhost:3000.

Gunakan satu conversation untuk satu tugas:

• conversation 1 untuk membuat PRD dan paket produk;
• conversation berikutnya untuk melihat status;
• satu conversation baru untuk setiap implementasi fitur;
• satu conversation baru lagi untuk E2E fitur tersebut;
• conversation baru untuk memperbaiki bug jika E2E gagal.

Dengan pola ini, agent tidak mencampur perencanaan, penulisan kode, dan pemeriksaan browser dalam satu percakapan yang terlalu panjang.

Langkah 1 — buat PRD dan rencana produk

Buka conversation baru. Ketik pesan berikut secara utuh:

/planora-product-kit
Saya ingin membuat aplikasi untuk mengelola usaha laundry multi-cabang.
Penggunanya adalah owner, admin atau kasir cabang, dan operator. Owner bolehmelihat seluruh cabang. Admin dan operator hanya boleh melihat data cabangtempat mereka bekerja.
Versi pertama harus membantu kami mengelola:1. cabang dan pegawai;2. layanan laundry kiloan dan satuan beserta harga;3. data pelanggan;4. pesanan dengan beberapa layanan;5. status proses cucian;6. diskon, pembayaran tunai atau transfer, pembayaran sebagian, dan sisa   tagihan;7. pengeluaran cabang;8. dashboard dan laporan berdasarkan periode.
Aplikasi paling sering digunakan melalui laptop kasir dan HP operator. Sayaingin tampilan yang sederhana, cepat dipahami pegawai baru, dan tetap nyamandigunakan pada layar kecil.
WhatsApp, pembayaran online otomatis, dan aplikasi pelanggan belum termasukversi pertama. Bantu saya menentukan scope versi pertama yang realistis.Tanyakan keputusan bisnis yang masih belum jelas. Jangan menulis kode aplikasisebelum paket produk selesai, saya setujui, dan validator Planora lulus.

Output yang diharapkan

Agent belum langsung membuat halaman atau database. Agent akan merangkum ide, memisahkan fakta, asumsi, keputusan, dan pertanyaan terbuka. Biasanya agent juga menanyakan paling banyak tiga keputusan penting dalam satu putaran.

Contoh hasil yang benar:

Fakta:- Aplikasi digunakan oleh owner, kasir, dan operator.- Usaha memiliki lebih dari satu cabang.- Laptop dipakai kasir dan HP dipakai operator.
Asumsi yang perlu dikonfirmasi:- Satu pegawai hanya bekerja di satu cabang.- Harga kiloan dihitung dari berat akhir yang dimasukkan kasir.
Pertanyaan terbuka:- Urutan status cucian apa yang digunakan?- Siapa yang boleh memberi diskon atau membatalkan pesanan?- Laporan apa yang paling penting bagi owner?

Jika agent langsung menulis kode, hentikan dan ketik:

Jangan implementasikan aplikasi dahulu. Selesaikan intake, PRD, panduan UI, danrencana eksekusi. Tunjukkan keputusan yang perlu saya konfirmasi sebelum paketproduk dibuat.

Langkah 2 — jawab pertanyaan penyusunan PRD

Jawab berdasarkan proses laundry Anda. Jika Anda ingin mengikuti contoh ini, Anda dapat mengetik jawaban berikut:

Untuk versi pertama, gunakan keputusan berikut:
1. Kami menerima layanan kiloan dan satuan. Harga kiloan dihitung dari berat,   sedangkan layanan satuan dihitung dari jumlah barang.2. Status pesanan adalah Diterima, Dicuci, Dikeringkan, Disetrika, Siap   Diambil, dan Selesai. Pesanan juga dapat Dibatalkan dengan alasan.3. Pelanggan boleh membayar uang muka atau membayar sebagian. Sistem harus   menampilkan total yang sudah dibayar dan sisa tagihan. Pesanan hanya boleh   menjadi Selesai jika sudah lunas.4. Admin boleh memberi diskon sampai 10 persen. Diskon lebih besar dan   pembatalan setelah pembayaran hanya boleh dilakukan owner.5. Laporan utama owner adalah omzet, jumlah pesanan, pembayaran yang diterima,   piutang atau sisa tagihan, pengeluaran, dan ringkasan per cabang dalam   rentang tanggal.6. Satu pegawai bekerja di satu cabang pada versi pertama. Owner dapat melihat   semua cabang.
Tolong perbarui ringkasan fakta, asumsi, keputusan, dan pertanyaan terbuka.Jelaskan dengan bahasa sederhana jika masih ada keputusan yang harus saya buat.

Agent mungkin menanyakan nomor pesanan, estimasi selesai, pajak, satuan berat, atau cara mencari pelanggan. Jawab yang Anda ketahui. Jika belum tahu, jangan menebak. Ketik:

Saya belum tahu. Berikan 2 atau 3 pilihan yang sederhana beserta keuntungan,risiko, dan dampaknya terhadap versi pertama. Jangan memilih sebelum sayamemutuskan.

Output yang diharapkan

Setelah beberapa putaran, tidak boleh ada keputusan penting yang disamarkan sebagai fakta. Anda akan menerima ringkasan scope versi pertama, hal yang tidak masuk scope, asumsi yang masih perlu diuji, dan keputusan yang sudah Anda buat.

Periksa ringkasannya. Jika sudah benar, ketik:

Ringkasan tersebut sudah sesuai. Buat paket produk lengkap untuk aplikasidengan UI menggunakan bahasa Indonesia. Pastikan setiap kebutuhan memiliki ID,setiap fitur memiliki acceptance criteria, urutan pengerjaan mengikutidependency, dan setiap fitur yang terlihat di browser menyiapkan handoff E2E.Jalankan validator Planora dan perbaiki semua kegagalan sebelum melapor selesai.

Langkah 3 — periksa hasil pembuatan PRD

Setelah selesai, Anda akan melihat folder utama berikut:

product/|-- README.md|-- manifest.json|-- PRD/|-- UI/`-- EXECUTION/

Isi lengkapnya kurang lebih seperti ini:

product/|-- README.md|-- manifest.json|-- PRD/|   |-- README.md|   |-- PRD.md|   |-- asumsi-dan-pertanyaan.md|   |-- metrik-keberhasilan.md|   |-- model-data.md|   |-- non-functional-requirements.md|   |-- roadmap.md|   `-- fitur/|       |-- akses-cabang-dan-peran.md|       |-- layanan-dan-harga.md|       |-- pelanggan.md|       |-- pesanan-laundry.md|       |-- status-proses-cucian.md|       |-- pembayaran-dan-sisa-tagihan.md|       |-- pengeluaran-cabang.md|       `-- dashboard-dan-laporan.md|-- UI/|   |-- README.md|   |-- design-direction.md|   |-- accessibility.md|   |-- content-guidelines.md|   |-- foundations/|   |-- components/|   |-- patterns/|   `-- screens/`-- EXECUTION/    |-- README.md    |-- TODO.md    |-- feature-order.md    |-- release-readiness.md    `-- phases/        |-- phase-00-decisions.md        `-- ...

Fungsi setiap bagian:

• PRD/ menjelaskan apa yang dibuat, aturan bisnis, hasil yang diharapkan, dan hal yang belum diputuskan;
• UI/ menjelaskan layar, komponen, isi teks, aksesibilitas, serta perilaku di laptop dan HP;
• EXECUTION/TODO.md adalah daftar pekerjaan yang akan diambil satu per satu oleh /planora-next;
• EXECUTION/phases/ menjelaskan urutan dan kriteria selesai setiap tahap;
• manifest.json mencatat seluruh artefak, versi, status, dan blocker paket.

Nama file fitur harus menjelaskan maknanya. Agent mungkin memilih nama yang sedikit berbeda, tetapi jangan menerima nama umum seperti fitur-1.md.

Laporan akhir pembuatan paket harus menyebutkan bahwa validator lulus. Untuk memeriksa pemahaman Anda, ketik:

Jelaskan paket produk yang baru dibuat dengan bahasa sederhana. Sebutkan scopeversi pertama, urutan fitur, keputusan yang sudah pasti, asumsi yang belumpasti, blocker yang masih terbuka, dan hasil validator. Jangan mengubah file.

Conversation PRD selesai ketika paket lengkap, validator lulus, dan Anda setuju dengan arah produknya.

Langkah 4 — lihat fitur pertama yang siap dibuat

Buka conversation baru, lalu ketik:

/planora-status
Jelaskan progres aplikasi manajemen laundry saat ini. Sebutkan satu task pertama yang sudah siap,hasil yang akan dapat dilihat pengguna setelah task itu selesai, dependency,dan validasi yang diwajibkan. Jangan mengubah file apa pun.

Output yang diharapkan

Agent membaca product/manifest.json dan product/EXECUTION/TODO.md, lalu menunjukkan task pertama yang dependency-nya sudah selesai. Pada contoh ini, urutan yang masuk akal adalah:

1. fondasi pengguna, peran, cabang, dan batas akses;
2. layanan serta harga;
3. pelanggan;
4. pembuatan pesanan;
5. perubahan status cucian;
6. pembayaran dan sisa tagihan;
7. pengeluaran cabang;
8. dashboard dan laporan;
9. perapian pengalaman laptop dan HP.

Urutan project Anda dapat berbeda. Ikuti task ID dan dependency di paket yang benar-benar dibuat, bukan nomor pada artikel ini.

Langkah 5 — implementasikan satu fitur

Buka conversation baru dan cukup ketik:

/planora-next

Instruksi tambahan tidak wajib. Agent otomatis melanjutkan task in_progress atau memilih task pending pertama yang seluruh dependency-nya sudah selesai. Satu pemanggilan hanya mengerjakan satu task.

Agent seharusnya menjalankan empat tahap:

1. Plan — menyebutkan task, scope, file yang mungkin berubah, risiko, test, dan kebutuhan E2E;
2. Execute — mengubah kode untuk satu task saja;
3. Test — menjalankan pemeriksaan teknis dan memperbaiki kegagalan yang masih berada dalam scope;
4. Validate — membandingkan hasil dengan acceptance criteria PRD dan menyiapkan instruksi E2E.

Output yang diharapkan setelah satu fitur

Laporan implementasi harus berisi:

• task ID dan requirement ID yang dipenuhi;
• hasil yang sekarang dapat dilakukan pengguna;
• file aplikasi yang berubah;
• test yang benar-benar dijalankan beserta hasilnya;
• kondisi salah dan kasus batas yang diperiksa;
• status E2E: Required, Recommended, atau Not needed;
• path file seperti specs/e2e/NAMA-FILE.md jika E2E diperlukan;
• blocker atau risiko yang masih tersisa;
• satu task berikutnya sebagai preview, tanpa ikut mengerjakannya.

Anda juga akan melihat perubahan pada beberapa tempat berikut:

apps/                         kode aplikasi yang baru dibuat atau diubahproduct/EXECUTION/TODO.md     status dan evidence taskspecs/e2e/NAMA-FILE.md        langkah E2E untuk fitur yang baru selesai

Folder di dalam apps/ dan nama spec E2E mengikuti implementasi. Gunakan path yang dilaporkan agent, jangan menebaknya.

Jika report test tidak jelas, ketik di conversation yang sama:

Test apa yang benar-benar sudah dijalankan? Tulis nama perintah dan hasilnya.Periksa juga aturan utama, kondisi salah, dan kasus batas. Jangan menyebut taskselesai jika validasi wajib masih gagal.

Langkah 6 — selalu jalankan E2E setelah fitur selesai

Saya merekomendasikan E2E setiap kali satu fitur yang terlihat atau digunakan melalui browser selesai diterapkan. Jangan menunggu seluruh aplikasi selesai. Dengan cara ini, bug ditemukan saat perubahan masih kecil dan mudah dilacak.

Menyiapkan browser di Antigravity

1. Pastikan aplikasi development dan Convex development sedang berjalan.
2. Buka Chrome. Usahakan tutup semua tab lama agar agent tidak memilih tab yang salah atau membaca halaman yang tidak berkaitan.
3. Sisakan satu tab aplikasi di http://localhost:3000, atau biarkan agent membukanya jika kemampuan browser mendukung hal tersebut.
4. Buka conversation baru khusus untuk E2E.
5. Di Antigravity, ketik /browser, lalu pilih kemampuan browser atau Chrome Dev yang muncul. Izinkan Antigravity mengendalikan browser development.
6. Setelah browser aktif, kirim pesan kedua dengan /e2e-tester dan path spec yang diberikan oleh agent implementasi.

Contoh pesan pertama:

/browser

Contoh pesan kedua:

/e2e-tester specs/e2e/NAMA-FILE.md
Lakukan E2E test untuk seluruh skenario di file tersebut melalui browser.Gunakan environment local atau development, bukan production. Buka browserAnda, jalankan langkah seperti pengguna sungguhan, periksa browser console jikaada masalah, dan lampirkan screenshot atau video untuk perjalanan penting.Jangan memperbaiki kode aplikasi secara diam-diam jika test gagal; tulisevidence agar dapat diperbaiki melalui task /bug.

Ganti NAMA-FILE.md dengan nama yang tercantum pada laporan /planora-next. Jangan menjalankan /e2e-tester tanpa path jika terdapat lebih dari satu spec yang belum selesai.

Output yang diharapkan dari E2E

Agent E2E akan memperbarui file spec dan memberikan laporan seperti:

Target: layanan dan hargaSpec: specs/e2e/TASK-002-layanan-dan-harga.mdEnvironment: localBase URL: http://localhost:3000
Overall: PassedRequired scenarios: 5Passed: 5Failed: 0Blocked: 0
Evidence:- layanan kiloan berhasil dibuat;- layanan satuan berhasil dibuat;- harga wajib diisi dan tidak boleh negatif;- layanan muncul pada daftar;- pegawai cabang lain tidak dapat mengubahnya;- screenshot halaman daftar dan form tersimpan.

Status akhirnya harus salah satu dari:

• Passed: semua skenario wajib sesuai hasil yang diharapkan;
• Failed: setidaknya satu perilaku tidak sesuai;
• Blocked: browser, server, akun, data uji, atau credential belum tersedia.

Jangan menerima status Passed jika browser tidak pernah dibuka atau tidak ada evidence langkah yang benar-benar dijalankan.

Langkah 7 — jika E2E gagal

Jangan memperbaiki bug di conversation E2E. Buka conversation baru, lalu ketik:

/bug
E2E pada specs/e2e/NAMA-FILE.md gagal. Baca skenario dan evidence terakhir difile tersebut. Reproduksi masalahnya, cari akar penyebab, perbaiki hanya bugyang terbukti, lalu jalankan test teknis yang sesuai. Siapkan handoff untuk E2Eulang dan jangan mengubah acceptance criteria agar test terlihat lulus.

Setelah perbaikan selesai, buka conversation baru lagi. Tutup tab browser yang tidak diperlukan, aktifkan /browser, lalu jalankan kembali:

/e2e-tester specs/e2e/NAMA-FILE.md
Ulangi seluruh skenario yang diwajibkan, termasuk skenario yang sebelumnyagagal. Simpan evidence baru tanpa menghapus riwayat evidence lama.

Bug benar-benar selesai hanya setelah test teknis lulus dan E2E ulang berstatus Passed.

Langkah 8 — ulangi pola implementasi dan E2E

Untuk setiap fitur aplikasi manajemen laundry, ulangi pola berikut:

Conversation baru A: /planora-nextConversation baru B: /browser, lalu /e2e-tester specs/e2e/NAMA-FILE.mdConversation baru C: /bug hanya jika E2E gagalConversation baru D: /browser, lalu /e2e-tester ulang setelah bug diperbaiki

Contoh hasil yang perlu terlihat setelah setiap kelompok fitur:

Akses, peran, dan cabang

Owner dapat melihat seluruh cabang. Admin dan operator hanya dapat membuka cabangnya. E2E wajib mencoba akses yang diizinkan dan akses lintas cabang yang harus ditolak.

Layanan dan harga

Owner atau pengguna yang diizinkan dapat membuat layanan kiloan dan satuan, mengubah harga, dan menonaktifkan layanan. Nilai kosong atau negatif ditolak.

Pelanggan

Kasir dapat membuat dan mencari pelanggan. Nomor telepon yang tidak valid mendapat pesan yang jelas, dan data pelanggan cabang lain tidak bocor.

Pesanan laundry

Kasir dapat memilih pelanggan, menambahkan beberapa layanan, memasukkan berat atau jumlah, melihat subtotal, diskon, total, estimasi selesai, dan nomor pesanan. Perhitungan harus dibuktikan dengan contoh angka yang diketahui.

Status proses cucian

Operator dapat mengubah status sesuai urutan. Perubahan yang melompati aturan atau dilakukan oleh pengguna tanpa izin harus ditolak dengan pesan yang jelas. Alur pada layar HP juga harus diperiksa.

Pembayaran dan sisa tagihan

Kasir dapat mencatat uang muka, pembayaran sebagian, dan pelunasan tunai atau transfer. Total pembayaran dan sisa tagihan harus benar. Pesanan belum boleh menjadi Selesai jika masih memiliki tagihan.

Pengeluaran cabang

Pengguna yang diizinkan dapat mencatat pengeluaran dengan tanggal, kategori, nominal, dan catatan. Cabang lain tidak dapat melihat atau mengubah data itu.

Dashboard dan laporan

Owner dapat memilih periode dan cabang, lalu melihat omzet, pesanan, pembayaran, piutang, serta pengeluaran yang sesuai data uji. Perubahan filter harus menghasilkan angka yang dapat diverifikasi.

Jangan menggabungkan semua fitur di atas dalam satu /planora-next. Satu invocation hanya mengerjakan satu task yang siap.

Langkah 9 — periksa status versi pertama

Setelah semua task terlihat selesai dan seluruh E2E sudah lulus, buka conversation baru lalu ketik:

/planora-status
Apakah seluruh scope versi pertama aplikasi manajemen laundry sudah selesai? Tunjukkan statussetiap task, test teknis, E2E, evidence, keputusan, risiko, dan blocker yangmasih terbuka. Jangan menyebut aplikasi siap dirilis jika masih ada validasiRequired yang belum lulus. Jangan mengubah file apa pun.

Output yang diharapkan

Agent memberikan ringkasan read-only. Versi pertama baru dapat dianggap selesai jika:

• semua task wajib di product/EXECUTION/TODO.md berstatus done;
• acceptance criteria tidak diubah hanya agar implementasi terlihat selesai;
• test teknis yang diwajibkan lulus;
• setiap E2E Required berstatus Passed dan memiliki evidence;
• tidak ada keputusan bisnis atau blocker rilis yang masih terbuka.

Menambahkan WhatsApp setelah versi pertama

WhatsApp adalah kemampuan baru yang dapat menimbulkan biaya dan mengirim pesan ke pihak luar. Jangan memasukkannya sebagai perubahan kecil. Buka conversation baru:

/planora-change
Saya ingin pelanggan menerima WhatsApp ketika pesanan dibuat dan ketika cuciansiap diambil. Pesan harus menyebutkan nomor pesanan, nama cabang, estimasiselesai, dan sisa tagihan. Perbarui PRD, panduan UI, risiko, dan urutan task.Jelaskan vendor, biaya, credential, consent pelanggan, data pribadi, sertakeputusan yang perlu saya setujui. Jangan implementasikan atau mengirim pesannyata sebelum perubahan rencana selesai dan saya menyetujuinya.

Setelah paket produk diperbarui dan validator lulus, kembali ke pola satu fitur: conversation baru untuk /planora-next, lalu conversation baru untuk /browser dan /e2e-tester pada environment development dengan penerima uji yang aman. `