ViberQC — คู่มือเข้าใจ AI QC Platform ฉบับทีมพัฒนา
เข้าใจ ViberQC ตั้งแต่ Business Model, Scan Engine, Architecture จนถึง Database — คู่มือฉบับเต็มสำหรับทีมที่จะเข้ามาพัฒนาต่อ
ViberQC — สแกนเว็บ 8 ด้าน ใน 3 นาที
คู่มือเข้าใจ Product ตั้งแต่ Business Model ถึง Database Schema — สำหรับทีมที่จะเข้ามาพัฒนาต่อ
ลดเวลา QC จากหลายชั่วโมง เหลือ 3 นาที — ViberQC ทำได้ยังไง?
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 นาที
Developer เจอปัญหาอะไร ถึงต้องมี ViberQC?
ทุกทีมพัฒนาเจอปัญหาเดียวกัน — ไม่รู้จะ QC อะไรบ้าง ต้องใช้หลายเครื่องมือ ผลลัพธ์ไม่มีคำแนะนำ แล้วก็ไม่มี report ส่งลูกค้าได้ทันที
❌ ก่อนมี ViberQC
- ใช้ 4-5 เครื่องมือแยก (Lighthouse + OWASP + axe + PageSpeed)
- ไม่มี checklist ครอบคลุม — ไม่รู้จะเทสต์อะไร
- ผลลัพธ์บอกว่าพัง แต่ไม่บอกวิธีแก้
- ต้อง screenshot ทำ slide เอง — เสียเวลาหลายชั่วโมง
✅ หลังมี ViberQC
- เครื่องมือเดียวครบ 8 ด้าน
- 163 checklist items พร้อมใช้
- AI วิเคราะห์ + ให้คำแนะนำเฉพาะจุด
- Report สำเร็จรูป แชร์ได้ทันที
กลุ่มเป้าหมายหลัก 3 กลุ่ม
| กลุ่ม | ใคร | Pain Point | ต้องการอะไร |
|---|---|---|---|
| Primary | QA/QC Engineer | ไม่รู้จะเทสต์อะไร ยังไง | Checklist + AI วิเคราะห์ |
| Secondary | Product Owner | อยากเห็นภาพรวม QC ทั้งหมด | Dashboard + Report |
| Decision Maker | CTO / Tech Lead | ลดเวลา QC ลดต้นทุน | ROI + Automation |
Business Model — SaaS ที่ออกแบบให้ Viral ได้ในตัว?
รายได้มาจาก 3 ช่องทาง — Subscription (หลัก), API Access (ต่อ call), และ Enterprise (custom deal) โมเดลออกแบบให้ Free tier ดึงคนเข้ามา → เห็นคุณค่า → อัปเกรดเอง
1 project
3 phases
ไม่มี Report/API
5 projects
8 phases ครบ
5 PDF + 100 API calls
20 projects
8 phases ครบ
Unlimited Report + 5 members
Unlimited projects
Unlimited members
Custom integration
ส่วนลดรายปี 33% — จ่าย 8 เดือน ได้ใช้ 12 เดือน
เทียบกับคู่แข่ง — ViberQC ชนะตรงไหน?
| 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 + ภาษาไทย
3-Minute Magic Flow — ทำไม User ถึง Scan แล้วแชร์ต่อเอง?
User Journey ออกแบบให้เกิด Viral Loop — คนเห็นผลลัพธ์บน Social → มา Scan เอง → แชร์ผลกลับไป → คนใหม่เห็นอีก วน loop ไม่รู้จบ ที่สำคัญคือ ไม่ต้อง Login ก็ Scan ได้ทันที
1. SEE
2. SCAN
(ไม่ต้อง login!)
3. WOW!
4. SHARE
5. LOCK
6. PAY
ทุกขั้นตอนออกแบบมาให้ ลดแรงเสียดทาน — ไม่ต้อง signup ก่อน Scan, ผล Scan มี OG image preview พร้อมแชร์, ล็อค detail บางส่วนเพื่อดึงให้ signup
Viral Loop ที่ออกแบบไว้
ทุกครั้งที่ user แชร์ผล Scan คือการทำ marketing ให้ฟรี — วน loop ไม่รู้จบ
Tech Stack — ทำไมเลือก "Boring but Lethal"?
หลักการเลือก stack คือ "เสถียร + community ใหญ่ + AI เขียนได้แม่น" — ไม่ได้เลือกของใหม่เพราะเท่ แต่เลือกของที่ Cursor/Claude เขียนได้ถูกต้องมากที่สุด เพราะ codebase ส่วนใหญ่สร้างด้วย Vibe Code
ทำไมเลือก Library แต่ละตัว?
| 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 |
🎨 Design System — Palette B: "AI Precision"
Primary: #5A52D5 (Electric Purple) · Dark BG: #0F0B2E (Deep Purple) · Fonts: Sarabun (ไทย) + Inter (EN)
System Architecture — ระบบทั้งหมดต่อกันยังไง?
ทุกอย่างอยู่ใน Next.js project เดียว — ไม่มี microservice แยก ทำให้ deploy ง่าย maintain ง่าย เหมาะกับทีมเล็ก แต่ออกแบบ API layer ไว้รองรับการแยกในอนาคต
ทุกอย่างอยู่ใน Next.js project เดียว — ไม่มี microservice ไม่ต้อง deploy หลายที่ เหมาะกับทีมเล็กที่ต้องเคลื่อนตัวเร็ว
State Management ที่เลือกใช้
Zustand (1KB) จัดการ scan progress ฝั่ง client — TanStack Query จัดการ server state + data caching ทั้งหมด ไม่มี Redux เพราะ overkill สำหรับ project ขนาดนี้
Scan Engine ทำงานยังไง? — หัวใจของ Product ทั้งหมด
Scan Engine เป็นระบบ rules-based — ไม่ต้องพึ่ง AI ก็ scan ได้ AI เป็นส่วนเสริมที่ช่วยวิเคราะห์และให้คำแนะนำ โค้ดหลักอยู่ที่ orchestrator.ts (1,394 บรรทัด — ต้อง refactor แยกย่อย)
Flow การ Scan
8 QC Phases — แต่ละด้านตรวจอะไร?
Security
Performance
Accessibility
Code Quality
SEO
Best Practices
PWA
Viber Specific
เกณฑ์ให้คะแนน
| Score | ระดับ | สี |
|---|---|---|
| 90-100 | Excellent | 🟢 เขียว |
| 70-89 | Good | 🟡 เขียวอ่อน |
| 50-69 | Average | 🟠 เหลือง |
| 30-49 | Poor | 🟠 ส้ม |
| 0-29 | Critical | 🔴 แดง |
Database — 11 Tables ที่ขับเคลื่อนทุกอย่าง?
ใช้ PostgreSQL + Drizzle ORM — type-safe ตั้งแต่ schema ถึง query ไม่ต้องเขียน raw SQL schema ทั้งหมดอยู่ที่ lib/db/schema.ts (~300 บรรทัด)
ดู Tables ที่เหลือทั้งหมด (7 tables)
| 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 |
Enums ที่ใช้ในระบบ
user_role
plan_type
scan_status
subscription_status
โครงสร้าง Folder — ไฟล์สำคัญอยู่ตรงไหน?
ใช้ Next.js App Router structure มาตรฐาน — แบ่ง route groups เป็น (marketing), (auth), (app) ตาม access level Component แยก folder ตามหน้าที่ชัดเจน
ดูโครงสร้าง Folder ทั้งหมด
├── app/ ← Next.js App Router
│ ├── (marketing)/ ← หน้า Public (ไม่ต้อง login)
│ │ ├── page.tsx ← Homepage
│ │ ├── pricing/, features/, blog/, contact/...
│ ├── (auth)/ ← Login, Register, Forgot Password
│ ├── (app)/ ← ★ Protected ★ ต้อง login
│ │ ├── dashboard/ ← Dashboard หลัก (5 tabs)
│ │ ├── projects/, history/, reports/, settings/
│ ├── api/ ← API Routes (13 routes)
│ │ ├── scan/ ← Scan Engine
│ │ ├── projects/, reports/, user/, auth/, badge/, og/
│ │ ├── webhook/stripe/ ← Stripe webhook
│ └── scan/ ← Public scan page (Magic Flow)
├── components/ ← 36 React Components
│ ├── ui/ ← shadcn/ui (15 components)
│ ├── dashboard/ ← Overview, Checklist, Tools, Prompt tabs
│ ├── scan/ ← Radar chart, Score gauge, Issues
│ └── marketing/ ← Hero, Features, Pricing
├── lib/ ← Core Logic
│ ├── scan/orchestrator.ts ← ★ Scan Engine (1,394 lines)
│ ├── ai/client.ts ← Multi-provider AI
│ ├── db/schema.ts ← Drizzle schema (11 tables)
│ └── auth.ts ← NextAuth config
├── config/ ← Plans, Pricing, Theme
└── data/ ← 163 Checklist items, 35 QC tools
ไฟล์สำคัญที่ต้องรู้จัก
| ไฟล์ | ทำอะไร | ขนาด |
|---|---|---|
| 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 บรรทัด |
⚠️ ไฟล์ที่ต้อง Refactor
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 เพื่อให้ทีมแก้แต่ละด้านได้อิสระ
Project Status — 78% เสร็จ ทีมต้องทำอะไรต่อ?
Phase 0-6 เสร็จครบ — Foundation, Design System, Pages, Integration, Polish, DB Setup, Launch Prep ทั้งหมดพร้อม เหลือ Phase 7 (Testing) กับ Phase 8 (Production Deploy) ที่ยังไม่ได้เริ่ม
Phase 0: Foundation ✅
Project setup, folder structure, config
Phase 1: Design System ✅
shadcn/ui + theme + color palette
Phase 2: Pages ✅
21 หน้าเว็บ (Marketing + Auth + App)
Phase 3: Integration ✅
DB + Auth + Scan Engine + Payment
Phase 4: Polish & UX ✅
Animation + Loading states + Error handling
Phase 5-6: DB + Launch Prep ✅
11 tables + SEO + robots.txt + sitemap + Sentry
Phase 7: Testing & QA ❌
Unit tests + Integration tests + E2E + Cross-browser + Mobile
Phase 8: Production Deploy ❌
Vercel + Domain + SSL + Production DB + Stripe production keys
สิ่งที่ทำเสร็จแล้ว
Known Issues ที่ต้องแก้
| 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 ก่อนทีมเข้ามา |
78% เสร็จ — เหลือ Testing + Deploy
Phase 0-6 ครบ ทีมเข้ามาต่อได้เลย — เริ่มจาก Unit Test ของ Scan Engine
วิธี Setup — เริ่มพัฒนาต่อได้ใน 5 นาที?
ต้องการแค่ Node.js 18+ กับ PostgreSQL — clone repo, ใส่ env, push schema, รัน dev server ก็เริ่มได้เลย
01Clone + Install
Clone repo แล้วรัน npm install — dependencies ทั้งหมดจะถูกติดตั้ง
02สร้าง .env.local
Copy จาก .env.example แล้วใส่ค่าจริง — DATABASE_URL, NEXTAUTH_SECRET, OAuth credentials
03Push Database Schema
รัน npx drizzle-kit push — Drizzle จะสร้าง 11 tables ใน PostgreSQL ให้อัตโนมัติ
04รัน Dev Server
npm run dev → เปิด http://localhost:6161 — พร้อมพัฒนาต่อได้ทันที
4 ขั้นตอน — Clone → Env → Schema → Dev
ไม่ต้องอ่าน code ทั้งหมด เปิด Cursor แล้วให้ AI สรุปไฟล์สำคัญทีละไฟล์ เข้าใจ architecture ได้ภายใน 30 นาที
ดู Environment Variables ทั้งหมด
| 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 Prompt สำหรับเริ่มพัฒนา
เปิด Cursor แล้วสั่ง AI:
อ่าน lib/scan/orchestrator.ts แล้วสรุปให้ว่า Scan Engine ทำงานยังไง แต่ละ phase ตรวจอะไรบ้าง มี function อะไรบ้างที่สำคัญ
อ่าน lib/db/schema.ts แล้วสรุป ER diagram ของทั้ง 11 tables ว่าเชื่อมกันยังไง
ไม่ต้องอ่าน code ทั้งหมดเอง — เปิด Cursor แล้วให้ AI สรุปไฟล์สำคัญทีละไฟล์ เข้าใจ architecture ได้ภายใน 30 นาที
FAQ — คำถามที่ทีมมักถามบ่อย
ViberQC ต่างจาก Google Lighthouse ยังไง?
Lighthouse ตรวจ 4 ด้าน (Performance, Accessibility, Best Practices, SEO) — ViberQC ตรวจ 8 ด้าน เพิ่ม Security, Code Quality, PWA และ Viber Specific ที่สำคัญคือ ViberQC มี AI ช่วยวิเคราะห์ แชร์ผลได้ มี Dashboard ติดตาม และรองรับภาษาไทย
Scan Engine ต้องใช้ AI ไหม? ถ้า API key หมดจะ scan ได้ไหม?
Scan Engine เป็น rules-based — ทำงานได้โดยไม่ต้องมี AI API key AI เป็นส่วนเสริมที่ช่วยวิเคราะห์ผลลัพธ์และให้คำแนะนำเพิ่มเติม ถ้า API key หมดก็ scan ได้ปกติ แค่ไม่มีคำแนะนำจาก AI
ทำไม orchestrator.ts ถึงใหญ่ 1,394 บรรทัด? ควร refactor ยังไง?
เพราะรวม logic ทั้ง 8 phases ไว้ในไฟล์เดียว แนะนำให้แยกเป็น phases/security.ts, phases/performance.ts ฯลฯ — แต่ละไฟล์ export function ที่รับ HTML/headers แล้ว return score + issues ส่วน orchestrator เหลือแค่ orchestrate ว่า run phase ไหนบ้าง
ยังไม่มี Test เลย — ควรเริ่มเขียนอะไรก่อน?
เริ่มจาก Unit Test ของ Scan Engine ก่อน (เพราะเป็นหัวใจ product) — ทดสอบ score calculation, แต่ละ phase ว่า detect issues ถูกต้อง จากนั้นค่อยเขียน Integration Test สำหรับ Auth flow และ Payment flow
Deploy ที่ไหน? ใช้ Vercel ได้เลยไหม?
ออกแบบไว้ให้ deploy บน Vercel ได้เลย — ต้องตั้ง environment variables ทั้งหมดบน Vercel Dashboard, setup domain (viberqc.com), เปลี่ยน OAuth redirect URIs เป็น production URL, และใช้ Stripe production keys
พร้อมเข้ามาพัฒนาต่อ?
Clone repo → ตั้ง env → npm run dev → เปิด Cursor แล้วให้ AI สรุป architecture — เริ่มต้นได้ภายใน 5 นาที
"Scan your website. Fix what matters. Ship with confidence."
ชอบบทความนี้ใช่ไหม?
สมัครสมาชิก Idea2Level เพื่อเข้าถึง Content, Template และ Community คุณภาพสูง
สมัครสมาชิกบทความที่เกี่ยวข้อง
AdsPilot AI — สร้าง AI ที่จัดการโฆษณาแทนคุณ ตั้งแต่สร้างจนถึง Optimize
Blueprint สำหรับทีม Viber — AI สร้าง ทดสอบ และ Optimize โฆษณาอัตโนมัติ 6 Platforms ด้วย 9 AI Agents + Thompson Sampling เริ่มต้น ฿990/เดือน
สร้าง idea2logic.com ด้วย AI — เปิดโครงสร้าง 30+ หน้า 40+ API ทั้งระบบ
สร้าง idea2logic.com ทั้งระบบด้วย AI — 30+ หน้า, 40+ API, 14 database tables ค่า server ไม่ถึง 1,000 บาท/เดือน บทความนี้เปิดโครงสร้างทั้งหมดด้วย Interactive Diagram
วิธีทำงานบน Server แบบใหม่ — คู่มือสำหรับทีม SYNERRY (ประหยัด Disk 90%)
เลิกใช้ ~/workspace/ แล้ว — ระบบ worktree ใหม่ประหยัด disk 90% เพิ่มคนใหม่ได้ไม่จำกัด แค่เปลี่ยน folder ที่เปิดใน Cursor