สถาปัตยกรรม — เขียนด้วยอะไร ต่อกับ SharePoint อย่างไร

1 · เขียนด้วยอะไร

ส่วน	ภาษา / เฟรมเวิร์ก	เวอร์ชันที่ใช้จริง
ส่วนที่ติดตั้งใน SharePoint web part + extension	TypeScript + React บน SharePoint Framework (SPFx)	SPFx 1.23.2 · React 17.0.1 · TypeScript 5.8 · Node 22
หน้า admin เว็บแยก ไม่ได้อยู่ใน SharePoint	TypeScript + React + Vite · ล็อกอินด้วย MSAL · จัดการข้อมูลด้วย TanStack Query	React 19 · Vite 8 · MSAL 5
โค้ดที่ใช้ร่วมกัน	TypeScript ล้วน ไม่อ้างอิงไลบรารีของ SharePoint เลย	โครงเนื้อหา · โครงฟอร์ม · กัน XSS · กรองตามแผนก · ธีม

ทำไม React คนละเวอร์ชัน — SPFx ตรึง React 17 ไว้กับตัวมันเอง ห้ามเปลี่ยน · ส่วนหน้า admin เป็นเว็บแยกจึงใช้รุ่นใหม่ได้อิสระ · โค้ดที่ใช้ร่วมกันจึงต้องไม่พึ่ง React ทั้งสองฝั่ง

2 · ต่อกับ SharePoint อย่างไร

ตอนติดตั้ง

// เครื่องนักพัฒนา
npm run build  →  gulp bundle --ship  →  gulp package-solution --ship
                                              ↓
                                    ntl-blocks.sppkg   (1 ไฟล์)
                                              ↓
                          อัปโหลดเข้า App Catalog ของ tenant → Deploy
                                              ↓
             ไฟล์ JavaScript ไปอยู่ใน /sites/appcatalog/ClientSideAssets
             web part โผล่ในกล่องเครื่องมือของทุก site ในองค์กร

ตั้งค่า skipFeatureDeployment: true ไว้ · หมายความว่าใช้ได้ทุก site ทันทีที่ deploy ไม่ต้องไปเพิ่มแอปทีละ site

ตอนใช้งาน

ผู้ดูแลแทรก web part ลงหน้าเว็บเหมือน web part ของ Microsoft ทุกประการ แล้วตั้งค่าผ่าน property pane เช่นเลือกโซนที่จะแสดง หรือกำหนดอายุ cache

ตัว	ชนิด	หน้าที่
ZoneBlock	web part	ประกอบหน้าจาก block 8 ชนิด · ฝัง block ตัวอื่นซ้อนได้
HtmlBlock	web part	แสดง HTML ของ slot เดี่ยว
FormBlock	web part	แสดงฟอร์มจาก schema และรับคำตอบ
QaBlock	web part	ถาม–ตอบที่ผ่านการอนุมัติแล้ว
AppLauncher	web part	กริดโปรแกรม กรองตามแผนกของผู้ใช้
SiteChrome	extension	แถบหัว–ท้ายทุกหน้าของ site + เก็บสถิติการใช้งาน

3 · ข้อมูลไหลอย่างไร

เส้นทางของคน เส้นทางของฟอร์มและงานอัตโนมัติ ที่เก็บข้อมูลและสถิติ

4 · อ่านแผนภาพเป็นประโยค

ขั้น	เกิดอะไรขึ้น	ใครทำ
1	ผู้ดูแลจัดหน้าในหน้า admin แล้วกดบันทึก	หน้า admin → Microsoft Graph
2	เนื้อหาถูกเก็บเป็นข้อมูลใน SharePoint List ไม่ใช่เป็นหน้าเว็บ	SharePoint
3	พนักงานเปิดหน้าเว็บ · web part อ่านข้อมูลด้วยสิทธิ์ของพนักงานคนนั้น	SPFx → SharePoint REST
4	ข้อมูลถูก cache ในเบราว์เซอร์ 60–300 วินาที เพื่อไม่ให้ระบบถูก throttle ตอนคนใช้พร้อมกันมาก	ฝั่งเบราว์เซอร์
5	เนื้อหาถูกกรองตามแผนกของผู้ใช้ก่อนแสดง · ไม่รู้แผนก = ไม่แสดงของที่จำกัดกลุ่ม	โค้ดที่ใช้ร่วมกัน
6	พนักงานส่งฟอร์ม → เขียนลง FormResponses → Power Automate แจ้งเมลผู้รับ	SPFx → SharePoint → Power Automate
7	คำถามที่ส่งมาต้องให้ผู้ดูแลอนุมัติก่อนถึงจะขึ้นหน้าเว็บ	หน้า admin
8	ทุกการเปิดหน้าถูกบันทึกเป็นสถิติเพื่อดูพฤติกรรมผู้ใช้จริง	SiteChrome → Application Insights

สามอย่างที่ออกแบบไว้ตั้งแต่ต้น และเป็นคำตอบให้ requirement ของลูกค้าโดยตรง

ทำงานด้วยสิทธิ์ของผู้ใช้เสมอ — ไม่มีบัญชีบริการที่มีสิทธิ์เหนือคน · ใครไม่มีสิทธิ์อ่าน list ก็ไม่เห็นข้อมูล แม้จะเปิดหน้าเดียวกัน
cache เพื่อรับมือช่วงพีค — REQ-005 ระบุ 4,000 คนพร้อมกันช่วง 8:25–9:00 น. · ถ้าทุก web part ยิงพร้อมกันทุกครั้งจะโดน throttle · ระบบจึง cache และลองใหม่อัตโนมัติเมื่อเจอ 429
เนื้อหาเป็นข้อมูล ไม่ใช่หน้าเว็บ — คัดลอกข้าม site ได้ และไม่ผูกกับ SharePoint ถาวร

5 · จุดที่ต้องรู้เวลาแก้ปัญหา

เรื่อง	รายละเอียด
แก้แล้วยังไม่เห็นผลทันที	cache อยู่ใน `sessionStorage` ของแท็บนั้น · กด F5 ไม่ล้าง ต้องเปิดแท็บใหม่หรือรอ TTL หมด · ตั้ง Cache = 0 ใน property pane ตอนสาธิตได้
Graph ใช้ทำอะไรบ้าง	ฝั่ง web part ใช้แค่ถาม `/me` เพื่อรู้แผนกของผู้ใช้ · การอ่านเนื้อหาทั้งหมดใช้ SharePoint REST ตรง ๆ
คอลัมน์ชนิด URL	Graph สร้างและเขียนไม่ได้ (400/500) · ต้องผ่าน SharePoint REST เท่านั้น · หน้า admin จึงถือ token สองใบ
พนักงานส่งฟอร์มไม่ได้ (403)	การส่งฟอร์มคือการเพิ่มรายการลง `FormResponses` · สิทธิ์ Read อย่างเดียวทำไม่ได้ · ต้องให้กลุ่มพนักงานได้ Contribute เฉพาะลิสต์นั้น (แยกสิทธิ์ลิสต์ออกจาก site ก่อน) ไม่ใช่ให้ Edit ทั้ง site · ทำครบทั้ง 4 site แล้วเมื่อ 26 ส.ค. 2026
ข้อความ error	โค้ดเราขึ้นภาษาไทยเสมอ · เห็นข้อความอังกฤษของ SharePoint แปลว่าพังก่อนโค้ดเราได้ทำงาน (ดู บันทึกเรื่อง guest access)