1. บทนำ
เมื่อเอเจนต์การเขียนโค้ดกลายเป็นส่วนสำคัญของการพัฒนาซอฟต์แวร์ในแต่ละวัน ไม่ว่าคุณจะเป็นวิศวกรผู้ชำนาญหรือผู้สร้างรายใหม่ที่ต้องการเปิดตัวแอปแรก วิธีการสร้างและสิ่งที่คุณสร้างก็กำลังเปลี่ยนแปลงไปอย่างสิ้นเชิง เมื่อเริ่มใช้เอเจนต์การเขียนโค้ด โดยปกติแล้วคุณจะเริ่มต้นด้วยพรอมต์แบบ "Zero-Shot" ซึ่งเป็นคำสั่งเดียวที่บอกสิ่งที่คุณต้องการในภาษาที่มนุษย์ใช้กันโดยย่อ ซึ่งจะทำให้เกิดปัญหาอย่างรวดเร็ว ดังนี้
- อคติที่ต้องการเอาใจ: โมเดลมักยอมรับข้อจำกัดหรือสมมติฐานที่มีข้อบกพร่อง โดยพยายามทำให้คำขอของคุณเสร็จสมบูรณ์โดยเร็วที่สุด และไม่ได้ตรวจสอบว่าสิ่งที่สร้างขึ้นนั้นทําตามที่คุณตั้งใจไว้จริงหรือไม่
- ช่องโหว่ในการยืนยัน: โดยปกติแล้วเอเจนต์จะไม่ตรวจสอบงานของตนเพื่อให้แน่ใจว่าใช้งานได้ แม้ว่าจะเขียนการทดสอบก็ตาม การพยายามใช้เว็บไซต์ในเบราว์เซอร์ที่ใช้งานจริงจะทำให้เห็นข้อบกพร่องที่ซ่อนอยู่ เลย์เอาต์ที่ใช้งานไม่ได้ และการควบคุมที่เข้าถึงไม่ได้
- หนี้ทางเทคนิค: เนื่องจากวิธีการฝึกและทำงานของโมเดล โค้ดที่โมเดลเขียนจึงมีแนวโน้มที่จะเป็นรูปแบบเก่าและล้าสมัย ซึ่งจะเพิ่มหนี้ทางเทคนิคที่ต้องใช้ทั้งโทเค็น เวลาและความพยายามของมนุษย์และเครื่องจักรมากขึ้นในการจัดการ หนี้ทางเทคนิคอาจส่งผลเสียต่อประสบการณ์ของผู้ใช้ด้วย
แผนการเล่น 4 ขั้นตอน
โปรดพิจารณาวงจรการพัฒนาผลิตภัณฑ์ 4 ขั้นตอนต่อไปนี้เพื่อช่วยแนะนำเอเจนต์การเขียนโค้ดให้สร้างโค้ดที่ดีขึ้นและสอดคล้องกับข้อกำหนดของคุณมากขึ้น
- วางแผนและออกแบบ: เขียนเอกสารข้อกำหนดของผลิตภัณฑ์ (PRD) ร่วมกับเอเจนต์ และให้เอเจนต์สร้างต้นแบบและออกแบบ PRD ในเบราว์เซอร์ก่อนเริ่มการติดตั้งใช้งานจริง จากนั้นร่างเอกสารการออกแบบสถาปัตยกรรม (ข้อกำหนด) จาก PRD และการออกแบบก่อนเริ่มเขียนโค้ด
- เขียนโค้ดและสร้าง: สั่งให้ Agent สร้างตาม PRD, การออกแบบ และข้อกำหนดแทนที่จะใช้พรอมต์แบบ Zero-Shot และสั่งให้ Agent อีกตัวตรวจสอบงาน
- ทำซ้ำ: ทำตามขั้นตอนที่ 1 และ 2 อีกครั้งสำหรับฟีเจอร์ใหม่แต่ละรายการที่ต้องการเพิ่ม
- ติดตั้งใช้งาน: ส่งไปยังเวอร์ชันที่ใช้งานจริง
เอกสารนี้จะแนะนําวิธีใช้เอเจนต์ AI เป็นพาร์ทเนอร์ที่ทำงานร่วมกันอย่างแข็งขันด้วยแนวทางปฏิบัติที่ออกแบบมาเพื่อช่วยลดหนี้ทางเทคนิคและปรับปรุงคุณภาพโค้ดเอาต์พุต คุณใช้ Antigravity ร่วมกับ Modern Web Guidance และ DevTools for Agents เพื่อสร้างเกมคำศัพท์แบบสบายๆ และปรับปรุงด้วยความสามารถของ AI จากนั้นก็ทำให้ใช้งานได้ใน Google Cloud โดยใช้ Firebase เพื่อแชร์กับเพื่อนและครอบครัว
สิ่งที่คุณจะได้เรียนรู้
- วิธีปฏิบัติต่องานเขียนโค้ด AI เหมือนวงจรการพัฒนาผลิตภัณฑ์ขนาดเล็ก
- เหตุผลที่คุณควรแยกข้อกำหนดของผลิตภัณฑ์ออกจากข้อกำหนดทางสถาปัตยกรรม
- วิธีจัดระเบียบเวิร์กโฟลว์แบบหลายเอเจนต์เพื่อสร้างต้นแบบโดยตรงในเบราว์เซอร์และตรวจสอบโค้ด
- วิธีใช้ประโยชน์จากทักษะและเครื่องมือของบุคคลที่สามเพื่อปรับปรุงทั้งประสบการณ์การพัฒนาและประสบการณ์ของผู้ใช้
- วิธีติดตั้งใช้งานเว็บแอปพลิเคชันโดยตรงในเวอร์ชันที่ใช้งานจริงโดยใช้ Firebase MCP
ข้อกำหนดเบื้องต้น
- บัญชี Google ส่วนตัวและโปรเจ็กต์ Google Cloud หรือโปรเจ็กต์ Firebase (ดูวิธีการในการตั้งค่าโปรเจ็กต์)
- มีความคุ้นเคยกับ HTML, CSS และ JavaScript บ้าง
- เว็บเบราว์เซอร์ เช่น Chrome
- ติดตั้ง Node.js (แนะนำให้ใช้ LTS)
2. การตั้งค่าโปรเจ็กต์
บัญชี Google
หากยังไม่มีบัญชี Google ส่วนบุคคล คุณสามารถสร้างบัญชี Google ได้
ลงชื่อเข้าใช้คอนโซล Google Cloud
ลงชื่อเข้าใช้ คอนโซล Google Cloud โดยใช้บัญชี Google ส่วนตัว
เปิดใช้การเรียกเก็บเงิน
หากต้องการตั้งค่าบัญชีสำหรับการเรียกเก็บเงินส่วนตัว ให้ไปที่เปิดใช้การเรียกเก็บเงินใน Cloud Console
สร้างโปรเจ็กต์ Firebase
- ไปที่คอนโซล Firebase แล้วลงชื่อเข้าใช้ด้วยบัญชี Google ส่วนตัว
- คลิกเพิ่มโปรเจ็กต์ (หรือสร้างโปรเจ็กต์)
- ในวิซาร์ดการสร้างโปรเจ็กต์ ให้ทำดังนี้
- ป้อนชื่อโปรเจ็กต์ (เช่น
wordup-web-app) หรือใช้โปรเจ็กต์ Google Cloud ที่คุณตั้งค่าไว้ในระหว่างการตั้งค่าโปรเจ็กต์ซ้ำ
- ป้อนชื่อโปรเจ็กต์ (เช่น
- เชื่อมต่อบัญชีสำหรับการเรียกเก็บเงิน
- ในแถบด้านข้างของคอนโซล Firebase ให้มองหาป้ายแพ็กเกจที่ด้านล่าง (ระบุว่า "Spark") คลิกอัปเกรด
- เลือกแพ็กเกจใช้ไปจ่ายไป
- เลือกบัญชีสำหรับการเรียกเก็บเงินที่คุณตั้งค่าไว้ในขั้นตอนการตั้งค่าโปรเจ็กต์
- ยืนยันการเลือกเพื่อแนบบัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ (โฮสติ้งของ Firebase มีรุ่นฟรีที่ให้ใช้งานอย่างจุใจ โดยปกติแล้วการทำตามบทแนะนำนี้จะมีค่าใช้จ่ายเป็น 0)
ติดตั้งเครื่องมือ
- Antigravity 2.0: สายรัดการเขียนโค้ดแบบ Agentic หลักที่คุณใช้ทำงาน ซึ่งจับคู่กับโมเดล Gemini Flash ล่าสุดเพื่อการเขียนโค้ดที่รวดเร็วและมีประสิทธิภาพระดับแนวหน้า
- คำแนะนำในการพัฒนาเว็บที่ทันสมัย: ทักษะในการเขียนโค้ดเอเจนต์เพื่อช่วยให้เขียน CSS, HTML และ JavaScript ที่ทันสมัยได้ ติดตั้งผ่านการตั้งค่า > การปรับแต่ง > สร้างด้วยปลั๊กอินของ Google > คำแนะนำสำหรับเว็บสมัยใหม่ ของ Antigravity
- เครื่องมือสำหรับนักพัฒนาเว็บสำหรับ Agent: ช่วยให้ Agent ขับเคลื่อน Chrome, ตรวจสอบ DOM ที่ใช้งานจริง, ทดสอบเลย์เอาต์ และแก้ไขข้อบกพร่องในรันไทม์ได้ ติดตั้งผ่าน Antigravity Settings > Customization > Build With Google Plugins > เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และ Antigravity Settings > Customization > Add MCP Servers > เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent
- เซิร์ฟเวอร์ MCP ของ Firebase: เพื่อการตั้งค่าโปรเจ็กต์ที่ราบรื่นและการติดตั้งใช้งานด้วยพรอมต์เดียว ติดตั้งผ่าน Antigravity Settings > Customization > Build With Google Plugins > Firebase and Antigravity Settings > Customization > Add MCP Servers > Firebase
3. เริ่มต้นด้วยแผน
การเขียนโค้ดแบบเอเจนต์มักจะกระตุ้นให้เราส่งพรอมต์แบบ Zero-Shot ("สร้างเกมคำศัพท์ให้ฉันหน่อย") แล้วหวังว่าผลลัพธ์จะออกมาดี ซึ่งมักจะส่งผลให้เกิดกรณีข้อยกเว้นที่ถูกข้าม ฐานโค้ดที่ขยายใหญ่ขึ้น และวงจรการแก้ไขข้อบกพร่องที่ไม่มีที่สิ้นสุด
แต่ให้มองว่าแต่ละงานเป็นวงจรการพัฒนาผลิตภัณฑ์ขนาดเล็ก เอเจนต์การเขียนโค้ดมีเครื่องมือค้นคว้าและให้เหตุผลที่ช่วยให้เอเจนต์ทำหน้าที่เป็นพาร์ทเนอร์ร่วมงานเพื่อช่วยคุณอธิบายแนวคิดให้ชัดเจนก่อนที่จะเขียนโค้ด การพูดถึงไอเดียของคุณมักจะช่วยให้คุณค้นหาและตอบคำถามได้ก่อนที่จะกลายเป็นปัญหา ในวิศวกรรมซอฟต์แวร์เราเรียกสิ่งนี้ว่าการดีบักด้วยตุ๊กตายาง คุณสามารถใช้เอเจนต์การเขียนโค้ดเป็นเป็ดยางเพื่อวางแผนโปรเจ็กต์และฟีเจอร์ต่างๆ ได้
คุณกำลังสร้างเกมคำศัพท์แบบสบายๆ แจ้งให้ Agent ช่วยออกแบบเกมที่คุณต้องการ
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.
นี่คือรูปแบบพื้นฐานของพรอมต์ คุณสามารถรีมิกซ์ให้เหมาะกับความต้องการของคุณเองได้ สิ่งสำคัญคือการให้ AI ทำการค้นคว้าข้อมูลอย่างละเอียดและถามคำถามคุณโดยอิงตามการค้นคว้าดังกล่าวเพื่อช่วยคุณวางแผนงาน
เริ่มต้นด้วยพรอมต์นี้เนื่องจากการทำงานกับเอเจนต์การเขียนโค้ดเกี่ยวข้องกับการตรวจสอบจำนวนมาก การแบ่งแผนการติดตั้งใช้งานทั้งหมดออกเป็นส่วนเล็กๆ ที่มุ่งเน้นจะช่วยให้ตรวจสอบได้ง่ายขึ้นมาก ช่วยให้คุณพบกรณีที่ซับซ้อนได้ตั้งแต่เนิ่นๆ สามารถนำความรู้ภายนอกข้อมูลฝึกฝนของ Agent มาใช้ และที่สำคัญที่สุดคือช่วยให้คุณพักระหว่างการตรวจสอบได้มากขึ้น
- แยก "อะไร" ออกจาก "อย่างไร": การกำหนดประสบการณ์ของผู้ใช้และขอบเขตผลิตภัณฑ์ในเอกสารข้อกำหนดของผลิตภัณฑ์ (PRD) อย่างเป็นทางการจะแยกสิ่งที่คุณต้องการให้เกิดขึ้นออกจากวิธีการนำไปใช้ ซึ่งช่วยให้คุณมุ่งเน้นที่ด้านใดด้านหนึ่งของการพัฒนาผลิตภัณฑ์ได้ทีละอย่างแทนที่จะทำทุกอย่างพร้อมกัน
- ระบุกรณีข้อยกเว้นตั้งแต่เนิ่นๆ: เซสชันถามตอบแบบอินเทอร์แอกทีฟจะบังคับให้คุณชี้แจงข้อกำหนดก่อนที่จะเริ่มการออกแบบหรือการติดตั้งใช้งาน
- การค้นคว้าของเอเจนต์ที่ใช้งานอยู่: เนื่องจากระบบจะหยุดการฝึกเอเจนต์ในวันที่หนึ่งๆ และข้อมูลในนั้นจะได้รับการสรุปอย่างมาก การดึงข้อมูลจากการค้นคว้าแบบเรียลไทม์จึงอาจนำข้อมูลใหม่ๆ ที่เอเจนต์อาจพลาดไปมาให้ได้
แบบฝึกหัดที่ 1
ตอนนี้ถึงตาคุณแล้ว ตั้งค่าโปรเจ็กต์และสร้าง PRD
- เพิ่มคำสั่งลงในไฟล์
AGENTS.mdเพื่อบอกให้บันทึกเอาต์พุตไปยังdocs/plans/{{YYYY-MM-DD}}-{{description}}.md - เรียกใช้พรอมต์การวิจัยก่อนหน้าพร้อมกับการปรับแต่งที่คุณต้องการเพื่อสร้าง PRD
- [เป้าหมายที่ท้าทาย] อัปเดตไฟล์
AGENTS.mdด้วยสิ่งที่คุณพบว่าเอเจนต์ทำในสิ่งที่คุณไม่ชอบ แล้วรันพรอมต์อีกครั้ง
4. ออกแบบในเบราว์เซอร์
การออกแบบ UI แบบคงที่อาศัยการจำลองที่มักจะดูน่าทึ่ง แต่ก็อาจไม่สามารถพิจารณากรณีข้อยกเว้น ข้อจำกัด และการโต้ตอบของผู้ใช้จริงได้ และเช่นเดียวกับโค้ด การขอให้ Agent "ออกแบบ" แอปพลิเคชันเว็บไซต์จะส่งผลให้ได้การออกแบบที่รวมกันเป็นการออกแบบทั่วไป (มักจะเป็นสีม่วง)
สำหรับเว็บแอป คุณสามารถใช้ความสามารถของเอเจนต์ในการควบคุมเว็บเบราว์เซอร์ผ่าน DevTools สำหรับเอเจนต์เพื่อออกแบบในเบราว์เซอร์ ไม่ว่าคุณจะเป็นนักออกแบบที่ต้องการเพิ่มรายละเอียดเสมือนจริงให้กับการออกแบบ โค้ดเดอร์หรือเครื่องมือสร้างที่ต้องการปรับปรุง UI และ UX ของโปรเจ็กต์ หรือทั้ง 2 อย่างที่ทำงานร่วมกัน การทำงานในสื่อจริงที่คุณกำลังสร้างจะให้ผลลัพธ์ที่ดีกว่า
การออกแบบในเบราว์เซอร์ยังช่วยให้คุณประสานงานกับเอเจนต์หลายคนซึ่งทำงานร่วมกันเพื่อสร้างผลลัพธ์เดียวได้อีกด้วย เอเจนต์ย่อยเหล่านี้คือเอเจนต์ที่มีลักษณะและเป้าหมายเฉพาะซึ่งสามารถประสานงานเพื่อให้ได้ผลลัพธ์ที่ดีกว่าเอเจนต์เดียวที่ทำงานด้วยตัวเอง เมื่อใช้การออกแบบ คุณสามารถขอให้เอเจนต์ด้านการออกแบบภาพ เอเจนต์ด้านประสบการณ์ของผู้ใช้ และเอเจนต์ด้านการช่วยเหลือพิเศษทำงานร่วมกันเพื่อช่วยคุณในการออกแบบ และให้เอเจนต์แสดงการออกแบบต่อคุณโดยตรงในเบราว์เซอร์
เริ่มกลุ่มตัวแทนออกแบบเพื่อช่วยคุณเลือกการออกแบบตาม PRD
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.
การออกแบบในสื่อที่คุณกำลังสร้างขึ้น ซึ่งในกรณีนี้คือเว็บ แทนที่จะเป็นแบบคงที่ จะช่วยให้คุณพบเคสขอบและข้อจำกัดที่จัดการได้ยากในกรณีอื่นๆ และช่วยให้คุณได้รับความคิดเห็นด้านภาพทันทีซึ่งตรงกับการผลิต
แบบฝึกหัดที่ 2
ตอนนี้ถึงตาคุณแล้ว ออกแบบโปรเจ็กต์
- เรียกใช้พรอมต์การออกแบบก่อนหน้าพร้อมกับการปรับแต่งที่ต้องการเพื่อสร้างการออกแบบ ใส่ไอเดียสำหรับทิศทางการออกแบบต่างๆ ที่คุณอยากเห็น (เช่น ทันสมัย สนุกสนาน สมจริง และอื่นๆ)
- เลือกการออกแบบที่ชอบและทำซ้ำกับตัวแทน
- ให้ตัวแทนอัปเดต PRD เพื่อชี้ไปยังการออกแบบที่ตกลงกันไว้
- เป้าหมายที่ท้าทาย: เรียกใช้การทดสอบการช่วยเหลือพิเศษและการทดสอบการออกแบบที่ตอบสนองสำหรับดีไซน์ที่เลือก และปรับแต่งดีไซน์ตามการตรวจสอบเหล่านั้น
5. เขียนข้อกำหนด
เมื่อมี PRD ที่ได้รับอนุมัติ ("สิ่งที่ต้องสร้าง") และการออกแบบภาพที่เลือก ("ลักษณะที่ปรากฏ") แล้ว ตอนนี้คุณต้องมีการปรับแนวทางด้านเทคนิคเกี่ยวกับสถาปัตยกรรม ("วิธีสร้าง")
เอกสารการออกแบบทางเทคนิคหรือข้อกำหนด หรือเรียกสั้นๆ ว่าข้อกำหนด จะให้รายละเอียดเกี่ยวกับโครงสร้างไฟล์ การจัดการสถานะ อินเทอร์เฟซของคอมโพเนนต์ ไปป์ไลน์เหตุการณ์ และการอ้างอิง การสร้างข้อกำหนดก่อนเขียนโค้ดช่วยให้คุณตรวจพบรูปแบบการเขียนโค้ดที่ไม่สอดคล้องกันและไม่พึงประสงค์ได้ตั้งแต่เนิ่นๆ ก่อนที่จะกลายเป็นโค้ดที่ให้เหตุผลและปรับโครงสร้างได้ยากขึ้น
Write a detailed technical design document on how to implement the game with
the chosen design.
เหตุผลที่คุณดำเนินการนี้
- ความชัดเจนของสถาปัตยกรรม: การกำหนดลำดับชั้นของคอมโพเนนต์และโฟลว์การเปลี่ยนสถานะ (เช่น
Idle→InGame→EvaluatingGuess→GameOver) จะช่วยป้องกันไม่ให้เกิดสภาวะแข่งขันและโค้ดสปาเก็ตตีที่เปราะบาง - การปรับให้สอดคล้องกับมาตรฐานสมัยใหม่: เมื่อเปิดใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย เอเจนต์จะอ้างอิงมาตรฐานสมัยใหม่ (เช่น การค้นหา
@containerCSS, องค์ประกอบในตัวสำหรับโมดอลหรือการวางซ้อนความช่วยเหลือ และโมดูล ES แบบแยกส่วน) แทนที่จะดึงไลบรารีเดิมที่มีขนาดใหญ่ - การรีวิวแบบแบ่งระยะ: การแยกการรีวิว PRD ที่ใช้งานได้จากการรีวิวเอกสารการออกแบบทางเทคนิคช่วยให้คุณประเมินสถาปัตยกรรมแยกจากประสบการณ์ของผู้ใช้ได้
แบบฝึกหัดที่ 3
- สั่งให้
AGENTS.mdบันทึกเอาต์พุตไปยังโฟลเดอร์ปัจจุบันโดยทำดังนี้PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format - เรียกใช้พรอมต์เอกสารการออกแบบและตรวจสอบเพื่อให้ครอบคลุมแง่มุมต่างๆ เช่น โครงสร้างไดเรกทอรี การจัดการเหตุการณ์ และพื้นที่เก็บข้อมูล
- เป้าหมายที่ท้าทาย: มีไดอะแกรมเมอร์เมดเพื่ออธิบายโฟลว์สถานะผ่านแอปพลิเคชัน หากยังไม่มี
6. สุดท้าย ให้สร้างแอป
เมื่อมี PRD, การจำลอง UI และเอกสารการออกแบบแล้ว ก็ถึงเวลาสร้าง ทั้ง 3 รายการนี้เป็นคำแนะนำที่ชัดเจนและตรงไปตรงมาซึ่งตัวแทนต้องการเพื่อใช้ในการสร้าง
นี่เป็นอีกโอกาสที่ดีในการใช้ตัวแทนย่อย คุณสามารถเรียกใช้การทดสอบเหล่านี้หลังจากสร้างโค้ดแล้วเพื่อตรวจสอบว่าสิ่งที่สร้างขึ้นนั้นตรงกับการออกแบบเบื้องต้นของคุณมากน้อยเพียงใด และเรียกใช้อีกครั้งเพื่อตรวจสอบคุณภาพของโค้ดที่สร้างขึ้น
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.
เหตุผลที่คุณดำเนินการนี้
การพัฒนาที่อิงตามข้อกำหนดพร้อมด้วยผู้ตรวจสอบรอบแรกจะช่วยให้เอเจนต์ของคุณมีข้อกำหนดที่ชัดเจนและผ่านการตรวจสอบเบื้องต้นแล้วเพื่อใช้เป็นพื้นฐานในการสร้าง รวมถึงมีผู้ตรวจสอบรายใหม่ที่จะช่วยให้มั่นใจได้ว่าเอเจนต์จะปฏิบัติตามแผนก่อนที่จะส่งถึงคุณ ซึ่งจะช่วยปรับปรุงคุณภาพและความถูกต้อง
- ข้อกำหนดที่ผ่านการตรวจสอบ: ตัวแทนไม่จำเป็นต้องคาดเดาว่าคุณต้องการอะไร เนื่องจากคุณได้ตรวจสอบทุกอย่างแล้ว ยกเว้นการติดตั้งใช้งาน ก่อนที่จะมีการเขียนโค้ด
- มุมมองใหม่: เอเจนต์ตรวจสอบที่สร้างขึ้นในบริบทใหม่จะไม่มีอคติยืนยันความคิดตัวเองจากการสร้างฐานของโค้ด ทำให้สามารถตรวจจับกรณีขอบที่ไม่ได้จัดการ ข้อกำหนดในการติดตั้งใช้งานที่ขาดหายไป และรายละเอียดอื่นๆ ของโค้ดหรือผลิตภัณฑ์ที่พลาดไปได้อย่างมีประสิทธิภาพ
แบบฝึกหัดที่ 4
- เรียกใช้พรอมต์การสร้างโดยชี้ไปยังไฟล์ที่ต้องการให้ตรวจสอบ
- ดูเอาต์พุตขณะที่รัน คุณจะเห็นว่าโมเดลให้เหตุผลตามข้อกำหนดของคุณขณะที่พยายามสร้าง หากมีสิ่งใดดูเหมือนจะออกนอกลู่นอกทาง คุณก็สามารถหยุดและแก้ไขได้
- ให้เรียกใช้เซิร์ฟเวอร์การพัฒนาเพื่อดูเว็บไซต์สุดท้ายและตรวจสอบการทำงาน
- เป้าหมายที่ท้าทาย: ทำตามกระบวนการนี้อีกครั้งเพื่อเพิ่มการทดสอบอัตโนมัติ
- เป้าหมายที่ท้าทาย: เลือกเฟรมเวิร์กหรือเทคโนโลยีสแต็กที่เฉพาะเจาะจงที่คุณต้องการให้สร้างเว็บไซต์ โดยแยก PRD, Mockup และเอกสารการออกแบบออกจากกัน ซึ่งจะช่วยให้ปรับเปลี่ยนไปใช้เฟรมเวิร์กหรือเทคโนโลยีสแต็กอื่นๆ ได้ง่าย
7. นำไปใช้งานในเวอร์ชันที่ใช้งานจริง
คุณได้วางแผน ออกแบบ และเขียนโค้ดแล้ว เหลืออะไรบ้าง การติดตั้งใช้งานในเวอร์ชันที่ใช้งานจริง
Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.
แบบฝึกหัดที่ 5
- เรียกใช้พรอมต์การติดตั้งใช้งานโดยแทนที่รหัสโปรเจ็กต์
- คัดลอก URL การโฮสต์แบบสดที่ตัวแทนให้ไว้
- เปิด URL ที่เผยแพร่อยู่เพื่อยืนยันว่าได้ติดตั้งใช้งานและทำงานแล้ว
- เป้าหมายที่ท้าทาย: ใช้ DevTools สำหรับเอเจนต์เพื่อเรียกใช้การตรวจสอบ Lighthouse ของเว็บไซต์เวอร์ชันที่ใช้งานจริง ปรับเปลี่ยนเพื่อปรับปรุงคะแนน Lighthouse และเผยแพร่การอัปเดต
8. [ไม่บังคับ] การปรับปรุงด้วย AI
ตอนนี้เกมคำศัพท์ของคุณทำงานได้อย่างเต็มที่โดยใช้พจนานุกรมแบบคงที่ หากต้องการเปลี่ยนพจนานุกรมแบบคงที่ให้เป็นคำแบบไดนามิก คุณสามารถแจ้งให้ระบบสร้างคำใหม่ทุกครั้งโดยใช้โมเดลภาษาขนาดเล็กในเครื่องจาก Prompt API แทน
เนื่องจากฟีเจอร์นี้ไม่พร้อมใช้งานในอุปกรณ์บางเครื่อง คุณจึงต้องใช้การเพิ่มประสิทธิภาพแบบต่อเนื่องเพื่อตรวจสอบว่า API และโมเดลพร้อมใช้งานหรือไม่ หากมี คุณก็ใช้ได้ แต่หากไม่มี คุณจะต้องกลับไปใช้รายการแบบคงที่
แบบฝึกหัดที่ 6
นำทุกสิ่งที่คุณได้เรียนรู้ไปปฏิบัติจริง
- ร่วมมือกับเอเจนต์เพื่อเขียน PRD เพื่อใช้ Prompt API ในการสร้างคำที่ซ่อนที่ถูกต้อง
- ออกแบบแถบความคืบหน้าในการดาวน์โหลดและ UI การผสานรวม AI ในเบราว์เซอร์
- เขียนข้อกำหนดสำหรับการติดตั้งใช้งาน (เคล็ดลับ: เรียกใช้เอเจนต์เพื่อให้แน่ใจว่าใช้ไวยากรณ์ API ที่ถูกต้องที่นี่)
- พัฒนาฟีเจอร์ใหม่
- และนำไปใช้งานจริง
9. สรุป
ยินดีด้วย คุณสร้าง ปรับแต่ง เพิ่มประสิทธิภาพ และทำให้เว็บแอปพลิเคชันที่ทันสมัย เข้าถึงได้ และใช้ AI ได้พร้อมใช้งานเรียบร้อยแล้ว โดยใช้แนวทางปฏิบัติแนะนำในการเขียนโค้ดแบบตัวแทน
สิ่งที่คุณได้เรียนรู้
- เวิร์กโฟลว์ของตัวแทนที่ขับเคลื่อนด้วยผลิตภัณฑ์: วิธีการจัดการงานเป็นวงจรผลิตภัณฑ์ขนาดเล็ก (PRD → การออกแบบ → ข้อมูลจำเพาะ → การสร้าง) ช่วยลดหนี้สิน ค่าใช้จ่ายในการตรวจสอบ และความขัดแย้งที่เกิดขึ้นซ้ำๆ
- แผงผู้เชี่ยวชาญแบบหลายเอเจนต์: การเรียกใช้เอเจนต์ย่อยของ AI หลายตัวจะช่วยปรับปรุงคุณภาพและความถูกต้องของงานได้อย่างไร
- PRD กับเอกสารการออกแบบ: เหตุผลที่การแยกขอบเขตการทำงาน (แผน) ออกจากสถาปัตยกรรมทางเทคนิค (ข้อกำหนด) เป็นกระบวนการที่ปรับขนาดได้และแม่นยำกว่าการแจ้งฟีเจอร์แบบ Zero-Shot
- การติดตั้งใช้งานที่ราบรื่น: วิธีใช้เซิร์ฟเวอร์ MCP (เช่น Firebase MCP) เพื่อเพิ่มประสิทธิภาพการเข้าถึงระบบของบุคคลที่สาม เช่น การติดตั้งใช้งานเว็บไซต์