หน้าตาเว็บ · สิทธิ์ · ฟังก์ชัน · ต้นทุน · การเก็บข้อมูล

หน้านี้คือ คอนเซปต์ของระบบ · ระบุว่ามีหน้าอะไร · ใครทำอะไรได้ · ฟังก์ชันแตกย่อยยังไง · ค่าใช้จ่ายประมาณเท่าไหร่ · เก็บข้อมูลอะไรเพื่อวัดผล · ไม่บอก tech stack ตามที่ตกลงกัน

Web sitemap

โครงสร้างหน้าเว็บทั้งหมด · public (เปิดทุกคนเข้าได้) และ admin (เฉพาะทีม Furever)

graph TD
    HOME["🏠 / Homepage"]

    HOME --> SEARCH["🔍 /search<br/>(filter + result)"]
    SEARCH --> SHOP["🏪 /shop/:id<br/>(detail)"]

    HOME --> BLOG["📰 /blog<br/>(list)"]
    BLOG --> POST["📄 /blog/:slug<br/>(article)"]

    HOME --> ADOPT["🐕 /adopt<br/>(list)"]
    ADOPT --> PET["🐾 /adopt/:id<br/>(pet detail)"]
    PET --> APPLY["📝 /adopt/apply<br/>(form)"]

    HOME --> SPONSOR["💼 /sponsor<br/>(packages)"]
    SPONSOR --> INQ["📩 /sponsor/inquire<br/>(form)"]

    HOME --> REG["📋 /register<br/>(shop owner)"]
    REG --> S1["Step 1<br/>Owner info"]
    S1 --> S2["Step 2<br/>Shop info"]
    S2 --> S3["Step 3<br/>Services"]
    S3 --> S4["Step 4<br/>Confirm"]

    HOME --> ABOUT["ℹ️ /about"]
    ABOUT --> TEAM["👥 /about/team"]

    HOME --> CONTACT["📧 /contact"]
    HOME --> PRIV["🔒 /privacy"]
    HOME --> TERMS["📜 /terms"]

    HOME -.-> ADM["🔐 /admin (protected)"]
    ADM --> ALOG["🔑 login"]
    ALOG --> DASH["📊 Dashboard"]
    DASH --> AS["Shops"]
    DASH --> AB["Blog"]
    DASH --> AA["Adoption"]
    DASH --> ASP["Sponsors"]
    DASH --> AC["Comments"]
    DASH --> AF["Founders"]

    classDef public fill:#abcee9,stroke:#4099e4,color:#2a2722
    classDef form fill:#eeec89,stroke:#9d8477,color:#2a2722
    classDef admin fill:#9d8477,stroke:#5e4d40,color:#fffefb
    class HOME,SEARCH,SHOP,BLOG,POST,ADOPT,PET,SPONSOR,ABOUT,TEAM,CONTACT,PRIV,TERMS public
    class APPLY,INQ,REG,S1,S2,S3,S4 form
    class ADM,ALOG,DASH,AS,AB,AC,AA,ASP,AF admin
    

Page summary

SEO & routing principles

• Public URL ต้อง crawlable · มี meta + OG tags
• Slug-based URL สำหรับ content (blog/shop) เพื่อ SEO
• Block /admin จาก search engine · robots.txt
• 404 + 500 page branded · CTA กลับ home
• Sitemap.xml สร้างอัตโนมัติจาก published content

Roles & permissions

6 role ภายในเว็บ · เกิดจากการกระทำ ไม่ใช่จาก "สมัครสมาชิก"

graph LR
    START["🌐 เปิดเว็บ"] --> V["👁️ Visitor<br/>(default)"]

    V -->|"กด react/comment"| M["💬 Community Member<br/>(emoji + nickname)"]
    V -->|"กรอก /register"| SO["🏪 Shop Owner<br/>(linked email)"]
    V -->|"กรอก /adopt/apply"| AD["🤝 Adopter<br/>(form-based)"]
    V -->|"กรอก /sponsor/inquire"| SP["💼 Sponsor Lead"]

    M -.->|"register ร้านได้"| SO
    SO -.->|"comment ได้"| M

    LOGIN["🔐 /admin/login"] --> ADM["🐾 Furever Admin"]

    classDef pub fill:#abcee9,stroke:#4099e4
    classDef form fill:#eeec89,stroke:#9d8477
    classDef priv fill:#9d8477,stroke:#5e4d40,color:#fffefb
    class V,M pub
    class SO,AD,SP form
    class LOGIN,ADM priv
    

Role descriptions

👁️ Visitor ทำได้ทุกอย่างที่ read-only — ดูร้าน อ่าน blog ดู adoption · ไม่ต้องสมัคร

💬 Community Member Visitor ที่ react/comment · เลือก emoji + nickname + role · session 30 วันใน device

🏪 Shop Owner ผ่าน 4-step registration · linked email + LINE · status: pending → active

🤝 Adopter กรอกใบสมัคร · ไม่มี account · admin queue ติดต่อกลับ

💼 Sponsor Lead Partner brand inquiry · sales team ปิดดีลแบบ manual

🐾 Furever Admin ทีม Furever · เข้า /admin/login

Permission matrix

Modules → functions

โครงเว็บแบ่งเป็น 8 modules · ~93 functions

graph TD
    M1["M1 · Discovery"]
    M2["M2 · Shop"]
    M3["M3 · Community"]
    M4["M4 · Adoption"]
    M5["M5 · Content / Blog"]
    M6["M6 · Sponsor"]
    M7["M7 · Admin / CMS"]
    M8["M8 · Cross-cutting"]

    M1 --> M2
    M1 --> M3
    M2 --> M7
    M3 --> M7
    M4 --> M7
    M5 --> M7
    M6 --> M7

    M8 -.-> M1
    M8 -.-> M2
    M8 -.-> M3
    M8 -.-> M4
    M8 -.-> M5
    M8 -.-> M6
    M8 -.-> M7

    classDef domain fill:#abcee9,stroke:#4099e4
    classDef admin fill:#9d8477,stroke:#5e4d40,color:#fffefb
    classDef infra fill:#eeec89,stroke:#9d8477
    class M1,M2,M3,M4,M5,M6 domain
    class M7 admin
    class M8 infra
    

📖 Function ID format · F{module}.{seq} เช่น F1.5 · scope กำกับด้วย core / later / maybe

Function count summary

แนวทาง · สิ่งที่ควรทำต่อ

ทำตามลำดับนี้ · ไม่มี deadline · เริ่มข้อถัดไปเมื่อข้อก่อนหน้าเสร็จ

1. Independent · เริ่มได้เลย ปิด Open Questions 7 ข้อ
   moderation policy · verified criteria · partner attribution · KPI ตัวเลข north star — ตัดสินใจร่วมกันในทีม
2. หลังข้อ 1 Seed supply — คุยกับ 10-20 ร้านแรกใน CM
   คลินิกชั้นนำ (Chotana, CMU, Changnoi) + ร้านอาบน้ำดัง + โรงแรมที่มีรีวิว · ขอลงร้านฟรี + verified
3. Independent · ทำคู่ขนานข้อ 2 ได้ สร้าง landing page + เปิดให้ pre-register
   เก็บ email/LINE ของคนสนใจ → list สำหรับวันเปิดจริง
4. Independent · ทำคู่ขนาน เริ่ม content engine — 4 บทความแรก
   "คลินิกเชียงใหม่เปิด 24 ชม." · "โรคหน้าฝนของหมาใน CM" · "ที่เที่ยวสัตว์เลี้ยง" · "เลือกหมอยังไง"
5. หลังข้อ 4 (เริ่มมี content) Partnership กับ rescue 1-2 ที่
   Lanna Dog Welfare · Santisook · The Ark — trust transfer ตั้งแต่ launch
6. หลังข้อ 2, 3, 4, 5 พร้อม Soft launch — เปิด Furever ให้ public
   เริ่มจาก 50 ร้าน + 4 บทความ + 5 น้องรับเลี้ยง · invite จาก pre-register list ก่อน
7. หลัง soft launch มี traffic Recruit 3 sponsor pilot — ฟรี + วัดผล
   พิสูจน์ว่า model ทำงาน · เก็บ click/impression · ใช้ทำ case study ตอนขาย Bronze/Silver/Gold จริง
8. หลัง pilot run ระยะ วัด engagement KPI · ตัดสินใจ stage ถัดไป
   ถ้า engagement north-star ถึง baseline → ลงทุนต่อ · ถ้าไม่ถึง → pivot scope หรือ approach

💰 Cost estimate · Tiered

ประมาณการต้นทุน 3 stage — ตั้งแต่ dev → soft launch → production · ตัวเลขเป็น ช่วง low-high (THB/เดือน) · ระบุเป็น หมวดบริการ ไม่ใช่ vendor

Cost progression at a glance

graph LR
    A["Stage 1 · Dev<br/>฿40 - 1,700"]:::dev --> B["Stage 2 · Soft Launch<br/>฿1,540 - 13,700"]:::launch
    B --> C["Stage 3 · Production<br/>฿15,700 - 79,300"]:::prod

    classDef dev fill:#e6f0fa,stroke:#4099e4
    classDef launch fill:#fff4cf,stroke:#a07900
    classDef prod fill:#e8f3e0,stroke:#3d6a2a
    

📊 Analytics tracking · Google Analytics

รายการ event ที่ต้องส่งเข้า GA เพื่อวัด north star (engagement) + 3 funnel หลัก (Discovery · Adoption · Sponsor)

Page tracking

Track ทุก path · page_view auto event ของ GA · ตั้ง page_title + page_location ให้ตรงกับ entity (เช่น "Shop · คลินิกนิมมาน · /shop/12")

Event tracking

Conversion goals (5 หลัก)

1. Contact a shop — event contact_click (Discovery → Action)
2. Engage with community — event comment_post OR react (Engagement north star)
3. Apply for adoption — event adoption_apply_submit
4. Register a shop — event shop_register_complete
5. Sponsor inquiry — event sponsor_inquiry_submit (Revenue intent)

Custom dimensions

3 Funnels

Discovery funnel

flowchart LR
    A["page_view<br/>(homepage)"] --> B["search_submit"]
    B --> C["shop_view"]
    C --> D["contact_click"]
    D --> E["✅ Conversion"]
    style A fill:#abcee9
    style D fill:#ffc750
    style E fill:#eeec89
    

Adoption funnel

flowchart LR
    A["adopt list<br/>page_view"] --> B["adoption_view<br/>(pet detail)"]
    B --> C["adoption_apply_start"]
    C --> D["adoption_apply_submit"]
    D --> E["✅ Conversion"]
    style A fill:#abcee9
    style C fill:#ffc750
    style E fill:#eeec89
    

Sponsor funnel

flowchart LR
    A["sponsor_package_view"] --> B["scroll > 50%"]
    B --> C["sponsor_inquiry_submit"]
    C --> D["✅ Lead"]
    D -.->|sales| E["Closed deal"]
    style A fill:#abcee9
    style C fill:#ffc750
    style D fill:#eeec89
    style E fill:#9d8477,color:#fff
    

Engagement north-star — วัดยังไง

เป้าหมาย "ชุมชนคึกคัก" แปลเป็น composite metric:

• Active commenters / week = unique session ที่มี comment_post
• Reactions per active user = total react events / unique session
• Return rate = % session ที่กลับมาใน window กำหนด (เช่น 7 หรือ 30 วัน) ต่อ total unique sessions
• Comment per shop / article = engagement density

ทั้งสี่ตัวรวมกัน = "engagement health" — ถ้าทั้ง 4 ขึ้นพร้อมกัน = ทำถูกทาง · ถ้า 1-2 ตัวขึ้นแต่ตัวอื่นนิ่ง = ต้อง investigate

Open questions (เกี่ยวกับ function/spec)

• Moderation policy ของ adoption marketplace — auto-publish + report vs admin queue?
• Verified shop criteria — ใบประกอบกิจการ / on-site visit / Google rating?
• GA tracking — ใช้ GA4 standard หรือมี product analytics เสริม (เช่น session replay)?
• Cost optimization — vendor lock-in ของ hosting/storage · ควรเลือกที่ migrate ง่ายไหม?
• Email transactional volume — Stage 2 ประมาณ 100-500/เดือนคุ้มไหม ใช้บริการ free tier?