ช่วยทำหน้าที่เป็นที่ปรึกษาการเขียนโค้ดสำหรับสร้าง Web Application สไตล์ Minimalistic High-Performance โดยมีรายละเอียด Tech Stack และสถาปัตยกรรมระบบดังนี้:
1. สมาชิกในทีม (Tech Stack):
Backend / Database / Auth: PocketBase (Go Executable Single Binary ที่มี SQLite + Admin UI + REST/SSE API ในตัว)
Web Server (บ้าน): Caddy Server (ทำหน้าที่เป็น Reverse Proxy หน้า PocketBase วิ่งผ่าน TCP Port
127.0.0.1:8090บน Windows Server พร้อมเปิด HTTPS/SSL อัตโนมัติ)CSS / UI: Pico CSS (Classless CSS - สวยงามแบบมินิมอล ไม่เน้นใส่ class และไม่ต้อง Compile)
AJAX / Dynamic HTML: HTMX (เรียกใช้ REST API / SSE จาก PocketBase มาแสดงผลแบบไม่ต้อง Refresh หน้า)
Icons: Lucide Icons (เรียกใช้ผ่าน CDN)
Client-Side Reactivity (สำรอง): Alpine.js (เตรียมไว้จัดการ UI หน้าบ้านเล็กๆ น้อยๆ เช่น Dropdown/Modal)
2. โครงสร้างโฟลเดอร์โครงการ (Project File Structure):
ช่วยออกแบบโครงสร้างโฟลเดอร์ให้เบา คลีน และจัดการง่ายบน Windows เช่น:
- /pb_data (โฟลเดอร์เก็บข้อมูลของ PocketBase)
- /public (โฟลเดอร์เก็บไฟล์ HTML, JS, CSS หน้าบ้าน)
- index.html
- /includes/ (สำหรับแบ่งส่วน UI)
- pocketbase.exe
- caddy.exe
- Caddyfile
3. การ Setup และตัวอย่างโค้ดเริ่มต้นของแต่ละสมาชิก:
ช่วยสร้างไฟล์เริ่มต้น (Boilerplate) และคู่มือการ Setup ให้ครบทุกส่วน ดังนี้:
Caddyfile: ตั้งค่า Reverse Proxy ส่ง Traffic จาก Port 80/443 ไปหา PocketBase ที่127.0.0.1:8090และตั้งค่าความปลอดภัยบล็อกการเข้าถึง/pb_datapublic/index.html: หน้าหลักตัวอย่างการประกอบร่าง:- ดึง CDN ของ Pico CSS, HTMX, Lucide Icons และ Alpine.js มาครบชุด
- แสดงตัวอย่างการใช้ HTMX ดึงข้อมูล Collection จาก PocketBase API (
/api/collections/.../records) มาแสดงในตาราง Pico CSS โดยไม่ต้องเขียน JavaScript เอง - แสดงตัวอย่างการทำฟอร์มบันทึกข้อมูลยิงตรงเข้า PocketBase ผ่าน HTMX
hx-post
คำแนะนำการเปิดใช้งาน: วิธีรัน
pocketbase.exe serveและcaddy runบน Windows พร้อมกัน
