บทช่วยสอน: สร้างและปรับใช้แอปพลิเคชันแบบหน้าเดียวโดยใช้ GitHub Spark และ Codespace

การสนับสนุน แอปพลิเคชันแบบหน้าเดียว ใหม่ช่วยให้นักพัฒนามีความยืดหยุ่นมากขึ้น: คุณสามารถสร้าง กําหนดเอง และจัดการไซต์ Power Pages ทั้งหมดในโค้ดต้นฉบับได้ ด้วย GitHub Spark รุ่นล่าสุด ตอนนี้นักพัฒนาสามารถสร้างไซต์ แก้ไขไซต์ได้โดยตรงใน GitHub Codespace และปรับใช้กับสภาพแวดล้อม Power Pages ทั้งหมดโดยไม่ต้องออกจากเบราว์เซอร์ของพวกเขา บทช่วยสอนนี้จะแนะนําคุณเกี่ยวกับเวิร์กโฟลว์ที่สมบูรณ์

GitHub Spark เป็นแพลตฟอร์มภาษาธรรมชาติที่ขับเคลื่อนด้วย AI ใหม่จาก GitHub Copilot มันได้รับการออกแบบมาเพื่อช่วยให้นักพัฒนาบูทสเตรปเว็บแอปพลิเคชันได้อย่างรวดเร็ว เมื่อรวมกับ GitHub Codespaces สําหรับการแก้ไขโค้ด Spark จะมี:

• ที่เก็บเทมเพลตแบบพร้อมใช้งานสําหรับโครงการของคุณ
• คอนเทนเนอร์นักพัฒนาที่กําหนดค่าไว้ล่วงหน้าสําหรับสภาพแวดล้อมที่สอดคล้องกัน
• แพลตฟอร์มภาษาธรรมชาติที่ขับเคลื่อนด้วย AI จาก GitHub Copilot

สําหรับนักพัฒนา Power Pages นั่นหมายความว่าคุณสามารถเริ่มต้นด้วยเทมเพลตไซต์ที่สร้างไว้ให้แล้ว ปรับแต่ง และปรับใช้ได้โดยไม่ต้องมีการตั้งค่าดั้งเดิมในเครื่อง

ในตอนท้ายของบทความนี้ คุณจะทราบวิธีการ:

1. สร้างไซต์ Power Pages ต้นแบบโดยใช้ GitHub Spark
2. กําหนดค่า Codespace ของคุณสําหรับการสนับสนุน .NET และ PAC CLI
3. สร้างและอัปโหลดแอปพลิเคชันแบบหน้าเดียวของคุณไปยังสภาพแวดล้อม Power Pages
4. เปิดใช้งานอีกครั้งและทดสอบไซต์ของคุณได้โดยตรงจาก Power Pages

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

ก่อนที่คุณจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมี:

• สภาพแวดล้อม Power Pages ที่มีสิทธิ์ของผู้ดูแลระบบ
• Power Platform CLI (PAC CLI) เวอร์ชัน 1.44.x หรือใหม่กว่าติดตั้งและรับรองความถูกต้อง
• ไซต์ Power Pages บนเวอร์ชัน 9.7.4.x หรือใหม่กว่า
• สิทธิ์การใช้งาน GitHub Spark ที่มี Codespace สําหรับโครงการ Frontend แบบกําหนดเองของคุณ

Note

• หากต้องการใช้ GitHub Spark คุณต้องแน่ใจว่าคุณมีสิทธิ์การใช้งาน GitHub ที่เหมาะสม
• การสนับสนุน GitHub Spark หรือ Codespaces จะพร้อมใช้งานผ่านทีมสนับสนุน Spark

ขั้นตอนที่ 1: เริ่มต้นด้วยเทมเพลต GitHub Spark

1. ไปที่เครื่องมือ GitHub Spark และสร้างไซต์ใหม่โดยใช้ภาษาธรรมชาติ
2. เมื่อสร้างแล้ว ให้คลิก เปิดใน Codespaces

ซึ่งทําให้คุณอยู่ในสภาพแวดล้อมการพัฒนาบนระบบคลาวด์ ที่คุณสามารถทํางานในโครงการ Power Pages ของคุณโดยไม่ต้องตั้งค่าภายในเครื่อง

ขั้นตอนที่ 2: อัปเดตการกําหนดค่าคอนเทนเนอร์การพัฒนา

ภายในที่เก็บ ค้นหาไฟล์:

.devcontainer/devcontainer.json

ปรับเปลี่ยนส่วนคุณลักษณะเพื่อเพิ่มการสนับสนุนสําหรับ .NET 9.0 การกําหนดค่าของคุณควรมีลักษณะดังนี้:

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

สร้างคอนเทนเนอร์อีกครั้ง

หลังจากบันทึกการเปลี่ยนแปลงของคุณ:

1. กด Ctrl + Shift + P (หรือบน Command + Shift + P สำหรับ Mac) เพื่อเปิดพาเลตคำสั่ง
2. พิมพ์ Codespaces: สร้างคอนเทนเนอร์ อีกครั้งและเลือก
3. คอนเทนเนอร์จะเริ่มต้นใหม่ ในระหว่างกระบวนการนี้ .NET 9 และการอ้างอิงอื่น ๆ ทั้งหมดจะถูกติดตั้ง
4. รอสักครู่เพื่อให้การติดตั้งเสร็จสมบูรณ์ก่อนดําเนินการต่อ

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

ขั้นตอนที่ 3: ติดตั้งเครื่องมือ Power Platform

จากเทอร์มินัล Codespace ของคุณ:

1. ติดตั้งเครื่องมือ Power Platform (พร้อมใช้งานเป็นส่วนขยาย VS Code)
2. การติดตั้งนี้ยังนํา PAC CLI ซึ่งเป็นอินเทอร์เฟซบรรทัดคําสั่งที่ช่วยให้คุณสามารถรับรองความถูกต้อง ดาวน์โหลด และอัปโหลดไซต์ได้

ขั้นตอนที่ 4: เชื่อมต่อกับสภาพแวดล้อม Power Platform ของคุณ

ใช้ PAC CLI เพื่อรับรองความถูกต้องกับสภาพแวดล้อมเป้าหมายของคุณ:

pac auth create -u https://org12x34x45.crm.dynamics.com

แทนที่ URL ด้วย URL สภาพแวดล้อม Power Platform จริงของคุณ

ขั้นตอนที่ 5: สร้างไซต์ของคุณ

ก่อนที่จะปรับใช้ สร้างโค้ดไซต์ของคุณ:

npm run build

คําสั่งนี้จะคอมไพล์ไซต์ของคุณและส่งออกอาร์ติแฟกต์ลงใน dist โฟลเดอร์

ขั้นตอนที่ 6: อัปโหลดไซต์ของคุณ

ปรับใช้ไซต์ของคุณกับสภาพแวดล้อม Power Pages โดยใช้:

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

พารามิเตอร์

พารามิเตอร์	สมญานาม	คำอธิบาย
--rootPath	-rp	โฟลเดอร์ภายในเครื่องที่มีไฟล์ต้นฉบับของไซต์คุณ
--compiledPath	-cp	เส้นทางการคอมไพล์แอสเซท เช่น React build
--siteName	-sn	ชื่อที่แสดงสําหรับไซต์ Power Pages ของคุณ

ขั้นตอนที่ 7: เปิดใช้งานและทดสอบใหม่

1. หลังจากอัปโหลดแล้ว เว็บไซต์ของคุณจะปรากฏภายใต้ ไซต์ที่ไม่ใช้งาน ใน Power Pages
2. ไปยังไซต์ที่ไม่ได้ใช้งาน ค้นหาไซต์ของคุณ และเลือก เปิดใช้งานใหม่
3. เมื่อไซต์เปิดใช้งาน ให้เปิด URL เพื่อยืนยันการปรับใช้

ขั้นตอนถัดไป: ปลอดภัยและขยายเว็บไซต์ของคุณ

ตอนนี้ที่ไซต์ของคุณได้ถูกปรับใช้:

• กําหนดค่า การรับรองความถูกต้องและการอนุญาต เพื่อรักษาความปลอดภัยการเข้าถึง
• ใช้ Power Pages Web API เพื่อโหลดเนื้อหาแบบไดนามิก และดําเนินการสร้าง อัปเดต และลบการดําเนินการจากรหัสแบบกําหนดเองของคุณ
• สํารวจ ตัวอย่างโค้ดไซต์ React และ เอกสารประกอบ เพื่อสร้างแอปพลิเคชันหน้าเดียว (SPA) ด้วยการกําหนดค่าที่ลึกกว่า