FULL-STACK HANDBOOKเว็บแอป Full Stack
ล็อกอิน บันทึกรายการ ดู Dashboard และ Export CSV ได้จริง
ZENITYX · FULL-STACK TRACKHANDBOOK 01
จาก Master Prompt เดียว
สู่เว็บบัญชี Full Stack
ให้ Claude Desktop Code อ่านกฎ ค้นหา Skill วางแผน สร้าง เชื่อม Supabase ทดสอบ และ Deploy บน Cloudflare — โดยผู้เรียนยังคุมการติดตั้ง ข้อมูล และ Production ผ่าน Approval Gates
ไม่ต้องเขียนโค้ดจากศูนย์ไม่ส่ง Secret ใน Promptตรวจ URL จริงก่อนจบ
Code / Local / accounting-app
สร้างเว็บ “เงินเข้าเงินออก” ตั้งแต่เริ่มต้นจน Deploy เพื่อการเรียน...
✓ Load CLAUDE.md rules✓ Inspect workspace● Waiting at Gate S○ Build local app○ Apply RLS migration○ Deploy to Cloudflare
HUMAN APPROVAL REQUIREDSkill Install Gate
AI ค้นหาและเสนอ Skill ได้ แต่ยังติดตั้งหรือรัน third-party code ไม่ได้
LEARN BY SHIPPING
เรียนจบแล้วได้ของจริงกลับไป
ไม่ได้จบแค่หน้าเว็บสวย แต่ได้ระบบที่มีผู้ใช้ ฐานข้อมูล สิทธิ์เข้าถึง และขั้นตอนส่งขึ้นออนไลน์ที่ตรวจสอบได้
Database ที่แยกข้อมูลผู้ใช้
Supabase Auth + PostgreSQL + RLS ป้องกันข้อมูลข้ามบัญชี
Learning Deployment URL
Deploy ผ่าน Cloudflare Workers เพื่อการเรียน พร้อม Smoke Test และใช้เฉพาะข้อมูลจำลอง
Prompt System ที่ใช้ซ้ำได้
Global/Project CLAUDE.md, Skill Scout, Master Prompt, Gates และ Verify Checklist
SYSTEM MAP
หนึ่ง Prompt เดินทางผ่าน 4 ชั้น
ผู้เรียนไม่ต้องจำคำสั่งทุกตัว แต่ต้องเข้าใจว่าแต่ละบริการรับผิดชอบอะไร และข้อมูลสำคัญอยู่ตรงไหน
ผู้เรียน
กำหนดเป้าหมาย ตรวจแผน และอนุมัติจุดเสี่ยง
Claude Desktop Code
อ่าน CLAUDE.md เลือก Skills สร้างไฟล์ รันคำสั่ง ทดสอบ และรายงานหลักฐาน
Supabase
Auth, PostgreSQL และ RLS แยกข้อมูลของผู้ใช้
Cloudflare
Workers + Static Assets ส่งเว็บให้ผู้ใช้ทั่วโลก
หลักจำง่าย:Publishable key อยู่ใน Browser ได้เมื่อมี RLSSecret key ห้ามอยู่ใน Browser ทุกกรณี
THE 8-STEP LOOP
จาก Prompt ถึง Learning Deployment อย่างเป็นระบบ
ทุกขั้นมีผลลัพธ์ที่ต้องเห็นก่อนข้ามไปขั้นถัดไป
- 01Desktop
เปิด Code tab และเลือก Local Project root
- 02Rules
เปิดกฎด้วย /memory แล้วยืนยันสิ่งที่โหลดด้วย /context
- 03Skills
ให้ AI ทำ Skill Scout และหยุดที่ Gate S เมื่อจะติดตั้ง
- 04Prompt
ส่ง Master Prompt เดียวเพื่อเริ่ม Workflow
- 05Build
AI สร้าง UI, Logic, Migration และ Tests
- 06Connect
อนุมัติ target แล้วทดสอบ RLS แยก User A/B
- 07Verify
Typecheck, Lint, Tests, Build และ Dry Run
- 08Deploy
อนุมัติ Learning Deployment แล้ว Smoke Test URL จริง
SAFE AUTOMATION
AI ทำเร็วได้
แต่ 4 เรื่องนี้ต้องหยุด
“อัตโนมัติ” ที่ใช้งานจริง ไม่ใช่การกดอนุญาตทุกอย่าง แต่คือให้ Agent เดินงานต่อเองและหยุดเฉพาะจุดที่ติดตั้ง third-party code หรือกระทบบัญชี ข้อมูล และ Production
SKILL GATE
ก่อนติดตั้งของใหม่
ตรวจ Source, Scope, Scripts, Hooks, MCP และชื่อซ้ำก่อนอนุมัติ
CREDENTIAL GATE
ก่อนเชื่อมบัญชี
ผู้เรียน Login เอง และ AI ตรวจเพียงสถานะโดยไม่พิมพ์ Token
DATABASE GATE
ก่อน Apply Migration
ดู SQL diff, RLS, Project Ref และผล Dry Run ก่อนแตะ Remote DB
PRODUCTION GATE
ก่อน Deploy จริง
ตรวจ Tests, Build, Target และ Secrets แล้วค่อยอนุมัติ Production
RECOMMENDED TEACHING FORMAT
ออกแบบเป็น Workshop 2 วัน
วันแรกสร้างและเข้าใจระบบใน Local วันที่สองเชื่อม Dev services และตรวจ Learning Deployment เหมาะกับผู้เริ่มต้นมากกว่าการเร่งทุกอย่างให้จบภายในวันเดียว
จาก Prompt สู่ Local Full-Stack App
- เข้าใจ Frontend / Backend / Database แบบภาษาคน
- เปิด Claude Desktop Code และวาง CLAUDE.md สองระดับ
- ทำ Skill Scout, Trust Review และ Gate S
- สร้าง UI, Auth flow และ Business Logic
- ตรวจ Migration, RLS และ Tests ก่อนต่อระบบจริง
จาก Local สู่ Supabase + Cloudflare
- เชื่อมบัญชีภายใต้ Credential Gate
- Apply Migration และทดสอบข้อมูลข้ามผู้ใช้
- Production Build, Wrangler Dry Run และ Learning Deployment
- Smoke Test, Rescue Prompt และการแก้ระบบต่อเอง
ผู้เรียนที่มีพื้นฐานแล้ว
สามารถใช้หน้า Practice แบบ Self-paced หรือย่อเป็น Intensive 1-Day Lab โดยเตรียม Account และ Project ไว้ล่วงหน้า
SCOPE OF LEARNING
นี่คือระบบบันทึกรายรับ–รายจ่าย
ไม่ใช่ระบบบัญชีที่ผ่านการรับรอง
ใช้ข้อมูลจำลองในห้องเรียนเท่านั้น ก่อนใช้กับธุรกิจจริงต้องให้ผู้ทำบัญชีหรือผู้เชี่ยวชาญตรวจสอบ และเพิ่มระบบบัญชีคู่ เอกสารภาษี การปิดงวด Audit Log การอนุมัติ และแผนสำรองข้อมูล
READY TO BUILD?