Prework / Self-study — ติดตั้ง Claude Code, Codex, Claude Desktop และ ChatGPT Desktop

คู่มือนี้เตรียมเครื่องสำหรับ AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI ซึ่งเป็นส่วนหนึ่งของ 977-121 Module: Website Design and Development, มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต (Prince of Songkla University, Phuket Campus). ให้ทำก่อนวันอบรมและเลือก coding tool เพียงหนึ่งตัว เป็นเครื่องมือหลักในชั้น ส่วนอีกสามตัวใช้เปรียบเทียบหรือศึกษาต่อตามสิทธิ์บัญชี

การติดตั้งนี้เป็น prework และไม่เพิ่มเวลา workshop ซึ่งยังคง 2 วัน × วันละ 4 ชั่วโมง รวม 8 ชั่วโมง คำสั่งและสถานะผลิตภัณฑ์ตรวจจากเอกสารทางการเมื่อ 9 กันยายน 2026; หน้าดาวน์โหลด แผนบัญชี และนโยบายองค์กรอาจเปลี่ยนได้ จึงให้ตรวจข้อความที่แสดงกับบัญชีของตนในวันติดตั้งด้วย

เลือกเครื่องมือให้ตรงงาน

Claude Code และ Claude Desktop เป็นคนละการติดตั้ง เช่นเดียวกับ Codex CLI และ ChatGPT Desktop การเปิดแอปได้จึงยังไม่พิสูจน์ว่าคำสั่ง terminal พร้อมใช้ รายละเอียดสิทธิ์ของ Claude อ้างอิง Claude Code setup และ Claude Desktop; รายละเอียด Codex และแอป ChatGPT อ้างอิง Codex CLI และ Desktop app

เปิดแผนภาพ agent context แบบเต็มหน้า พร้อม prompt และแหล่งข้อมูล แล้วสังเกตว่าเครื่องมือเป็นเพียงส่วนหนึ่งของ context; ไม่ว่าเลือกตัวใด agent ยังต้องอ่าน brief, กฎของ repository, brandbook และหลักฐานตรวจรับก่อนแก้งาน

ผลลัพธ์ prework ที่ต้องส่ง

เมื่อทำเสร็จ ผู้เรียนควรมีหลักฐานสี่อย่าง:

1. ระบุระบบปฏิบัติการและ coding tool หลักที่เลือก: Claude Code หรือ Codex CLI
2. ภาพหรือข้อความจากคำสั่ง version โดยไม่เปิดเผย token, API key หรือข้อมูลบัญชี
3. ผล diagnostics หรือสถานะ sign-in ที่ไม่แสดง secret
4. คำตอบจาก prompt อ่านอย่างเดียวใน repository สำเนาสำหรับเรียน โดย git status ไม่เกิดไฟล์เปลี่ยนแปลงใหม่

หากไม่มีสิทธิ์บัญชีสำหรับ coding agent ให้ทำเส้นทางสำรองท้ายบท ส่งหลักฐาน environment และใช้ prompt แบบ Desktop/web เพื่อฝึก brief ก่อน ผู้เรียนไม่จำเป็นต้องซื้อสี่ผลิตภัณฑ์เพื่อเข้าชั้น

ทางเลือก A — ติดตั้ง Claude Code

เลือก installer หนึ่งวิธี อย่าติดตั้งซ้ำหลาย channel เพราะจะทำให้ตรวจไม่ชัดว่า terminal เรียก binary ตัวใด ข้อกำหนดระบบปัจจุบันและวิธีติดตั้งทางการอยู่ที่ Claude Code: getting started

เอกสารที่ตรวจระบุ macOS 13+, Windows 10 1809+/Windows Server 2019+, Ubuntu 20.04+, Debian 10+ หรือ Alpine 3.19+, RAM 4 GB, สถาปัตยกรรม x64/ARM64, internet และ shell ที่รองรับ ตัวเลขเหล่านี้เป็น snapshot วันที่ 9 กันยายน 2026 ให้เทียบหน้า getting started อีกครั้งก่อนวันอบรม

macOS, Linux หรือภายใน WSL

วิธี native ที่ Anthropic แนะนำ:

curl -fsSL https://claude.ai/install.sh | bash

ถ้าใช้ macOS และต้องการให้ Homebrew จัดการเวอร์ชัน:

brew install --cask claude-code

สำหรับ Ubuntu/Debian ที่องค์กรต้องการ stable package channel ให้ทำตามขั้นตอน signed repository ฉบับเต็มในเอกสารทางการและตรวจ fingerprint ก่อนติดตั้ง อย่าคัดลอก repository key จากแหล่งที่ไม่ทราบที่มา

Windows native — Claude Code

PowerShell:

irm https://claude.ai/install.ps1 | iex

หรือ WinGet:

winget install Anthropic.ClaudeCode

ถ้าใช้งานผ่าน Command Prompt และไม่ใช้ PowerShell/WinGet:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

ถ้าโปรเจกต์ใช้ Linux toolchain หรือจำเป็นต้องใช้ command sandboxing ให้ใช้ WSL 2 แล้วติดตั้งจาก Linux shell ด้วยคำสั่ง macOS/Linux ด้านบน Native Windows เหมาะกับโปรเจกต์ Windows แต่เอกสารปัจจุบันระบุว่าไม่รองรับ Claude Code sandboxing; Git for Windows เป็นตัวเลือกที่แนะนำเพื่อเปิด Bash tool มิฉะนั้น Claude Code จะใช้ PowerShell ดูข้อแตกต่างล่าสุดที่ Windows setup

ลงชื่อเข้าใช้และตรวจผล — Claude Code

เปิด terminal ใหม่ แล้วรัน:

claude --version
claude doctor
cd path/to/your/course-copy
claude

claude --version ควรแสดงเวอร์ชัน และ claude doctor เป็น diagnostics แบบอ่านอย่างเดียว เมื่อเปิด claude ครั้งแรก browser sign-in จะเริ่มตามบัญชีที่รองรับ; ใช้ /status ภายใน session เพื่อตรวจวิธี authentication ตาม Claude Code setup

ถ้า browser เปิดผิดเครื่องระหว่างใช้ SSH ให้กด c ที่หน้า login เพื่อคัดลอก URL ไปเปิดบนเครื่องที่มี browser แล้วนำ code กลับมาใส่ terminal ตาม Claude Code FAQ

อัปเดต — Claude Code

Native installer ตรวจ update เบื้องหลัง และบังคับตรวจได้ด้วย:

claude update
claude --version
claude doctor

ถ้าติดตั้งผ่าน package manager ให้ใช้ channel เดิม:

# Homebrew
brew upgrade claude-code

# WinGet
winget upgrade Anthropic.ClaudeCode

อย่าใช้ sudo npm install -g เป็นทางแก้ทั่วไป เอกสาร Anthropic เตือนเรื่อง permission และความปลอดภัย และวิธี native คือเส้นทางที่แนะนำในปัจจุบัน

ทางเลือก B — ติดตั้ง Codex CLI

เลือก installer หนึ่งวิธี จาก Codex CLI: install

macOS หรือ Linux

Standalone installer:

curl -fsSL https://chatgpt.com/codex/install.sh | sh

ถ้าใช้ Homebrew:

brew install --cask codex

หรือถ้ามี Node.js และตั้งใจให้ npm จัดการ global package:

npm install -g @openai/codex

Windows native — Codex CLI

PowerShell installer:

powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex"

หรือใช้ npm เมื่อมี Node.js:

npm install -g @openai/codex

เลือก WSL 2 เมื่อ repository และ toolchain อยู่ใน Linux ให้เก็บ repository ใน Linux home เช่น ~/code/... เพื่อ I/O และ permission ที่สม่ำเสมอกว่า /mnt/c/... แล้วติดตั้งจาก Linux shell เอกสารปัจจุบันระบุว่า WSL 1 ไม่รองรับตั้งแต่ Codex 0.115 และ config/auth ของ Windows กับ WSL อยู่คนละ home โดยค่าเริ่มต้น ดู Codex on WSL

ลงชื่อเข้าใช้และตรวจผล — Codex CLI

codex login
codex login status
codex --version

เลือก Sign in with ChatGPT หรือวิธีอื่นที่หน้า sign-in แสดงตามบัญชีของตน หากองค์กรกำหนด API key ให้ส่งผ่าน stdin และอย่าใส่ key ใน prompt, ไฟล์โปรเจกต์ หรือ source control:

Bash/Zsh/WSL (ตั้ง environment variable ตามวิธีจัดการ credential ของตนก่อน):

printenv OPENAI_API_KEY | codex login --with-api-key

PowerShell:

$env:OPENAI_API_KEY | codex login --with-api-key

บัญชี ChatGPT และ Platform API billing เป็นคนละเส้นทาง การมี subscription ไม่ได้แปลว่า API usage รวมอยู่เสมอ อ่าน Codex authentication และยึดสิทธิ์/นโยบายของ Workspace ที่แสดงจริง

CLI ที่ใช้ตรวจงานวิจัยมีคำสั่งต่อไปนี้ แต่คำสั่งย่อยอาจเปลี่ยนตามเวอร์ชัน ให้ตรวจ help ก่อน:

codex doctor --help
codex doctor --summary
codex update --help

ถ้า doctor หรือ update ไม่มีในเวอร์ชันของผู้เรียน ให้ใช้ codex --version และวิธี update ตาม installer channel แทน อย่าตีความว่าเป็นความผิดพลาดของบัญชี

อัปเดต — Codex CLI

# standalone บน macOS/Linux: รัน installer เดิมซ้ำ
curl -fsSL https://chatgpt.com/codex/install.sh | sh

# npm
npm install -g @openai/codex

# Homebrew
brew upgrade --cask codex

codex --version

แนวทาง version และ update ตาม channel อยู่ใน Codex CLI install

หากใช้ Windows standalone ให้รัน PowerShell installer ในหัวข้อ Windows เดิมซ้ำ ไม่ใช้คำสั่ง shell ของ macOS/Linux ใน PowerShell

ทดสอบ coding tool ครั้งแรกแบบอ่านอย่างเดียว

ก่อนเริ่ม ให้ใช้สำเนา repository สำหรับเรียนและบันทึกสถานะ:

git status --short

เปิด Claude Code ด้วย claude หรือ Codex CLI ด้วย codex จาก project root แล้วคัดลอก prompt ฉบับเต็มนี้:

คุณกำลังช่วยฉันเตรียมเรียน AI Web Studio ซึ่งเป็นส่วนหนึ่งของ
977-121 Module: Website Design and Development ที่ PSU วิทยาเขตภูเก็ต

งานรอบนี้เป็น READ-ONLY เท่านั้น:
- อ่านไฟล์และโครงสร้าง repository นี้ได้
- ห้ามแก้ สร้าง ลบ ย้าย หรือ format ไฟล์
- ห้ามติดตั้ง package, รัน server, เปิด port, login, deploy หรือส่งข้อมูลออกไป
- อ่าน AGENTS.md, CLAUDE.md หรือกฎ workspace/infra ที่พบก่อนสรุป
- หากหา source ใดไม่พบ ให้บอกว่าไม่พบ ห้ามเดา

สรุปเป็นภาษาไทย 5 ส่วน:
1. เป้าหมายของโปรเจกต์และ stack ที่ยืนยันจากไฟล์
2. คำสั่ง setup, build, test และ preview ที่มีอยู่จริง พร้อมชื่อไฟล์ต้นทาง
3. เส้นทางจากหน้าเว็บตัวอย่างไปยัง Worker และ D1
4. Brand/context ที่ต้องอ่านก่อนแก้ UI โดยกล่าวถึง Rawinnipa brandbook เฉพาะเมื่อพบหลักฐานอ้างอิงใน workspace
5. แผนเริ่มบทเรียนสั้น ๆ 3 ขั้น โดยยังไม่ลงมือแก้

ท้ายคำตอบให้แยก “ข้อเท็จจริงที่ยืนยันจากไฟล์” กับ “คำถามหรือสิ่งที่ยังยืนยันไม่ได้”
และระบุรายชื่อไฟล์ที่อ่าน ห้ามอ้างว่าทดสอบคำสั่งใดถ้ายังไม่ได้รัน

ผลที่สังเกตได้ควรเป็นคำตอบ 5 ส่วน มีชื่อไฟล์จริง แยก facts กับ unknowns และไม่มีข้อความว่าแก้ไฟล์แล้ว ออกจาก session แล้วตรวจซ้ำ:

git status --short

ผลก่อนและหลังควรเหมือนกัน หากมีไฟล์เปลี่ยน ให้หยุด ตรวจ git diff และบันทึกว่า agent ทำเกินขอบเขต อย่าลบหรือย้อนการเปลี่ยนแปลงที่ไม่รู้เจ้าของ

ติดตั้ง Claude Desktop

Claude Desktop รองรับ macOS, Windows และ Linux beta ตามรุ่นระบบที่ระบุใน คู่มือติดตั้ง Claude Desktop ให้ตรวจ requirement ล่าสุดก่อนดาวน์โหลด

macOS และ Windows

1. เปิด claude.ai/download จาก browser
2. เลือก installer ของระบบ เปิดไฟล์ และติดตั้งตามหน้าจอ
3. เปิด Claude จาก Applications หรือ Start menu แล้ว sign in
4. เริ่ม chat ใหม่และตรวจว่าส่งข้อความทั่วไปได้

แอปอาจแสดง Claude Code หรือ Cowork เฉพาะแผน/องค์กรที่เปิดสิทธิ์ Cowork เข้าถึงเฉพาะโฟลเดอร์ที่ผู้ใช้เชื่อมและทำงานใน isolated VM; สำหรับบทเรียนให้เชื่อมเฉพาะโฟลเดอร์สำเนาที่ไม่มี secret แล้วตรวจไฟล์ก่อนนำไปใช้ ความสามารถเหล่านี้ไม่ใช่หลักฐานว่าคำสั่ง claude ใน terminal ติดตั้งแล้ว

Linux beta

ใช้ signed apt repository ตามเอกสารทางการ:

sudo curl -fsSLo /usr/share/keyrings/claude-desktop-archive-keyring.asc https://downloads.claude.ai/claude-desktop/key.asc
gpg --show-keys /usr/share/keyrings/claude-desktop-archive-keyring.asc

เทียบ fingerprint กับเอกสารก่อนทำขั้นถัดไป ค่าที่ตรวจวันที่ 9 กันยายน 2026 คือ 31DD DE24 DDFA B679 F42D 7BD2 BAA9 29FF 1A7E CACE หากไม่ตรงให้ตรวจจากผู้ให้บริการก่อนเพิ่ม repository เมื่อตรวจแล้วจึงรัน:

echo "deb [signed-by=/usr/share/keyrings/claude-desktop-archive-keyring.asc] https://downloads.claude.ai/claude-desktop/apt/stable stable main" | sudo tee /etc/apt/sources.list.d/claude-desktop.list
sudo apt update && sudo apt install claude-desktop
claude-desktop

Linux Desktop ไม่ self-update ให้ใช้ package manager อัปเดต package claude-desktop; ความสามารถบางอย่าง เช่น Computer Use และ dictation ยังอาจไม่มีใน Linux beta ตาม คู่มือติดตั้ง

ติดตั้ง ChatGPT Desktop

ChatGPT Desktop เป็นแอปเดียวที่ให้เริ่มงานด้วย ChatGPT หรือ Codex ได้ตามสิทธิ์ของบัญชี ไม่ต้องติดตั้ง Codex CLI เพื่อใช้แอป และการติดตั้งแอปไม่สร้างคำสั่ง codex ใน terminal ดูขั้นตอนปัจจุบันที่ ChatGPT desktop app

macOS

1. เปิด chatgpt.com/download
2. ดาวน์โหลด installer ที่หน้าเว็บเสนอให้ระบบนี้และติดตั้ง
3. เปิดแอปแล้ว sign in ด้วยวิธีที่บัญชี/Workspace อนุญาต
4. เริ่ม chat หรือ project หนึ่งรายการและตรวจว่าส่งข้อความได้

หน้า Learn ที่ตรวจเมื่อ 9 กันยายน 2026 ไม่ระบุ minimum macOS/hardware ไว้ในบทความเดียวกัน จึงไม่ใส่ตัวเลขตายตัว ให้ยึด requirement ที่หน้า download และ installer แสดงในวันติดตั้ง

Windows

ดาวน์โหลดจาก Microsoft Store installer หรือใช้ WinGet:

winget install --id 9PLM9XGG6VKS -s msstore

เปิดแอปจาก Start menu แล้ว sign in แอปปกติตรวจ update เอง; เครื่องที่องค์กรจัดการผ่าน Microsoft Store/MDM อาจใช้นโยบาย update ต่างออกไป หน้า Learn ที่ตรวจไม่ได้ให้ minimum Windows/hardware ในบทความเดียวกัน จึงให้ตรวจ Microsoft Store ก่อนวันอบรม

Prompt สำหรับ Desktop/web — เปลี่ยนโจทย์เป็น brief

ผู้ใช้ Linux ตรวจ desktop preview และ distribution/package ที่รองรับได้จาก OpenAI Linux app หากรุ่นระบบยังไม่รองรับ ให้ใช้ ChatGPT web ร่วมกับ Codex CLI บทเรียนไม่ใช้ desktop preview เป็นข้อบังคับก่อนเข้าเรียน

ใช้ได้กับ Claude Desktop, ChatGPT Desktop หรือหน้าเว็บเมื่อไม่มี coding-agent access ไม่ต้องแนบ repository หรือ brandbook ทั้งเล่ม ให้ใช้ข้อมูลสาธิตและ asset ที่มีสิทธิ์แชร์เท่านั้น:

ช่วยฉันเตรียม brief สำหรับเว็บไซต์การเรียนรู้ของหลักสูตร
“AI Web Studio — ออกแบบและพัฒนาเว็บไซต์ด้วย AI”
ซึ่งเป็นส่วนหนึ่งของ “977-121 Module: Website Design and Development”
มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

บริบทแบรนด์ที่อนุมัติสำหรับแบบฝึกนี้:
- Brand: Rawinnipa Software and Consultants
- บุคลิก: มืออาชีพ ชัดเจน ใช้งานได้จริง และรับผิดชอบต่อคุณภาพ
- สีพื้นหลัก: #0A0A0A; พื้นผิว: #1A1A1A; ตัวอักษร: #F7F7F7
- Accent ใช้เท่าที่จำเป็น: Rawin Green #3EDC81
- Typeface: Inter สำหรับละติน และ Noto Sans Thai สำหรับภาษาไทย
- อย่าสร้างข้อกำหนดแบรนด์ โลโก้ คำรับรอง สถิติ หรือข้อมูลมหาวิทยาลัยเพิ่มเอง

ผู้เรียนมีเวลาอบรม 2 วัน วันละ 4 ชั่วโมง รวมพักวันละ 10 นาที
เนื้อหาที่เกินเวลาให้แยกเป็น prework หรือ self-study ชัดเจน

ก่อนเสนอหน้าตา ให้ทำ 4 อย่าง:
1. สรุป audience, งานหลักของผู้ใช้ และข้อมูลที่ยังขาด
2. เขียน content hierarchy สำหรับหน้าแรก 6–8 ส่วน
3. เสนอ mobile-first wireframe แบบข้อความ พร้อม heading, CTA และสถานะ interactive ที่จำเป็น
4. สร้าง acceptance checklist ที่ตรวจได้สำหรับ 390px, keyboard, visible focus,
   contrast WCAG AA, reduced motion และลิงก์/ปุ่มที่ทำงานจริง

แยก “ข้อมูลที่ให้มา” “สมมติฐาน” และ “คำถามค้าง” ให้ชัด
ยังไม่สร้างภาพ ไม่เขียนโค้ด ไม่เรียกเครื่องมือภายนอก และไม่อ้างว่าได้อ่าน brandbook ฉบับเต็ม

ผลที่สังเกตได้ควรมี brief, hierarchy, text wireframe และ checklist ครบ แยก assumptions ออกจาก facts และไม่อ้างว่าอ่านไฟล์ที่ไม่ได้แนบ คำตอบนี้เป็นวัตถุดิบออกแบบ ไม่ใช่หลักฐานว่า UI ผ่าน accessibility หรือใช้แบรนด์ถูกต้องแล้ว

เมื่อบัญชีหรือเครื่องไม่พร้อม

เส้นทางสำรองต้องคงผลลัพธ์การเรียน: อ่าน brief, แยก facts/assumptions, ตรวจ source และอธิบายหลักฐาน ผู้เรียนไม่ควรยืม token, แชร์ API key หรืออัปโหลด repository/brandbook ไปยังบัญชีส่วนตัวเพื่อให้ “ติดตั้งผ่าน”

อาการติดตั้งที่พบบ่อย

Checklist ก่อนวันแรก

• เลือก Claude Code หรือ Codex CLI หนึ่งตัวและบันทึก installer channel
• ตรวจ version และ sign-in โดยไม่เผย secret
• เปิด repository สำเนาสำหรับเรียนจาก project root
• รัน prompt อ่านอย่างเดียว แล้วตรวจ git status ก่อน/หลัง
• ติดตั้ง Desktop app เฉพาะตัวที่ใช้จริง หรือยืนยันว่า web app เป็น fallback
• เตรียมข้อมูลสาธิต ไม่มีข้อมูลลูกค้า credential หรือไฟล์ภายในที่ไม่จำเป็น
• เก็บคำถามค้างไว้ถามผู้สอน โดยไม่เปลี่ยนเวลาอบรม 2 วัน × 4 ชั่วโมง

แหล่งอ้างอิงหลัก: Claude Code getting started, Claude Code FAQ, Claude Desktop installation, Codex CLI, Codex authentication, Codex on WSL, ChatGPT desktop app และ OpenAI download. ตรวจค้นและเรียบเรียงเมื่อ 9 กันยายน 2026; ไม่มีการติดตั้งแอป เชื่อมบัญชี หรือทดสอบสิทธิ์แบบชำระเงินระหว่างทำเอกสารนี้