Web Deployment
การใช้ v0.dev หรือ Claude เจนหน้าเว็บ React/HTML และการ Deploy ขึ้น Vercel
การใช้ v0.dev หรือ Claude เจนหน้าเว็บ React/HTML และการ Deploy ขึ้น Vercel
สร้าง Landing Page รวบรวมงานจากครั้งที่ 1-5 และ Deploy เป็น URL จริง
เป้าหมายการเรียนรู้
- เข้าใจแนวคิด AI-powered Web Development
- สามารถใช้ v0.dev สร้างเว็บไซต์จาก Prompt ได้
- Deploy เว็บไซต์ขึ้น Vercel ให้คนทั่วโลกเข้าถึงได้
- เข้าใจ Workflow ตั้งแต่ออกแบบจนถึงเผยแพร่
AI กำลังเปลี่ยนโลก Web Development
ในอดีตการสร้างเว็บไซต์ต้องเรียนรู้ HTML, CSS, JavaScript ใช้เวลาหลายเดือนกว่าจะทำเว็บสวยๆ ได้ แต่ตอนนี้ AI ทำให้ทุกคนสร้างเว็บไซต์ได้ภายในไม่กี่นาทีเพียงแค่อธิบายสิ่งที่ต้องการ
v0.dev + Vercel ทำให้กระบวนการสร้างเว็บไซต์เหลือเพียง 3 ขั้นตอน: อธิบาย → Generate → Deployไม่ต้องเขียน Code เองแม้แต่บรรทัดเดียว
สร้างภาพ A flat design infographic showing the AI web development workflow. A horizontal pipeline with 3 main steps connected by arrows: Step 1 'Describe' (user typing a prompt describing their desired website in a chat interface), Step 2 'Generate' (v0.dev logo with code brackets and a preview screen showing a website being generated), Step 3 'Deploy' (Vercel logo with a rocket, showing the website going live with a URL link). Below shows the traditional way crossed out (HTML/CSS/JS coding for weeks) vs the AI way (minutes). Clean modern design with black and white Vercel-inspired style. (ai_web_development_workflow.jpg)
A flat design infographic showing the AI web development workflow. A horizontal pipeline with 3 main steps connected by arrows: Step 1 'Describe' (user typing a prompt describing their desired website in a chat interface), Step 2 'Generate' (v0.dev logo with code brackets and a preview screen showing a website being generated), Step 3 'Deploy' (Vercel logo with a rocket, showing the website going live with a URL link). Below shows the traditional way crossed out (HTML/CSS/JS coding for weeks) vs the AI way (minutes). Clean modern design with black and white Vercel-inspired style.
| เครื่องมือ | ประเภท | จุดเด่น | เหมาะกับ |
|---|---|---|---|
| v0.dev | AI Web Builder | สร้างเว็บจาก Prompt, ใช้ React + Tailwind | หน้าเว็บ, Landing Page, Dashboard |
| Vercel | Hosting Platform | Deploy ง่าย, ฟรี, มี HTTPS | เผยแพร่เว็บไซต์สู่สาธารณะ |
| Bolt.new | AI Full-stack Builder | สร้างแอปครบ Frontend + Backend | Web App ที่ซับซ้อน |
| Lovable | AI App Builder | สร้าง Web App พร้อม Database | Prototype, MVP |
v0.dev — สร้างเว็บจาก Prompt
v0.dev เป็นเครื่องมือจาก Vercel ที่ใช้ AI สร้างUI Components และหน้าเว็บจากคำอธิบายผลลัพธ์เป็น React + Tailwind CSS คุณภาพสูง พร้อมปรับแต่งและ Deploy ได้ทันที
วิธีใช้ v0.dev
- 1เข้าเว็บ v0.dev แล้วล็อกอินด้วย GitHub หรือ Google
- 2พิมพ์ Prompt อธิบายเว็บไซต์ที่ต้องการ
- 3รอ AI สร้าง Preview (ประมาณ 10-30 วินาที)
- 4ดู Preview แล้วสั่งปรับแต่งเพิ่มเติมผ่าน Chat
- 5เมื่อพอใจแล้ว กดปุ่ม Deploy เพื่อเผยแพร่
เทคนิคการเขียน Prompt สำหรับ v0
# Landing Page
"สร้าง Landing Page สำหรับร้านกาแฟไทย ชื่อ 'Café Siam'
มี Hero Section พร้อมรูปพื้นหลัง, เมนูแนะนำ 6 รายการ,
รีวิวจากลูกค้า 3 คน, แผนที่ร้าน และ Footer พร้อมโซเชียลมีเดีย
ใช้โทนสีน้ำตาลอุ่นๆ แบบ Cozy"
# Portfolio
"สร้างหน้า Portfolio สำหรับ Graphic Designer
มี About Me, ผลงาน 8 ชิ้นแบบ Grid Layout,
Skills bar chart, Contact Form
ใช้สไตล์ Minimal Dark Theme"# Dashboard
"สร้าง Admin Dashboard ที่ประกอบด้วย:
1. Sidebar Navigation ด้านซ้าย (collapsible)
2. Header Bar มี Search, Notifications, Profile
3. Stats Cards แสดงยอดขาย, จำนวนลูกค้า, รายได้, อัตราการเติบโต
4. Line Chart แสดงยอดขาย 12 เดือน
5. ตารางข้อมูลลูกค้าล่าสุด 10 คน
6. Pie Chart แสดงสัดส่วนสินค้า
ใช้สไตล์ Modern, สีหลักเป็นสีม่วง (#7C3AED)"
# สั่งปรับแต่ง (ผ่าน Chat)
"เปลี่ยน Sidebar เป็นสีดำ"
"เพิ่มปุ่ม Export CSV ในตาราง"
"ทำให้ Chart เป็น Interactive hover ได้"- ระบุ Layout ชัดเจน — บอกว่าอะไรอยู่ตรงไหน (ซ้าย, ขวา, บน, ล่าง)
- กำหนดสี — ระบุ Hex Code หรืออธิบายโทนสี
- บอกจำนวน — กี่ Card, กี่ Column, กี่ Item
- ใส่ข้อมูลตัวอย่าง — ชื่อร้าน, รายการเมนู, ราคา
- อ้างอิงสไตล์ — เช่น 'สไตล์เหมือน Apple', 'แบบ Notion'
- ปรับทีละนิด — อย่าสั่งเปลี่ยนทุกอย่างในครั้งเดียว
Deploy ด้วย Vercel
Vercel เป็นแพลตฟอร์ม Hosting ที่ทำให้การเผยแพร่เว็บไซต์ง่ายเหมือนกดปุ่มเดียวรองรับ HTTPS, Custom Domain, และ CDN ทั่วโลกฟรี
สร้างภาพ A flat design infographic showing the v0.dev to Vercel deployment pipeline. A vertical flow diagram: Step 1 'Create in v0.dev' (chat interface with website preview), Step 2 'Click Deploy' (button icon), Step 3 'GitHub Repository Created' (GitHub logo with code files), Step 4 'Vercel Builds Automatically' (build/compile icon with progress bar), Step 5 'Live Website' (globe icon with a .vercel.app URL and green checkmark). Side panel shows features: HTTPS auto, CDN global, Preview deployments. Clean modern design with Vercel black theme accents. (v0_to_vercel_deployment.jpg)
A flat design infographic showing the v0.dev to Vercel deployment pipeline. A vertical flow diagram: Step 1 'Create in v0.dev' (chat interface with website preview), Step 2 'Click Deploy' (button icon), Step 3 'GitHub Repository Created' (GitHub logo with code files), Step 4 'Vercel Builds Automatically' (build/compile icon with progress bar), Step 5 'Live Website' (globe icon with a .vercel.app URL and green checkmark). Side panel shows features: HTTPS auto, CDN global, Preview deployments. Clean modern design with Vercel black theme accents.
ขั้นตอนการ Deploy จาก v0.dev
- 1สร้างเว็บใน v0.dev จนพอใจ
- 2กดปุ่ม "Deploy" มุมขวาบน
- 3เชื่อมต่อกับ GitHub Account (ครั้งแรกครั้งเดียว)
- 4v0 จะสร้าง Repository ใน GitHub ให้อัตโนมัติ
- 5Vercel จะ Build และ Deploy เว็บให้ทันที
- 6ได้ลิงก์ .vercel.app สำหรับแชร์เว็บไซต์
| ฟีเจอร์ Vercel | แผน Free | แผน Pro |
|---|---|---|
| Bandwidth | 100 GB/เดือน | 1 TB/เดือน |
| Deployments | ไม่จำกัด | ไม่จำกัด |
| Custom Domain | รองรับ | รองรับ |
| HTTPS (SSL) | ฟรีอัตโนมัติ | ฟรีอัตโนมัติ |
| Preview Deployments | รองรับ | รองรับ |
| Analytics | พื้นฐาน | ครบถ้วน |
| ราคา | ฟรี | $20/เดือน |
สามารถเชื่อมต่อ Domain ของตัวเอง (เช่น www.mysite.com) ได้ฟรีบน Vercel เพียงซื้อ Domain จาก Namecheap, GoDaddy หรือผู้ให้บริการอื่น แล้วชี้ DNS มาที่ Vercel
ตัวอย่างเว็บไซต์ที่สร้างได้
| ประเภท | Prompt ตัวอย่าง | ระยะเวลาโดยประมาณ |
|---|---|---|
| Portfolio ส่วนตัว | สร้าง Portfolio สำหรับนักศึกษาจบใหม่ มี About, Projects, Contact | 5-10 นาที |
| Landing Page ธุรกิจ | สร้างหน้าแนะนำร้านอาหารไทย มีเมนู รูป และจองโต๊ะ | 10-15 นาที |
| Event Page | สร้างหน้าเชิญงานแต่งงาน มีนับถอยหลัง แผนที่ และแบบฟอร์ม RSVP | 10-15 นาที |
| Resume Online | สร้าง Resume แบบ Interactive มี Timeline การศึกษาและทำงาน | 5-10 นาที |
| Blog Layout | สร้างหน้า Blog สไตล์ Minimal มีรายการบทความ และหน้าบทความ | 15-20 นาที |
กิจกรรมปฏิบัติ
สร้างเว็บไซต์ Portfolio หรือ Landing Page ส่วนตัว แล้ว Deploy ขึ้น Vercel ให้มีลิงก์แชร์กับเพื่อนได้
เครื่องมือที่ใช้ในบทเรียนนี้
| เครื่องมือ | ลิงก์ | ใช้ทำอะไร |
|---|---|---|
| v0.dev | v0.dev | สร้างเว็บไซต์จาก Prompt ด้วย AI |
| Vercel | vercel.com | Deploy เว็บไซต์ฟรี |
| GitHub | github.com | เก็บ Source Code |
v0.dev ใช้เทคโนโลยีอะไรในการสร้างเว็บไซต์?
ข้อใดคือขั้นตอนที่ถูกต้องในการเผยแพร่เว็บไซต์?