📘 คู่มือฉบับสร้างเองได้ทันที
OfficePro
คู่มือสร้างระบบบริหารงานด้วย AI

สอนวิธีคิด วิธีวางแผน และวิธีสั่ง AI เพื่อสร้างระบบบริหารงานสำนักงานของตัวเองตั้งแต่ศูนย์

🧠 วิธีคิดก่อนสร้าง
🛠️ เตรียมเครื่องมือ
✍️ Prompt ที่ใช้จริง
🚀 Deploy ฟรีตลอด
Version 1.0 — 2026

สารบัญ

11 บท — ตั้งแต่ "ยังไม่รู้จะทำอะไร" จนถึง "ระบบใช้งานได้จริง"

1
คิดก่อนสร้าง — วิเคราะห์ความต้องการ
2
รู้จักเครื่องมือ — AI + Database + Hosting
3
สมัครและตั้งค่าเครื่องมือทั้งหมด
4
ออกแบบโครงสร้างระบบของคุณ
5
วิธีสั่ง AI สร้างระบบ — Prompt Guide
6
สร้างฐานข้อมูลด้วยตัวเอง
7
Deploy และเผยแพร่ระบบ
8
ตั้งค่า Users & สิทธิ์การใช้งาน
9
เพิ่มฟีเจอร์ใหม่หลัง Launch
10
แก้ปัญหาที่พบบ่อย
★
Prompt Templates พร้อมใช้
บทที่ 1

คิดก่อนสร้าง

ระบบที่ดีเริ่มจากการถามตัวเองให้ถูกคำถาม ก่อนเปิด AI แม้แต่นาทีเดียว

ทำไมต้องคิดก่อน?

นักพัฒนามือใหม่มักรีบเปิด AI แล้วพิมพ์ว่า "สร้างระบบ HR ให้ด้วย" แล้วได้ผลลัพธ์ที่ใช้ไม่ได้จริง เพราะ AI ไม่รู้ว่าธุรกิจคุณทำอะไร มีกี่คน ปัญหาคืออะไร คุณต้องเป็นคนตอบคำถามเหล่านี้ก่อน

🧠 คำถาม 6 ข้อก่อนเริ่มสร้าง
1. ปัญหาที่ต้องการแก้คืออะไร?
เช่น: เอกสารหายบ่อย, ไม่รู้ว่าใครจองรถอยู่, สต็อกวัสดุไม่มีระบบ
2. มีคนใช้งานกี่คน? แบ่งกลุ่มยังไง?
เช่น: พนักงาน 20 คน, ผู้จัดการ 3 คน, IT Admin 1 คน
3. ฟีเจอร์ที่ "ต้องมี" มีอะไรบ้าง?
เขียน 3-5 ข้อสำคัญที่สุด ไม่ใช่ทุกอย่างที่อยากได้
4. ใครอนุมัติอะไรบ้าง?
เช่น: เบิกของ > หัวหน้าอนุมัติ, จองรถ > ผู้จัดการอนุมัติ
5. ข้อมูลอะไรที่ต้องเก็บ?
เช่น: ชื่อผู้แจ้ง, วันที่, สถานที่, สถานะงาน, ผู้รับผิดชอบ
6. ใช้งานบนอุปกรณ์ไหน?
มือถือ? คอมพิวเตอร์? หรือทั้งสอง — ส่งผลต่อการออกแบบ UI

ตัวอย่าง: วิเคราะห์ความต้องการก่อนสร้าง

❌ คิดแบบนี้ไม่ได้ผล
อยากได้ระบบ HR ที่ทันสมัย มีทุกอย่าง ใช้งานง่าย สวยงาม เหมือนบริษัทใหญ่ๆ
✅ คิดแบบนี้ได้ผลจริง
ปัญหา: พนักงานแจ้งซ่อมผ่าน Line แล้วหาย ต้องการ: ระบบแจ้งซ่อมที่มีสถานะ Open/Done และแจ้งเตือนอัตโนมัติ ผู้ใช้: 30 คน มือถือเป็นหลัก
💡 เคล็ดลับ

เริ่มจากปัญหาเดียวที่เจ็บปวดที่สุด ทำให้ดีก่อน แล้วค่อยขยาย ดีกว่าทำทุกอย่างพร้อมกันแล้วไม่เสร็จสักอย่าง

บทที่ 2

รู้จักเครื่องมือที่จะใช้

4 เครื่องมือ ฟรีทั้งหมด ทำงานร่วมกันเหมือนทีม

เครื่องมือบทบาทเปรียบเหมือน
🤖 Claude AIเขียนโค้ดทั้งหมดตามที่เราสั่งสถาปนิกและช่างก่อสร้าง
🗄️ Supabaseเก็บข้อมูลทั้งหมด + ระบบ Loginคลังเก็บของและประตูทางเข้า
☁️ Cloudflare PagesHosting เว็บไซต์ฟรีไม่จำกัดที่ดินและบ้านที่ทุกคนเข้าได้
📧 Resendส่ง Email อัตโนมัติไปรษณีย์ที่ส่งจดหมายให้เอง

ทำไมถึงเลือกเครื่องมือเหล่านี้?

💰
ฟรีทั้งหมด
ทุกเครื่องมือมี Free Plan ที่เพียงพอสำหรับองค์กรขนาดเล็ก-กลาง ไม่มีค่าใช้จ่ายซ่อนเร้น
🔗
เชื่อมกันได้ง่าย
ออกแบบมาให้ทำงานร่วมกัน มี SDK และ API ที่ Claude AI เข้าใจและเขียนโค้ดให้ได้ทันที
📈
ขยายได้ในอนาคต
Supabase รองรับถึง 500MB ฟรี และ Cloudflare ไม่จำกัด Bandwidth ขยายได้โดยไม่ต้องย้าย
🛡️
ปลอดภัยและเชื่อถือได้
Supabase ใช้ PostgreSQL มาตรฐาน Cloudflare เป็นบริษัทชั้นนำด้าน Security
ℹ️ ไฟล์เดียวแต่ทรงพลัง

ระบบที่สร้างด้วยวิธีนี้จะอยู่ในไฟล์ HTML ไฟล์เดียว ทำให้ Backup ง่าย แก้ไขสะดวก Deploy ได้ในไม่กี่วินาที

บทที่ 3

สมัครและตั้งค่าเครื่องมือ

ใช้เวลาประมาณ 20 นาที — สมัครครั้งเดียวใช้ได้ตลอด

ลำดับการสมัคร

1
สมัคร Supabase — ฐานข้อมูล
ไปที่ supabase.com → Sign Up ด้วย GitHub หรืออีเมล → สร้าง Project ใหม่ → เลือก Region ที่ใกล้ที่สุด (Singapore สำหรับไทย) → รอระบบสร้างประมาณ 2 นาที
2
บันทึก API Keys ของ Supabase
Settings → API → Copy "Project URL" และ "anon public key" เก็บไว้ในที่ปลอดภัย — นี่คือ "กุญแจ" ที่ใช้เชื่อมต่อระบบ ห้ามแชร์ให้ใคร
3
ปิด Email Confirmation
Authentication → Providers → Email → ปิด "Confirm email" → Save — มิฉะนั้นระบบจะส่งอีเมลยืนยันทุกครั้งที่มีคนสมัคร ยุ่งยากมาก
4
สมัคร Cloudflare — Hosting
ไปที่ cloudflare.com → Sign Up ด้วยอีเมล → ยืนยันอีเมล → เข้า Dashboard พร้อมใช้งาน
5
สมัคร Resend — ส่งอีเมล (ถ้าต้องการ)
ไปที่ resend.com → Sign Up → API Keys → Create API Key → Copy ไว้ทันที ระบบแสดงครั้งเดียว
⚠️ ความปลอดภัยของ API Keys

API Keys คือรหัสลับ อย่าโพสต์ใน Social Media อย่าแชร์ใน Chat สาธารณะ และอย่าใส่ใน Prompt ที่ส่งให้คนอื่นดู

บทที่ 4

ออกแบบโครงสร้างระบบ

วาด Blueprint ในหัวก่อน — AI จะเขียนโค้ดได้ตรงขึ้นมาก

โครงสร้างระบบบริหารงานทั่วไป

ระบบบริหารงานสำนักงาน
👥 การจัดการผู้ใช้
  • Login / Register
  • Role & สิทธิ์
  • โปรไฟล์พนักงาน
  • แผนก / สาขา
🎫 การแจ้งและติดตาม
  • แจ้งซ่อม / ร้องขอ
  • สถานะงาน
  • SLA Deadline
  • แจ้งเตือนอัตโนมัติ
📦 ทรัพยากร
  • รถยนต์บริษัท
  • ห้องประชุม
  • วัสดุ / สต็อก
  • ระบบอนุมัติ
📊 รายงานและภาพรวม
  • Dashboard KPI
  • ประวัติการใช้งาน
  • Export ข้อมูล
  • การแจ้งเตือน

เลือกเฉพาะที่ต้องการ

ไม่ต้องทำทุกอย่างในครั้งแรก เลือก 2-3 ฟีเจอร์ที่สำคัญที่สุดก่อน แล้วค่อยเพิ่มทีหลัง วิธีนี้ทำให้เสร็จเร็วและใช้งานได้จริงกว่า

🎯 กฎ MVP (Minimum Viable Product)

ทำน้อยที่สุดที่แก้ปัญหาได้จริง เช่น ถ้าปัญหาคือ "ไม่รู้ว่าใครแจ้งซ่อมอะไร" ทำแค่ระบบแจ้งซ่อมก่อน ไม่ต้องทำระบบจองรถพร้อมกัน

ตัวอย่าง: ออกแบบตารางฐานข้อมูล

ก่อนสั่ง AI ลองคิดว่าระบบต้องเก็บข้อมูลอะไรบ้าง:

ฟีเจอร์ข้อมูลที่ต้องเก็บ (Column)
แจ้งซ่อมหัวข้อ, ประเภท, ผู้แจ้ง, วันที่, สถานะ, ผู้รับผิดชอบ
จองรถรถที่จอง, วันที่, เวลา, จุดหมาย, ผู้จอง, สถานะ
สต็อกวัสดุชื่อสินค้า, จำนวน, หน่วย, ราคา, จุดสั่งซื้อ
ผู้ใช้งานชื่อ, อีเมล, บทบาท, แผนก, เบอร์โทร
บทที่ 5 — สำคัญที่สุด

วิธีสั่ง AI สร้างระบบ

Prompt ที่ดีไม่ใช่แค่ขอโค้ด — ต้องให้ Context ครบถ้วน

หลักการ 5 ข้อของ Prompt ที่ดี

1
บอก Context ก่อนเสมอ
อธิบายว่าระบบนี้สำหรับอะไร ใช้กับองค์กรแบบไหน มีคนใช้กี่คน AI จะได้เขียนได้ตรงกว่า
2
ระบุ Tech Stack ที่ใช้
บอกว่าใช้ Supabase, Cloudflare, ต้องการ HTML ไฟล์เดียว, Vanilla JavaScript ไม่ใช้ Framework — มิฉะนั้น AI อาจเลือก Tech ที่ Deploy ยากกว่า
3
บอก Constraint ที่สำคัญ
เช่น "ไม่ใช้ backtick ใน JavaScript" "ต้องรองรับมือถือ" "ภาษาไทยทั้งหมด" — สิ่งเหล่านี้ป้องกัน Error ที่พบบ่อย
4
ระบุฟีเจอร์เป็นรายการชัดเจน
อย่าบอกว่า "ทำให้ครบ" ให้ List ออกมาเป็นข้อๆ เช่น "1. Login 2. แจ้งซ่อม 3. Dashboard" AI จะทำตามลำดับ
5
ขอให้ตรวจ Syntax ก่อนส่ง
เพิ่ม "ตรวจสอบ JavaScript Syntax ก่อนส่ง" ในทุก Prompt — ลด Error ที่ทำให้ระบบพังได้มาก

Prompt Template — สร้างระบบครั้งแรก

PROMPT TEMPLATE — ปรับตามความต้องการของคุณ
ฉันต้องการสร้าง Web Application สำหรับ [อธิบายธุรกิจของคุณ] องค์กรมีพนักงานประมาณ [จำนวน] คน แบ่งเป็น [ประเภทผู้ใช้] เครื่องมือที่ใช้: - Supabase (URL และ Key ของฉันเอง) - Cloudflare Pages สำหรับ Hosting - ภาษา: HTML + JavaScript ไฟล์เดียว ฟีเจอร์ที่ต้องการ: 1. [ฟีเจอร์ที่ 1 — อธิบายละเอียด] 2. [ฟีเจอร์ที่ 2 — อธิบายละเอียด] 3. [ฟีเจอร์ที่ 3 — อธิบายละเอียด] ระบบสิทธิ์: - [Role 1]: ทำได้ [รายละเอียด] - [Role 2]: ทำได้ [รายละเอียด] - [Role Admin]: ทำได้ [รายละเอียด] เงื่อนไขสำคัญ: - ไฟล์ HTML เดียว ไม่ใช้ Framework ใดๆ - Vanilla JavaScript ห้ามใช้ backtick (``) - รองรับ Mobile (Responsive) - ภาษาไทยทั้งระบบ - ตรวจสอบ JavaScript Syntax ก่อนส่ง
📝 วิธีใช้ Template นี้
แทนที่ข้อความในวงเล็บ [ ] ด้วยข้อมูลจริงของคุณ ยิ่งละเอียดยิ่งได้ผลดี อย่าลืมใส่ Supabase URL และ Key จริงของคุณที่ได้จากขั้นตอนก่อนหน้า

Prompt Template — เพิ่มฟีเจอร์ใหม่

PROMPT TEMPLATE — ต่อยอดจากระบบที่มี
ระบบปัจจุบันทำงานได้ดีแล้ว ต้องการเพิ่มฟีเจอร์ใหม่: ฟีเจอร์ที่ต้องการเพิ่ม: [อธิบายฟีเจอร์อย่างละเอียด] พฤติกรรมที่ต้องการ: - เมื่อ [เหตุการณ์] → ระบบ [ทำอะไร] - ผู้ใช้ [Role] สามารถ [ทำอะไร] - ข้อมูลที่ต้องเก็บ: [รายการ] ข้อจำกัด: - แก้เฉพาะส่วนที่จำเป็น ไม่แก้ส่วนอื่น - บอก SQL ที่ต้องรันเพิ่มด้วย (ถ้ามี) - ตรวจ Syntax ก่อนส่งเสมอ

Prompt Template — แก้ Bug

PROMPT TEMPLATE — เมื่อเกิด Error
เกิด Error ในระบบดังนี้: Error Message: [วาง Error ที่เห็นใน Console ทั้งหมด] สิ่งที่ทำก่อนเกิด Error: [อธิบายขั้นตอนที่ทำ เช่น "กดปุ่มบันทึก แล้ว Error ขึ้น"] สิ่งที่คาดหวัง: [ต้องการให้ระบบทำอะไร] ช่วยหาสาเหตุ อธิบายว่าเกิดอะไรขึ้น และแก้ไข
บทที่ 6

สร้างฐานข้อมูล

ให้ AI ช่วยสร้าง SQL Script แล้วรันเองใน Supabase

วิธีขอ SQL Script จาก AI

PROMPT — ขอ SQL Script สร้างตาราง
ช่วยเขียน SQL Script สำหรับ Supabase PostgreSQL สร้างตารางสำหรับ [ชื่อฟีเจอร์] ที่มีข้อมูล: - [ข้อมูล 1] ประเภท [text/number/date] - [ข้อมูล 2] ประเภท [text/number/date] - [ข้อมูล 3] ประเภท [text/number/date] ต้องการ: 1. สร้างตารางพร้อม Primary Key 2. เปิด Row Level Security 3. สร้าง Policy ให้ทุก Role อ่าน-เขียนได้ 4. ลงท้ายด้วย: notify pgrst, 'reload schema';
📝 วิธีรัน SQL
Supabase Dashboard → SQL Editor → New query → วาง SQL → กด Run — ต้องขึ้น "Success. No rows returned"
⚠️ อย่าลืม Reload Schema

หลังรัน SQL ทุกครั้ง ต้องรัน notify pgrst, 'reload schema'; ตามด้วย Refresh หน้าเว็บ มิฉะนั้นจะขึ้น Error "column not found"

บทที่ 7

Deploy และเผยแพร่ระบบ

Upload ไฟล์ขึ้น Cloudflare Pages — ฟรีตลอดชีพ ไม่จำกัด Bandwidth

ขั้นตอน Deploy

1
Login Cloudflare
dash.cloudflare.com → Workers & Pages
2
สร้าง Project ใหม่
Create application → Pages → Direct Upload → ตั้งชื่อ Project
3
เตรียมไฟล์
สร้าง Folder → วางไฟล์ HTML → Rename เป็น index.html (สำคัญมาก)
4
Upload Folder
ลาก Folder ทั้งอันวางในช่อง Upload (ต้องลาก Folder ไม่ใช่ไฟล์เดี่ยว)
5
Deploy!
Save and Deploy → รอ 10-30 วินาที → ได้ URL ใช้งานได้ทันที
💡 การ Update ครั้งต่อไป

Project → Create deployment → ลาก Folder ใหม่วาง → Save and Deploy — URL เดิมไม่เปลี่ยน

บทที่ 8

ตั้งค่า Users & สิทธิ์

จัดการว่าใครเห็นอะไรและทำอะไรได้บ้าง

ระบบ Role ที่แนะนำ

👁️
viewer
• ดูข้อมูล
• สร้าง Request
• เห็นเฉพาะงานตัวเอง
🧑‍💼
staff
• ดูข้อมูลทั้งหมด
• จัดการ Inventory
• สร้าง Checklist
👔
admin
• รับงาน
• ส่งคำขออนุมัติ
• ดูรายงาน
🛡️
superadmin
• อนุมัติทุกอย่าง
• จัดการ Users
• ตั้งค่าระบบ
ℹ️ วิธีตั้งค่า Role ครั้งแรก

สมัครผ่านแอพ → ไปที่ Supabase Table Editor → ตาราง profiles → แก้ column role ของบัญชีตัวเองเป็น superadmin → Logout & Login ใหม่

Prompt: ขอให้ AI ออกแบบระบบสิทธิ์

PROMPT — ออกแบบ Role & Permission
ระบบมี Role ดังนี้: - viewer: [อธิบายว่าคือใคร ทำอะไรได้] - staff: [อธิบายว่าคือใคร ทำอะไรได้] - admin: [อธิบายว่าคือใคร ทำอะไรได้] - superadmin: ทำได้ทุกอย่าง ช่วยเพิ่ม Logic ในระบบว่า: - เมนูไหนแสดงให้ Role ไหนเห็น - ปุ่มไหน Role ไหนกดได้ - ข้อมูลไหน Role ไหนดูได้
บทที่ 9

เพิ่มฟีเจอร์ใหม่หลัง Launch

ระบบที่ดีเติบโตตามความต้องการจริง ไม่ใช่ทำทุกอย่างตั้งแต่แรก

Framework การเพิ่มฟีเจอร์

1
ระบุปัญหาหรือความต้องการ
ผู้ใช้บ่นว่าอะไร? มีขั้นตอนไหนที่ยังทำมือ? อะไรที่ทำให้งานช้า?
2
คิดว่า Database ต้องเพิ่มอะไร
ฟีเจอร์ใหม่ต้องการตารางใหม่ไหม? หรือแค่เพิ่ม Column ในตารางเดิม?
3
สั่ง AI ทีละขั้น
รัน SQL ก่อน → แล้วค่อยขอให้ AI เพิ่มฟีเจอร์ในไฟล์ HTML
4
ทดสอบก่อน Deploy
เปิดไฟล์ใน Browser ก่อน ถ้าใช้ได้แล้วค่อย Deploy ขึ้น Cloudflare
💡 Backup ก่อนแก้เสมอ

Download ไฟล์ HTML เก็บไว้ก่อนทุกครั้งที่จะแก้ไข ถ้าเกิดปัญหาจะได้ย้อนกลับได้ทันที

บทที่ 10

แก้ปัญหาที่พบบ่อย

ปัญหาส่วนใหญ่แก้ได้ใน 5 นาที ถ้ารู้วิธี

อาการสาเหตุวิธีแก้
Error 400 เวลาบันทึกColumn ยังไม่มีใน Databaseรัน SQL เพิ่ม Column แล้วรัน notify pgrst, 'reload schema';
หน้าจอหมุนไม่หยุดJavaScript ErrorF12 → Console → Copy Error → ให้ Claude แก้
Deploy แล้วขึ้น 404ไฟล์ไม่ได้ชื่อ index.htmlRename ไฟล์ HTML เป็น index.html แล้ว Deploy ใหม่
Login แล้วไม่มีสิทธิ์Role ยังเป็น viewerSupabase → profiles → แก้ role → Logout & Login ใหม่
Email ส่งไม่ได้API Key ผิดหรือ Edge Function ยังไม่ Deployตรวจ Resend API Key และ Supabase Edge Functions

วิธีอ่าน Error จาก Console

1
กด F12 เพื่อเปิด Developer Tools
หรือคลิกขวาที่หน้าเว็บ → Inspect
2
คลิกแท็บ Console
ดู Error สีแดงที่ขึ้น
3
Copy Error ทั้งหมด
Select All → Copy
4
วางใน Claude พร้อม Context
บอกด้วยว่าทำอะไรอยู่ก่อนเกิด Error และต้องการให้ระบบทำอะไร
ภาคผนวก

Prompt Templates พร้อมใช้

Copy และปรับตามความต้องการจริงของคุณ

🎫 ระบบแจ้งและติดตามงาน

PROMPT — ระบบ Ticket
สร้างระบบแจ้ง [ประเภทงาน เช่น แจ้งซ่อม / ร้องขอ] ที่มี: - ประเภทของการแจ้ง: [รายการ] - ระดับความเร่งด่วน: [รายการ เช่น ด่วน/ปกติ] - สถานะ: เปิด → กำลังดำเนินการ → เสร็จแล้ว - SLA: [จำนวน] ชั่วโมงสำหรับแต่ละประเภท - แจ้งเตือนผู้รับผิดชอบเมื่อมีงานใหม่ - ผู้แจ้งดูสถานะงานตัวเองได้

📦 ระบบจัดการสต็อก

PROMPT — ระบบ Inventory
สร้างระบบจัดการ [ประเภทสต็อก เช่น วัสดุสำนักงาน / อะไหล่] ที่มี: - รายการสินค้า: ชื่อ หน่วย จำนวน ราคา จุด Reorder - การเบิก: Staff ขอเบิก → [Role] อนุมัติ - การนำเข้า: บันทึกประวัติการนำเข้า - แจ้งเตือนเมื่อสต็อกต่ำกว่าจุด Reorder - รายงานมูลค่าสต็อกรวม

🚗 ระบบจองทรัพยากร

PROMPT — ระบบจอง
สร้างระบบจอง [ทรัพยากร เช่น รถยนต์ / ห้องประชุม / อุปกรณ์] ที่มี: - รายการ [ทรัพยากร] พร้อมสถานะว่าง/ไม่ว่าง - จองได้เฉพาะที่ว่างในช่วงเวลานั้น - ข้อมูลที่ต้องกรอก: [รายการ เช่น วันที่ เวลา วัตถุประสงค์] - [Role] อนุมัติการจองก่อนใช้งาน - ผู้จองได้รับแจ้งเตือนเมื่ออนุมัติ/ปฏิเสธ

📊 Dashboard KPI

PROMPT — Dashboard
สร้าง Dashboard แสดงภาพรวมที่มี: - จำนวนงานตามสถานะ: [รายการสถานะ] - งานที่ใกล้/เกิน SLA - [Metric อื่นๆ ที่สำคัญ] - รายการงานล่าสุด [จำนวน] รายการ - แสดงเฉพาะข้อมูลที่ [Role] มีสิทธิ์ดู
🎯 คำแนะนำสุดท้าย

Prompt ที่ดีที่สุดคือ Prompt ที่มาจากความเข้าใจปัญหาจริงๆ ก่อนสั่ง AI ใช้เวลา 10 นาทีเขียนสิ่งที่ต้องการออกมาบนกระดาษก่อน แล้วค่อยแปลงเป็น Prompt — ผลลัพธ์จะดีขึ้นมากครับ