Workshop 6 ชั่วโมง

Code Like a Pro

เขียนเว็บแอปแบบมืออาชีพด้วย AI
พื้นฐานเว็บ → AI Coding Tools → Deploy ขึ้นโลก

Web Fundamentals

AI Coding Tools

Git + Deploy

คณะคุรุศาสตร์ · มหาวิทยาลัยนครพนม

Agenda

สิ่งที่เราจะเรียนรู้กันวันนี้

Part 1 ~1.5 ชม.

พื้นฐานเทคโนโลยีเว็บ

HTML + CSS + JavaScript + Tailwind — เข้าใจก่อนให้ AI ช่วย

Part 2 ~3 ชม.

AI Coding Tools

Claude Code, Codex, Cursor, Windsurf, Antigravity — เขียนโค้ดด้วย AI

Part 3 ~1.5 ชม.

Git, GitHub & Deployment

Version Control + Deploy เว็บขึ้นโลกจริง

Part 1

พื้นฐานเทคโนโลยีเว็บ

เข้าใจก่อน — แล้วให้ AI ช่วยทำได้อย่างมืออาชีพ

เว็บทำงานยังไง?

ก่อนเขียนโค้ด ต้องเข้าใจภาพรวมก่อน

Browser

ผู้ใช้เปิดเว็บ

Request

HTTP Request

Server

ส่งไฟล์กลับ

Response

HTML + CSS + JS

Browser เป็นตัว render HTML + CSS + JS ให้เป็นหน้าเว็บที่เราเห็น

สามเสาหลักของเว็บ

แต่ละตัวมีหน้าที่ต่างกัน

HTML

โครงสร้าง

เหมือนโครงกระดูกของร่างกาย — กำหนดว่ามีอะไรบ้าง

CSS

รูปลักษณ์

เหมือนเสื้อผ้าการแต่งตัว — ทำให้สวย มีสี

JavaScript

พฤติกรรม

เหมือนสมองกล้ามเนื้อ — ทำให้โต้ตอบได้

HTML — โครงสร้างเว็บ

HyperText Markup Language

index.html

<!DOCTYPE html>
<html lang="th">
<head>
  <title>เว็บแรกของฉัน</title>
</head>
<body>
  <h1>สวัสดีชาวโลก!</h1>
  <p>นี่คือเว็บแรกของฉัน</p>
  <button>คลิกฉันสิ!</button>
</body>
</html>

Tag = คำสั่ง HTML

เขียนในวงเล็บมุม <tag> ... </tag>

Tag ที่ใช้บ่อย

<h1>-<h6> หัวข้อ

<p> ย่อหน้า

<a> ลิงก์

<img> รูปภาพ

<div> กล่อง layout

<button> ปุ่มกด

CSS & Tailwind — ตกแต่งให้สวย

จาก CSS ดั้งเดิม → Utility-First Framework

CSS แบบดั้งเดิม

.card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 6px...;
}
<div class="card">...</div>

Tailwind CSS

<div class="
  bg-white
  p-6
  rounded-xl
  shadow-lg
">
  ...
</div>

AI + Tailwind = คู่หูที่ดีที่สุด

AI coding tools เขียน Tailwind ได้เก่งมาก เพราะเป็น utility classes ที่ชัดเจน

JavaScript — ทำให้เว็บมีชีวิต

ภาษาเดียวที่รันบน Browser ได้

app.js

// ตัวแปร
let name = "นครพนม";
const year = 2025;

// ฟังก์ชัน
function greet(name) {
  return `สวัสดี ${name}!`;
}

// Event
const btn = document
  .querySelector('button');

btn.addEventListener('click', () => {
  alert(greet(name));
});

ตัวแปร (Variables)

let — เปลี่ยนค่าได้ · const — เปลี่ยนไม่ได้

ฟังก์ชัน (Function)

กลุ่มคำสั่งที่เรียกใช้ซ้ำได้

Event Listener

ฟังเหตุการณ์ เช่น click, input, submit

DOM Manipulation

เข้าถึงและเปลี่ยน HTML ผ่าน JavaScript

Part 2

AI Coding Tools

เขียนโค้ดแบบมืออาชีพด้วยพลัง AI

AI เปลี่ยนโลกการเขียนโค้ด

จากเขียนเองทุกบรรทัด → สั่ง AI ให้ช่วยสร้าง

ก่อนมี AI

ค้น Google + Stack Overflow

Copy-paste แก้ไปเรื่อยๆ

อ่าน docs นานมาก

Debug คนเดียว

มี AI ช่วย

อธิบายสิ่งที่ต้องการ → ได้โค้ดทันที

สร้างโปรเจคทั้งหมดในนาที

AI ช่วยตรวจ + แก้ bug

เรียนรู้ไปพร้อมกัน

AI Coding Tools ยุคใหม่

เครื่องมือที่เราจะเรียนรู้วันนี้

Claude Code

Terminal Agent

Codex

OpenAI CLI

Cursor

AI IDE

Windsurf

AI IDE

Antigravity

AI Builder

แต่ละ tool มีจุดเด่นต่างกัน — เลือกใช้ตามสถานการณ์

Claude Code

Anthropic's AI Agent — ทำงานผ่าน Terminal

terminal

$ claude

> สร้างเว็บ portfolio ให้หน่อย
  ใช้ Tailwind CSS
  มี section: About, Skills,
  Projects, Contact

Claude: กำลังสร้างไฟล์...
✓ index.html สร้างแล้ว
✓ style.css สร้างแล้ว
✓ script.js สร้างแล้ว

Terminal-based Agent

ทำงานใน terminal — อ่าน/เขียนไฟล์ รันคำสั่งได้

เข้าใจโปรเจคทั้งหมด

อ่านไฟล์ทุกไฟล์ในโปรเจค แก้ไขหลายไฟล์พร้อมกัน

ทำ Git + Deploy ให้

commit, push, สร้าง PR, แก้ CI — ทำได้หมด

ใช้ฟรี

มี Free tier สำหรับเริ่มต้น

OpenAI Codex

OpenAI's Coding Agent — CLI + ChatGPT

terminal

$ codex

> สร้าง landing page สำหรับ
  ร้านกาแฟ ด้วย HTML + Tailwind
  มี hero, menu, contact

Codex: กำลังทำงาน...
✓ สร้างไฟล์เสร็จ
✓ เปิด preview ให้ดู

Cloud Sandbox

รันในสภาพแวดล้อมแยก ปลอดภัย ไม่กระทบเครื่อง

ใช้ผ่าน ChatGPT ได้

สั่งงานผ่าน ChatGPT interface หรือ CLI

เชื่อม GitHub

อ่าน repo → ทำงาน → สร้าง PR ให้

Preview ในตัว

ดู output ได้ทันทีผ่าน browser

Cursor

AI-First Code Editor — โค้ดเร็วขึ้น 10 เท่า

Tab Autocomplete

AI เดาโค้ดถัดไป — กด Tab รับ แก้ไฟล์ได้เลย

Chat + Composer

คุยกับ AI ในตัว Editor — ถามอะไรก็ได้เกี่ยวกับโค้ด

Multi-file Editing

แก้หลายไฟล์พร้อมกัน ด้วยคำสั่งเดียว

VS Code Compatible

ใช้งานเหมือน VS Code — Extension ใช้ร่วมได้

Shortcuts ที่ใช้บ่อย

Cmd + K สั่ง AI แก้โค้ดที่เลือก

Cmd + L เปิด Chat panel

Cmd + I Composer — แก้หลายไฟล์

Tab รับ autocomplete

Windsurf

AI IDE by Codeium — Cascade Flow

Cascade

AI ที่เข้าใจ context ของโปรเจคทั้งหมด — แก้ได้หลายไฟล์ต่อเนื่อง

Supercomplete

Autocomplete ที่ฉลาดกว่า — เดาจาก context รอบข้าง

รัน Command ได้

สั่ง AI ให้รันคำสั่ง terminal ได้จากใน Editor

Free Tier

ใช้ฟรีได้ มี credits ให้ทุกเดือน

Windsurf IDE

AI-powered IDE
สำหรับ developer ยุคใหม่

windsurf.com

Antigravity

AI App Builder — สร้างแอปจาก Prompt

Prompt → App

อธิบายสิ่งที่ต้องการ → ได้แอปพร้อมใช้งาน

Visual Preview

เห็นผลลัพธ์แบบ real-time ขณะสร้าง

Iterate ได้เรื่อยๆ

ปรับแต่ง แก้ไข เพิ่มฟีเจอร์ ผ่านการคุยกับ AI

Deploy ได้เลย

พร้อม deploy ขึ้น hosting ทันที

Antigravity

สร้างแอปสมบูรณ์
จาก prompt เดียว

antigravity.ai

เปรียบเทียบ AI Tools

เลือกใช้ให้เหมาะกับสถานการณ์

Tool	ประเภท	จุดเด่น	เหมาะกับ
Claude Code	Terminal Agent	เข้าใจโปรเจคลึก, จัดการ Git	Full-stack project
Codex	Cloud Agent	Sandbox ปลอดภัย, ChatGPT	Prototype, แก้ bug
Cursor	AI IDE	Tab complete, Composer	เขียนโค้ดทุกวัน
Windsurf	AI IDE	Cascade flow, context	โปรเจคซับซ้อน
Antigravity	App Builder	Prompt → App ทันที	สร้างแอปเร็ว

Prompt Engineering สำหรับ Code

สั่ง AI อย่างไรให้ได้โค้ดดี

Prompt แย่

"สร้างเว็บให้หน่อย"

"แก้ bug ตรงนี้"

"ทำให้สวยขึ้น"

กว้างเกินไป ไม่มีรายละเอียด

Prompt ดี

"สร้าง portfolio page
ใช้ HTML + Tailwind CSS
มี 4 sections:
- Hero with ชื่อ + รูป
- About Me
- Skills (grid 3 cols)
- Contact form
ธีมสีน้ำเงิน-ขาว
responsive ด้วย"

ชัดเจน มีรายละเอียด

Be Specific

บอกรายละเอียดชัดเจน

Give Context

บอก tech stack + ข้อจำกัด

Iterate

ค่อยๆ ปรับแต่งทีละส่วน

Workshop #2

สร้างเว็บด้วย AI Coding Tools

สิ่งที่ต้องทำ

เลือก AI tool ที่อยากลอง

เขียน prompt สร้าง Portfolio

ให้ AI สร้างโค้ดทั้งหมด

ปรับแต่ง + เพิ่มฟีเจอร์

เป้าหมาย

ใช้ AI tool ได้จริง

เขียน prompt ที่มีคุณภาพ

ได้เว็บที่สวยงามจาก AI

รู้จัก iterate กับ AI

~45 นาที

Part 3

Git, GitHub & Deploy

Version Control + ส่งเว็บขึ้นโลกจริง

ทำไมต้อง Git?

ปัญหาที่ Git แก้ได้

ไม่มี Git

project_final.zip

project_final_v2.zip

project_final_v2_แก้แล้ว.zip

project_ส่งอาจารย์.zip

มี Git

เพิ่มหน้า login2 ชม.

แก้ bug ปุ่มกดเมื่อวาน

ออกแบบ homepage3 วัน

ย้อนกลับเวอร์ชันไหนก็ได้!

Git Commands พื้นฐาน

คำสั่งที่ใช้ทุกวัน (AI tools ก็ใช้คำสั่งเหล่านี้!)

git init

สร้าง repository ใหม่

git add .

เพิ่มไฟล์เข้า staging

git commit -m "ข้อความ"

บันทึกการเปลี่ยนแปลง

git push

ส่งโค้ดขึ้น GitHub

git pull

ดึงโค้ดจาก GitHub

git clone <url>

โคลน repo มาเครื่อง

Claude Code / Codex ทำคำสั่ง Git ให้อัตโนมัติ — แค่บอกว่า "push ขึ้น GitHub"

GitHub — มากกว่าแค่เก็บโค้ด

ฟีเจอร์ที่ทำให้ทำงานร่วมกันง่าย

Repository

ที่เก็บโค้ดโปรเจค

Branch

แยกสาย ทดลองฟีเจอร์

Pull Request

ขอรวมโค้ด + Review

Issues

แจ้ง bug, ขอฟีเจอร์

Actions

CI/CD อัตโนมัติ

Pages

Host เว็บ static ฟรี

Deploy ด้วย Cloudflare Workers

เชื่อม GitHub → Cloudflare → เว็บขึ้นทันที!

AI สร้างโค้ด

ในเครื่องคุณ

Push GitHub

git push

Cloudflare

Auto deploy

เว็บ Live!

.workers.dev

1

สมัคร Cloudflare

dash.cloudflare.com — สมัครฟรี

2

สร้าง Workers Project

Workers & Pages → Create Worker

3

เลือก GitHub Repo

เชื่อม Account → เลือก Repository

4

Deploy!

Save & Deploy → push ใหม่ = auto deploy

Workshop #3

Push ขึ้น GitHub + Deploy ขึ้นโลก

สิ่งที่ต้องทำ

สร้าง GitHub Repository

git init + add + commit + push

เชื่อม Cloudflare Workers

ทดสอบ auto deploy

เป้าหมาย

มี repo บน GitHub

มีเว็บ live บนอินเทอร์เน็ต

Push = Deploy อัตโนมัติ

แชร์ URL ให้เพื่อน!

~45 นาที

สิ่งที่เราเรียนรู้วันนี้

Web Fundamentals

HTML — โครงสร้าง

CSS + Tailwind

JavaScript

AI Coding Tools

Claude Code · Codex

Cursor · Windsurf

Antigravity

Prompt Engineering

Git + Deploy

Git & GitHub

Cloudflare Workers

CI/CD Pipeline

Pro Developer Workflow

เข้าใจพื้นฐาน AI ช่วยสร้าง Deploy ปรับปรุง

แหล่งเรียนรู้เพิ่มเติม

เรียนรู้ต่อได้ที่นี่

Claude Code

AI Agent ใน Terminal

claude.ai/code

OpenAI Codex

Cloud Coding Agent

chatgpt.com

Cursor

AI-First IDE

cursor.com

Windsurf

AI IDE + Cascade

windsurf.com

Antigravity

AI App Builder

antigravity.ai

GitHub

Version Control

github.com

MDN Web Docs

คู่มือ HTML/CSS/JS

developer.mozilla.org

Cloudflare Workers

Deploy เว็บฟรี

developers.cloudflare.com

ขอบคุณครับ!

หวังว่าทุกคนจะได้ความรู้กลับไป
และเริ่มต้น coding journey ด้วยพลัง AI

เข้าใจเว็บเทคโนโลยี

ใช้ AI Tools เป็น

Deploy เว็บได้

Code Like a Pro!

คณะคุรุศาสตร์ · มหาวิทยาลัยนครพนม