การปรับปรุงระบบเดิมให้ทันสมัยในวงกว้างโดยอัตโนมัติโดยใช้ไปป์ไลน์แบบเอเจนต์และ Antigravity

1. การกำหนดเส้นทางการปรับเปลี่ยนให้ทันสมัย

Codelab ที่ครอบคลุมนี้เป็นแล็บคู่มือเชิงปฏิบัติที่ได้มาจากบทความเจาะลึกด้านสถาปัตยกรรมโดยตรง วิธีสร้างระบบอัตโนมัติในการปรับให้ทันสมัยด้วย Antigravity และการจัดระเบียบแบบหลายเอเจนต์ แม้ว่าเราจะใช้การสลับเฟรมเวิร์ก Node.js แบบคลาสสิกเป็นเครื่องมือสาธิตที่จับต้องได้ แต่รูปแบบการออกแบบหลัก โครงสร้างไดเรกทอรี และกระบวนการจัดระเบียบเอเจนต์ที่คุณจะใช้ที่นี่นั้นไม่ขึ้นอยู่กับภาษาใดๆ และใช้ได้กับโปรเจ็กต์การปรับให้ทันสมัยแบบเดิมๆ ทุกโปรเจ็กต์ในวงกว้าง

ต่างจากผู้ช่วยการเขียนโค้ดมาตรฐานที่เพียงแค่เติมบรรทัดในไฟล์เดียวโดยอัตโนมัติ คุณจะได้เรียนรู้วิธีใช้ประโยชน์จากความสามารถแบบ Agent-First ของ Google Antigravity เพื่อประสานงานทีม AI Subagent แบบอัตโนมัติที่เชี่ยวชาญเฉพาะด้าน ซึ่ง Agent เหล่านี้สามารถดีคอมไพล์โค้ดเบสเดิม เขียนชุดการทดสอบที่เข้มงวด สร้างโครงสร้างสถาปัตยกรรมที่ทันสมัย และแก้ไขข้อผิดพลาดของคอมไพเลอร์ด้วยตนเองโดยใช้ลูปการไตร่ตรอง ทั้งหมดนี้ในขณะที่คุณยังคงควบคุมได้อย่างเต็มที่ในฐานะสถาปนิกระดับสูง

สิ่งที่คุณจะได้เรียนรู้

• การแมปเวิร์กโฟลว์: วิธีจัดประเภทและแยกงานการตั้งค่าที่แน่นอนออกจากความท้าทายในการรีแฟกเตอร์แบบฮิวริสติกที่ซับซ้อนอย่างถูกต้อง
• สถาปัตยกรรมทักษะ: วิธีจัดโครงสร้างแพ็กทักษะ Agent ที่ขยายได้โดยใช้การเปิดเผยแบบค่อยเป็นค่อยไปและข้อมูลเมตาการกำหนดเส้นทาง YAML
• การประสานรูปแบบการออกแบบ: วิธีขับเคลื่อนการปรับโครงสร้างขนาดใหญ่โดยการเชื่อมโยงรูปแบบการออกแบบของ Router, Plan-and-Execute และ Reflexion
• สัญญาอินพุต/เอาต์พุตที่เข้มงวด: วิธีบังคับใช้ขอบเขตอินพุต/ทักษะ/เอาต์พุตที่ชัดเจนในไปป์ไลน์การดีคอมไพล์แบบหลายเฟสและการจัดโครงร่างเป้าหมาย
• การยืนยันความเท่าเทียม: วิธีใช้ประโยชน์จาก Subagent ของเบราว์เซอร์ Antigravity เพื่อทำการทดสอบความเท่าเทียมแบบเทียบเคียงภายในเว็บเบราว์เซอร์ Chrome

สิ่งที่คุณจะสร้าง

คุณจะจัดระเบียบไปป์ไลน์การรีแฟคเตอร์ Greenfield ที่เป็นอัตโนมัติทั้งหมด ซึ่งจะใช้ Monolith CRUD ของ Express และ Mongoose แบบเดิมที่ล้าสมัย ("การสาธิต madhums") และสร้างใหม่ตั้งแต่ต้นเป็นแอปพลิเคชัน Next.js App Router ที่มีการพิมพ์อย่างเข้มงวดซึ่งได้รับการสนับสนุนจาก MongoDB, การตรวจสอบ Zod อย่างเข้มงวด และคอมโพเนนต์ UI ของ ShadCN ที่เข้าถึงได้

สิ่งที่คุณต้องมี

• Google Antigravity IDE ที่ติดตั้งในเครื่อง (พร้อมให้บริการที่ antigravity.google)
  • ติดตั้ง Node.js (v18 ขึ้นไป) ในเครื่อง
• เบราว์เซอร์ Chrome สำหรับการยืนยัน UI อัตโนมัติ
• โคลนของ Monorepo สาธิต modernizing-expressjs แบบโอเพนซอร์ส

2. ตั้งค่าสภาพแวดล้อมการปรับให้ทันสมัย

ก่อนที่จะปล่อยให้เอเจนต์อัตโนมัติทำงานในโค้ดเบสเดิมที่ล้าสมัย เราต้องสร้างสภาพแวดล้อม Monorepo ที่สะอาดและมีความเสถียรสูง การให้ผู้ช่วย AI มีพื้นฐานที่สะอาดจะช่วยให้มั่นใจได้ว่าผู้ช่วยจะมุ่งเน้นไปที่การสร้างโค้ดสมัยใหม่คุณภาพสูงอย่างเต็มที่ แทนที่จะเสียโทเค็นไปกับการต่อสู้กับช่องโหว่ของแพ็กเกจที่มีอายุหลายสิบปีหรือความไม่ตรงกันของคอมไพเลอร์

การแมปสถาปัตยกรรม Express เดิมกับ Next.js สมัยใหม่

คอมโพเนนต์	สแต็กเดิม	การเปลี่ยนทดแทนที่ทันสมัย	เหตุผล
สถาปัตยกรรม	Express Monolith	เราเตอร์แอป Next.js	แยกตรรกะออกเป็นคอมโพเนนต์ฝั่งเซิร์ฟเวอร์เพื่อการแสดงผลที่เพิ่มประสิทธิภาพและประสิทธิภาพของ React Server Components (RSC)
ตรรกะของข้อมูล	Mongoose (ODM)	MongoDB + Zod	การสลับฮุก ORM โดยนัยเป็นสคีมา Zod ที่ชัดเจนและปลอดภัยตามประเภท รวมถึงประสิทธิภาพของไดรเวอร์ดิบ
ภาษา	CommonJS / JavaScript	TypeScript (ESM)	บังคับใช้ความปลอดภัยขณะคอมไพล์และเปลี่ยนไปใช้มาตรฐานโมดูลสมัยใหม่
ฟรอนท์เอนด์	Pug/EJS (มุมมองเซิร์ฟเวอร์)	ShadCN UI + Tailwind	เปลี่ยนจากเทมเพลตที่ตายตัวไปเป็นระบบการออกแบบที่ประกอบได้ เข้าถึงได้ และเน้นการใช้งานเป็นอันดับแรก
การตรวจสอบสิทธิ์	Passport.js	NextAuth	ปรับปรุงการจัดการเซสชันด้วยการรองรับ Edge และผู้ให้บริการร่วมสมัยในตัว
ความปลอดภัย	มิดเดิลแวร์ที่กำหนดเอง	Zod (การตรวจสอบที่เข้มงวด)	การใช้ "แหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียว" สำหรับการตรวจสอบความถูกต้องของข้อมูลในทั้งสแต็ก

เริ่มต้นฮับการปรับปรุง

การดำเนินการแรกที่กำหนดได้คือการโคลนโครงสร้าง Monorepo ที่แยก ซึ่งจะแยกโค้ดเดิมแบบอ่านอย่างเดียวออกจากที่เก็บเป้าหมายใหม่ของเรา เพื่อให้มั่นใจว่าจะไม่มีการเปลี่ยนแปลงแอปพลิเคชันเดิมโดยไม่ตั้งใจ

เปิดเทอร์มินัล Antigravity แล้วเรียกใช้คำสั่งตั้งค่าต่อไปนี้

git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
cd devrel-demos/other/modernizing-expressjs

เมื่อโคลนแล้ว ให้เปิดโฟลเดอร์ modernizing-expressjs ในโปรแกรมสำรวจ Antigravity IDE โดยตรง คุณจะเห็นเลย์เอาต์ที่แยกออกมาดังนี้

/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

สำคัญ: หลีกเลี่ยง "Dependency Rabbit Hole" อย่าสั่งให้ตัวแทนเรียกใช้ npm install ภายในไดเรกทอรี legacy-app/ หากแพ็กเกจที่มีอายุ 10 ปีแสดงข้อผิดพลาดของคอมไพเลอร์ C++ เอเจนต์อัตโนมัติที่ให้ความช่วยเหลือมากเกินไปอาจละทิ้งรายการตรวจสอบการปรับโครงสร้างทั้งหมดเพื่อพยายาม "แก้ไข" ห่วงโซ่การสร้างในเครื่อง ซึ่งจะทำให้คุณใช้งบประมาณโทเค็นไปกับรันไทม์เดิมที่ไม่เกี่ยวข้องกับการเขียนใหม่ตั้งแต่ต้น อย่าถอนการติดตั้งทรัพยากร Dependency เดิม

ดูวิดีโอแนะนำสั้นๆ นี้ซึ่งแสดงวิธีเตรียมและแยกสภาพแวดล้อม Monorepo อย่างแน่นอน

3. แพ็กทักษะและรูปแบบของ AI Agent สถาปนิก

การเขียน Agent Skill ที่มีประสิทธิภาพนั้นแตกต่างจากการเขียนพรอมต์แชทมาตรฐานโดยสิ้นเชิง เมื่อเขียน Skill Pack คุณกำลังออกแบบซอฟต์แวร์แบบโมดูลที่ LLM พื้นฐานจะดำเนินการโดยอัตโนมัติ เราจึงขอแนะนำ Greenfield Orchestration Skill Pack แบบโอเพนซอร์สเป็นเทมเพลตการเขียนที่ขยายได้ซึ่งขับเคลื่อนด้วยหลักการ 2 ข้อที่ต่อรองไม่ได้ ได้แก่ ความกระชับและการเปิดเผยข้อมูลแบบค่อยเป็นค่อยไป เพื่อป้องกันไม่ให้เอเจนต์หลอนหรือประสบปัญหา "ภาษีหน้าต่างบริบท"

การเปิดเผยข้อมูลแบบค่อยเป็นค่อยไปโดยใช้การกำหนดเส้นทางข้อมูลเมตา YAML

เราจะกระจายวิธีการไปยังไดเรกทอรีต่างๆ แทนที่จะทิ้งกฎเป้าหมายทั้งหมดลงในพรอมต์ระบบแบบโมโนลิธเดียว ไดเรกทอรีทักษะทุกรายการจะมีSKILL.mdจุดแรกเข้าที่ห่อหุ้มไว้ในบล็อก Frontmatter การกำหนดเส้นทาง YAML

เปิด .agents/skills/orchestrating-greenfield-migration/SKILL.md แล้วตรวจสอบข้อมูลเมตาของ 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.
---

เคล็ดลับ: สังเกตเห็นรูปแบบการเขียนที่สำคัญ 2 รูปแบบที่นี่

1. การตั้งชื่อ Gerund: เราใช้รูปแบบกริยา Gerund > (orchestrating-greenfield-migration) เพื่อกำหนดการกระทำที่ดำเนินการอย่างชัดเจน
2. บริบททริกเกอร์ที่ชัดเจน: ฟิลด์ description จะสั่งให้โมเดลพื้นฐานเมื่อใดที่จะเปิดใช้งานทักษะอย่างชัดเจน ("ใช้เมื่อเริ่มหรือจัดการโปรเจ็กต์การเขียนใหม่แบบกรีนฟิลด์") หากคำอธิบายของคุณคลุมเครือ ตรรกะการกำหนดเส้นทางของแพลตฟอร์มจะเรียกใช้ Subagent ไม่ได้

การทำฮาร์ดโค้ดรูปแบบการวางแผนและการดำเนินการ

เพื่อป้องกันไม่ให้เอเจนต์อัตโนมัติหลุดประเด็น ถูกรบกวนจากมิดเดิลแวร์เดิมที่น่าสนใจ หรือพยายามสลับฐานข้อมูลโดยไม่ได้รับอนุญาต เราจึงลบล้างการวางแผนแบบเปิดมาตรฐานด้วยการฮาร์ดโค้ดรูปแบบวางแผนและดำเนินการลงในคำสั่งโดยตรง

ตรวจสอบรายการตรวจสอบ Markdown ที่แทรกไว้ในตัวประสานงานหลัก

### 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.

หมายเหตุ: นี่เป็นเพียงตัวอย่างทักษะของ Orchestrator โปรดตรวจสอบทักษะในที่เก็บที่โคลนเพื่อดูข้อความทั้งหมด

การจัดรูปแบบเวิร์กโฟลว์เป็นรายการตรวจสอบที่ชัดเจนพร้อมการอ้างอิงทักษะแบบอินไลน์จะช่วยให้เอเจนต์คัดลอกแผนงานที่แน่นอนนี้ลงในแผนงานของตนเอง ซึ่งจะล็อกไว้ในโหมด "ดำเนินการเท่านั้น" ที่จะทำเครื่องหมายในช่องต่างๆ อย่างเป็นระบบ และเรียกใช้เอเจนต์ย่อยที่มีความเชี่ยวชาญสูงเมื่อจำเป็นเท่านั้น

4. เฟส 1 - วิศวกรรมย้อนกลับของ Monolith เดิม (การตรวจสอบ)

เราพร้อมที่จะเรียกใช้ลำดับการจัดสรรหลักแล้ว ในระยะแรก เราจะดึงกฎทางธุรกิจ สคีมาข้อมูล และเพย์โหลด API จาก Monolith เดิมออกมา แล้วจัดเก็บเป็นอาร์ติแฟกต์ Markdown ที่สะอาด พร้อมกับทิ้งหนี้ทางเทคนิคที่จำเป็นมานานนับสิบปีไว้เบื้องหลัง

ทริกเกอร์ลำดับการรีแฟกเตอร์แบบอัตโนมัติ

ในแผงแชทของ Antigravity Agent Manager ให้พิมพ์คำสั่งเครื่องหมายทับที่กำหนดเองต่อไปนี้ แล้วกด Enter

/orchestrating-greenfield-migration

ตอนนี้ให้สังเกตคอนโซลเทอร์มินัล คุณจะเห็นเอเจนต์หลักอ่านพรอมต์ของระบบ จับคู่คำขอของคุณกับข้อมูลเมตาของ Orchestrator แสดงรายการตรวจสอบ 5 ขั้นตอน และเริ่มส่งเอเจนต์ย่อย "ผู้ตรวจสอบ" ที่เชี่ยวชาญแบบคู่ขนานทันที

สัญญาการสอนแบบอินพุต/ทักษะ/เอาต์พุต

ในระยะที่ 1 เอเจนต์จะดำเนินการไปป์ไลน์การดีคอมไพล์อย่างเข้มงวดตามสัญญาการสอนต่อไปนี้

อินพุตที่ใช้: ไฟล์ซอร์สโค้ดเดิมแบบอ่านอย่างเดียวซึ่งอยู่ใน legacy-app/

ทักษะที่เรียกใช้

ทักษะ	คำอธิบาย
auditing-api-contracts	ติดตามเส้นทางเดิมเพื่อบันทึกซองการตอบกลับ JSON ที่แน่นอน
auditing-data-models	แยกวิเคราะห์สคีมา Mongoose เพื่อดึงความสัมพันธ์ ฟิลด์ที่ต้องกรอก และค่าเริ่มต้น
auditing-business-logic	เอกสารผลข้างเคียงโดยนัย, ขั้นตอนการตรวจสอบสิทธิ์ Passport และกฎของมิดเดิลแวร์
auditing-ui-archeology	สแกนเทมเพลต Pug เดิมเพื่อแมป "ความตั้งใจของ UI" ระดับสูง (แถบนำทาง แบบฟอร์ม)

อาร์ติแฟกต์ที่สร้างขึ้น: ข้อกำหนดมาร์กดาวน์ที่มีโครงสร้างสูงซึ่งสร้างขึ้นในโฟลเดอร์ docs/ โดยตรง

อาร์ติแฟกต์	คำอธิบาย
docs/API_Contracts.md	เอกสารนี้อธิบายรายละเอียดพื้นที่ผิว API ที่ทำการดีคอมไพล์ของแอปพลิเคชัน Express รุ่นเดิม ใช้แคตตาล็อกนี้เพื่อให้มั่นใจว่ามีความเท่าเทียมกันอย่างเคร่งครัดเมื่อสร้างเส้นทางใหม่ในแอปพลิเคชัน Next.js ที่ปรับปรุงใหม่
docs/Business_Logic_Rules.md	เอกสารนี้บันทึกลักษณะการทำงาน การกำหนดค่า และกฎที่เข้มงวดของแอปพลิเคชัน Express เวอร์ชันเดิมที่ได้รับการยืนยันแล้วเกี่ยวกับการตรวจสอบสิทธิ์ (AuthN), การให้สิทธิ์ (AuthZ), มิดเดิลแวร์ส่วนกลาง, การจัดการเซสชัน และผลสะท้อน
docs/Data_Models.md	เอกสารนี้ให้การวิเคราะห์ที่ครอบคลุมเกี่ยวกับสคีมา Mongoose เดิมจาก legacy-app/app/models/ และให้พิมพ์เขียวสำหรับเลเยอร์การเข้าถึงข้อมูลที่ทันสมัยและปลอดภัยโดยใช้ MongoDB และ Zod แบบเนทีฟ
docs/UI_Inventory.md	เอกสารนี้จะให้การวิเคราะห์โดยละเอียดเกี่ยวกับอินเทอร์เฟซผู้ใช้ที่ใช้ Pug รุ่นเดิมใน legacy-app และสรุปพิมพ์เขียวสำหรับสถาปัตยกรรมฟรอนท์เอนด์ Next.js ที่ทันสมัยซึ่งขับเคลื่อนด้วยคอมโพเนนต์ใน modern-app

ดูการบันทึกเทอร์มินัลแบบสดนี้ซึ่งแสดงให้เห็นการตรวจสอบการดีคอมไพล์แบบย้อนกลับอัตโนมัติที่ใช้งานจริง

5. ระยะที่ 2 และ 3 - TDD harness และการจัดโครงสร้างแบ็กเอนด์ Greenfield

เมื่อแอปพลิเคชันเดิมได้รับการตรวจสอบและจัดทำเอกสารอย่างครบถ้วนแล้ว ตัวประสานงานหลักจะก้าวไปสู่การสร้างโครงร่างแบ็กเอนด์เป้าหมายที่ทันสมัย ในระยะนี้เราจะนำรูปแบบการออกแบบแบบ Agentic ที่ทรงพลังที่สุดในชุดเครื่องมือของเรามาใช้ นั่นคือ Reflexion แบบวงปิด (การไตร่ตรองตนเอง) ซึ่งขับเคลื่อนโดยการพัฒนาแบบทดสอบเป็นตัวขับเคลื่อน (TDD) ที่เข้มงวด

การขับเคลื่อนโค้ดที่ซ่อมแซมตัวเองโดยใช้ลูป Reflexion

การเขียนโค้ดสมัยใหม่นั้นตรงไปตรงมา แต่การทำให้โค้ดคอมไพล์ได้อย่างสมบูรณ์และผ่านข้อจำกัดการตรวจสอบที่เข้มงวดต้องใช้การประเมินแบบวงปิด Orchestrator จะจัดการเรื่องนี้โดยอัตโนมัติด้วยการส่งเอาต์พุตการทดสอบกลับไปยังหน้าต่างบริบทของ Subagent โดยตรง

1. เฟส 2 (การตั้งค่า TDD): ตัวจัดสรรจะเรียกใช้generating-api-tests Subagent ซึ่งจะอ่าน docs/API_Contracts.md และเขียนชุดการทดสอบการผสานรวม Vitest แบบละเอียดที่ยืนยันรหัสสถานะ HTTP และเพย์โหลด JSON ที่จำเป็นอย่างถูกต้อง ตามที่คาดไว้ใน TDD การทดสอบเหล่านี้จะล้มเหลวในตอนแรก
2. ระยะที่ 3 (การจัดโครงสร้างแบ็กเอนด์): Subagent ที่จัดโครงสร้างจะเริ่มเขียนตัวแฮนเดิลเส้นทาง Next.js ที่ทันสมัยและสคีมาการตรวจสอบ Zod ที่เข้มงวด
3. ลูปการแก้ไขตัวเอง: เมื่อ Vitest Harness ที่กำหนดได้ประเมินโค้ดใหม่และแสดงผลว่าไม่สำเร็จ (เช่น 422 ข้อผิดพลาดในการตรวจสอบที่คาดไว้แสดงผลเป็น 500) เอเจนต์จะไม่หยุดทำงาน เอเจนต์จะพิจารณาเอาต์พุตข้อผิดพลาดตามวัตถุประสงค์ เปิดตัวแฮนเดิลเลอร์เส้นทางเป้าหมายอีกครั้ง แก้ไขโครงสร้างเพย์โหลดของสคีมา Zod และเรียกใช้การทดสอบอีกครั้ง เอเจนต์จะวนซ้ำโดยอัตโนมัติจนกว่าจะได้รับรหัสออกเป็น 0

สัญญาการสอนแบบอินพุต/ทักษะ/เอาต์พุต

อินพุตที่ใช้: อาร์ติแฟกต์ของข้อกำหนดที่ผ่านการวิศวกรรมย้อนกลับ (docs/API_Contracts.md, docs/Data_Models.md)

ทักษะที่เรียกใช้

ทักษะ	คำอธิบาย
generating-api-tests	สร้างชุดการผสานรวม Vitest ที่ล้มเหลว
scaffolding-nextjs-foundation	เริ่มต้นเลย์เอาต์ App Router ของ Next.js ฐาน
scaffolding-test-foundation	กำหนดค่าสภาพแวดล้อมโปรแกรมเรียกใช้การทดสอบ Vitest ในเครื่อง
scaffolding-data-layer	แปลโมเดล Mongoose เก่าเป็นสคีมา MongoDB + Zod
scaffolding-api-routes	สร้างเส้นทาง Express ใหม่เป็นตัวแฮนเดิลเส้นทาง Next.js และตัวป้องกันเส้นทางแบบแยกส่วน

เอาต์พุตที่สร้างขึ้น: ชุดโปรแกรมทดสอบ Vitest ที่ล้มเหลวในตอนแรก, สคีมา Zod ที่พิมพ์อย่างสมบูรณ์, ตัวแฮนเดิลเส้นทาง Next.js ที่ใช้งานได้ และการดำเนินการชุดโปรแกรมทดสอบที่สะอาดและผ่าน

สังเกตการสร้างชุดทดสอบ TDD โดยอัตโนมัติ

สังเกตการดำเนินการแบบเรียลไทม์ของโครงสร้างลูป Reflexion ที่แก้ไขตัวเองได้ซึ่งเป็นโครงสร้างแบ็กเอนด์เป้าหมาย

6. ระยะที่ 4 - สร้างโครงสร้างส่วนหน้าสมัยใหม่ (คอมโพเนนต์ UI)

เมื่อเลเยอร์การตรวจสอบแบ็กเอนด์ได้รับการเสริมความแข็งแกร่งอย่างเต็มที่และผ่านการทดสอบการผสานรวมแล้ว ตัวจัดสรรหลักจะเปลี่ยนบริบทเพื่อปรับปรุงการนำเสนอภาพให้ทันสมัย เราจะทิ้งเทมเพลตที่ฝั่งเซิร์ฟเวอร์แสดงผลแบบคำสั่งเพื่อหันมาใช้ระบบการออกแบบคอมโพเนนต์แบบยูทิลิตี้เป็นอันดับแรกที่เข้าถึงได้สูง

การแปลเจตนาของ UI เป็นมุมมองที่เขียนด้วย Compose ได้

แทนที่จะพยายามแปล CSS ทีละบรรทัด เอเจนต์ย่อยฟรอนท์เอนด์จะอ่านพื้นที่โฆษณา "ความตั้งใจของ UI" ที่แยกออกมาและแมปองค์ประกอบโครงสร้างกับองค์ประกอบที่เทียบเท่าสมัยใหม่ที่มีรายละเอียดเสมือนจริงสูงโดยตรง

สัญญาการสอนแบบอินพุต/ทักษะ/เอาต์พุต

อินพุตที่ใช้: อาร์ติแฟกต์พื้นที่โฆษณาฟรอนท์เอนด์ที่ผ่านวิศวกรรมย้อนกลับ (docs/UI_Inventory.md)

ทักษะที่เรียกใช้

ทักษะ	คำอธิบาย
scaffolding-ui-components	แปลอาร์ติแฟกต์ UI_Component_Inventory.md เป็นคอมโพเนนต์ ShadCN + Tailwind ที่ทันสมัยและหน้า Next.js ที่สร้างขึ้นอย่างเต็มรูปแบบ

เอาต์พุตที่สร้างขึ้น: หน้าส่วนหน้าของ Next.js ที่พร้อมใช้งานจริงซึ่งสร้างขึ้นโดยใช้คอมโพเนนต์ UI ของ ShadCN ที่เข้าถึงได้สูงและเลย์เอาต์ยูทิลิตี CSS ของ Tailwind

ดูการสร้างเลเยอร์มุมมองส่วนหน้าแบบปรับปรุงโดยอัตโนมัติ

7. ระยะที่ 5 - การตรวจสอบและการตรวจสอบโดยฝ่ายตรงข้าม

ไปป์ไลน์การปรับโครงสร้างโค้ดของเราจะสิ้นสุดด้วยการตรวจสอบคุณภาพอย่างเข้มงวด ตัวจัดสรรหลักจะเปลี่ยนจากการวิเคราะห์โค้ดแบบคงที่เป็นการทดสอบสภาพแวดล้อมรันไทม์ที่ใช้งานอยู่ โดยพยายามทำลายแอปพลิเคชันเป้าหมายใหม่เพื่อพิสูจน์ความเท่าเทียมกันของฟังก์ชันอย่างสมบูรณ์กับพื้นฐานเดิม

การดำเนินการทดสอบแบบ 2 แท็บและการเปิดใช้งานเบราว์เซอร์

ระยะการยืนยันใช้ประโยชน์จากความสามารถด้านภาพและ DOM ที่ผสานรวมของ Antigravity เพื่อพิสูจน์ความสำเร็จโดยอัตโนมัติโดยไม่ต้องให้คุณคลิกผ่านแบบฟอร์มด้วยตนเอง

1. ความเท่าเทียมแบบเทียบเคียง: auditing-parity ตัวแทนย่อยจะสั่งให้โปรแกรมเรียกใช้ในเครื่องเริ่มทั้งแอปพลิเคชัน Express Monolith แบบเดิมและแอปพลิเคชัน Next.js ที่ปรับปรุงใหม่พร้อมกัน โดยจะยืนยันการนำเสนอภาพและการแสดงข้อมูลที่เหมือนกัน
2. การตรวจสอบความปลอดภัยแบบปฏิปักษ์: ตัวจัดระเบียบจะเรียกใช้adversarial-verification Subagent ซึ่งจะเปิดใช้ Antigravity Browser Subagent เอเจนต์เฉพาะทางนี้จะสั่งงานเบราว์เซอร์โดยตรง โดยพิมพ์ลงในอินพุต ส่งแบบฟอร์ม และตรวจสอบการถดถอยด้านความปลอดภัย คุกกี้เซสชันที่ใช้งานไม่ได้ หรือกรณีขอบที่ไม่ได้จัดการ
3. การสร้างบันทึกการตรวจสอบ: Subagent ของเบราว์เซอร์จะบันทึกภาพวิดีโอ WebP ของการเปิดใช้งานเซสชันโดยอัตโนมัติ และแนบวิดีโอเหล่านั้นลงในรายงานการย้ายข้อมูลขั้นสุดท้ายโดยตรงเป็น "หลักฐานการทำงาน" ที่ตรวจสอบได้

สัญญาการสอนแบบอินพุต/ทักษะ/เอาต์พุต

อินพุตที่ใช้: ทั้งแอปพลิเคชันเดิมและแอปพลิเคชันสมัยใหม่ที่ทำงานควบคู่กันในสภาพแวดล้อมรันไทม์ในเครื่อง

ทักษะที่เรียกใช้

ทักษะ	คำอธิบาย
auditing-parity	เรียกใช้การตรวจสอบการยืนยันแบบเคียงข้างกันขณะรันไทม์
adversarial-verification	ตรวจสอบข้อบกพร่องทางตรรกะและการถดถอยของฟังก์ชันโดยใช้การกระตุ้นเบราว์เซอร์อัตโนมัติ

เอาต์พุตที่สร้างขึ้น: บันทึกการตรวจสอบความเท่าเทียมกันของฟังก์ชันที่ครอบคลุมซึ่งจับคู่กับวิดีโอเซสชันเบราว์เซอร์ที่บันทึกไว้เพื่อยืนยันความสำเร็จที่สมบูรณ์

สังเกตการณ์เอเจนต์ย่อยของเบราว์เซอร์อัตโนมัติที่ยืนยันแอปพลิเคชันที่ปรับปรุงใหม่

8. ความพร้อมของเวอร์ชันที่ใช้งานจริงหลังการย้ายข้อมูลและขั้นตอนถัดไป

ยินดีด้วย คุณได้ประสานงานไปป์ไลน์การรีแฟกเตอร์แบบอัตโนมัติขั้นสูงเพื่อปรับโฉมโมโนลิธเดิมตั้งแต่ต้นจนจบ โดยได้เรียนรู้ทักษะสากลที่สามารถนำไปใช้ได้หลากหลาย เช่น การเปิดเผยแบบค่อยเป็นค่อยไป รายการตรวจสอบการวางแผนและการดำเนินการ และลูปการไตร่ตรองแบบซ่อมแซมตัวเอง

การเตรียมพร้อมสำหรับการติดตั้งใช้งานเวอร์ชันที่ใช้งานจริง

เมื่อแอปพลิเคชัน Next.js ได้รับการยืนยันและตรวจสอบอย่างสมบูรณ์แล้ว คุณก็พร้อมที่จะก้าวไปสู่การผสานรวมการใช้งานจริงแล้ว ลองใช้ขั้นตอนถัดไปที่เป็นมาตรฐานอุตสาหกรรมเหล่านี้

• การกำหนดเส้นทางแบบเพิ่มทีละรายการ: ใช้พร็อกซีแบบย้อนกลับ (เช่น รูปแบบ Strangler Fig) เพื่อกำหนดเส้นทางการเข้าชมจากแอป Express เดิมไปยังเป้าหมายที่ทันสมัยทีละรายการ
• การรักษา SEO: แมปเส้นทาง Express เดิมไปยังการเปลี่ยนเส้นทางถาวรของ Next.js (_redirects.yaml) เพื่อรักษาอำนาจของโดเมนที่มีอยู่
• การสตรีมข้อมูล: เปลี่ยนจากการเริ่มต้นฐานข้อมูลแบบคงที่เป็นการสตรีมข้อมูลการใช้งานจริงแบบสดที่ได้รับการตรวจสอบอย่างปลอดภัยในขณะรันไทม์โดยใช้สคีมา Zod ที่เข้มงวด
• ความสามารถในการสังเกต: แทนที่ยูทิลิตีการบันทึกแบบคำสั่งด้วยเฟรมเวิร์ก OpenTelemetry ที่มีโครงสร้าง

ยกระดับความเชี่ยวชาญด้านการปรับให้ทันสมัย

หากต้องการดูฐานโค้ดพื้นฐานทั้งหมด คำสั่งทักษะที่กำหนดเอง และเหตุผลเชิงทฤษฎีที่ครอบคลุมซึ่งขับเคลื่อนไปป์ไลน์นี้ โปรดอ่านบทความหลักฉบับเต็ม รวมถึงเนื้อหาการจัดระเบียบแบบหลายเอเจนต์อื่นๆ

• บทความ: วิธีทำให้การปรับปรุงเป็นไปโดยอัตโนมัติด้วย Antigravity และการจัดการเป็นกลุ่มแบบหลายเอเจนต์
• Codelab: สร้างเครื่องมือตรวจสอบโค้ดแบบหลายภาษาด้วย Antigravity Agent แบบคู่ขนาน

เข้าร่วมชุมชน Agentic Builder

เราหวังว่าคุณจะเห็นว่ารูปแบบการรีแฟกเตอร์แบบสากลและไปป์ไลน์แบบเอเจนต์เหล่านี้มีประโยชน์ ติดตามข้อมูลอัปเดตเกี่ยวกับชุดทักษะโอเพนซอร์สในอนาคต เนื้อหาทางเทคนิคแบบเจาะลึก และการพูดในที่ประชุมที่กำลังจะเกิดขึ้นได้โดยติดตามฉันผ่านช่องทางระดับมืออาชีพต่อไปนี้

• ติดตามบน LinkedIn: linkedin.com/in/jamesor
• ติดตามใน X (Twitter): x.com/JamesOR

บอกเราว่าคุณคิดอย่างไร

สิ่งที่ทำให้คุณตื่นเต้นมากที่สุดเกี่ยวกับการจัดระเบียบ Agentic AI คืออะไร

การยืนยันเบราว์เซอร์แบบ Adversarial ลูปการปรับโครงสร้างโค้ดแบบอัตโนมัติ สถาปัตยกรรมทักษะที่ขยายได้ การประสานงานแบบหลายเอเจนต์ การไม่ยึดติดกับภาษาใดภาษาหนึ่ง

ขอขอบคุณที่สร้างด้วย Google Antigravity