Membina semula sistem legasi yang berusia sedekad merupakan antara tugasan yang paling digeruni dalam bidang kejuruteraan perisian. Apabila sesuatu pangkalan kod merangkumi 7,600 baris kod PHP 5 jenis prosedural, pertanyaan SQL sebaris, cincangan kata laluan MD5, ketiadaan dokumentasi langsung, dan rekod pangkalan data selama dua belas tahun tanpa sebarang pengesahan, pasukan kejuruteraan lazimnya berasa buntu. Pandangan konvensional mencadangkan mesyuarat perbincangan selama berbulan-bulan, penulisan spesifikasi secara manual, serta pemfaktoran semula berperingkat yang penuh berhati-hati.
Wujud alternatif yang lebih pantas dan berdisiplin. Melalui gabungan model penaakulan berkeupayaan tinggi, penyoalan keperluan terperinci secara adverserial, pelaksanaan subejen berautonomi, dan sistem reka bentuk yang diekstrak daripada logo, anda mampu menyiapkan pembinaan semula greenfield yang bersih dengan pariti data menyeluruh dalam masa beberapa jam sahaja.
Vibe coding sering disalah anggap sebagai pengkodan tanpa panduan atau disiplin. Dalam pemodenan berkepentingan tinggi, menggabungkan kepantasan perbualan dengan kekangan sempadan yang ketat, kontrak bertaip, dan pengesahan automatik menjadikan vibe coding sebuah enjin kejuruteraan berketepatan tinggi.
Aliran kerja ini telah dibuktikan keberkesanannya semasa membina semula platform pendaftaran pelanggan dan hartanah bagi sebuah firma penilaian terkemuka. Sistem asal tersebut menguruskan rekod merangkumi 5,151 fail pelanggan serta 7,716 urusan hartanah. Keseluruhan proses pemodenan (daripada pembersihan pangkalan data, pelaksanaan tindanan penuh, perombakan UX, hingga pengerahan di pinggir) dirancang dan dilaksanakan di dalam Cursor menggunakan aliran kerja ejen berautonomi bersama Google Stitch bagi penjanaan sistem reka bentuk.
Tindanan Teknologi di Hujung Jari Anda
| Lapisan | Teknologi Terpilih | Sebab Dipilih | Pilihan yang Ditolak |
|---|---|---|---|
| Seni Bina | Monolit Modular Next.js 16 | Satu sempadan penggunaan tunggal, model TypeScript dikongsi, kependaman rangkaian sifar antara lapisan | Mikroperkhidmatan sebenar (beban operasi berlebihan bagi 8k baris kod) dan corak Strangler |
| Pangkalan Data | PostgreSQL 16 + Drizzle ORM | Kekangan kunci asing yang ketat, indeks pg_trgm untuk carian kabur sepantas kilat, keselamatan migrasi | MySQL 5 legasi (penaipan longgar, skema tidak disahkan) atau alternatif NoSQL |
| Pengesahan | Auth.js v5 + Argon2 | Pencincangan moden bergaram (salted hashing), kuki sesi kalis usikan, pendedahan sifar kepada jadual MD5 legasi | Memindahkan cincangan MD5 yang tidak selamat atau memaksa pengguna melalui geseran penetapan semula kata laluan |
| Kit Komponen | Tailwind CSS v4 + shadcn/ui | Primitif boleh diakses tanpa penggayaan awal, kawalan susun atur pantas, suntikan CSS masa jalan sifar | Rangka kerja UI perusahaan yang berat (Ant Design, MUI) dengan muatan skrip yang besar |
| Sistem Reka Bentuk & Mockup | Google Stitch (Pengekstrakan Logo) | Token jenama padu yang dijana terus daripada satu fail logo PNG tanpa sebarang panduan jenama rasmi | Pratetap shadcn kelabu lalai atau lakaran mockup manual berminggu-minggu di Figma |
| Klien AI & Pelaksanaan | Cursor (Mod Ejen Berautonomi) | Manipulasi fail ruang kerja secara langsung, pelaksanaan terminal berterusan, pecutan subejen tanpa seliaan | Sembang pelayar terputus yang memerlukan salin dan tampal secara manual tanpa henti |
| Kualiti & Pariti | Automasi Pelayar Tanpa Paparan (Playwright) | Mengesahkan 100% kawalan interaktif, penapis, penombor halaman, dan kes ekstrem sebelum penggunaan | Klik ad-hoc secara manual atau penjanaan kod tanpa pengesahan |
| Penggunaan (Deployment) | Bekas Podman + Terowong Selamat | Aplikasi terasing pada port 8173, pangkalan data berasingan pada port 5436, masa henti sifar pada port legasi 8001 | Mengubah persekitaran pelayan langsung atau pemasangan pakej VPS manual |
1. Perundingan Seni Bina Terbuka: Jangan Hadkan Tindanan Terlalu Awal
Apabila seorang pemilik perniagaan melantik sebuah firma perunding teknologi kanan, mereka tidak hadir dengan senarai perpustakaan yang tegar. Mereka membentangkan kekangan perniagaan kepada arkitek berpengalaman dan membuka ruang penilaian bagi pertukaran teknikal (technical trade-offs).
Jurutera sewajarnya melayan model AI terkini dengan pendekatan yang sama. Semasa memulakan pembinaan semula greenfield, elakkan dorongan untuk terus menentukan rangka kerja dengan tergesa-gesa. Pilih model penaakulan yang paling berkemampuan, sediakan belanjawan token yang secukupnya, dan minta model tersebut menilai pelbagai laluan seni bina yang berpotensi.
Dalam pembinaan semula ini, naluri asal manusia adalah untuk membina tiga mikroperkhidmatan berasingan: antara muka hadapan khusus, perkhidmatan API bahagian belakang, dan lapisan pangkalan data. Model AI tersebut terus menolak cadangan ini. Bagi aplikasi bersaiz 8,000 baris kod yang hanya melayani puluhan kerani pejabat secara serentak, mikroperkhidmatan sebenar hanya menambah kependaman rangkaian, kerumitan pengurusan keadaan teragih, dan beban operasi berterusan tanpa sebarang faedah praktikal.
Model tersebut mencadangkan monolit modular yang dibina berasaskan Next.js 16, TypeScript, Drizzle ORM, dan PostgreSQL. Dengan melayan AI sebagai rakan kongsi teknikal berbanding penjana kod asas semata-mata, projek ini berjaya memperoleh seni bina yang jauh lebih ringkas serta menjimatkan masa berminggu-minggu daripada kerja-kerja paip asas (boilerplate).
2. Penyoalan Mendalam Bersama Dokumen Sebenar (/grill-with-docs)
Punca kegagalan utama dalam migrasi sistem legasi adalah kebergantungan pada ingatan manusia. Pembangun lazimnya membina apa yang mereka anggap dilakukan oleh sistem legasi, bukannya apa yang sebenarnya dilaksanakan oleh kod tersebut.
Bagi mengelakkan halusinasi, aliran kerja ini menggunakan protokol temu duga adverserial yang dipanggil /grill-with-docs. Daripada menerima arahan prom yang longgar, model AI menjalankan pusingan temu duga berstruktur dengan merujuk terus kepada pangkalan kod sebenar. Ia memeriksa fail konfigurasi, skrip tindakan mentah, skema pangkalan data, dan templat paparan untuk mengesan percanggahan seni bina.
Sepanjang pembinaan semula projek ini, lima pusingan penyoalan terperinci telah mendedahkan beberapa ketidakkonsistenan teknikal yang kritikal:
Pertama, imbasan pada fail templat mendedahkan lebih 130 label dalam bahasa Inggeris (“Property”, “Customer”, “Search”) berbanding hanya satu istilah dalam bahasa Melayu. Walaupun andaian awal cenderung ke arah antara muka berbahasa Melayu, mengekalkan salinan bahasa Inggeris bertepatan dengan corak penggunaan bersejarah serta menjimatkan usaha terjemahan.
Kedua, nota projek meminta penapis carian bagi nombor kad pengenalan. Pemeriksaan terhadap skema pangkalan data membuktikan bahawa rekod pelanggan hanya mengandungi tarikh, nama, alamat, dan nombor telefon. Medan yang dicadangkan itu tidak pernah wujud.
Ketiga, pemeriksaan kod mendapati butang eksport hamparan legasi hanya menyajikan templat cetakan HTML mentah dengan suntikan skrip cetakan pelayar. Cabang eksport ke format Excel telah pun ditinggalkan bertahun-tahun sebelumnya.
Keempat, skrip penciptaan rekod legasi secara automatik memasukkan rekod hartanah kosong setiap kali pelanggan baharu ditambah, menyebabkan pertanyaan senarai terpaksa menapis nama-nama kosong. Meniru tabiat pelik ini pasti akan mencemarkan integriti kiraan data dalam skema baharu.
Setiap keputusan yang dipersetujui telah didokumentasikan dalam Rekod Keputusan Seni Bina rasmi (ADR 0001 hingga 0006 mengikut format yang dipelopori oleh Michael Nygard) dan dikunci ke dalam glosari kanonikal (CONTEXT.md).
3. Kewujudan Bersama yang Ketat dan Migrasi Tanpa Musnah
Pembinaan semula sistem pengeluaran tidak boleh sesekali menjejaskan operasi harian perniagaan. Aplikasi legasi sedia ada sedang digunakan secara aktif oleh para kerani pada port 8001. Peraturan asas aliran kerja ini adalah pengasingan mutlak sepanjang tempoh pembangunan.
Pelan pelaksanaan menguatkuasakan sempadan yang ketat:
- Aplikasi Next.js baharu dijalankan pada port 8173, terasing sepenuhnya daripada port 8001.
- PostgreSQL dimulakan di dalam bekas khusus pada port 5436, mengelakkan pertembungan soket kongsi.
- Saluran paip migrasi hanya menelan salinan pangkalan data luar talian (offline dump), tidak pernah bersambung terus ke hos pangkalan data pengeluaran langsung.
- Cincangan kata laluan legasi tidak dipindahkan. Kata laluan lama menggunakan cincangan MD5 tanpa garam yang melanggar piawaian keselamatan moden. Sistem baharu memulakan akaun pentadbir dengan penyulitan Argon2, membolehkan para kerani menerima kelayakan log masuk baharu semasa peralihan sistem.
Penetapan ini memastikan sifar risiko terhadap operasi harian firma di samping membolehkan integrasi berterusan yang pantas dalam persekitaran baharu.
4. Pelaksanaan Subejen Berautonomi: Pecutan Tanpa Seliaan
Sebaik sahaja spesifikasi dan peraturan migrasi dimuktamadkan, proses pembangunan beralih kepada pelaksanaan subejen berautonomi.
Daripada membimbing AI melalui ratusan arahan terminal secara berperingkat, pelan induk diserahkan terus kepada pelaksana ejen Cursor. Ejen tersebut menghuraikan tugasan, mengurus penyuntingan fail, menjalankan semakan cangkerang tempatan, dan mengesahkan langkah kompilasi secara berdikari.
Fasa ini biasanya mengambil masa antara empat hingga lima jam. Disebabkan syarat sempadan dan kekangan seni bina telah pun dikunci semasa fasa penyoalan, pembangun boleh berehat sepenuhnya, menyemak pangkalan kod lain, atau meluangkan masa untuk urusan peribadi.
Sepanjang pecutan tanpa pengawasan ini, ejen membina keseluruhan skema Drizzle berserta perhubungan ditaip, lata arkib padam lembut (soft-delete), dan indeks carian kabur trigram. Ia turut merangka skrip migrasi data automatik yang berjaya menghuraikan 5,151 pelanggan dan 7,716 hartanah daripada salinan MySQL, di samping menyingkirkan 5,150 baris pemegang tempat kosong legasi secara selamat. Ia menyediakan pengendalian sesi Auth.js, pintu kawalan akses berasaskan peranan (Pentadbir vs. Kerani), dan rutin pencincangan kata laluan. Akhir sekali, ia mempakej keseluruhan platform ke dalam bekas Podman yang boleh dihasilkan semula untuk penggunaan pengeluaran.
Pembangun kembali dan mendapati aplikasi berfungsi sepenuhnya dengan data langsung sedia ada, sedia untuk dinilai.
5. Semakan UX Ruang Kerja Berasaskan Realiti (/design-taste-frontend)
Pelaksanaan AI mentah sering kali cenderung ke arah tetapan lalai yang hambar: palet warna kelabu standard, kad visual yang menambah ketinggian tanpa fungsi nyata, serta jadual yang mengabaikan ergonomik asas di tempat kerja.
Langkah seterusnya adalah menggunakan /design-taste-frontend, iaitu protokol penilaian yang meneliti UI daripada sudut pandangan pengendali pejabat sebenar.
Jadual komponen mentah pada mulanya melimpah keluar sebanyak 800 piksel secara mendatar pada paparan standard kerana sel jadual menghalang pembalutan teks. Semakan ini menguatkuasakan pembalutan teks bagi nama pelanggan yang panjang, menjajarkan nilai wang ke kanan dengan fon berangka jadual, serta menyembunyikan lajur geografi sekunder pada skrin mudah alih.
Borang pendaftaran hartanah awal memuatkan kesemua 5,151 pelanggan ke dalam satu menu pilihan lungsur (dropdown) HTML asli, menyebabkan pelayar menjadi kaku. Semakan menggantikannya dengan pemilih carian taip awal (typeahead) tak segerak yang dinyahpantulkan.
Papan pemuka asal hanya memaparkan kaunter jumlah asas. Semakan menukar papan pemuka tersebut menjadi barisan kerja aktif yang memaparkan hartanah dengan baki yuran tertunggak secara ketara (RM 3,553 item terbuka disusun mengikut jumlah baki), membolehkan kerani mengambil tindakan segera ke atas akaun yang lewat bayar.
Akhir sekali, penombor halaman dinaik taraf daripada butang Sebelum dan Seterusnya yang ringkas kepada penunjuk nombor yang komprehensif, membantu para kerani menavigasi 207 halaman pelanggan dan 309 halaman hartanah dengan mudah.
6. Sistem Reka Bentuk Tersuai Hanya daripada Logo (Google Stitch)
Perniagaan kecil dan sederhana jarang memiliki pustaka reka bentuk yang lengkap, kit komponen Figma, atau buku panduan jenama moden. Dalam kebanyakan kes, satu-satunya aset jenama yang wujud hanyalah satu fail logo syarikat.
Daripada sekadar berpuas hati dengan tema CSS lalai, aliran kerja ini menggunakan Stitch with Google untuk mengubah logo tunggal tersebut menjadi bahasa reka bentuk yang lengkap:
Pertama, logo korporat firma telah dimuat naik ke Google Stitch bagi menganalisis keharmonian warna, kontras tipografi, dan nada estetik.
Kedua, Stitch menjana profil estetik kemas yang menampilkan pengepala putih bersih, teks struktur kelabu gelap (slate), keadaan navigasi aktif biru langit, dan bekas jadual yang bersahaja.
Ketiga, paparan aplikasi sebenar ditangkap layarnya dan diuji terhadap garis panduan yang dijana oleh Stitch, mengesahkan gandingan fon (Plus Jakarta Sans digandingkan dengan Inter) serta memeriksa nisbah kontras komponen.
Keempat, token sistem reka bentuk dan mockup skrin yang dimuktamadkan dimasukkan semula ke dalam Cursor, mengemas kini kerangka susun atur aplikasi, pengepala jadual, butang, dan modal amaran dalam satu laluan terselaras.
Hasilnya ialah platform ruang kerja yang kelihatan seolah-olah dibina khas oleh agensi produk terkemuka, menyingkirkan terus estetik generik daripada pustaka komponen biasa.
Direkayasa Bersama Cursor dan Google Stitch
Keseluruhan kitaran hayat kejuruteraan bagi projek pemodenan ini menggabungkan autonomi pengkodan Cursor bersama sintesis reka bentuk Google Stitch:
- Sesi temu duga keperluan berbilang pusingan dijalankan terus di dalam Cursor, menyoal selidik kod legasi dan mengunci spesifikasi teknikal.
- Aliran kerja ejen berautonomi di dalam Cursor menjana kod TypeScript tindanan penuh, skema PostgreSQL, dan utiliti migrasi tanpa memerlukan prom baris demi baris secara manual.
- Persekitaran berbekas diselaraskan dan dilancarkan melalui alatan terminal di dalam Cursor, mengasingkan port pengeluaran daripada proses aplikasi legasi.
- Google Stitch mengekstrak DNA jenama daripada satu imej logo, menghasilkan token reka bentuk dan mockup UI yang menukar komponen generik kepada direktori kerja yang kemas dan profesional.
- Skrip pengesahan pelayar tanpa paparan menelusuri perjalanan pengguna, memastikan sifar regresi pada daftar pelanggan, lejar hartanah, dan kawalan akaun.
Ringkasan Metrik Pengeluaran
| Metrik | Ukuran |
|---|---|
| Pangkalan Kod Legasi Diganti | ~7,600 baris kod PHP 5 prosedural, Twig, dan MySQL sebaris |
| Pelanggan Dimigrasi | 5,151 fail pelanggan aktif |
| Hartanah Dimigrasi | 7,716 urusan penilaian hartanah |
| Pembersihan Kebersihan Data | 5,150 baris pemegang tempat kosong disingkirkan secara automatik |
| Masa Pecutan Berautonomi | Kira-kira 4.5 jam pelaksanaan ejen tanpa pengawasan |
| Masa Henti Pengeluaran | Tepat 0 saat (pengesahan sebelah-menyebelah pada port 8173) |
| Masa Tindak Balas Pangkalan Data | Masa pertanyaan di bawah 5ms menggunakan indeks kabur pg_trgm |
| Tindanan Pengeluaran | Next.js 16, PostgreSQL 16, Drizzle ORM, Auth.js v5, Tailwind CSS v4 |
| Alatan Utama | Cursor (Mod Ejen) + Google Stitch |
| Sasaran Penggunaan | Persekitaran pinggir berbekas dengan terowong SSL automatik |
Kejuruteraan Greenfield yang Boleh Diulang
Pemodenan sistem legasi secara greenfield tidak memerlukan kitaran kejuruteraan berbulan-bulan atau pemindahan baris demi baris secara manual yang memenatkan.
Melalui gabungan model penaakulan termaju, penyoalan pangkalan kod secara adverserial, pelaksanaan ejen tanpa pengawasan di dalam Cursor, serta sistem reka bentuk berasaskan logo di dalam Google Stitch, sebuah sistem legasi berusia sedekad berjaya diubah menjadi aplikasi ruang kerja berkepadatan tinggi yang responsif dalam masa satu petang sahaja tanpa sebarang gangguan operasi.
Untuk memasang kemahiran ejen khusus yang digunakan dalam aliran kerja ini, jalankan: