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 นาที
สรุปสั้นๆ
- ViberQC ลดเวลา QC จากหลายชั่วโมงเหลือ 3 นาที — scan URL แล้วได้รายงานทันที
- Business Model แบบ SaaS ออกแบบให้ viral ได้ในตัว (แชร์รายงาน = โฆษณาฟรี)
- Tech Stack: Next.js + Supabase + Puppeteer — เลือกความเสถียรมากกว่าความหวือหวา
- โครงสร้าง 11 tables, Scan Engine เป็นหัวใจ, สถานะ 78% พร้อมแผนงานที่เหลือ
คิดง่ายๆ คือ 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 คือ "เสถียร + 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 นาที
มีคำถามอะไรบ้างที่ทีมมักถามบ่อย?
ViberQC ต่างจาก Google Lighthouse ยังไง?
Lighthouse ตรวจ 4 ด้าน (Performance, Accessibility, Best Practices, SEO) — ViberQC ตรวจ 8 ด้าน เพิ่ม Security, Code Quality, PWA และ Viber Specific ที่สำคัญคือ ViberQC มี AI ช่วยวิเคราะห์ แชร์ผลได้ มี Dashboard ติดตาม และรองรับภาษาไทย
Scan Engine ต้องใช้ AI ไหม?
Scan Engine เป็น rules-based — ทำงานได้โดยไม่ต้องมี AI API key AI เป็นส่วนเสริมที่ช่วยวิเคราะห์ผลลัพธ์และให้คำแนะนำเพิ่มเติม ถ้า API key หมดก็ scan ได้ปกติ แค่ไม่มีคำแนะนำจาก AI
orchestrator.ts ควร 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
🛠️ Cursor Prompt สำหรับ Refactor Scan Engine
ถ้าจะเริ่ม 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."
Related Articles
OpenClaw 3 Months — 4 Hidden Traps and How AI Helped Optimize
Three months running OpenClaw AI Trading — found 4 hidden bottlenecks. AI helped analyze, optimize multi-model routing, and cut costs while improving quality.
6 AM Server Alerts Going Crazy — AI Fixed Everything in 8 Minutes, No Code Written
Woke up to alerts flooding 3 channels — server overload, 5 broken workflows, 20 containers fighting for resources. AI diagnosed, analyzed, and fixed everything in 8 minutes without writing a single line of code.
I Built idea2logic.com with AI — Inside the Architecture of 30+ Pages & 40+ APIs
I built idea2logic.com entirely with AI — 30+ pages, 40+ APIs, 14 database tables. This article opens up the full architecture with Interactive Diagrams.