1. Mengarahkan perjalanan modernisasi Anda
Codelab komprehensif ini adalah lab pendamping praktis yang berasal langsung dari artikel mendalam arsitektur, Cara mengotomatiskan modernisasi dengan Antigravity dan orkestrasi multi-agen. Meskipun kami menggunakan penggantian framework Node.js klasik sebagai alat demonstrasi nyata, pola desain inti, struktur direktori, dan proses orkestrasi agentic yang akan Anda kuasai di sini sepenuhnya tidak bergantung pada bahasa dan berlaku secara universal untuk project modernisasi lama apa pun dalam skala besar.
Tidak seperti asisten coding standar yang hanya melengkapi otomatis baris dalam satu file, Anda akan mempelajari cara memanfaatkan kemampuan agent-first Google Antigravity untuk mengatur tim otonom subagen AI khusus. Agen ini dapat merekayasa balik codebase lama secara independen, menulis rangkaian pengujian yang ketat, membuat arsitektur modern, dan mengoreksi sendiri error kompilernya menggunakan loop Refleksi, sambil Anda mempertahankan kontrol absolut sebagai arsitek tingkat tinggi.
Yang akan Anda pelajari
- Memetakan alur kerja: Cara mengklasifikasikan dan memisahkan tugas penyiapan deterministik dengan benar dari tantangan pemfaktoran ulang heuristik yang kompleks.
- Arsitektur keterampilan: Cara menyusun Paket Keterampilan Agen yang dapat diperluas menggunakan metadata perutean YAML dan pengungkapan progresif.
- Mengatur pola desain: Cara mendorong pemfaktoran ulang skala besar dengan menggabungkan pola desain Router, Rencanakan dan Jalankan, serta Refleksi.
- Kontrak input/output yang ketat: Cara menerapkan batas input/keterampilan/output yang jelas di seluruh pipeline rekayasa balik dan pembuatan target multi-fase.
- Verifikasi paritas: Cara memanfaatkan Subagen Browser Antigravity untuk melakukan pengujian paritas berdampingan dalam browser web Chrome.
Yang akan Anda buat
Anda akan mengatur Pipeline Pemfaktoran Ulang Greenfield yang sepenuhnya otomatis yang mengambil monolit CRUD Express dan Mongoose lama yang ikonik dan usang ("demo madhums") dan membangunnya kembali secara otonom dari awal menjadi aplikasi Router Aplikasi Next.js yang diketik secara ketat yang didukung oleh MongoDB, validasi Zod yang ketat, dan komponen UI ShadCN yang dapat diakses.
Yang akan Anda butuhkan
- Google Antigravity IDE diinstal secara lokal (tersedia di antigravity.google).
- Node.js (v18+) diinstal secara lokal.
- Browser Chrome untuk verifikasi UI otomatis.
- Kloning monorepo demonstrasi modernizing-expressjs open source.
2. Menyiapkan lingkungan modernisasi
Sebelum melepaskan agen otonom pada codebase lama yang sudah usang, kita harus membuat lingkungan monorepo yang bersih dan sangat stabil. Memberikan baseline yang bersih kepada asisten AI memastikan asisten tersebut berfokus sepenuhnya pada pembuatan kode modern berkualitas tinggi, bukan membuang token untuk mengatasi kerentanan paket yang sudah berusia puluhan tahun atau ketidakcocokan kompilator.
Pemetaan arsitektur Express lama versus Next.js modern
Komponen | Stack Versi Lama | Penggantian Modern | Rationale |
Arsitektur | Monolit Express | Router Aplikasi Next.js | Memisahkan logika ke dalam Komponen Server untuk rendering yang dioptimalkan dan performa Komponen Server React (RSC). |
Logika Data | Mongoose (ODM) | MongoDB + Zod | Mengganti hook ORM implisit dengan skema Zod yang eksplisit dan aman jenisnya serta performa driver mentah. |
Bahasa | CommonJS / JavaScript | TypeScript (ESM) | Menerapkan keamanan waktu kompilasi dan beralih ke standar modul modern. |
Frontend | Pug/EJS (Tampilan Server) | ShadCN UI + Tailwind | Beralih dari template yang kaku ke sistem desain yang dapat dikomposisikan, dapat diakses, dan mengutamakan utilitas. |
Auth | Passport.js | NextAuth | Memodernisasi pengelolaan sesi dengan dukungan bawaan untuk Edge dan penyedia kontemporer. |
Keamanan | Middleware Manual | Zod (Validasi Ketat) | Menerapkan "Sumber Ketepatan Tunggal" untuk validasi data di seluruh stack. |
Menginisialisasi hub modernisasi
Tindakan deterministik pertama kita adalah meng-clone struktur monorepo yang terisolasi. Tindakan ini memisahkan kode lama hanya baca dari repositori target greenfield baru kita, sehingga tidak ada mutasi yang tidak disengaja pada aplikasi asli.
Buka terminal Antigravity dan jalankan perintah penyiapan berikut:
git clone https://github.com/GoogleCloudPlatform/devrel-demos.git cd devrel-demos/other/modernizing-expressjs
Setelah di-clone, buka folder modernizing-expressjs langsung di explorer IDE Antigravity. Anda akan melihat tata letak terisolasi berikut:
/modernizing-expressjs/ ├── .agents/ # Skills metadata and checklists │ └── skills/ ├── docs/ # Target directory for reverse-engineered markdown artifacts ├── legacy-app/ # Read-only root of the legacy Express monolith ├── modern-app/ # Greenfield target repository for the Next.js rewrite ├── GEMINI.md # Project-wide agent constitution └── README.md # Companion documentation
Tonton panduan video singkat ini yang menunjukkan cara menyiapkan dan mengisolasi lingkungan monorepo Anda secara deterministik:
3. Membuat arsitektur paket &pola keterampilan agen AI
Menulis Keterampilan Agen yang kuat pada dasarnya berbeda dengan menulis perintah chat standar. Saat menulis Paket Keterampilan, Anda mendesain software modular yang akan dijalankan secara otonom oleh LLM yang mendasarinya. Untuk mencegah agen berhalusinasi atau mengalami "pajak jendela konteks", kami memperkenalkan Paket Keterampilan Orkestrasi Greenfield open source sebagai template penulisan yang dapat diperluas yang didorong oleh dua prinsip yang tidak dapat dinegosiasikan: ringkas dan pengungkapan progresif.
Pengungkapan progresif menggunakan perutean metadata YAML
Daripada membuang semua aturan target ke dalam satu perintah sistem monolitik, kami mendistribusikan petunjuk di seluruh direktori. Setiap direktori Keterampilan berisi titik entri SKILL.md yang digabungkan dalam blok frontmatter perutean YAML.
Buka .agents/skills/orchestrating-greenfield-migration/SKILL.md dan periksa metadata router:
---
name: orchestrating-greenfield-migration
description: >
Manages the end-to-end modernization of legacy Express
monoliths into Next.js architectures. Orchestrates subagents
for auditing, scaffolding, and verification. Use when starting
or managing a greenfield rewrite project.
---
Hardcoding pola rencanakan dan jalankan
Untuk mencegah agen otonom menyimpang, terganggu oleh middleware lama yang menarik, atau mencoba penggantian database yang tidak sah, kami mengganti perencanaan open-ended standar dengan hardcoding pola Rencanakan dan Jalankan langsung ke dalam petunjuk.
Periksa checklist Markdown literal yang disematkan di dalam orkestrator utama:
### Phase 1: The AI audit (reverse engineering)
Dispatch subagents to produce specifications while identifying project-specific test scenarios.
* [ ] Init `docs/verification/Verification_Plan.md` to create baseline template.
* [ ] Run `auditing-data-models` -> Append Data Integrity Stress-Tests.
* [ ] Run `auditing-api-contracts` -> Append API Parity & Edge Case Probes.
* [ ] Run `auditing-business-logic` -> Append Logic & Authorization Stress-Tests.
* [ ] Run `auditing-ui-archeology` -> Append Interaction & Layout Targets.
Dengan memformat alur kerja sebagai checklist eksplisit dengan referensi keterampilan inline, agen akan menyalin roadmap yang sama ini ke dalam rencana tugasnya, sehingga menguncinya ke dalam mode "hanya jalankan" yang secara sistematis mencentang kotak dan memanggil subagen yang sangat khusus tepat saat diperlukan.
4. Fase 1 — Merekayasa balik monolit lama (audit)
Kita siap memicu urutan orkestrasi utama. Fase utama pertama kita mengekstrak aturan bisnis, skema data, dan payload API dari monolit lama, menyimpannya sebagai artefak Markdown yang bersih sambil meninggalkan utang teknis imperatif selama satu dekade.
Memicu urutan pemfaktoran ulang otonom
Di panel chat Pengelola Agen Antigravity, ketik perintah garis miring kustom berikut, lalu tekan Enter:
/orchestrating-greenfield-migration
Sekarang, amati konsol terminal Anda. Anda akan melihat agen utama membaca perintah sistemnya, mencocokkan permintaan Anda dengan metadata Orkestrator, menampilkan checklist 5 Fase, dan segera mulai mengirim subagen "Auditor" khusus secara paralel.
Kontrak instruksional input/keterampilan/output
Selama Fase 1, agen menjalankan pipeline rekayasa balik yang ketat yang terikat oleh kontrak instruksional berikut:
Input yang digunakan: File kode sumber lama hanya baca yang terletak di dalam legacy-app/.
Keterampilan yang dipanggil:
Keterampilan | Deskripsi |
| Melacak rute lama untuk mendokumentasikan amplop respons JSON yang tepat. |
| Mendekonstruksi skema Mongoose untuk mengekstrak relasi, kolom yang diperlukan, dan default. |
| Mendokumentasikan efek samping implisit, alur autentikasi Passport, dan aturan middleware. |
| Memindai template Pug lama untuk memetakan "Tujuan UI" tingkat tinggi (navbar, formulir). |
Artefak yang dihasilkan: Spesifikasi Markdown yang sangat terstruktur yang dihasilkan langsung ke dalam folder docs/
Artefak | Deskripsi |
| Dokumen ini menjelaskan area permukaan API yang direkayasa balik dari aplikasi Express lama. Gunakan katalog ini untuk memastikan paritas yang ketat saat membangun kembali rute di aplikasi Next.js yang dimodernisasi. |
| Dokumen ini mencatat perilaku, konfigurasi, dan aturan ketat yang diverifikasi dari aplikasi Express lama terkait autentikasi (AuthN), otorisasi (AuthZ), middleware global, pengelolaan sesi, dan efek samping. |
| Dokumen ini memberikan analisis komprehensif tentang skema Mongoose lama dari |
| Dokumen ini memberikan analisis mendetail tentang antarmuka pengguna berbasis Pug lama di |
Tonton rekaman terminal live ini yang menunjukkan audit rekayasa balik otonom yang sedang beraksi:
5. Fase 2 &3 — Harness TDD &pembuatan backend greenfield
Dengan aplikasi lama yang diaudit dan didokumentasikan sepenuhnya, orkestrator utama akan melanjutkan ke pembuatan backend target modern. Fase ini memperkenalkan pola desain agentic yang paling andal dalam toolkit kita: Refleksi loop tertutup (refleksi diri) yang didorong oleh Test-Driven Development (TDD) yang ketat.
Mendorong kode penyembuhan otomatis menggunakan loop Refleksi
Menulis kode modern sangat mudah; memastikan kode tersebut dikompilasi dengan sempurna dan lulus batasan validasi yang ketat memerlukan evaluasi loop tertutup. Orkestrator menanganinya secara otonom dengan mengarahkan output pengujian kembali ke jendela konteks subagen:
- Fase 2 (penyiapan TDD): Orkestrator memanggil subagen
generating-api-tests, yang membacadocs/API_Contracts.mddan menulis rangkaian pengujian integrasi Vitest yang lengkap yang menegaskan kode status HTTP dan payload JSON yang diperlukan. Seperti yang diharapkan dalam TDD, pengujian ini awalnya gagal. - Fase 3 (pembuatan backend): Subagen pembuatan mulai menulis Penangan Rute Next.js modern dan skema validasi Zod yang ketat.
- Loop koreksi otomatis: Saat harness Vitest deterministik mengevaluasi kode baru dan menampilkan kegagalan (misalnya, error validasi
422yang diharapkan menampilkan500), agen tidak akan mengalami error. Agen tersebut merefleksikan output error objektif, membuka kembali penangan rute target, memperbaiki struktur payload skema Zod, dan menjalankan pengujian lagi. Agen tersebut melakukan iterasi secara otonom hingga mencapai kode keluar0.
Kontrak instruksional input/keterampilan/output
Input yang digunakan: Artefak spesifikasi yang direkayasa balik (docs/API_Contracts.md, docs/Data_Models.md).
Keterampilan yang dipanggil:
Keterampilan | Deskripsi |
| Menghasilkan rangkaian integrasi Vitest yang gagal. |
| Menginisialisasi tata letak Router Aplikasi Next.js dasar. |
| Mengonfigurasi lingkungan test runner Vitest lokal. |
| Menerjemahkan model Mongoose lama ke dalam skema MongoDB + Zod. |
| Membangun kembali rute Express ke dalam Penangan Rute Next.js dan Route Guard modular. |
Output yang dihasilkan: Rangkaian Vitest awal yang gagal, skema Zod yang diketik sepenuhnya, penangan rute Next.js fungsional, dan eksekusi rangkaian pengujian yang bersih dan lulus.
Amati pembuatan otomatis harness pengujian TDD:
Amati eksekusi real-time loop Refleksi yang mengoreksi sendiri yang membuat backend target:
6. Fase 4 — Membuat frontend modern (komponen UI)
Dengan lapisan validasi backend yang diperkuat sepenuhnya dan lulus pengujian integrasi, orkestrator utama akan mengubah konteks untuk memodernisasi presentasi visual. Template yang dirender server imperatif akan dihapus dan diganti dengan sistem desain komponen yang sangat mudah diakses dan mengutamakan utilitas.
Menerjemahkan tujuan UI ke tampilan yang dapat dikomposisikan
Daripada mencoba terjemahan CSS baris demi baris, subagen frontend membaca inventaris "Tujuan UI" yang diekstrak dan memetakan elemen struktural langsung ke padanan modern dengan fidelitas tinggi.
Kontrak instruksional input/keterampilan/output
Input yang digunakan: Artefak inventaris frontend yang direkayasa balik (docs/UI_Inventory.md).
Keterampilan yang dipanggil:
Keterampilan | Deskripsi |
| Menerjemahkan artefak |
Output yang dihasilkan: Halaman frontend Next.js siap produksi yang dibuat menggunakan komponen UI ShadCN yang sangat mudah diakses dan tata letak utilitas Tailwind CSS.
Tonton pembuatan otonom lapisan tampilan frontend yang dimodernisasi:
7. Fase 5 — Verifikasi &audit adversarial
Pipeline pemfaktoran ulang kita diakhiri dengan pembersihan kualitas yang ketat. Orkestrator utama bertransisi dari analisis kode statis ke pengujian lingkungan runtime aktif, secara aktif mencoba merusak aplikasi target baru untuk membuktikan paritas fungsional absolut dengan baseline lama.
Menjalankan pengujian dua tab dan aktivasi browser
Fase verifikasi memanfaatkan kemampuan visual dan DOM terintegrasi Antigravity untuk membuktikan keberhasilan secara otonom tanpa mengharuskan Anda mengklik formulir secara manual:
- Paritas berdampingan: Subagen
auditing-paritymenginstruksikan runner lokal untuk memulai monolit Express lama dan aplikasi Next.js yang dimodernisasi secara bersamaan, memverifikasi presentasi visual dan rendering data yang identik. - Penyelidikan keamanan adversarial: Orkestrator memanggil subagen
adversarial-verification, yang meluncurkan Subagen Browser Antigravity. Agen khusus ini mengaktifkan browser secara langsung—mengetik ke dalam input, mengirimkan formulir, dan menyelidiki regresi keamanan, cookie sesi yang rusak, atau kasus ekstrem yang tidak ditangani. - Pembuatan jalur audit: Subagen browser secara otomatis merekam pengambilan video WebP dari aktivasi sesinya, melampirkannya langsung ke laporan migrasi akhir sebagai "bukti kerja" yang dapat diverifikasi.
Kontrak instruksional input/keterampilan/output
Input yang digunakan: Aplikasi lama dan modern yang berjalan berdampingan di lingkungan runtime lokal.
Keterampilan yang dipanggil:
Keterampilan | Deskripsi |
| Menjalankan pemeriksaan verifikasi berdampingan runtime. |
| Menyelidiki kekurangan logika dan regresi fungsional menggunakan aktivasi browser otomatis. |
Output yang dihasilkan: Jalur audit paritas fungsional yang komprehensif yang dipadukan dengan video sesi browser yang direkam yang mengonfirmasi keberhasilan lengkap.
Amati subagen browser otomatis yang secara aktif memverifikasi aplikasi yang dimodernisasi:
8. Kesiapan produksi pasca-Migrasi &langkah berikutnya
Selamat! Anda telah berhasil mengatur pipeline pemfaktoran ulang agentic otonom yang sangat canggih untuk memodernisasi monolit lama dari awal, mempelajari keterampilan universal yang sangat dapat ditransfer seperti pengungkapan progresif, checklist Rencanakan dan Jalankan, dan loop Refleksi penyembuhan otomatis.
Mempersiapkan deployment produksi
Dengan aplikasi Next.js yang diverifikasi dan diaudit sepenuhnya, Anda siap untuk melanjutkan ke integrasi produksi. Pertimbangkan untuk menerapkan langkah-langkah berikutnya yang sesuai standar industri ini:
- Perutean inkremental: Deploy proxy terbalik (misalnya, Strangler Fig Pattern) untuk merutekan traffic secara inkremental dari aplikasi Express lama ke target modern.
- Preservasi SEO: Petakan rute Express lama ke pengalihan permanen Next.js (
_redirects.yaml) untuk mempertahankan otoritas domain yang ada. - Streaming Data: Beralih dari seeding database statis ke streaming data produksi live yang divalidasi dengan aman saat runtime menggunakan skema Zod yang ketat.
- Observabilitas: Ganti utilitas logging imperatif dengan framework OpenTelemetry terstruktur.
Memperdalam keahlian modernisasi Anda
Untuk menjelajahi codebase yang mendasarinya secara lengkap, petunjuk keterampilan kustom, dan rationale teoretis yang lengkap yang mendorong pipeline ini, pastikan untuk membaca artikel induk lengkapnya:
Bergabung dengan komunitas Agentic Builder
Semoga pola pemfaktoran ulang universal dan pipeline agentic ini bermanfaat bagi Anda. Tetap ikuti perkembangan paket keterampilan open source mendatang, konten teknis mendalam, dan acara konferensi mendatang dengan mengikuti saya di seluruh channel profesional:
- Ikuti di LinkedIn: linkedin.com/in/jamesor
- Ikuti di X (Twitter): x.com/JamesOR
Sampaikan pendapat Anda
Apa yang paling membuat Anda tertarik dengan orkestrasi agentic?
Terima kasih telah membangun dengan Google Antigravity.