กำลังโหลดเนื้อหา
Widget Mendix — ทำได้แค่ไหน?
Updates & Additions (1)
ใช่ — เข้าใจถูกต้องเลย นั่นคือพลังจริงๆ ของ Widget
---
## Widget = Browser App เต็มรูปแบบ
```
User คลิก
↓
Widget (React) → fetch("https://api.ธนาคาร.com/balance") → ได้ JSON
↓
ประมวลผลใน JS (คำนวณ, filter, transform)
↓
fetch("https://api.อื่น.com/update", { method: "POST", body: ... })
↓
แสดงผลใน Widget
```
**Mendix ไม่รู้เรื่องเลย** — ทำงานทั้งหมดใน Browser ของ user
---
## ตัวอย่างของจริงที่ทำได้
### 1. Dashboard ดึงข้อมูลจากหลาย API พร้อมกัน
```ts
const [balanceData, rateData, alertData] = await Promise.all([
fetch("https://core-banking/api/balance").then(r => r.json()),
fetch("https://fx-service/api/rates").then(r => r.json()),
fetch("https://monitoring/api/alerts").then(r => r.json())
]);
// render รวมกันใน Widget เดียว
```
### 2. กดปุ่ม → ดึง → ประมวล → ส่งกลับ
```ts
const handleApprove = async (loanId: string) => {
// 1. ดึง loan detail จาก core banking
const loan = await fetch(`https://mbase-api/loan/${loanId}`).then(r => r.json());
// 2. ดึง credit score จาก NCB
const credit = await fetch(`https://ncb-api/score/${loan.citizenId}`).then(r => r.json());
// 3. คำนวณใน Widget เลย
const approved = credit.score > 650 && loan.amount < 5_000_000;
// 4. POST กลับไป update ระบบ
await fetch(`https://mbase-api/loan/${loanId}/decision`, {
method: "POST",
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` },
body: JSON.stringify({ approved, decidedAt: new Date().toISOString() })
});
// 5. บอก Mendix ให้รู้ (optional)
props.onComplete?.execute();
};
```
### 3. WebSocket — Real-time ไม่ต้อง refresh
```ts
useEffect(() => {
const ws = new WebSocket("wss://streaming-api/transactions");
ws.onmessage = (event) => {
const tx = JSON.parse(event.data);
setTransactions(prev => [tx, ...prev].slice(0, 100));
};
return () => ws.close(); // cleanup เมื่อ widget unmount
}, []);
```
---
## สิ่งที่ต้องระวัง (ไม่ใช่ข้อจำกัด — แต่เป็นเรื่องที่ต้องจัดการเอง)
### 🔐 Auth Token — ต้องจัดการเอง
Mendix ไม่ inject token ของ external API ให้ ต้องเลือกวิธี:
```ts
// Option A: รับ token เป็น prop จาก Mendix (เก็บใน entity)
const token = props.apiToken.value;
// Option B: เรียก /oauth/token ก่อน แล้ว cache ใน useRef
const tokenRef = useRef<string>();
// Option C: ส่ง request ผ่าน Mendix backend แทน (ปลอดภัยกว่า)
```
### 🌐 CORS — กำแพงจริงอันเดียว
ถ้า API ปลายทางไม่ได้เปิด CORS header → Browser block ทันที
```
❌ fetch("https://internal-api-ที่ไม่ได้เปิด-cors.local/data")
→ CORS error — Widget ทำอะไรไม่ได้เลย
✅ วิธีแก้:
1. ให้ทีม API เพิ่ม Access-Control-Allow-Origin header
2. ส่งผ่าน Mendix backend เป็น proxy
3. ใช้ Mendix REST Proxy / API Gateway (เช่น Kong, F5)
```
### 🔒 Secret ไม่ควรอยู่ใน Widget
```ts
// ❌ อย่าทำ — user เปิด DevTools เห็นทันที
const API_KEY = "sk-prod-12345abcdef";
// ✅ ทำแบบนี้ — รับมาจาก Mendix entity ที่ control access ด้วย security
const apiKey = props.apiKey.value; // Mendix จัดการ role-based access
```
---
## สรุปให้ชัด
```
Widget ในบริบท Mendix = React App ที่ฝังอยู่ใน Mendix Page
มันแค่ "อาศัย" อยู่ใน Mendix
แต่ไม่ได้ถูก Mendix จำกัดในการสื่อสารกับโลกภายนอก
ทำได้ทุกอย่างที่ Browser ทำได้:
fetch / WebSocket / WebRTC / Canvas / Web Worker / ...
ข้อจำกัดเดียวที่ Browser บังคับ:
CORS — ถ้า server ปลายทางไม่อนุญาต → ทำไม่ได้
```