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

1. การปรับตัวให้เข้ากับการเดินทางเพื่อปรับให้ทันสมัย

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

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

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

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

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

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

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

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

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

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

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

คอมโพเนนต์

สแต็กเดิม

การแทนที่ที่ทันสมัย

เหตุผล

สถาปัตยกรรม

โมโนลิธ Express

App Router ของ Next.js

การแยกตรรกะออกเป็นคอมโพเนนต์ของเซิร์ฟเวอร์เพื่อการแสดงผลที่เพิ่มประสิทธิภาพและประสิทธิภาพของคอมโพเนนต์ของเซิร์ฟเวอร์ React (RSC)

ตรรกะข้อมูล

Mongoose (ODM)

MongoDB + Zod

การสลับฮุก ORM โดยนัยสำหรับสคีมา Zod ที่ชัดเจนและปลอดภัยด้วยประเภท รวมถึงประสิทธิภาพของไดรเวอร์แบบดิบ

ภาษา

CommonJS / JavaScript

TypeScript (ESM)

การบังคับใช้ความปลอดภัยในเวลาคอมไพล์และการเปลี่ยนไปใช้มาตรฐานโมดูลที่ทันสมัย

ฟรอนท์เอนด์

Pug/EJS (มุมมองเซิร์ฟเวอร์)

UI ของ ShadCN + Tailwind

การเปลี่ยนจากเทมเพลตที่เข้มงวดไปเป็นระบบการออกแบบที่ประกอบได้ เข้าถึงได้ และเน้นยูทิลิตี้เป็นหลัก

การตรวจสอบสิทธิ์

Passport.js

NextAuth

การปรับการจัดการเซสชันให้ทันสมัยด้วยการรองรับ Edge และผู้ให้บริการร่วมสมัยในตัว

ความปลอดภัย

มิดเดิลแวร์ที่กำหนดเอง

Zod (การตรวจสอบอย่างเข้มงวด)

การใช้ "แหล่งข้อมูลที่ถูกต้องแห่งเดียว" สำหรับการตรวจสอบข้อมูลในสแต็กทั้งหมด

เริ่มต้นใช้งานฮับการปรับให้ทันสมัย

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

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

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

เมื่อโคลนแล้ว ให้เปิดโฟลเดอร์ modernizing-expressjs ใน Explorer ของ 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

ดูวิดีโอแนะนำสั้นๆ นี้ที่แสดงวิธีเตรียมและแยกสภาพแวดล้อม Monorepo ของคุณอย่างกำหนดได้

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

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

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

เราจะกระจายวิธีการไปยังไดเรกทอรีต่างๆ แทนที่จะใส่กฎเป้าหมายทั้งหมดลงในพรอมต์ระบบโมโนลิธเดียว ไดเรกทอรีทักษะทุกไดเรกทอรีจะมีจุดเริ่มต้น SKILL.md ที่อยู่ในบล็อกข้อมูลเมตาการกำหนดเส้นทาง 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.
---

การฮาร์ดโค้ดรูปแบบ Plan-and-Execute

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

ตรวจสอบรายการตรวจสอบ 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.

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

4. เฟส 1 - ทำวิศวกรรมย้อนกลับโมโนลิธเดิม (การตรวจสอบ)

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

ทริกเกอร์ลำดับการปรับโครงสร้างใหม่แบบอัตโนมัติ

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

/orchestrating-greenfield-migration

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

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

ในเฟส 1 Agent จะดำเนินการไปป์ไลน์การทำวิศวกรรมย้อนกลับอย่างเข้มงวดซึ่งผูกไว้กับสัญญาการสอนต่อไปนี้

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

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

ทักษะ

คำอธิบาย

auditing-api-contracts

ติดตามเส้นทางเดิมเพื่อบันทึกซองจดหมายการตอบกลับ JSON ที่แน่นอน

auditing-data-models

แยกสคีมา Mongoose เพื่อแยกความสัมพันธ์ ช่องที่ต้องกรอก และค่าเริ่มต้น

auditing-business-logic

บันทึกผลข้างเคียงโดยนัย โฟลว์การตรวจสอบสิทธิ์ Passport และกฎมิดเดิลแวร์

auditing-ui-archeology

สแกนเทมเพลต Pug เดิมเพื่อแมป "Intent UI" ระดับสูง (แถบนำทาง แบบฟอร์ม)

อาร์ติแฟกต์ที่สร้างขึ้น: ข้อกำหนด Markdown ที่มีโครงสร้างสูงซึ่งสร้างขึ้นในโฟลเดอร์ 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 และการสร้างโครงสร้างแบ็กเอนด์แบบ Greenfield

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

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

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

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

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

การแปล Intent UI เป็นมุมมองที่ประกอบได้

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

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

อินพุตที่ใช้: อาร์ติแฟกต์สินค้าคงคลังฟรอนท์เอนด์ที่ทำวิศวกรรมย้อนกลับ (docs/UI_Inventory.md)

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

ทักษะ

คำอธิบาย

scaffolding-ui-components

แปลอาร์ติแฟกต์ UI_Component_Inventory.md เป็นคอมโพเนนต์ ShadCN + Tailwind ที่ทันสมัยและหน้า Next.js ที่สร้างโครงสร้างอย่างครบถ้วน

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

ดูการสร้างเลเยอร์มุมมองฟรอนท์เอนด์ที่ทันสมัยโดยอัตโนมัติ

7. เฟส 5 - การยืนยันและการตรวจสอบแบบ Adversarial

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

การดำเนินการทดสอบ 2 แท็บและการกระตุ้นเบราว์เซอร์

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

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

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

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

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

ทักษะ

คำอธิบาย

auditing-parity

ดำเนินการตรวจสอบการยืนยันแบบเคียงข้างกันในรันไทม์

adversarial-verification

ตรวจสอบข้อบกพร่องด้านตรรกะและการถดถอยของฟังก์ชันการทำงานโดยใช้การกระตุ้นเบราว์เซอร์อัตโนมัติ

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

ดู Agent ย่อยของเบราว์เซอร์อัตโนมัติที่ยืนยันแอปพลิเคชันที่ปรับให้ทันสมัยอย่างกระตือรือร้น

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

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

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

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

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

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

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

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

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

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

คุณตื่นเต้นกับอะไรมากที่สุดเกี่ยวกับการจัดระเบียบ Agent

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

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