สร้างและแก้ไขหน้าที่สร้างขึ้นด้วยเครื่องมือสร้างโค้ด AI

บทความนี้อธิบายวิธีการใช้เครื่องมือสร้างโค้ด AI เช่น GitHub Copilot CLI และ Claude Code เพื่อสร้างและแก้ไขหน้าที่สร้างขึ้นสําหรับแอปแบบจําลองข้อมูลใน Power Apps วิธีนี้ช่วยให้คุณสามารถรวมความสามารถในการสร้างโค้ดขั้นสูงเข้ากับเวิร์กโฟลว์การพัฒนาของคุณโดยตรง ช่วยให้คุณสามารถสร้างหน้าที่สร้างขึ้นใหม่หรือทําซ้ําในหน้าที่มีอยู่โดยใช้คําแนะนําภาษาธรรมชาติ

การใช้เครื่องมือสร้างโค้ดด้วย AI กับหน้าเพจที่สร้างขึ้นจากเนื้อหาเชิงกำเนิด นำเสนอแนวทางการพัฒนาทางเลือกใหม่ที่เสริมประสบการณ์การใช้งานที่ขับเคลื่อนด้วย UI ใน Power Apps (make.powerapps.com) แนวทางแรกนี้ออกแบบมาสําหรับนักพัฒนาและผู้สร้างด้านเทคนิคที่ชอบทํางานกับเครื่องมือการพัฒนาในท้องถิ่นและเวิร์กโฟลว์ที่ใช้ CLI

สิ่งที่คุณสามารถทําได้ด้วยเครื่องมือสร้างโค้ด

• สร้างหน้าที่สร้างขึ้นอย่างน้อยหนึ่งหน้า ในการเรียกใช้ครั้งเดียวจากข้อกําหนดภาษาธรรมดา
• สร้างตาราง Microsoft Dataverse ที่รองรับหน้าที่คุณต้องการหรือนําข้อมูลที่มีอยู่กลับมาใช้ใหม่ รวมถึงข้อมูลตัวอย่างสําหรับตารางใหม่
• วางวัตถุลงในแอปและโซลูชันใหม่หรือที่มีอยู่ รวมถึงการสร้างแอปหรือโซลูชันในทันที
• อัปเดตหน้าสร้างที่มีอยู่ โดยการร้องขอการเปลี่ยนแปลงหรือการปรับแต่งผ่านเครื่องมือ AI ของคุณ
• ปรับใช้โดยตรง ไปยังสภาพแวดล้อม Power Apps ของคุณด้วยการใช้คำสั่ง PAC CLI
• ทำงานบนเครื่องของคุณ ด้วย IDE และเครื่องมือพัฒนาที่คุณต้องการ พร้อมการรองรับ npm install และ IntelliSense สำหรับโค้ดที่สร้างขึ้น

วิธีการทำงาน

1. คุณอธิบายสิ่งที่คุณต้องการสร้างในภาษาธรรมชาติ ตัวอย่างเช่น "สร้างหน้าที่สร้างแดชบอร์ดที่แสดงบัญชียอดนิยมตามรายได้"
2. ตัวแทนนักวางแผนวิเคราะห์คําขอของคุณและเสนอแผน แผนอาจมีอย่างน้อยหนึ่งหน้า ตาราง Dataverse ที่หน้าต้องการ (ใหม่หรือที่มีอยู่) และแอปและโซลูชันที่วัตถุอยู่ จากนั้นตัววางแผนจะมอบหมายให้ตัวแทนพิเศษเพื่อสร้างแผนการอธิบาย ตัวอย่างเช่น ตัวสร้างตารางและตัวสร้างหน้า
3. คุณตรวจทานและปรับแผนก่อนที่จะสร้าง คุณสามารถเปลี่ยนจํานวนหน้า สลับ หรือเพิ่มตาราง กําหนดเป้าหมายแอปอื่น หรือวางวัตถุในโซลูชันอื่นได้
4. ตัวแทนสร้างโค้ด TypeScript และ React ที่พร้อมสําหรับการผลิตสําหรับหน้าหรือหน้าของคุณ พร้อมกับสนับสนุนไฟล์สําหรับการพัฒนาในเครื่อง
5. เครื่องมือจะปรับใช้อาร์ติแฟกต์ไปยังสภาพแวดล้อมของคุณโดยใช้ คำสั่ง PAC CLI สำหรับ generative page และสามารถเลือกเรียกใช้ขั้นตอนการตรวจสอบในเบราว์เซอร์ ซึ่งจะทดสอบหน้าโดยใช้การทดสอบที่สร้างขึ้น
6. หน้าที่คุณสร้างจะปรากฏในแอปแบบจำลองของคุณ

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมีซอฟต์แวร์และสิทธิ์ที่จําเป็นที่อธิบายไว้ในที่นี้

ข้อกำหนดของซอฟต์แวร์

ข้อกําหนดเพิ่มเติม

• สภาพแวดล้อมของ Power Platform พร้อมด้วยแอปที่ขับเคลื่อนด้วยโมเดลสำหรับปรับใช้หน้า
• เซสชัน PAC CLI ที่ได้รับการรับรองความถูกต้องที่เชื่อมต่อกับสภาพแวดล้อมเป้าหมายของคุณ
  • ไปที่ การยืนยันตัวตนของ Power Platform CLI สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการเชื่อมต่อ

ติดตั้งปลั๊กอิน

เรียกใช้ตัวติดตั้งเพื่อตั้งค่าปลั๊กอิน Power Platform ทั้งหมดในหน้าต่าง PowerShell หรือหน้าต่างคําสั่ง Windows

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

ตัวติดตั้งโดยอัตโนมัติ:

• ตรวจพบเครื่องมือที่พร้อมใช้งาน (Claude Code, GitHub Copilot CLI)
• ลงทะเบียนปลั๊กอิน marketplace และติดตั้งปลั๊กอินทั้งหมด
• เปิดใช้งานการอัปเดตอัตโนมัติเพื่อให้ปลั๊กอินยังคงเป็นปัจจุบัน

หลังจากติดตั้งให้รีสตาร์ทเครื่องมือ AI ของคุณหากจําเป็น

ติดตั้งเฉพาะปลั๊กอินสำหรับการสร้างหน้าเท่านั้น

หากต้องการติดตั้งเฉพาะปลั๊กอินหน้าที่สร้างสําหรับ GitHub Copilot CLI หรือ Claude Code:

1. เพิ่มปลั๊กอิน Power Platform Skills marketplace: /plugin marketplace add microsoft/power-platform-skills
2. ติดตั้งปลั๊กอิน Power Apps: /plugin install model-apps@power-platform-skills

เมื่อติดตั้งแล้ว คุณสามารถใช้ปลั๊กอินได้โดย:

• เรียกใช้ /genpage คําสั่งอย่างชัดเจน
• อธิบายหน้าที่คุณต้องการสร้าง เครื่องมือจะตรวจหาและใช้ปลั๊กอินโดยอัตโนมัติ

การใช้เครื่องมือสร้างโค้ด AI อื่น ๆ

สําหรับเครื่องมือสร้างโค้ด AI อื่นๆ ตรวจสอบให้แน่ใจว่าเครื่องมือของคุณมีสิทธิ์เข้าถึงทรัพยากรหน้าที่สร้างจากพื้นที่เก็บข้อมูล Power Platform GitHub โฟลเดอร์ปลั๊กอินแอปแบบจําลองประกอบด้วยคู่มือคอมโพเนนต์ โค้ดตัวอย่าง การอ้างอิงคําสั่ง PAC CLI และคําแนะนําเวิร์กโฟลว์ที่จําเป็นในการสร้างโค้ดตามข้อกําหนดของหน้าที่สร้างขึ้น รวมถึงวิธีการสร้างหน้าที่สนับสนุนหลายภาษาและภูมิภาค ดู readme ของที่เก็บสําหรับข้อมูลเกี่ยวกับการเข้าถึงและใช้ทรัพยากรเหล่านี้ด้วยเครื่องมือที่คุณต้องการ

ภาพรวมทักษะ

ปลั๊กอิน Power Apps มีทักษะสำหรับการทำงานกับหน้าที่สร้างโดยอัตโนมัติ

ทักษะนี้ช่วยให้คุณสามารถอธิบายสิ่งที่คุณต้องการสร้างและมีเครื่องมือ AI สร้าง TypeScript ที่สมบูรณ์และรหัส React สําหรับหน้าที่คุณสร้าง จากนั้นปรับใช้กับสภาพแวดล้อม Power Apps ของคุณโดยตรง

สร้างหน้าเนื้อหาใหม่

ปฏิบัติตามเวิร์กโฟลว์นี้เมื่อสร้างหน้าใหม่หรือชุดของหน้าตั้งแต่เริ่มต้น

1. เริ่มการสนทนาด้วยเครื่องมือ AI ของคุณ อธิบายสิ่งที่คุณต้องการสร้าง คุณจะระบุให้เฉพาะเจาะจงหรือปลายเปิดแค่ไหนก็ได้ตามต้องการ — ยิ่งคำขอคลุมเครือมากเท่าไร เอเจนต์ก็ยิ่งเติมรายละเอียดเองมากขึ้นเท่านั้น คุณยังสามารถแนบรูปภาพหรือเนื้อหาอื่น ๆ เพื่อแนะนําวิชวล การกําหนดธีม และเค้าโครง ตัวอย่างเช่น:

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

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

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

4. ตรวจทานและปรับแผน ตัววางแผนนำเสนอแผนซึ่งประกอบด้วยหน้าหรือหน้าต่างๆ ที่ตั้งใจจะสร้าง ตาราง Dataverse ที่จะใช้หรือสร้าง (พร้อมคอลัมน์ที่วางแผนจะใช้) แอปที่จะใช้โฮสต์หน้า (ใหม่หรือที่มีอยู่แล้ว) และโซลูชันที่อาร์ติแฟกต์เหล่านั้นอยู่ ทําซ้ํากับตัวแทนในการปรับปรุงสิ่งที่คุณต้องการเปลี่ยนแปลง — ตัวอย่างเช่น จํานวนของหน้า ซึ่งใช้หรือสร้างตาราง แอปเป้าหมาย หรือโซลูชันเป้าหมาย ยืนยันแผนเมื่อตรงกับเจตนาของคุณ

5. ให้ตัวแทนสร้างและปรับใช้ เจ้าหน้าที่พิเศษสร้างหน้าหรือหน้า ตารางสนับสนุน และโค้ด จากนั้นปรับใช้กับสภาพแวดล้อมของคุณ

6. หรือตรวจสอบในเบราว์เซอร์ หลังจากบิลด์ตัวแทนอาจเสนอให้เรียกใช้ขั้นตอนการตรวจสอบในเบราว์เซอร์ที่ทํางานการทดสอบ Playwright ที่สร้างขึ้นโดยอัตโนมัติกับหน้าเพื่อยืนยันว่าโหลดและทํางานได้อย่างถูกต้อง ใช้ข้อมูลนี้เพื่อตรวจจับปัญหาที่ชัดเจนก่อนการทดสอบด้วยตนเอง

7. ทดสอบและทําซ้ํา เปิดแอปที่ขับเคลื่อนด้วยแบบจําลองของคุณใน Power Apps และนําทางไปยังหน้าใหม่ หากคุณต้องการเปลี่ยนแปลง ให้ย้อนกลับไปที่เครื่องมือ AI ของคุณและอธิบายการอัปเดตในภาษาธรรมชาติ

แก้ไขหน้าสร้างที่มีอยู่

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

1. เรียกใช้เพจที่มีอยู่ ในเครื่องมือสร้างโค้ด AI ของคุณ คําขอดึงข้อมูลหน้าที่สร้างไว้ที่มีอยู่โดยการให้ ID หน้า (GUID) หรือชื่อหน้าในแผนผังเว็บไซต์และแอปที่อยู่ในนั้น ตัวอย่างเช่น "ฉันต้องการอัปเดตหน้าสร้างการปรับใช้สัตว์เลี้ยงจากแอปสาธิต"

2. อธิบายการอัปเดตของคุณ บอกเครื่องมือ AI ว่าคุณต้องการเปลี่ยนแปลงอะไร ตัวอย่างเช่น:

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

3. ตรวจทาน เผยแพร่ ทดสอบ และทําซ้ํา เครื่องมือ AI สร้างโค้ด TypeScript ที่อัปเดตตามการเปลี่ยนแปลงที่คุณร้องขอ ทําตามกระบวนการตรวจสอบ เผยแพร่ และทดสอบเดียวกันที่อธิบายไว้ในส่วน "สร้างหน้าที่สร้างใหม่" ดําเนินการวนซ้ําด้วยคําแนะนําภาษาธรรมชาติจนกว่าหน้าตรงตามข้อกําหนดของคุณ

ไฟล์การพัฒนาภายในเครื่อง

เมื่อเครื่องมือ AI สร้างหน้า มันจะเขียนไฟล์สนับสนุนสองไฟล์ไปยังพื้นที่ทํางานภายในเครื่องของคุณเพื่อทําให้การตรวจสอบและวนซ้ําบนโค้ดง่ายขึ้น:

• package.json — ประกาศการขึ้นต่อกันของรันไทม์และการพัฒนาที่หน้าที่สร้างขึ้นใช้ในการคอมไพล์ เรียกใช้ npm install หลังจากสร้างแล้วเพื่อติดตั้งการพึ่งพาเหล่านี้
• genpage.d.ts— การประกาศ TypeScript โดยรอบสําหรับวัตถุที่ไม่ได้ติดตั้งผ่าน npm เช่น dataApi และpageInput

เมื่อไฟล์ทั้งสองอยู่ครบแล้วและ npm install เสร็จสมบูรณ์ IntelliSense ของตัวแก้ไขโค้ดของคุณ เช่น VS Code จะทำงานโดยอิงตามโค้ดที่สร้างขึ้น ดังนั้นคุณจึงตรวจทานหรือแก้ไขหน้าได้ด้วยตนเองโดยไม่เห็นเส้นหยักสีแดงจากชนิดข้อมูลที่ยังไม่สามารถอ้างอิงได้

ตั้งค่าหน้าเพื่อยอมรับพารามิเตอร์การป้อนข้อมูล

หน้าที่สร้างสามารถยอมรับพารามิเตอร์recordIdentityNameการป้อนข้อมูล , และ dataทําให้สามารถรับข้อมูลตามบริบทเมื่อนําทางไปยังจากหน้าหรือโค้ดอื่น ๆ ได้ เมื่อคุณแนะนําเครื่องมือ AI เพื่อกําหนดค่าพารามิเตอร์อินพุต ระบบจะสร้างรหัสการเตรียมใช้งานที่เหมาะสมเพื่อให้หน้าอ่านและใช้ค่าเหล่านั้นเมื่อโหลด

โปรดอธิบายรายละเอียดพารามิเตอร์ที่คุณต้องการสำหรับคำขอของคุณ:

• "ตั้งค่าหน้าเพื่อยอมรับ recordId และ entityName ของบัญชี เมื่อโหลดหน้าแล้ว ใช้พารามิเตอร์เหล่านี้เพื่อดึงข้อมูลและแสดงรายละเอียดบัญชีที่สอดคล้องกัน"
• "กําหนดค่าหน้านี้เพื่อยอมรับพารามิเตอร์ข้อมูลที่มีวัตถุตัวกรองแบบกําหนดเอง ใช้เพื่อกรองระเบียนที่แสดงเมื่อโหลดหน้า"

หากต้องการนําทางไปยังหน้าและส่งผ่านพารามิเตอร์เหล่านี้ ให้ดู นําทางไปยังและจากหน้าที่สร้างโดยใช้ Client API

การแปลเป็นภาษาท้องถิ่น

เมื่อคุณสร้างหน้าสร้างโดยใช้ปลั๊กอิน Power Apps สําหรับ Claude Code หรือ GitHub Copilot CLI การแปลเป็นภาษาท้องถิ่นจะได้รับการจัดการโดยอัตโนมัติ ตัวแทนตรวจหาภาษาทั้งหมดที่เปิดใช้งานในสภาพแวดล้อมของคุณ และสร้างโค้ดเพื่อให้หน้าทํางานกับภาษาเหล่านั้นทั้งหมด หน้านี้คํานึงถึงภาษาที่ผู้ใช้ต้องการและการกําหนดลักษณะการจัดรูปแบบตามภูมิภาคสําหรับวันที่ ตัวเลข และสกุลเงิน

หากคุณต้องการกําหนดเป้าหมายชุดภาษาอื่นนอกเหนือจากภาษาที่เปิดใช้งานในสภาพแวดล้อมของคุณ คุณสามารถขอให้ตัวแทนปรับตัวได้ ตัวอย่างเช่น:

"อัปเดตหน้านี้เพื่อสนับสนุนภาษาอังกฤษ ฝรั่งเศส และสเปนเท่านั้น"

สําหรับข้อมูลเพิ่มเติม โปรดดู คําแนะนําการแปลเป็นภาษาท้องถิ่น ในที่เก็บ Power Platform Skills

การแก้ไขปัญหา

ไม่สามารถโหลดหน้าใน Power Apps

ถ้าคุณนําทางไปยังหน้าที่คุณสร้างและสังเกตข้อความแสดงข้อผิดพลาดหรือหน้าจอว่าง:

1. เปิดเครื่องมือสําหรับนักพัฒนาเบราว์เซอร์ (F12 ในเบราว์เซอร์ส่วนใหญ่)

2. เลือกแท็บคอนโซล

3. คัดลอกข้อความแสดงข้อผิดพลาดทั้งหมด รวมถึงการติดตามสแตก

4. กลับไปยังเครื่องมือสร้างโค้ด AI ของคุณและแปะข้อผิดพลาดพร้อมกับบริบท

   "ฉันได้รับข้อผิดพลาดนี้เมื่อเปิดหน้า: [วางข้อผิดพลาดที่นี่] โปรดแก้ไขปัญหา"

   เครื่องมือ AI วิเคราะห์ข้อผิดพลาด ระบุสาเหตุที่แท้จริง และสร้างการแก้ไข

5. ตรวจสอบการแก้ไขและขอให้เครื่องมือเผยแพร่หน้าใหม่

การแปลงกลับเป็นเวอร์ชันการทํางาน

หากการเปลี่ยนแปลงล่าสุดทําลายหน้าของคุณหรือทําให้ปัญหาแย่ลงคุณสามารถขอให้เครื่องมือ AI ย้อนกลับไปเป็นเวอร์ชันการทํางานก่อนหน้า:

"การเปลี่ยนแปลงล่าสุดทำให้หน้าเว็บเสีย" โปรดแปลงกลับเป็นรุ่นการทํางานล่าสุด"

ต่อมาก็เป็นเครื่องมือ AI:

1. ระบุการเปลี่ยนแปลงที่เกิดขึ้น
2. คืนค่าโค้ดการทํางานก่อนหน้า
3. ปรับใช้เวอร์ชันที่เสถียรใหม่

แนวทางปฏิบัติที่ดีที่สุด

• เริ่มต้นง่ายๆ เริ่มต้นด้วยเวอร์ชันพื้นฐานของหน้าของคุณ และทําซ้ําเพื่อเพิ่มความซับซ้อน
• การทดสอบบ่อยครั้ง ปรับใช้และทดสอบหน้าของคุณหลังจากการเปลี่ยนแปลงที่สําคัญแต่ละครั้ง
• เจาะจง ระบุข้อกําหนดโดยละเอียดเพื่อให้ได้ผลลัพธ์เริ่มต้นที่ดียิ่งขึ้น
• ใช้รูปแบบที่มีอยู่ อ้างอิงหน้าหรือรูปแบบ UI ที่คล้ายกันเมื่ออธิบายข้อกําหนดของคุณ
• ตรวจสอบความถูกต้องของรหัสที่สร้างขึ้น ตรวจสอบรหัสที่สร้างขึ้นเสมอเพื่อให้แน่ใจว่าเป็นไปตามมาตรฐานและข้อกําหนดด้านการปฏิบัติตามข้อบังคับขององค์กรของคุณ

การจำกัด

ข้อจํากัดสําหรับหน้าที่สร้างขึ้นด้วยเครื่องมือสร้างโค้ด AI จะเหมือนกับหน้าที่สร้างขึ้นในพอร์ทัลผู้สร้าง Power Apps:

• หน้าของคุณสามารถเชื่อมต่อกับตาราง Dataverse เท่านั้น
• ไม่สนับสนุนการทํางานร่วมกัน —ตรวจสอบให้แน่ใจว่ามีผู้สร้างเดียวเท่านั้นที่ทํางานอยู่ในหน้าสร้างในแต่ละครั้ง
• รองรับเฉพาะชนิดข้อมูลเหล่านี้: ตัวเลือก สกุลเงิน ลูกค้า วันที่และเวลา วันที่เท่านั้น เลขทศนิยม เลขทศนิยม รูป ค้นหา ข้อความแบบหลายบรรทัด สถานะ เหตุผลสถานะ ข้อความ จํานวนเต็ม ใช่/ไม่ใช่ ตัวระบุที่ไม่ซ้ํากัน

เนื้อหาที่เกี่ยวข้อง

• สร้างหน้าโดยใช้ภาษาธรรมชาติด้วยแอปแบบจําลองข้อมูล
• นําทางไปยังและจากหน้าที่สร้างโดยใช้ Client API
• เมธอดของออบเจ็กต์ dataApi สำหรับหน้าการสร้าง
• การอ้างอิง Power Platform CLI