สรุปคลาส Claude 101 - Build a Website

สรุปคลาส Claude 101 - Build a Website

ขอบคุณนักเรียนทุกคนที่เข้า workshop นี้ครับ

บทความนี้คือสรุปที่ฮงสัญญาไว้ครับ ถ้าพร้อมแล้ว ไปลุยกันเลย!

Outline

• ทำไมต้องเป็น workshop
• การติดตั้งโปรแกรม
• Claude Code Basics
• ติดตั้งและสร้าง Skill
• MCP Server
• โพยการสร้าง Website

---

ทำไมต้องเป็น Workshop 🤔

Workshop คือคลาสที่เน้นการลงทำจริง นั่นแปลว่า นักเรียนทุกคน ต้องได้ “เรียนรู้ผ่านการลงมือทำ” (Active Learning) 💪

นักเรียนจะเจอปัญหา มีความคืบหน้า และไปถึงผลลัพธ์ที่คาดหวังไว้

ความแตกต่างจากการเรียนแบบนั่งฟังเฉยๆ

การเรียนแบบนั่งฟังเฉยๆ เราอาจจะแค่ได้รู้ แต่ไม่ได้ผลลัพธ์และอาจจะลืมได้ในภายหลัง

“Tell me and I forget. Show me and I remember. Involve me and I understand.” — Benjamin Franklin

หมายถึง เล่าให้ฟังไม่นานก็ลืม ถ้าแสดงให้เห็นจะจำได้ และถ้าได้ลงมือทำจะเข้าใจครับ

ฮงอยากจะจัดคลาสนี้ให้ทุกคนได้ลงมือทำ จะได้ของติดมือกลับบ้านไปด้วย 😊

---

การติดตั้งโปรแกรม 💻

Pre-requisite (สิ่งที่ต้องเตรียมก่อนเข้าคลาส)

• สมัคร Github Account สำหรับการเก็บ source code ของเรา
• สมัคร Claude.ai และสมัคร Pro plan เพื่อให้สามารถใช้งาน Claude Code ได้

โปรแกรมที่แนะนำให้ติดตั้ง

• IDE: Cursor / VS Code สำหรับการเปิดอ่าน source code
• Git Bash / Git CLI: สำหรับการใช้งาน git

หมายเหตุ

• Git คือเครื่องมือที่ใช้จัดการ source code ให้เป็นระเบียบ
• GitHub คือบริการจัดเก็บ source code ออนไลน์
• ในคลาสนี้ ฮงไม่ได้สอนใช้งาน Git CLI ครับ

การติดตั้งโปรแกรมบนเครื่อง Windows และ MacOS มีความแตกต่างกัน ลิ้ง video แนะนำการติดตั้งอยู่ใน comment 💪

---

Claude Code Basics 🤖

1) /model - คำสั่งเลือก Claude Model

1️⃣ Haiku - รวดเร็วและถูกที่สุด เหมาะกับงานไม่ซับซ้อน

2️⃣ Sonnet - (ค่าเริ่มต้น) ใช้งานทั่วไป

3️⃣ Opus - เก่งมากๆ

คำแนะนำเบื้องต้น:

ใช้ Sonnet ก่อน ถ้า Claude ไม่เข้าใจ ให้ลอง Opus ครับ ถ้างานตรงไปตรงมา แก้เอกสาร Haiku ช่วยได้

2) Context Session และ /clear /compact

Claude จะสร้าง context session เพื่อเก็บข้อมูลบทสนทนาของเรา และ Claude (เก็บเป็นจำนวน token) เช่น เราถามอะไร Claude หาข้อมูล และตอบอะไร

เมื่อ Context เยอะขึ้น แปลว่า Claude เข้าใจเรามากขึ้น 😲

แต่ก็ไม่ทุกครั้ง เพราะถ้า Context เยอะ และมีหลายเรื่องที่ไม่เกี่ยวข้องปนกัน Claude จะงง เช่น คุยเรื่องการเขียนโค้ด และสลับไปคุยเรื่อง การทำ Slide

นอกจาก Claude จะงง เพราะเราคุยกันหลายเรื่อง ยังเปลือง token ด้วย (การใช้งานคิดจากจำนวน token ที่ใช้)

วิธีแก้ไขด้วย 2 คำสั่ง:

1️⃣ /clear - ล้าง session และเริ่มต้นใหม่

ช่วยให้เราเริ่มต้นบทสนทนาใหม่กับ Claude จาก 0 ถ้าเปลี่ยนเรื่องคุย และ Claude เริ่มงง ให้ /clear แล้วเริ่มใหม่

2️⃣ /compact - บีบอัด context ประหยัดพื้นที่

บทสนทนาที่เราคุยกับ Claude อาจมีการพูดบางเรื่องซ้ำๆย้ำๆ มีข้อมูลบางอย่างที่เกินความจำเป็น เราสามารถใช้คำสั่งนี้ เพื่อให้ Claude จัดการ context ให้กระชับมากขึ้นได้

3) /remote-control - การเชื่อมต่อกับ Claude Session ระยะไกล

เราสามารถเชื่อมต่อกับคอมของเราได้ ผ่าน web หรือมือถือได้ ทำงานได้จากทุกที่ทั่วโลกเลย 🥳

---

ติดตั้งและสร้าง Skill ✍️

Skill คือชุดทักษะ ที่กำหนดวิธีการดำเนินการ เพื่อให้ได้ผลลัพธ์ที่ต้องการ เช่น

ตัวอย่างของ Skill

/frontend-design - การออกแบบ UI design และแก้ไขโค้ด ตามคำอธิบายหรือตัวอย่างจากผู้ใช้

⭐️ /grill-me - สั่งให้ Claude ถามคำถามเราทีละคำถาม เพื่อให้เราและ Claude เข้าใจสิ่งที่ต้องการจะทำมากขึ้น

การสั่งงานที่มีข้อมูลไม่ชัดเจนเพียงพอ Claude อาจสร้างผลลัพธ์ที่ไม่ตรงกับที่เราต้องการได้

(Skill แนะนำต้องมีดาว 55)

วิธีหา Skill ของคนอื่น

เราสามารถค้นหาและติดตั้ง skill ของคนอื่นได้ ผ่าน skills.sh ซึ่งเป็น website ที่รวบรวม skill ของคนทั้งโลกไว้ เราหาชุดทักษะที่เกี่ยวข้องกับงานเรามาใช้ได้

วิธีสร้าง Skill เอง

หากเราหา skill ที่อยากได้ไม่เจอ เราคงต้องสร้างขึ้นมาเอง 😲 ซึ่งเราต้องกำหนด วิธีดำเนินการและผลลัพธ์ที่ต้องการ เขียนเป็นไฟล์ ในชื่อ .claude/skills/<skill-name>/SKILL.md

---

MCP Server

AI model มีความรู้ที่จำกัดเท่าที่ถูกสอนมา เราสามารถให้เครื่องมือกับ AI ในการอ่าน และบันทึกข้อมูลได้ผ่าน MCP (Model Context Protocol)

ซึ่ง AI จะสามารถเข้าถึงข้อมูลของระบบต่างๆได้ เช่น Google Drive, Google Calendar

ตัวอย่างการใช้งาน

Google Calendar

• วันนี้มีกำหนดการอะไรที่ต้องการบ้าง
• เพิ่มนัดหมาย “Hong workshop” วันที่ 7 เวลา 19:30 - 21:00น.

---

โพยการสร้าง Website

ข้อมูลทั่วไป

ตัวอย่างการสร้าง website และ free hosting ผ่าน GitHub Page

GitHub มีบริการ free hosting สำหรับ website (เฉพาะ public project)

เราสามารถสร้าง website และเช่าพื้นที่ฟรีๆได้ โดยจะได้ URL แบบนี้:

https://<username>.github.io/<repo-name>

ขั้นตอนการทำ Website

1. /grill-me - ใช้คำสั่งเพื่อให้ Claude ถามเราว่าอยากได้ website แบบไหน และเราก็ตอบมันไปเรื่อยๆ

2. สร้าง website เบื้องต้น - อนุญาติให้ Claude สร้าง website เพื่อดูผลลัพธ์ในขั้นต้น

3. หาแบบจาก Dribbble - dribbble.com ค้นหาตัวอย่าง website ที่มี UI สวยๆ มาเป็นแบบ

4. /frontend-design - ส่งตัวอย่างให้ Claude พร้อมปรับปรุง UI ให้สวยตามรูป และดูผลลัพธ์

5. Upload source code - เมื่อเราทำเสร็จ ให้ git push หรือ upload source code ขึ้นไป

6. ติดตั้ง GitHub Page - ติดตั้ง GitHub Page ใน project ของเรา

เราก็จะได้ website ที่เข้าถึงได้ทาง internet แล้วครับผม

---

สรุปโดยหัวหน้าฮง

สำหรับ workshop ในครั้งนี้มีความท้าทายหลายอย่าง ทั้งในด้านการเตรียมตัว และเนื้อหาบางอย่างที่ซับซ้อน

ฮงจะปรับปรุง workshop ให้เข้าใจง่ายและชัดเจนมากขึ้นในครั้งถัดไปครับ

ขอบคุณครับผม

(เดี่ยวฮงมีประกาศ Claude 101 รุ่น 2 ในเร็วๆนี้นะครับ - ลิ้งลงทะเบียน waiting list อยู่ในคอมเมนต์ครับ)