Lebih dari sekadar vibe coding untuk web

1. Pengantar

Seiring dengan makin pentingnya agen coding dalam pengembangan software sehari-hari, baik Anda seorang engineer berpengalaman atau developer baru yang ingin meluncurkan aplikasi pertama, cara dan hal yang Anda bangun akan berubah secara mendasar. Saat mulai menggunakan agen coding, Anda biasanya memulai dengan perintah "zero-shot"—satu petunjuk yang mengatakan dalam bahasa manusia singkat apa yang Anda inginkan. Hal ini akan menimbulkan masalah dengan cepat:

• Bias menyenangkan orang lain (People-pleasing bias): Model sering kali menerima batasan atau premis yang salah, berupaya menyelesaikan permintaan Anda secepat mungkin, dan tidak memverifikasi bahwa apa yang mereka buat benar-benar melakukan apa yang Anda inginkan.
• Kesenjangan verifikasi: Agen, meskipun mereka menulis pengujian, biasanya tidak memeriksa pekerjaan mereka untuk memastikan pekerjaan tersebut berfungsi. Mencoba menggunakan situs di browser aktif akan memunculkan bug tersembunyi, tata letak yang rusak, dan kontrol yang tidak dapat diakses.
• Utang teknis: Karena cara model dilatih dan bekerja, kode yang ditulis cenderung menggunakan pola lama dan usang, sehingga meningkatkan utang teknis yang memerlukan lebih banyak token serta waktu dan upaya manusia dan mesin untuk mengelolanya. Utang teknis bahkan dapat memengaruhi pengalaman pengguna Anda secara negatif.

Rencana permainan 4 langkah

Untuk membantu memandu agen coding menghasilkan kode yang lebih baik dan lebih sesuai dengan persyaratan Anda, pertimbangkan untuk mengikuti siklus proses pengembangan produk 4 langkah:

1. Rencanakan dan desain: Tulis Dokumen Persyaratan Produk (PRD) secara kolaboratif dengan agen dan minta agen membuat prototipe serta mendesain PRD di browser sebelum memulai penerapan produksi, lalu buat draf Dokumen Desain (Spesifikasi) arsitektur dari PRD dan desain Anda sebelum coding dimulai.
2. Mengodekan dan membangun: Instruksikan agen Anda untuk membangun PRD, desain, dan Spesifikasi Anda, bukan perintah zero-shot, dan buat agen tersebut menjalankan agen lain untuk memeriksa pekerjaannya.
3. Ulangi: Lakukan langkah 1 dan 2 lagi untuk setiap fitur baru yang ingin Anda tambahkan.
4. Deploy: Kirim ke produksi.

Dokumen ini memandu Anda cara menggunakan agen AI sebagai partner kolaboratif aktif dengan praktik yang dimaksudkan untuk membantu Anda mengurangi utang teknis dan meningkatkan kualitas kode output. Anda menggunakan Antigravity yang dipasangkan dengan Panduan Web Modern dan DevTools untuk Agen guna membangun game kata kasual dan meningkatkan kualitasnya dengan kemampuan AI. Kemudian, Anda men-deploy-nya ke Google Cloud menggunakan Firebase untuk dibagikan kepada teman dan keluarga.

Yang akan Anda pelajari

• Cara memperlakukan tugas coding AI sebagai siklus proses pengembangan produk mini.
• Alasan Anda harus memisahkan persyaratan produk dari spesifikasi arsitektur.
• Cara mengatur alur kerja multi-agen untuk membuat prototipe langsung di browser dan meninjau kode Anda.
• Cara memanfaatkan kemampuan dan alat pihak ketiga untuk meningkatkan pengalaman pengembangan dan pengguna Anda.
• Cara men-deploy aplikasi web langsung ke produksi menggunakan Firebase MCP.

Prasyarat

• Akun Google pribadi dan project Google Cloud atau project Firebase (petunjuk di penyiapan project)
• Beberapa keakraban dengan HTML, CSS, dan JavaScript.
• Browser web seperti Chrome.
• Node.js terinstal (LTS direkomendasikan).

2. Penyiapan project

Akun Google

Jika Anda belum memiliki Akun Google pribadi, Anda dapat membuat Akun Google.

Login ke Konsol Google Cloud

Login ke Konsol Google Cloud menggunakan Akun Google pribadi.

Aktifkan penagihan

Tips: Jika Anda menyiapkan penagihan menggunakan kredit Google Cloud, Anda dapat langsung melanjutkan ke "Buat project Firebase".

Untuk menyiapkan akun penagihan pribadi, buka bagian aktifkan penagihan di Konsol Cloud.

Membuat project Firebase

Tips: Jika Anda telah menyiapkan project Google Cloud sebagai bagian dari penyiapan kredit Google Cloud, gunakan project tersebut untuk menyiapkan project Firebase Anda. Jika melakukannya, Anda tidak perlu menghubungkan akun penagihan karena akun tersebut sudah terhubung.

1. Buka Firebase Console dan login dengan Akun Google pribadi Anda.
2. Klik Tambahkan project (atau Buat project).
3. Di wizard pembuatan project:
   • Masukkan nama project (seperti, wordup-web-app), atau gunakan kembali project Google Cloud yang Anda siapkan selama penyiapan project.
4. Hubungkan Akun Penagihan
   • Di sidebar Firebase Console, temukan badge paket di bagian bawah (bertuliskan "Spark"). Klik Upgrade.
   • Pilih paket Bayar sesuai penggunaan.
   • Pilih Akun penagihan yang Anda siapkan selama langkah Penyiapan project.
   • Konfirmasi pilihan untuk melampirkan akun penagihan Anda ke project. (Firebase Hosting menyediakan paket gratis yang besar; menyelesaikan tutorial ini biasanya tidak dikenai biaya).

Menginstal alat

• Antigravity 2.0: Harness coding agentik utama yang Anda gunakan, dipasangkan dengan model Gemini Flash terbaru untuk coding cepat tingkat terdepan.
• Panduan Web Modern: Kemampuan untuk agen coding guna membantu mereka menulis CSS, HTML, dan JavaScript modern. Instal melalui Setelan > Penyesuaian > Plugin Build With Google > Panduan Web Modern Antigravity.
• DevTools untuk agen: Memungkinkan agen mengoperasikan Chrome, memeriksa DOM aktif, menguji tata letak, dan men-debug saat runtime. Instal melalui Setelan Antigravity > Penyesuaian > Buat dengan Plugin Google > Chrome DevTools dan Setelan Antigravity > Penyesuaian > Tambahkan Server MCP > Chrome DevTools untuk agen.
• Server Firebase MCP: Untuk penyiapan project yang lancar dan deployment satu perintah. Instal melalui Setelan > Penyesuaian > Buat dengan Plugin Google > Setelan Firebase dan Antigravity > Penyesuaian > Tambahkan Server MCP > Firebase.

3. Mulai dengan rencana

Godaan umum dalam coding agentik adalah mengirimkan perintah zero-shot ("Buat game kata untuk saya") dan berharap yang terbaik. Hal ini hampir selalu menghasilkan kasus ekstrem yang terlewat, codebase yang membengkak, dan siklus perbaikan bug yang tidak ada habisnya.

Sebagai gantinya, perlakukan setiap tugas sebagai siklus proses pengembangan produk mini. Agen coding memiliki alat riset dan penalaran yang memungkinkan mereka bertindak sebagai partner kolaboratif untuk membantu Anda mengklarifikasi ide sebelum menulis kode apa pun. Membicarakan ide sering kali membantu Anda menemukan dan menjawab pertanyaan sebelum menjadi masalah. Dalam rekayasa software, hal ini disebut rubber duck debugging. Anda dapat menggunakan agen coding sebagai bebek karet untuk merencanakan project dan fitur Anda.

Anda sedang membuat game kata kasual. Berikan perintah kepada agen Anda untuk membantu Anda mendesain game yang Anda inginkan.

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

Ini adalah bentuk dasar perintah—remix untuk kebutuhan Anda sendiri. Kuncinya di sini adalah membuatnya melakukan riset mendalam dan mengajukan pertanyaan kepada Anda berdasarkan riset tersebut untuk membantu Anda merencanakan pekerjaan.

Mulailah dengan perintah ini karena bekerja dengan agen coding melibatkan banyak peninjauan. Dengan memecah rencana penerapan lengkap menjadi bagian-bagian yang lebih kecil dan terfokus, Anda akan lebih mudah meninjaunya, dapat menemukan kasus ekstrem lebih awal, dapat memperoleh pengetahuan di luar data pelatihan agen, dan yang terpenting, Anda dapat beristirahat lebih sering di antara peninjauan.

• Memisahkan "apa" dari "bagaimana": Menentukan pengalaman pengguna dan cakupan produk dalam Dokumen Persyaratan Produk (PRD) formal memisahkan apa yang ingin Anda lakukan dari bagaimana hal itu diterapkan, sehingga Anda dapat berfokus pada satu aspek pengembangan produk dalam satu waktu, bukan semuanya sekaligus.
• Mengidentifikasi kasus ekstrem lebih awal: Sesi Tanya Jawab interaktif memaksa Anda untuk mengklarifikasi persyaratan sebelum desain atau penerapan dimulai.
• Riset agen aktif: Karena pelatihan agen dihentikan pada tanggal tertentu dan informasi di dalamnya menjadi sangat diringkas, pengambilan informasi dari riset langsung dapat membawa informasi baru yang mungkin terlewatkan.

Tips: Jika Anda melihat agen pengodean melakukan sesuatu yang Anda sukai, atau melakukan sesuatu yang tidak Anda sukai, Anda dapat menambahkan petunjuk ke file AGENTS.md di folder project untuk memperbaiki, atau memperkuat, perilakunya. Coba tambahkan kode berikut untuk memastikan Antigravity menggunakan alat pertanyaan bawaannya saat mengajukan pertanyaan kepada Anda:

When I ask you to ask me questions, you are **REQUIRED** to use your `ask_question` tool to do so.

Latihan 1

Sekarang giliran Anda. Siapkan project Anda dan buat PRD Anda.

1. Tambahkan petunjuk ke file AGENTS.md Anda untuk memberi tahu file tersebut agar menyimpan output Anda ke docs/plans/{{YYYY-MM-DD}}-{{description}}.md.
2. Jalankan perintah riset sebelumnya, dengan penyesuaian apa pun yang Anda inginkan, untuk membuat PRD.
3. [Sasaran Tambahan] Perbarui file AGENTS.md Anda dengan hal-hal yang dilakukan agen Anda yang tidak Anda sukai, lalu jalankan perintah Anda lagi.

Tips: Antigravity 2.0 memiliki perintah /grill-me yang dapat Anda jalankan khusus untuk melakukan eksplorasi semacam ini.

Praktik terbaik: Antigravity 2.0 memiliki alat "Artefak" yang memungkinkan Anda mengomentari baris demi baris atau menandai teks tertentu dan memberikan komentar, seperti Google Dokumen. Anda harus menyertakan komentar secara inline, bukan menambahkannya ke perintah. Simpan perintah untuk komentar di seluruh dokumen. Mengirimkan perintah, meskipun perintah kosong, akan mengirimkan komentar Anda dan memberi tahu Antigravity untuk membuat ulang dokumen Anda dengan komentar Anda yang telah ditangani.

Perhatian: Terkadang, meskipun Anda memintanya untuk hanya menulis PRD, PRD tersebut menyertakan desain dan arsitektur software. Jika demikian, berikan komentar atau minta untuk menghapus item tersebut dan hanya berfokus pada pengalaman pengguna.

4. Mendesain di browser

Desain UI statis mengandalkan mockup yang sering kali terlihat memukau, tetapi dapat gagal memperhitungkan kasus ekstrem, batasan, dan interaksi pengguna yang sebenarnya. Sama seperti kode, meminta agen untuk "mendesain" aplikasi situs Anda akan menghasilkan desain yang cenderung generik (sering kali berwarna ungu).

Untuk aplikasi web, Anda dapat menggunakan kemampuan agen untuk mengontrol browser web melalui DevTools untuk agen guna mendesain di browser. Baik Anda seorang desainer yang berupaya meningkatkan kualitas desain, seorang coder atau developer yang ingin meningkatkan UI dan UX project, atau keduanya bekerja sama, bekerja di media yang sebenarnya yang Anda bangun akan menghasilkan hasil yang lebih baik.

Mendesain di browser juga memberi Anda kesempatan untuk mengoordinasikan beberapa agen yang bekerja sama untuk menghasilkan satu output. Subagen ini adalah agen dengan persona dan sasaran tertentu yang dapat dikoordinasikan untuk menghasilkan hasil yang lebih baik daripada satu agen yang bekerja sendiri. Dengan desain, Anda dapat meminta agen desain visual, agen pengalaman pengguna, dan agen aksesibilitas untuk bekerja sama membantu Anda dalam desain, dan menunjukkannya langsung di browser.

Perhatian: Penggunaan subagen untuk menyelesaikan tugas menggunakan lebih banyak token. Meskipun dapat menghasilkan hasil yang jauh lebih berkualitas, perlu dipahami bahwa penggunaannya dapat menimbulkan biaya tambahan.

Mulai panel agen desain untuk membantu Anda memilih desain berdasarkan PRD Anda.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

Tips: Anda dapat mengetik @ di area perintah Antigravity dan mulai mengetik nama file untuk mengarahkan Antigravity ke file tertentu yang ingin Anda periksa.

Mendesain di media yang Anda bangun, dalam hal ini web, bukan yang statis, memungkinkan Anda menangkap kasus dan batasan ekstrem yang sulit dikelola jika tidak, dan memungkinkan Anda mendapatkan umpan balik visual langsung yang sesuai dengan produksi.

Latihan 2

Sekarang giliran Anda. Desain project Anda.

1. Jalankan perintah desain sebelumnya, dengan penyesuaian apa pun yang Anda inginkan, untuk membuat desain Anda. Sertakan ide untuk berbagai arah desain yang ingin Anda lihat (seperti modern, ceria, realistis, dan sebagainya).
2. Pilih desain yang Anda sukai dan lakukan iterasi dengan agen Anda.
3. Minta agen Anda memperbarui PRD untuk mengarah ke desain yang disepakati.
4. Sasaran tambahan: Jalankan pengujian aksesibilitas dan pengujian desain responsif untuk desain yang Anda pilih, dan sesuaikan desain Anda berdasarkan audit tersebut.

Perhatian: Terkadang agen terlalu bersemangat dan menganggap petunjuk ini sebagai persetujuan untuk membangun seluruh aplikasi. Perhatikan pemikirannya dan jika Anda melihatnya melakukan lebih dari yang Anda harapkan, hentikan dan minta untuk mengubah arahnya.

5. Menulis spesifikasi

Dengan PRD yang disetujui ("apa yang akan dibuat") dan desain visual yang dipilih ("seperti apa tampilannya"), Anda kini memerlukan keselarasan teknis pada arsitektur ("cara membuatnya").

Dokumen desain teknis atau spesifikasi—spec singkatnya—menjelaskan struktur file, pengelolaan status, antarmuka komponen, pipeline peristiwa, dan dependensi. Membuat spesifikasi sebelum menulis kode memungkinkan Anda mendeteksi ketidakselarasan dan pola coding yang tidak diinginkan sejak awal, sebelum berubah menjadi kode yang lebih sulit dipahami dan di-refactor.

Write a detailed technical design document on how to implement the game with
the chosen design.

Alasan Anda melakukan hal ini

• Kejelasan arsitektur: Menentukan hierarki komponen dan alur transisi status (seperti, Idle → InGame → EvaluatingGuess → GameOver) mencegah kondisi persaingan dan kode spaghetti yang rapuh.
• Penyelarasan standar modern: Dengan Panduan Web Modern diaktifkan, agen mereferensikan standar modern (misalnya, kueri CSS @container, elemen
  bawaan untuk modal atau overlay bantuan, dan modul ES modular) daripada menarik library lama yang berat.
• Ulasan bertahap: Dengan memisahkan ulasan PRD fungsional dari ulasan dokumen desain teknis, Anda dapat mengevaluasi arsitektur secara terpisah dari pengalaman pengguna.

Latihan 3

1. Instruksikan AGENTS.md untuk menyimpan output Anda ke folder saat ini:

   PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
   

2. Jalankan perintah dokumen desain dan tinjau, pastikan dokumen tersebut mencakup aspek-aspek seperti struktur direktori, penanganan peristiwa, dan penyimpanan.
3. Sasaran tambahan: Sertakan diagram Mermaid untuk menjelaskan alur status melalui aplikasi, jika belum menyertakannya.

6. Terakhir, bangun aplikasi

Setelah PRD, mockup UI, dan dokumen desain ditetapkan, saatnya membangun. Ketiga item ini adalah panduan yang jelas dan tidak ambigu yang dibutuhkan agen untuk mengetahui apa yang harus mereka buat.

Berikut adalah peluang bagus lainnya untuk menggunakan sub-agen. Anda dapat menjalankannya setelah kode dibuat untuk meninjau seberapa dekat hasil build dengan desain awal Anda, dan yang lainnya untuk memeriksa kualitas kode dari hasil build.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

Alasan Anda melakukan hal ini

Pengembangan berbasis spesifikasi dengan peninjau tahap pertama memberikan persyaratan yang jelas dan telah diseleksi sebelumnya kepada agen Anda untuk dibangun, dan pandangan baru untuk memastikan mereka mematuhi rencana sebelum sampai kepada Anda, sehingga meningkatkan kualitas dan kesetiaan.

• Persyaratan yang telah diperiksa: Agen tidak perlu menebak apa yang Anda inginkan; Anda telah meninjau semuanya kecuali implementasi sebelum kode apa pun ditulis.
• Sudut pandang baru: Agen peninjau yang muncul dalam konteks baru tidak memiliki bias konfirmasi dari pembuatan codebase, sehingga efektif dalam menangkap kasus ekstrem yang tidak tertangani, persyaratan penerapan yang tidak ada, dan detail kode atau produk lainnya yang terlewat.

Latihan 4

1. Jalankan perintah build, dengan mengarahkan ke file persis yang ingin Anda tinjau.
2. Amati output saat dijalankan. Anda akan melihatnya memproses persyaratan Anda saat mencoba menyusunnya. Jika ada yang tampak tidak beres, Anda dapat menghentikannya dan memperbaikinya.
3. Jalankan server pengembangan Anda untuk melihat situs akhir dan memeriksa fungsinya.
4. Sasaran tambahan: Jalankan proses ini lagi untuk menambahkan pengujian otomatis.
5. Sasaran tambahan: Pilih framework atau technology stack tertentu yang Anda inginkan untuk membangun situs—dengan PRD, mockup, dan dokumen desain yang terpisah, Anda dapat dengan mudah menyesuaikannya dengan framework atau technology stack yang berbeda.

7. Men-deploy ke produksi

Anda telah merencanakan, mendesain, dan membuat kode. Apa yang tersisa? Men-deploy ke produksi.

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

Perhatian: Jika tidak berhasil, pastikan Anda telah menginstal Firebase MCP. Anda mungkin juga perlu login saat pertama kali menjalankan perintah ini.

Latihan 5

1. Jalankan perintah deployment dengan mengganti project ID Anda.
2. Salin URL hosting live yang disediakan oleh agen.
3. Buka URL aktif untuk memverifikasi bahwa URL tersebut di-deploy dan berfungsi.
4. Sasaran ambisius: Menggunakan DevTools agar agen dapat menjalankan audit Lighthouse di situs produksi Anda, melakukan penyesuaian untuk meningkatkan skor Lighthouse, dan memublikasikan update.

8. [Opsional] Peningkatan AI

Game kata Anda kini berfungsi penuh menggunakan kamus statis. Untuk mengubah kamus statis menjadi kata dinamis, Anda dapat meminta satu kata setiap kali menggunakan model bahasa lokal kecil dari Prompt API.

Perhatian: Jika belum melakukannya, pastikan Anda telah menginstal Panduan Web Modern untuk membantu Anda di sini.

Karena fitur ini tidak tersedia di semua perangkat, Anda menggunakan peningkatan progresif untuk memeriksa apakah API dan model tersedia. Jika ada, Anda menggunakannya; jika tidak, Anda kembali ke daftar statis.

Latihan 6

Terapkan semua yang telah Anda pelajari.

1. Bekerja samalah dengan agen Anda untuk menulis PRD guna menggunakan Prompt API untuk membuat kata tersembunyi yang valid.
2. Mendesain status progres download dan UI yang mengintegrasikan AI di browser.
3. Tulis spesifikasi untuk implementasi. (Petunjuk: Jalankan agen untuk memastikan agen menggunakan sintaksis API yang benar di sini.)
4. Kembangkan fitur baru Anda.
5. Deploy ke produksi.

9. Rangkuman

Selamat. Anda telah berhasil membangun, menyempurnakan, meningkatkan kualitas, dan men-deploy aplikasi web modern yang mudah diakses dan berorientasi AI menggunakan praktik terbaik coding agentik.

Yang telah Anda pelajari

• Alur kerja agen yang didorong produk: Cara memperlakukan tugas sebagai siklus proses produk mini (PRD → Desain → Spesifikasi → Pembuatan) mengurangi utang, biaya overhead peninjauan, dan gesekan bolak-balik.
• Panel pakar multi-agen: Cara menjalankan beberapa subagen AI dapat membantu meningkatkan kualitas dan akurasi pekerjaan Anda.
• PRD vs. dokumen desain: Mengapa memisahkan cakupan fungsional (rencana) dari arsitektur teknis (spesifikasi) adalah proses yang lebih terukur dan akurat daripada perintah fitur zero-shot.
• Deployment yang lancar: Cara menggunakan server MCP (seperti Firebase MCP) untuk menyederhanakan akses ke sistem pihak ketiga, seperti men-deploy situs Anda.