Tutorial utama: membuat aplikasi dengan Planora

Ini adalah tutorial utama Planora. Mulai dari halaman ini setelah komputer dan starter selesai disiapkan. Kamu akan memberi arah kepada coding agent, melihat rencana aplikasi dibuat, lalu membangun satu bagian pada satu waktu sampai siap dirilis.

Jika setup belum selesai, kembali ke panduan instalasi dan setup pertama.

Sebelum mulai

Pastikan:

• folder utama Planora sudah dibuka di Antigravity atau Codex;
• npm run setup sudah selesai;
• aplikasi starter bisa dibuka di http://localhost:3000;
• Convex development sudah terhubung;
• kamu sudah membaca cara bekerja dengan coding agent.

Gunakan satu conversation untuk satu tugas. Buat conversation baru saat pindah dari membuat rencana ke implementasi, dari implementasi ke bug, atau dari implementasi ke E2E.

Langkah 1 — ceritakan aplikasi yang ingin kamu buat

Buka conversation baru lalu masukkan:

/planora-product-kit
Saya ingin membuat aplikasi [JELASKAN IDE APLIKASIMU].
Aplikasi ini akan digunakan oleh [SIAPA PENGGUNANYA] untuk membantu mereka[MASALAH YANG INGIN DISELESAIKAN]. Fitur yang menurut saya penting adalah[FITUR UTAMA]. Hal yang masih belum saya ketahui adalah [HAL YANG BELUM PASTI].

Tidak apa-apa jika penjelasanmu hanya beberapa kalimat. Jangan mencoba menulis istilah teknis yang tidak kamu pahami. Ceritakan masalah dan hasil yang kamu inginkan dengan bahasamu sendiri.

Contoh:

/planora-product-kit
Saya ingin membuat aplikasi pencatatan pesanan untuk usaha kue rumahan.Pemilik usaha harus bisa mencatat pelanggan, tanggal pengiriman, isi pesanan,status pembayaran, dan melihat pesanan minggu ini. Saya belum tahu tampilan dancara login yang paling cocok.

Langkah 2 — jawab pertanyaan agent

Agent akan menganalisis idemu lalu menanyakan beberapa hal. Jawab berdasarkan apa yang benar-benar kamu tahu.

Jawaban yang baik tidak harus panjang:

Pengguna utamanya pemilik usaha dan satu orang admin.Mereka paling sering memakai HP.Versi pertama belum membutuhkan pembayaran online.

Kalau belum tahu, jawab seperti ini:

Saya belum tahu. Tolong jelaskan beberapa pilihan beserta keuntungan danrisikonya dengan bahasa sederhana. Jangan memilih sebelum saya memutuskan.

Agent akan membedakan informasi yang sudah pasti, asumsi sementara, keputusan, dan pertanyaan yang masih terbuka. Baca ringkasannya. Koreksi bagian yang tidak sesuai sebelum menyetujui pembuatan dokumen.

Langkah 3 — tunggu sampai paket produk selesai

Setelah arah awal disetujui, agent membuat folder product/. Kamu akan melihat susunan kurang lebih seperti ini:

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

Artinya:

• PRD/ menyimpan apa yang akan dibuat dan hasil yang diharapkan;
• UI/ menyimpan arah tampilan untuk aplikasi yang memiliki layar;
• DX/ digunakan jika produk dibuat untuk developer dan tidak memiliki UI;
• EXECUTION/ menyimpan urutan pengerjaan;
• TODO.md menjadi daftar progres yang dibaca agent.

Kamu tidak perlu membuka dan mengedit setiap file. Pastikan agent melaporkan bahwa validator Planora lulus. Kalau validator gagal, minta agent memperbaikinya sebelum mulai menulis kode.

Minta ringkasan terakhir:

Jelaskan paket produk yang baru dibuat dengan bahasa sederhana. Sebutkan versipertama yang akan dibangun, urutan pekerjaan, asumsi yang belum pasti, keputusanyang masih membutuhkan saya, dan hasil validasinya.

Conversation pertama selesai ketika paket produk sudah lengkap, tervalidasi, dan arahnya kamu setujui.

Langkah 4 — lihat pekerjaan pertama

Buka conversation baru lalu kirim:

/planora-status
Jelaskan progres saat ini dan pekerjaan pertama yang sudah siap. Jangan mengubahfile apa pun.

Agent akan membaca rencana dan memberi tahu satu pekerjaan yang bisa dimulai. Kalau ada keputusan yang masih menghalangi, jawab atau perbarui rencana terlebih dahulu.

Langkah 5 — bangun bagian pertama

Buka conversation baru lalu kirim:

/planora-next

Agent seharusnya melakukan empat tahap:

1. Plan — menjelaskan apa yang akan dibuat, file yang mungkin berubah, risiko, test, dan kebutuhan E2E.
2. Execute — menulis atau mengubah kode sesuai satu pekerjaan yang dipilih.
3. Test — menjalankan pemeriksaan yang sesuai dan memperbaiki kegagalan yang masih berada dalam scope.
4. Validate — membandingkan hasil dengan kriteria keberhasilan dan menyiapkan E2E jika alur browser perlu dibuktikan.

Kalau agent langsung menulis kode tanpa menunjukkan rencana, kirim:

Tunjukkan plan implementasinya terlebih dahulu: scope, file yang akan berubah,risiko, test yang akan dijalankan, dan apakah perlu E2E. Setelah itu lanjutkanpekerjaan yang memang sudah diizinkan.

Selama agent masih mengerjakan pekerjaan ini, jawab pertanyaannya di conversation yang sama. Error yang muncul dari proses implementasi juga harus diselesaikan agent sebelum task dinyatakan selesai.

Langkah 6 — periksa laporan pekerjaan

Jangan berhenti pada kalimat “fitur sudah dibuat”. Laporan akhir setidaknya harus menjelaskan:

• apa yang berubah;
• hasil yang sekarang bisa dilakukan pengguna;
• test yang benar-benar dijalankan dan hasilnya;
• pemeriksaan yang tidak dijalankan beserta alasannya;
• apakah E2E Required, Recommended, atau Not needed;
• blocker atau risiko yang masih tersisa.

Jika laporan test tidak ada, tanyakan:

Test apa yang sudah benar-benar dijalankan? Berikan hasilnya. Jika belum adatest yang dijalankan, lakukan pemeriksaan yang sesuai lalu laporkan hasilnya.

Kamu tidak perlu menjalankan test teknis sendiri. Biarkan agent menjalankannya, lalu baca laporannya. Kamu boleh membuka aplikasi untuk menilai apakah tampilan dan hasilnya sesuai keinginanmu, tetapi validasi teknis dan E2E tetap dilakukan oleh agent.

Langkah 7 — jalankan E2E untuk perjalanan pengguna yang selesai

Setelah seluruh bagian yang membentuk satu perjalanan pengguna selesai dan laporan menunjukkan test aturan, kondisi salah, serta kasus batas sudah bersih, jalankan E2E. Hampir semua fitur yang digunakan melalui layar sebaiknya melalui E2E meskipun test sebelumnya sudah lulus.

E2E memastikan tombol, form, pesan, tampilan, perpindahan halaman, dan hasil akhir benar-benar bekerja dari sisi pengguna. Agent akan memberikan file instruksi di specs/e2e/. Jalankan di conversation terpisah agar pemeriksaannya fokus.

Buka conversation baru, aktifkan browser agent, lalu kirim:

/e2e-tester specs/e2e/NAMA-FILE.md

Gunakan nama file yang diberikan pada laporan agent. Agent E2E akan membuka aplikasi, menjalankan langkah sebagai pengguna, menyimpan evidence, dan memberi hasil Passed, Failed, atau Blocked. Laporan harus menyertakan screenshot atau video untuk perjalanan penting jika browser agent menyediakannya.

Kalau E2E gagal, jangan meminta agent E2E memperluas scope menjadi implementasi besar. Buka conversation baru untuk bug:

/bug
E2E pada specs/e2e/NAMA-FILE.md gagal. Tolong baca evidence di file tersebut,reproduksi masalahnya, cari akar penyebab, perbaiki, dan jalankan test yangsesuai. Siapkan E2E ulang setelah perbaikan.

Setelah bug selesai, jalankan /e2e-tester lagi dalam conversation baru.

Langkah 8 — simpan progres yang sudah bekerja

Setelah test dan validasi yang diperlukan lulus, buat save point di Git.

Periksa status dan diff Git. Pastikan tidak ada secret atau file pribadi.Jelaskan perubahan yang akan disimpan. Setelah saya menyetujui, buat commit untukpekerjaan yang baru selesai. Jangan push sebelum saya menyetujuinya.

Ikuti tutorial GitHub untuk menyimpan salinan secara online.

Langkah 9 — ulangi sampai versi pertama selesai

Untuk setiap pekerjaan berikutnya:

1. buka conversation baru;
2. jalankan /planora-status jika ingin melihat posisi project;
3. jalankan /planora-next untuk satu pekerjaan berikutnya;
4. periksa report test;
5. jalankan E2E terpisah untuk perjalanan pengguna yang sudah lengkap;
6. simpan progres yang sudah stabil.

Jangan meminta agent “selesaikan semua aplikasi” dalam satu conversation. Rencana Planora memang dibuat agar aplikasi tumbuh melalui bagian kecil yang bisa diperiksa.

Jika ingin menambahkan sesuatu yang belum ada di rencana

Buka conversation baru:

/planora-change
Saya ingin menambahkan [FITUR BARU]. Fitur ini dibutuhkan karena [ALASAN].Pengguna seharusnya dapat [HASIL YANG BISA DILIHAT]. Tolong tunjukkan bagianrencana lain yang ikut berubah sebelum mengimplementasikannya.

Perintah ini memperbarui dokumen produk dan TODO. Setelah selesai dan validator lulus, buka conversation baru lalu jalankan /planora-next untuk implementasi.

Jika ingin mengedit sesuatu

Gunakan /chore ketika tidak sedang menambah kemampuan baru.

/chore
Ubah tulisan tombol "Simpan" menjadi "Simpan perubahan". Jangan mengubah fungsitombol atau bagian lain. Buat plan singkat, lakukan perubahan, lalu jalankanpemeriksaan yang sesuai.

Contoh lain:

/chore
Rapikan tampilan halaman profil agar jarak antarbagian lebih nyaman dibaca diHP. Pertahankan fungsi dan identitas UI yang sudah ada.

Jika permintaan ternyata menambah kemampuan, agent harus menjelaskan bahwa workflow yang tepat adalah feature atau /planora-change.

Kemampuan yang dipakai agent secara otomatis

Kamu tidak perlu memanggil semua skill satu per satu. Saat tugas membutuhkannya, agent akan menambahkan kemampuan pendukung:

• skill UI saat membuat atau mengedit tampilan, lalu melakukan UI review;
• skill motion saat interaksi memang membutuhkan animasi;
• skill Sonner saat aplikasi menggunakan notifikasi toast;
• skill Convex saat backend, data, atau authentication berubah;
• pemeriksaan Convex development setelah file backend diubah.

Jika satu keputusan tampilan belum jelas, kamu dapat memakai /prototype untuk melihat beberapa pilihan sebelum implementasi. Jika agent membuktikan bahwa project membutuhkan library UI baru, gunakan /pick-ui-library untuk membandingkan pilihan; pemasangan tetap dilakukan melalui task implementasi setelah kamu menyetujui rekomendasinya.

Jika menemukan error setelah pekerjaan selesai

Jangan melanjutkan di conversation yang membuat fitur. Buka conversation baru agar agent memulai diagnosis dengan konteks yang bersih.

/bug
Pada halaman [NAMA HALAMAN], setelah saya [LANGKAH YANG DILAKUKAN], muncul error:
[TEMPEL PESAN ERROR]
Seharusnya [HASIL YANG DIHARAPKAN], tetapi yang terjadi [HASIL SEBENARNYA].Tolong reproduksi, cari akar penyebab, perbaiki, jalankan test, dan siapkan E2Eulang jika masalah ini memengaruhi browser.

Kirim screenshot jika membantu, tetapi tutupi password, token, data pribadi, dan secret.

Jika ingin mengubah arah produk

Gunakan /planora-change, bukan /chore:

/planora-change
Saya ingin mengubah [PERILAKU LAMA] menjadi [PERILAKU BARU] karena [ALASAN].Perbarui kebutuhan, panduan UI atau DX, dan urutan pengerjaan yang terdampak.Jangan implementasikan sebelum perubahan rencana selesai dan tervalidasi.

Kapan aplikasi versi pertama selesai?

Gunakan:

/planora-status
Apakah seluruh scope versi pertama sudah selesai? Tunjukkan pekerjaan, test,E2E, keputusan, dan blocker yang masih terbuka. Jangan menyebut aplikasi siaprilis jika masih ada validasi Required yang belum lulus.

Jika semuanya sudah siap, lanjut ke panduan deployment. Deployment tetap membutuhkan keputusan dan persetujuanmu karena aplikasi akan berpindah dari development ke production.

Kalau kamu ingin melihat contoh dari awal sampai pemeriksaan hasil, buka bab Use Case / Real Case.