คู่มือการตั้งค่าโดยละเอียด

เมื่อคุณมีสิทธิ์เข้าถึงโค้ด (ไม่ว่าจะใน Codespaces หรือภายในเครื่อง) โดย ทําตามคําแนะนําเริ่มต้นใช้งาน ให้ทําตามขั้นตอนเหล่านี้:

เคล็ดลับ

หากคุณไม่ต้องการทําตามขั้นตอนด้วยตนเอง ให้ขอให้ GitHub Copilot ช่วยคุณทํางาน ที่เก็บ Starter-Kit เปิดใช้งาน AI และ Copilot สามารถแนะนําคุณตลอดกระบวนการตั้งค่าแบบโต้ตอบ ลองใช้ข้อความแจ้งนี้: "ช่วยฉันเริ่มต้นใช้งานที่เก็บนี้และเรียกใช้ตัวอย่าง HelloWorld"

ขั้นตอนที่ 1: เรียกใช้สคริปต์การตั้งค่า

สคริปต์การตั้งค่าจะทําให้การกําหนดค่าส่วนใหญ่เป็นไปโดยอัตโนมัติ (การลงทะเบียนแอป ค่าเริ่มต้น ฯลฯ)

# From the repo root
pwsh ./scripts/Setup/Setup.ps1 -WorkloadName "Org.MyWorkload"

บันทึกย่อการตั้งค่าสคริปต์:

• WorkloadName ต้องเป็นไปตามรูปแบบ Organization.WorkloadName สําหรับการพัฒนาให้ใช้Org.[YourWorkloadName]
• หากใช้แอป Microsoft Entra ที่มีอยู่ซ้ํา ตรวจสอบให้แน่ใจว่า URI การเปลี่ยนเส้นทาง SPA ได้รับการกําหนดค่าตามที่อธิบายไว้ในคู่มือการตั้งค่าที่เก็บด้วยตนเอง
• บน macOS/Linux ใช้เพื่อ pwsh เรียกใช้สคริปต์
• ตรวจสอบให้แน่ใจว่านโยบายการดําเนินการ PowerShell ถูกตั้งค่าเป็น ไม่จํากัด และไฟล์จะถูกยกเลิกการบล็อกหากคุณถูกถามว่าควรเริ่มไฟล์ PowerShell หรือไม่
• ทําตามคําแนะนําที่สคริปต์ให้ไว้เพื่อตั้งค่าทุกอย่าง

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

Note

หากคุณพบข้อผิดพลาดในการตั้งค่า โปรดดู ข้อผิดพลาดในการตั้งค่า PowerShell ในส่วนการแก้ไขปัญหาด้านล่าง

เคล็ดลับ

หากคุณมีปัญหากับสคริปต์การตั้งค่าอัตโนมัติ คุณสามารถทําตาม คู่มือการตั้งค่าด้วยตนเอง สําหรับการกําหนดค่าด้วยตนเองทีละขั้นตอน

ขั้นตอนที่ 2: เริ่มสภาพแวดล้อมการพัฒนา

เรียกใช้เซิร์ฟเวอร์นักพัฒนา (ส่วนหน้า + API) และลงทะเบียนอินสแตนซ์ภายในเครื่องของคุณกับ Fabric ผ่าน DevGateway

# Terminal 1: start local dev server
pwsh ./scripts/Run/StartDevServer.ps1

# Terminal 2: start DevGateway to register your local instance with Fabric
pwsh ./scripts/Run/StartDevGateway.ps1

ขั้นตอนที่ 3: เปิดใช้งานคุณลักษณะของนักพัฒนาใน Fabric

นําทางไปยังพอร์ทัล Fabric และกําหนดการตั้งค่าที่จําเป็น:

3.1 กําหนดการตั้งค่าผู้เช่าในพอร์ทัลผู้ดูแลระบบ:

ไปที่การตั้งค่าพอร์ทัลผู้ดูแลระบบ และเปิดใช้งานการตั้งค่าผู้เช่าต่อไปนี้:

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

3.2 เปิดโหมดนักพัฒนาผ้า:

ไปที่การตั้งค่านักพัฒนา Fabric และเปิดใช้งานโหมดนักพัฒนา Fabric:

ตอนนี้คุณพร้อมที่จะสร้างไอเท็ม Hello World ชิ้นแรกของคุณใน Fabric แล้ว

ขั้นตอนที่ 4: ทดสอบไอเท็ม HelloWorld

คุณสามารถเข้าถึงปริมาณงานได้จากฮับปริมาณงาน (ค้นหาชื่อปริมาณงานของคุณ) หรือนําทางโดยตรง จากนั้นสร้างไอเท็ม Hello World

กระได:

1. เปิดฮับปริมาณงาน Fabric: ค้นหาปริมาณงานของคุณ (เช่น Org.MyWorkload)

   • การนําทางโดยตรง: https://app.fabric.microsoft.com/workloadhub/detail/<WORKLOAD_NAME>?experience=fabric-developer
   • แทนที่ <WORKLOAD_NAME> ด้วยชื่อปริมาณงานจริงของคุณ (เช่น Org.MyWorkload)

2. สร้างรายการใหม่: เลือกชนิดรายการ Hello World และเลือกพื้นที่ทํางานการพัฒนาของคุณ

3. ตรวจสอบการทํางาน: ตัวแก้ไขจะเปิดขึ้น ยืนยันว่ารายการทํางานตามที่คาดไว้และปรากฏเหมือนสิ่งประดิษฐ์ดั้งเดิมในพื้นที่ทํางาน

ขอแสดงความยินดี! คุณสร้างรายการแรกจากสภาพแวดล้อมการพัฒนาของคุณ

ขั้นตอนที่ 5: เริ่มเขียนโค้ด

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

📖 คู่มือการสร้างรายการผ้าแบบกําหนดเอง - คู่มือนี้มีสองวิธีในการสร้างรายการ:

• แนวทางAI-Assisted: ใช้ GitHub Copilot สําหรับคําแนะนําแบบโต้ตอบ (แนะนําสําหรับนักพัฒนาใหม่)
• วิธีการสคริปต์ด้วยตนเอง: ใช้สคริปต์ PowerShell อัตโนมัติสําหรับการตั้งค่าอย่างรวดเร็ว (แนะนําสําหรับนักพัฒนาที่มีประสบการณ์)

ตัวเลือกการเริ่มต้นอย่างรวดเร็ว:

• อัปเดตตัวแก้ไข HelloWorld ที่มีอยู่: Workload/app/items/HelloWorldItem/HelloWorldItemEditor.tsx
• หรือนั่งร้านรายการใหม่ด้วยสคริปต์: ./scripts/Setup/CreateNewItem.ps1

มีความสุขในการเขียนโค้ด! 🚀

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

• แยกที่เก็บ: แยกที่เก็บ Starter-Kit และใช้ Fork ของคุณเป็นฐานของโครงการของคุณ
• ซิงค์อยู่เสมอ: ซิงค์ส้อมของคุณกับต้นน้ําเพื่อรับการปรับปรุง
• รักษาความสอดคล้องของโครงสร้างโครงการ: รักษาโครงสร้างโครงการและรูปแบบองค์กรของ Starter-Kit เพื่อให้แน่ใจว่าเข้ากันได้กับการอัปเดตในอนาคตและรักษาความชัดเจนของโค้ด
• การรวม Starter-Kit เป็นประจํา: รวมการเปลี่ยนแปลงโค้ดจาก Starter-Kit เข้ากับโครงการของคุณเป็นประจําเพื่อรับประโยชน์จากการแก้ไขข้อบกพร่อง ตั้งค่ากระบวนการเพื่อตรวจสอบและรวมการเปลี่ยนแปลงต้นน้ําเป็นประจํา (รายเดือนหรือรายไตรมาส)
• ตรวจสอบรายการตั้งแต่เนิ่นๆ: ตรวจสอบรายการปริมาณงานของคุณตั้งแต่เนิ่นๆ และปฏิบัติตามสิทธิ์ที่มีสิทธิ์น้อยที่สุด
• ใช้คอนเทนเนอร์ dev: ใช้คอนเทนเนอร์ dev หรือ Codespaces สําหรับสภาพแวดล้อมที่ใช้แล้วทิ้งที่สอดคล้องกัน
• ใช้สคริปต์ที่ให้มา: ใช้สคริปต์ที่ให้มา (Setup, StartDevServer, StartDevGateway) เพื่อทําให้การตั้งค่าและเวิร์กโฟลว์รายวันเป็นไปโดยอัตโนมัติ

การแก้ไขปัญหาทั่วไป

ข้อผิดพลาดในการตั้งค่า PowerShell

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

ข้อผิดพลาดของนโยบายการเรียกใช้สคริปต์

หากคุณพบ: cannot be loaded because the execution policy is unrestricted:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

พอร์ต 5173 กําลังใช้งานอยู่

หาก DevServer ไม่สามารถเริ่มต้นบนพอร์ต 5173 ให้ค้นหาและยุติกระบวนการ:

# Find process using port
Get-Process -Id (Get-NetTCPConnection -LocalPort 5173).OwningProcess

# Terminate process
Stop-Process -Id <ProcessId> -Force

ข้อผิดพลาดการขึ้นต่อกัน

หากคุณพบข้อผิดพลาดเกี่ยวกับการขึ้นต่อกันที่ขาดหายไป ให้ทําดังนี้

# From Workload folder
cd Workload
npm install

ปัญหาการรับรองความถูกต้องของ DevGateway

หากการรับรองความถูกต้องล้มเหลวเมื่อเริ่ม DevGateway:

1. ตรวจสอบ URI การเปลี่ยนเส้นทางการลงทะเบียนแอปใน Microsoft Entra
2. ตรวจสอบว่าการตั้งค่าผู้เช่าอนุญาตคุณลักษณะที่จําเป็นสําหรับนักพัฒนา
3. ตรวจสอบให้แน่ใจว่าคุณลงชื่อเข้าใช้ผู้เช่าที่ถูกต้องใน DevGateway

สําหรับข้อมูลการแก้ไขปัญหาที่ครอบคลุม โปรดดูที่ Starter-Kit Repository README

หมายเหตุสําคัญ

ข้อจํากัดการเข้าถึงเครือข่ายท้องถิ่นของ Chrome ใหม่

Google ได้เปิดตัวข้อจํากัดการเข้าถึงเครือข่ายท้องถิ่น (LNA) ใหม่ใน Chrome ซึ่งจะทําลายการพัฒนาในเครื่องด้วย DevServer ข้อจํากัดเหล่านี้ป้องกันไม่ให้เว็บไซต์เข้าถึงทรัพยากรเครือข่ายท้องถิ่นโดยไม่ได้รับอนุญาตจากผู้ใช้อย่างชัดแจ้ง

การดําเนินการที่จําเป็นสําหรับการพัฒนาภายใน: คุณต้องเปลี่ยนการกําหนดค่า Chrome เพื่อพัฒนาปริมาณงานในเครื่องต่อไป

1. ไปที่ chrome://flags/#local-network-access-check ใน Chrome
2. ตั้งค่าสถานะเป็น "ปิดใช้งาน"
3. รีสตาร์ท Chrome

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

แหล่งข้อมูลเพิ่มเติม:

• การเข้าถึงเครือข่ายท้องถิ่น - นักพัฒนาซอฟต์แวร์ Chrome - เอกสารประกอบอย่างเป็นทางการของ Chrome เกี่ยวกับการเปลี่ยนแปลงการเข้าถึงเครือข่ายท้องถิ่น

สําคัญ

หากไม่ปิดใช้งานแฟล็กนี้ การพัฒนาในเครื่องด้วย DevGateway จะไม่ทํางานใน Chrome การเปลี่ยนแปลงการตั้งค่าคอนฟิกนี้จําเป็นสําหรับสภาพแวดล้อมการพัฒนาเท่านั้น

ขั้นตอนถัดไป

• เรียนรู้ สถาปัตยกรรม และวิธีที่โฮสต์ แอป และบริการ Fabric โต้ตอบกัน
• อ่าน ภาพรวมรายการ สําหรับสคีมาและแนวทางปฏิบัติที่ดีที่สุด
• ทําความเข้าใจโครงสร้างและการกําหนดค่ารายการปริมาณงาน
• พัฒนาด้วย DevGateway สําหรับการทดสอบในเครื่อง
• เผยแพร่ปริมาณงานของคุณ เมื่อคุณพร้อมที่จะแชร์ในวงกว้าง