somsakul.com

ทดลองทำสิ่งต่างๆ ทั่วไป

prompt สร้างตำราทีมไร้พ่าย PHP

- Posted in บันเทิง by

ช่วยทำหน้าที่เป็นที่ปรึกษาการเขียนโค้ดสำหรับสร้าง 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 ให้ครบทุกส่วน ดังนี้:

  1. Caddyfile: ตั้งค่า Reverse Proxy ส่ง Traffic จาก Port 80/443 ไปหา PocketBase ที่ 127.0.0.1:8090 และตั้งค่าความปลอดภัยบล็อกการเข้าถึง /pb_data
  2. public/index.html: หน้าหลักตัวอย่างการประกอบร่าง:

    • ดึง CDN ของ Pico CSS, HTMX, Lucide Icons และ Alpine.js มาครบชุด
    • แสดงตัวอย่างการใช้ HTMX ดึงข้อมูล Collection จาก PocketBase API (/api/collections/.../records) มาแสดงในตาราง Pico CSS โดยไม่ต้องเขียน JavaScript เอง
    • แสดงตัวอย่างการทำฟอร์มบันทึกข้อมูลยิงตรงเข้า PocketBase ผ่าน HTMX hx-post
  3. คำแนะนำการเปิดใช้งาน: วิธีรัน pocketbase.exe serve และ caddy run บน Windows พร้อมกัน