เบื้องหลัง25 min
ViberQC — คู่มือเข้าใจ AI QC Platform ฉบับทีมพัฒนา
เข้าใจ ViberQC ตั้งแต่ Business Model, Scan Engine, Architecture จนถึง Database — คู่มือฉบับเต็มสำหรับทีมที่จะเข้ามาพัฒนาต่อ
T
The Fleet - One Man Fleet
Founder & Creator
Loading...
Loading...
เข้าใจ ViberQC ตั้งแต่ Business Model, Scan Engine, Architecture จนถึง Database — คู่มือฉบับเต็มสำหรับทีมที่จะเข้ามาพัฒนาต่อ
เราเล่าจากการทดลองจริงในแล็บ ไม่ใช่ทฤษฎี — และให้หลักฐานพูดแทน
จุดเจ็บ: การตรวจคุณภาพใช้คนเยอะ น่าเบื่อ และพลาดง่ายตอนใกล้เส้นตาย ทีมเล็กยิ่งตรวจตามไม่ทัน
เดิมพัน: ของพังที่หลุดถึงมือผู้ใช้ ทำลายความเชื่อมั่นที่สร้างมานาน และแก้ทีหลังแพงกว่าหลายเท่า
สิ่งที่เราทำในแล็บ: เข้าใจ ViberQC ตั้งแต่ Business Model, Scan Engine, Architecture จนถึง Database — คู่มือฉบับเต็มสำหรับทีมที่จะเข้ามาพัฒนาต่อ
คู่มือเข้าใจ Product ตั้งแต่ Business Model ถึง Database Schema — สำหรับทีมที่จะเข้ามาพัฒนาต่อ
QC เว็บไซต์ครบทุกด้าน ตั้งแต่ Performance, Security, SEO จนถึง Accessibility — ปกติต้องใช้ 4-5 เครื่องมือแยกกัน ใช้เวลารวมหลายชั่วโมง ViberQC รวมทุกอย่างไว้ที่เดียว ใส่ URL กด Scan ได้ผลลัพธ์ครบ 8 ด้าน พร้อมคำแนะนำจาก AI ใน 3 นาที
คิดง่ายๆ คือ Google Lighthouse ที่ครอบคลุมกว่า (8 ด้าน vs 4 ด้าน) + มี AI ช่วยวิเคราะห์ + แชร์ผลได้ทันที + มี Dashboard ติดตามคุณภาพตลอด
URL → Scan → Report → Share ภายใน 3 นาที — North Star Metric ของ ViberQC คือ Time-to-First-Value ต้องต่ำกว่า 3 นาที
ทุกทีมพัฒนาเจอปัญหาเดียวกัน — ไม่รู้จะ QC อะไรบ้าง ต้องใช้หลายเครื่องมือ ผลลัพธ์ไม่มีคำแนะนำ แล้วก็ไม่มี report ส่งลูกค้าได้ทันที
| กลุ่ม | ใคร | Pain Point | ต้องการอะไร |
|---|---|---|---|
| Primary | QA/QC Engineer | ไม่รู้จะเทสต์อะไร ยังไง | Checklist + AI วิเคราะห์ |
| Secondary | Product Owner | อยากเห็นภาพรวม QC ทั้งหมด | Dashboard + Report |
| Decision Maker | CTO / Tech Lead | ลดเวลา QC ลดต้นทุน | ROI + Automation |
รายได้มาจาก 3 ช่องทาง — Subscription (หลัก), API Access (ต่อ call), และ Enterprise (custom deal) โมเดลออกแบบให้ Free tier ดึงคนเข้ามา → เห็นคุณค่า → อัปเกรดเอง
ส่วนลดรายปี 33% — จ่าย 8 เดือน ได้ใช้ 12 เดือน
| Feature | ViberQC ✅ | Lighthouse | SonarQube | Wiz.io |
|---|---|---|---|---|
| ครอบคลุม | 8 phases ครบ | 4 phases | Code only | Security only |
| AI แนะนำ | ✅ | ❌ | ❌ | ✅ |
| แชร์ผลได้ | ✅ + OG preview | ❌ | ❌ | ✅ |
| Free tier | ✅ | ✅ | ✅ | ❌ |
| QC Badge | ✅ SVG | ❌ | ❌ | ❌ |
| ภาษาไทย | ✅ | ❌ | ❌ | ❌ |
ViberQC ชนะ Lighthouse ที่ความครอบคลุม (8 vs 4 ด้าน) + AI + แชร์ได้ — ชนะ SonarQube/Wiz ที่ Free tier + ภาษาไทย
User Journey ออกแบบให้เกิด Viral Loop — คนเห็นผลลัพธ์บน Social → มา Scan เอง → แชร์ผลกลับไป → คนใหม่เห็นอีก วน loop ไม่รู้จบ ที่สำคัญคือ ไม่ต้อง Login ก็ Scan ได้ทันที
ทุกขั้นตอนออกแบบมาให้ ลดแรงเสียดทาน — ไม่ต้อง signup ก่อน Scan, ผล Scan มี OG image preview พร้อมแชร์, ล็อค detail บางส่วนเพื่อดึงให้ signup
ทุกครั้งที่ user แชร์ผล Scan คือการทำ marketing ให้ฟรี — วน loop ไม่รู้จบ
หลักการเลือก stack คือ "เสถียร + AI" — ไม่ได้เลือกของใหม่เพราะเท่ แต่เลือกของที่ Cursor/Claude เขียนได้ถูกต้องมากที่สุด เพราะ codebase ส่วนใหญ่สร้างด้วย Vibe Code
| Library | หน้าที่ | ทำไมเลือก |
|---|---|---|
| Next.js 16 | Framework | Full-stack ใน project เดียว, Server Components |
| shadcn/ui v4 | UI Components | ไม่ lock-in, copy code ได้, customize 100% |
| Drizzle ORM | Database | Type-safe, lightweight, SQL-like syntax |
| NextAuth v5 | Auth | Google/GitHub/Email พร้อม, integrate Drizzle ได้ |
| Zustand | State | เบา 1KB, ไม่ต้อง boilerplate, ง่ายกว่า Redux |
| Stripe | Payment | มาตรฐานโลก, subscription + webhook ครบ |
| Framer Motion | Animation | API ง่าย, layout animation, exit animation |
Primary: #5A52D5 (Electric Purple) · Dark BG: #0F0B2E (Deep Purple) · Fonts: Sarabun (ไทย) + Inter (EN)
ทุกอย่างอยู่ใน Next.js project เดียว — ไม่มี microservice แยก ทำให้ deploy ง่าย maintain ง่าย เหมาะกับทีมเล็ก แต่ออกแบบ API layer ไว้รองรับการแยกในอนาคต
ทุกอย่างอยู่ใน Next.js project เดียว — ไม่มี microservice ไม่ต้อง deploy หลายที่ เหมาะกับทีมเล็กที่ต้องเคลื่อนตัวเร็ว
Zustand (1KB) จัดการ scan progress ฝั่ง client — TanStack Query จัดการ server state + data caching ทั้งหมด ไม่มี Redux เพราะ overkill สำหรับ project ขนาดนี้
Scan Engine เป็นระบบ rules-based — ไม่ต้องพึ่ง AI ก็ scan ได้ AI เป็นส่วนเสริมที่ช่วยวิเคราะห์และให้คำแนะนำ โค้ดหลักอยู่ที่ orchestrator.ts (1,394 บรรทัด — ต้อง refactor แยกย่อย)
| Score | ระดับ | สี |
|---|---|---|
| 90-100 | Excellent | 🟢 เขียว |
| 70-89 | Good | 🟡 เขียวอ่อน |
| 50-69 | Average | 🟠 เหลือง |
| 30-49 | Poor | 🟠 ส้ม |
| 0-29 | Critical | 🔴 แดง |
ใช้ PostgreSQL + Drizzle ORM — type-safe ตั้งแต่ schema ถึง query ไม่ต้องเขียน raw SQL schema ทั้งหมดอยู่ที่ lib/db/schema.ts (~300 บรรทัด)
| Table | หน้าที่ | Fields หลัก |
|---|---|---|
| accounts | OAuth accounts (Google/GitHub) | provider, providerAccountId, access_token |
| sessions | User sessions | sessionToken, expires |
| subscriptions | Stripe subscriptions | stripeId, plan, status (active/canceled) |
| reports | Generated reports | scanId, format (PDF/Web), shareUrl |
| badges | QC badge SVG | projectId, score, svg |
| waitlist | Newsletter signup | email, source |
| verification_tokens | Email verification | token, expires |
ใช้ Next.js App Router structure มาตรฐาน — แบ่ง route groups เป็น (marketing), (auth), (app) ตาม access level Component แยก folder ตามหน้าที่ชัดเจน
| ไฟล์ | ทำอะไร | ขนาด |
|---|---|---|
| lib/scan/orchestrator.ts | Scan Engine — หัวใจทั้งหมด | 1,394 บรรทัด ⚠️ |
| lib/db/schema.ts | Database schema 11 tables | ~300 บรรทัด |
| lib/auth.ts | NextAuth config (OAuth) | ~150 บรรทัด |
| config/site.ts | Plans, pricing, scan phases | ~75 บรรทัด |
| data/checklist.ts | 163 QC checklist items | ~500 บรรทัด |
orchestrator.ts (1,394 บรรทัด) ควรแยกเป็นไฟล์ย่อยต่อ phase · checklist-tab.tsx (812 บรรทัด) ควรแยก sub-components · overview-tab.tsx (524 บรรทัด) ควรแยก chart components
orchestrator.ts 1,394 บรรทัด คือหัวใจของ product — ถ้าจะ refactor ควรแยกเป็น 1 ไฟล์ต่อ 1 phase เพื่อให้ทีมแก้แต่ละด้านได้อิสระ
Phase 0-6 เสร็จครบ — Foundation, Design System, Pages, Integration, Polish, DB Setup, Launch Prep ทั้งหมดพร้อม เหลือ Phase 7 (Testing) กับ Phase 8 (Production Deploy) ที่ยังไม่ได้เริ่ม
Project setup, folder structure, config
shadcn/ui + theme + color palette
21 หน้าเว็บ (Marketing + Auth + App)
DB + Auth + Scan Engine + Payment
Animation + Loading states + Error handling
11 tables + SEO + robots.txt + sitemap + Sentry
Unit tests + Integration tests + E2E + Cross-browser + Mobile
Vercel + Domain + SSL + Production DB + Stripe production keys
| Issue | ไฟล์ | รายละเอียด |
|---|---|---|
| ⚠️ ไฟล์ใหญ่เกิน | orchestrator.ts | 1,394 บรรทัด → ควร refactor แยกต่อ phase |
| ⚠️ ไฟล์ใหญ่เกิน | checklist-tab.tsx | 812 บรรทัด → ควรแยก sub-components |
| ⚠️ i18n ปิดอยู่ | middleware.ts | next-intl รอ [locale] structure |
| ⚠️ ไม่มี Test | ทั้ง project | ยังไม่มี test ใดๆ เลย |
| ⚠️ Uncommitted | 80+ files | ต้อง commit/push ก่อนทีมเข้ามา |
Phase 0-6 ครบ ทีมเข้ามาต่อได้เลย — เริ่มจาก Unit Test ของ Scan Engine
ต้องการแค่ Node.js 18+ กับ PostgreSQL — clone repo, ใส่ env, push schema, รัน dev server ก็เริ่มได้เลย
Clone repo แล้วรัน npm install — dependencies ทั้งหมดจะถูกติดตั้ง
Copy จาก .env.example แล้วใส่ค่าจริง — DATABASE_URL, NEXTAUTH_SECRET, OAuth credentials
รัน npx drizzle-kit push — Drizzle จะสร้าง 11 tables ใน PostgreSQL ให้อัตโนมัติ
npm run dev → เปิด http://localhost:6161 — พร้อมพัฒนาต่อได้ทันที
ไม่ต้องอ่าน code ทั้งหมด เปิด Cursor แล้วให้ AI สรุปไฟล์สำคัญทีละไฟล์ เข้าใจ architecture ได้ภายใน 30 นาที
| Variable | ต้องมี? | คำอธิบาย |
|---|---|---|
| DATABASE_URL | ✅ | PostgreSQL connection string |
| NEXTAUTH_URL | ✅ | URL ของ app (http://localhost:6161) |
| NEXTAUTH_SECRET | ✅ | Random string 32+ chars |
| GOOGLE_CLIENT_* | ✅ | Google OAuth ID + Secret |
| GITHUB_CLIENT_* | ✅ | GitHub OAuth ID + Secret |
| STRIPE_* | ✅ | Stripe Secret Key + Webhook Secret |
| ANTHROPIC_API_KEY | Optional | Claude AI (primary) |
| OPENAI_API_KEY | Optional | GPT AI (alternative) |
| SENTRY_DSN | Optional | Error tracking |
เปิด Cursor แล้วสั่ง AI:
อ่าน lib/scan/orchestrator.ts แล้วสรุปให้ว่า Scan Engine ทำงานยังไง แต่ละ phase ตรวจอะไรบ้าง มี function อะไรบ้างที่สำคัญ
อ่าน lib/db/schema.ts แล้วสรุป ER diagram ของทั้ง 11 tables ว่าเชื่อมกันยังไง
ไม่ต้องอ่าน code ทั้งหมดเอง — เปิด Cursor แล้วให้ AI สรุปไฟล์สำคัญทีละไฟล์ เข้าใจ architecture ได้ภายใน 30 นาที
Lighthouse ตรวจ 4 ด้าน (Performance, Accessibility, Best Practices, SEO) — ViberQC ตรวจ 8 ด้าน เพิ่ม Security, Code Quality, PWA และ Viber Specific ที่สำคัญคือ ViberQC มี AI ช่วยวิเคราะห์ แชร์ผลได้ มี Dashboard ติดตาม และรองรับภาษาไทย
Scan Engine เป็น rules-based — ทำงานได้โดยไม่ต้องมี AI API key AI เป็นส่วนเสริมที่ช่วยวิเคราะห์ผลลัพธ์และให้คำแนะนำเพิ่มเติม ถ้า API key หมดก็ scan ได้ปกติ แค่ไม่มีคำแนะนำจาก AI
เพราะรวม logic ทั้ง 8 phases ไว้ในไฟล์เดียว แนะนำให้แยกเป็น phases/security.ts, phases/performance.ts ฯลฯ — แต่ละไฟล์ export function ที่รับ HTML/headers แล้ว return score + issues ส่วน orchestrator เหลือแค่ orchestrate ว่า run phase ไหนบ้าง
เริ่มจาก Unit Test ของ Scan Engine ก่อน (เพราะเป็นหัวใจ product) — ทดสอบ score calculation, แต่ละ phase ว่า detect issues ถูกต้อง จากนั้นค่อยเขียน Integration Test สำหรับ Auth flow และ Payment flow
ออกแบบไว้ให้ deploy บน Vercel ได้เลย — ต้องตั้ง environment variables ทั้งหมดบน Vercel Dashboard, setup domain (viberqc.com), เปลี่ยน OAuth redirect URIs เป็น production URL, และใช้ Stripe production keys
ถ้าจะเริ่ม refactor orchestrator.ts ลองสั่ง AI:
อ่าน lib/scan/orchestrator.ts แล้วแยกแต่ละ phase ออกเป็นไฟล์ย่อย เช่น phases/security.ts, phases/performance.ts ให้ orchestrator เรียก function จากแต่ละไฟล์แทน
อัปเดตล่าสุด: มีนาคม 2026
Clone repo → ตั้ง env → npm run dev → เปิด Cursor แล้วให้ AI สรุป architecture — เริ่มต้นได้ภายใน 5 นาที
"Scan your website. Fix what matters. Ship with confidence."
สิ่งที่ได้ และหลักคิด
ของจริงที่เอาไปใช้ต่อได้ ไม่ใช่แค่ไอเดีย หลักคิดของเราคือทำให้เป็นระบบที่ทำซ้ำได้และไม่พึ่งความจำคน
อยากเห็นระบบแบบนี้ทำงานกับงานของคุณ — ดู ViberQC และลงชื่อรอรอบทดลองที่ onemanfleet.com
สมัครสมาชิก One Man Fleet เพื่อเข้าถึง Content, Template และ Community คุณภาพสูง
สมัครสมาชิก
หลาย Project บน Server เดียว ทีมหลายคน clone แยก กิน Disk มหาศาล → ใช้ Bare Repo + Worktree แชร์ .git เดียว ประหยัด Disk ~80% + wt helper script ทีมสร้าง worktree ได้ใน 30 วินาที
Blueprint สำหรับทีม Viber — AI สร้าง ทดสอบ และ Optimize โฆษณาอัตโนมัติ 6 Platforms ด้วย 9 AI Agents + Thompson Sampling เริ่มต้น ฿990/เดือน