1. ข้อมูลเบื้องต้นและการตั้งค่า
ยินดีต้อนรับ
สวัสดี ยินดีต้อนรับสู่ Coding Jam ในอีก 75 นาทีข้างหน้า คุณจะได้สร้างเว็บแอป AI ที่ใช้งานได้จริง
ดูเว็บไซต์ที่นี่: เว็บไซต์ Coding Jam
สิ่งที่คุณจะสร้าง
เว็บแอปที่ทำงานด้วยระบบ AI โดยอิงตามสรุปโปรเจ็กต์ของสัปดาห์นี้ ทำงานในเบราว์เซอร์ ใช้ Gemini AI ของ Google เป็นของคุณอย่างเต็มรูปแบบเมื่อสิ้นสุดเซสชัน
ติดตั้ง Antigravity
Antigravity คือผู้ช่วย AI ที่เราจะใช้สำหรับทุกอย่าง ซึ่งเป็นแอปที่ติดตั้งในคอมพิวเตอร์
ขั้นตอนที่ 1 - ดาวน์โหลด
👉 ไปที่ https://antigravity.google/download ในเบราว์เซอร์
👉 คลิกปุ่มดาวน์โหลดสำหรับระบบปฏิบัติการของคุณ (Mac, Windows หรือ Linux)
👉 เรียกใช้โปรแกรมติดตั้งที่ดาวน์โหลดมา การตั้งค่าเริ่มต้นก็ใช้ได้ ให้คลิกผ่านการตั้งค่าเหล่านั้น
ขั้นตอนที่ 2 - เปิดและลงชื่อเข้าใช้
👉 เปิด Antigravity จากโฟลเดอร์ Applications (Mac) หรือเมนูเริ่ม (Windows)
👉 คลิก "ลงชื่อเข้าใช้" เมื่อระบบแจ้ง
👉 ใช้บัญชี Google
ขั้นตอนที่ 3 - ยืนยันหน้าจอต้อนรับ
คุณควรเห็นหน้าจอต้อนรับของ Antigravity พร้อมปุ่มขนาดใหญ่ 3 ปุ่ม
- เปิดโฟลเดอร์ - เปิดโฟลเดอร์ที่มีอยู่เป็นพื้นที่ทำงาน
- เปิด Agent Manager - ไปที่แดชบอร์ดของเอเจนต์ (ซึ่งเป็นที่ที่เราจะทำงานส่วนใหญ่)
- โคลนที่เก็บ - ดาวน์โหลดโปรเจ็กต์จาก GitHub (เราจะใช้คำสั่งนี้ในส่วนที่ 3A)
ดูเอกสารเพิ่มเติมได้ที่ https://antigravity.google/ หากต้องการเจาะลึก
✅ จุดตรวจสอบ: ติดตั้ง Antigravity แล้ว คุณลงชื่อเข้าใช้แล้ว และเห็นหน้าจอต้อนรับที่มี 3 ปุ่ม
2. ติดตั้งเครื่องมือที่จำเป็น (ผ่าน Antigravity)
Antigravity ต้องใช้เครื่องมือช่วย 2 อย่างในคอมพิวเตอร์
เครื่องมือ | คำอธิบาย (ภาษาที่เข้าใจง่าย) |
uv | จัดการ Python ซึ่งเป็นภาษาที่อยู่เบื้องหลังแบ็กเอนด์ของแอป |
git | ดาวน์โหลดไฟล์โปรเจ็กต์จากอินเทอร์เน็ต (Antigravity ใช้คำสั่งนี้ในการโคลน) |
คุณไม่ต้องพิมพ์คำสั่งติดตั้งด้วยตนเอง คุณจะถาม Antigravity เป็นภาษาอังกฤษ ส่วนที่เหลือก็ปล่อยให้ Antigravity จัดการ
ขั้นตอนที่ 1 - เปิดพื้นที่ทำงานชั่วคราว
Antigravity ต้องเปิดโฟลเดอร์ไว้เพื่อแชท (ไม่มีโฟลเดอร์ = ไม่มีแชท)
👉 ในหน้าจอต้อนรับ ให้คลิก "เปิดโฟลเดอร์"
👉 สร้างหรือเลือกโฟลเดอร์ที่ว่างเปล่า แนะนำ: โฟลเดอร์ใหม่ชื่อ coding-jam-setup ในตำแหน่งที่สะดวก (เดสก์ท็อปก็ได้)
👉 คลิกเปิด (หรือเลือกโฟลเดอร์)
มุมมอง Agent Manager จะเปิดขึ้นพร้อมกับเลือกพื้นที่ทำงานใหม่ (ว่างเปล่า)
ขั้นตอนที่ 2 - ขอให้ Antigravity ตรวจสอบและติดตั้งเครื่องมือ
👉 กด Cmd+L (Mac) หรือ Ctrl+L (Win/Linux) เพื่อโฟกัสที่ช่องป้อนข้อมูลแชท
👉 ยืนยันว่าตัวเลือกโมเดลที่ด้านล่างแสดง Gemini 3 Flash (ค่าเริ่มต้น - เหมาะสำหรับกรณีนี้)
📝 พรอมต์ที่ง่ายที่สุด — วางข้อความนี้ลงในแชท:
Install uv and git on my computer if they're not already there.
Don't install Node.js. Ask permission before each install command.
📝 เวอร์ชันที่ละเอียดกว่า (หากต้องการ):
Check whether uv and git are installed by running their --version commands.
For any tool that's missing, install it using the best method for my OS:
- Mac: prefer `brew install` (install Homebrew first if missing)
- Windows: prefer `winget install`
- Linux: prefer `apt install` or `dnf install`
Ask permission before each install command.
Do NOT install Node.js — we'll install it later only if needed.
When done, give me a summary of what's installed.
👉 กด Enter เพื่อส่ง
🤖 ดูการทำงานของตัวแทน คลิกอนุญาตในป๊อปอัป
ขั้นตอนที่ 3 — อ่านสรุป
เมื่อตัวแทนดำเนินการเสร็จแล้ว คุณจะเห็นข้อความคล้ายกับตัวอย่างต่อไปนี้
✅ Setup complete:
- uv 0.4.18 ✅ (installed)
- git 2.42.0 ✅ (already had it)
- Node.js: skipped (will install later if needed)
หากเกิดข้อผิดพลาด
✅ จุดตรวจสอบ: Agent ยืนยันว่าได้ติดตั้ง uv และ git แล้ว เวลารวม: ประมาณ 3-5 นาที (หรือประมาณ 7 นาทีหากต้องติดตั้ง Homebrew บน Mac ก่อน)
โคลนโปรเจ็กต์
1 — เลือกโปรเจ็กต์ของสัปดาห์นี้
Coding Jam เป็นโปรแกรม 8 สัปดาห์ที่มีมินิโปรเจ็กต์แตกต่างกันในแต่ละสัปดาห์ ผู้ดูแลการเรียนการสอนจะบอกคุณว่าวันนี้เราจะทำในสัปดาห์ใด ค้นหาแถวดังกล่าวแล้วคัดลอก URL
สัปดาห์ | โปรเจ็กต์ | URL ของ Repo |
1 | การลองทรงผมด้วย AI |
|
2 | โปรแกรมสร้างอวาตาร์ AI |
|
3 | ปฏิทินปีพิเศษของฉัน |
|
4 | ตู้เย็นสู่สูตรอาหาร |
|
5 | ขวดโหลอารมณ์ AI |
|
6 | พอร์ตโฟลิโอแบบหน้าเดียว |
|
7 | Resume Tailor |
|
8 | แชทกับตัวละคร AI |
|
2 — กลับไปที่หน้าจอต้อนรับ
เราต้องกลับไปที่หน้าจอเปิดเพื่อใช้ปุ่ม "โคลนที่เก็บ"
👉 ใน Antigravity ให้โคลนโปรเจ็กต์ที่คุณเลือก ตัวอย่างการโคลนสัปดาห์ที่ 1 แต่คุณต้องป้อนที่เก็บที่ถูกต้อง
📝 พรอมต์อ้างอิง
Git clone ⚠️ PASTE_YOUR_PROJECT and save to my local folder: ⚠️ PASTE_YOUR_PROJECT
3 — ทัวร์ชมโปรเจ็กต์
ดูรายการไฟล์ คุณควรเห็นข้อมูลต่อไปนี้
ไฟล์ / โฟลเดอร์ | คืออะไร |
BRIEF.md | แนวคิดผลิตภัณฑ์ - สิ่งที่เรากำลังสร้างขึ้นเป็นภาษาอังกฤษอย่างง่าย |
อ้างอิง/ | โฟลเดอร์ที่มีแอปตัวอย่างที่ใช้งานได้ AI จะอ่านโฟลเดอร์นี้เมื่อเขียนโค้ดเพื่อให้แอปของคุณตรงกับรูปแบบ |
.gitignore | รายการไฟล์ที่ Git ควรละเว้น (เทคนิค - ละเว้น) |
👉 คลิก
BRIEF.md เพื่อเปิดและดูไอเดียโปรเจ็กต์
✅ จุดตรวจสอบ: คุณได้โคลนโปรเจ็กต์ เปิดเป็นพื้นที่ทำงาน และอ่าน BRIEF.md แล้ว
3. ติดตั้งทักษะเวิร์กช็อป
"ทักษะ" คือชุดคำสั่งที่จัดเก็บไว้ใน GitHub ซึ่งคุณสามารถส่งให้ AI ได้
ขั้นตอนที่ 1 - ขอให้ Antigravity ติดตั้งทักษะ
📝 วางพรอมต์นี้ในแชท:
Please install the workshop skills into this workspace's .agent/skills/
folder. Run these two git clones from the project root:
1. git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
2. git clone https://github.com/google-gemini/gemini-skills .agent/skills/gemini-skills
When Antigravity asks permission to run each command, I'll click Allow.
When done, list the skills that are now available in this workspace.
ขั้นตอนที่ 2 - คลิกอนุญาตในป๊อปอัป 2 รายการ
🤖 คุณควรเห็นข้อความคล้ายกับ
I'll create the .agent/skills/ folder and clone both repos into it.
Running: git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
อนุญาตการดำเนินการใดก็ได้หากเอเจนต์แจ้ง
👉 ตรวจสอบรายการไฟล์ ตอนนี้คุณควรเห็นโฟลเดอร์ .agent/ ใหม่ คลิกเพื่อขยายและตรวจสอบว่ามีทักษะหลายอย่างในโฟลเดอร์นี้ เช่น skills-garden และ gemini-skills
การทำงานของแต่ละทักษะ (สำหรับการอ้างอิง ไม่ต้องดำเนินการใดๆ)
ทักษะ | การทำงาน |
| เขียนเอกสารการออกแบบผลิตภัณฑ์ |
| เขียนเอกสารการออกแบบ UX |
| เขียนเอกสารการออกแบบทางวิศวกรรม (พร้อมส่วนกลยุทธ์การทดสอบ) |
| เขียนการทดสอบ เรียกใช้การทดสอบ แก้ไขข้อผิดพลาดโดยอัตโนมัติ (ลองสูงสุด 3 ครั้ง) |
| ทักษะอย่างเป็นทางการของ Google - วิธีใช้ Gemini API อย่างถูกต้อง |
| การสำรองข้อมูลที่ง่ายขึ้นในกรณีที่ทักษะอย่างเป็นทางการไม่พร้อมใช้งาน |
| การอ้างอิงสไตล์ภาพ |
✅ จุดตรวจสอบ: รายการไฟล์แสดงโฟลเดอร์ .agent/skills/ ใหม่ที่มีทั้ง skills-garden/ และ gemini-skills/ อยู่ภายใน
4. The Spec Talk
Spec Talk คือการสนทนา 2 นาทีที่คุณบอก AI ถึงสิ่งที่คุณต้องการสร้าง ยังไม่มีโค้ด เอกสาร หรือสิ่งใดๆ ที่สร้างขึ้น เราเพียงพูดคุยกัน
คำถามที่ต้องตอบ 1 ข้อ
สิ่งที่สำคัญที่สุดที่ AI ต้องทราบ
"อะไรเข้า อะไรออก"
🎯 โมเดล: Gemini 3 Flash (ค่าเริ่มต้น) - ถามและตอบแบบง่ายๆ
📝 วางข้อความนี้:
Here's what's in @BRIEF.md. Before we lock the spec, ask me 3 short
questions to refine it:
1. What's the one input I want the user to provide?
2. What's the magical moment for the user?
3. What are we deliberately NOT building (to keep scope tight)?
DO NOT generate any plans, docs, or code yet. Just ask me the questions
and wait for my answers.
🤖 คุยกับ AI และปรับแต่งแผน
อย่าเพิ่งสร้างเอกสาร
เมื่อสิ้นสุดการพูดคุยเกี่ยวกับข้อกำหนด ตัวแทนไม่ควรสร้างไฟล์ใดๆ หากเห็น product.md หรือไฟล์ใหม่อื่นๆ ปรากฏขึ้น ให้บอกตัวแทนว่า "หยุด — ลบเอกสารที่คุณเพิ่งสร้าง เรายังอยู่ในระยะการพูดคุยเกี่ยวกับข้อกำหนด"
เคล็ดลับ
✅ เช็คพอยต์: คุณได้สนทนากับ Antigravity สั้นๆ เกี่ยวกับแนวคิดผลิตภัณฑ์ของคุณ และ Antigravity เข้าใจอินพุตและเอาต์พุต ยังไม่มีการสร้างไฟล์
5. สร้างเอกสารการออกแบบ 3 ฉบับ
ตอนนี้ AI เขียนแผน 3 แผนบนกระดาษก่อนที่จะเขียนโค้ด เราทำทั้ง 3 อย่างในพรอมต์เดียวโดยใช้ทักษะการเขียนเอกสารการออกแบบทั้ง 3 อย่างตามลำดับ
เอกสาร 3 ฉบับ
ไฟล์ | มีอะไรบ้าง | ทักษะที่ใช้ |
product.md | ผู้ใช้คือใคร สิ่งที่เรากำลังแก้ไข ฟีเจอร์ |
|
ui.md | ลักษณะหน้าจอ สี แบบอักษร เลย์เอาต์ |
|
engineering.md | ชุดซอฟต์แวร์โครงสร้างพื้นฐาน โครงสร้างไฟล์ + ส่วนกลยุทธ์การทดสอบ |
|
ขั้นตอนที่ 1 - สร้างเอกสารทั้ง 3 ฉบับพร้อมกัน
🤖 เปลี่ยนไปใช้ Gemini 3.1 Pro ที่มีความคิดต่ำ (แนะนำ)
📝 วางข้อความนี้ พรอมต์เดียวทำได้ทั้ง 3 อย่าง:
Apply all three design-doc skills in this order:
1. pm-design-doc from .agent/skills/skills-garden/design-doc-skills/pm-design-doc/
→ Generates product.md
2. ux-design-doc from .agent/skills/skills-garden/design-doc-skills/ux-design-doc/
→ Generates ui.md (based on the product.md you just created)
3. eng-design-doc from .agent/skills/skills-garden/design-doc-skills/eng-design-doc/
→ Generates engineering.md (based on product.md, ui.md, and @BRIEF.md)
→ MUST include a "Testing strategy" section with real content
(specific functions to unit-test, one integration test per major flow,
and what's deliberately NOT being tested)
Use the patterns in @reference/ as guidance for the engineering doc
(but vary if the brief justifies it).
Save all three files in the project root. After each one is saved,
briefly confirm what you saved before moving to the next.
When all three are done, give me a final summary listing the section
titles in each file.
ขั้นตอนที่ 2 — ยืนยันว่าบันทึกไฟล์แล้ว
👉 ตรวจสอบรายการไฟล์ ตอนนี้คุณควรเห็น (นอกเหนือจากสิ่งที่เคยเห็นก่อนหน้านี้) ดังนี้
codingjam-week-1/
├── product.md ← NEW
├── ui.md ← NEW
├── engineering.md ← NEW
├── BRIEF.md
├── reference/
└── .agent/
ขั้นตอนที่ 3 - ตรวจสอบและทำซ้ำ
คุณเป็นหัวหน้า AI เขียนแผน ตอนนี้คุณอ่านและขอเปลี่ยนแปลงได้แล้ว
นิสัยที่สำคัญที่สุด
เมื่อต้องการเปลี่ยนแปลง ให้เปลี่ยนเอกสาร ไม่ใช่โค้ด เอกสารคือแหล่งข้อมูลที่เชื่อถือได้
🤖 อ่านและตรวจสอบเอกสารทั้ง 3 ฉบับ
👉 เปิดแต่ละรายการ (คลิกในรายการไฟล์) จากบนลงล่าง
product.md— Does this describe what I want?ui.md— หน้าจอและรูปลักษณ์ถูกต้องไหมengineering.md— กลยุทธ์การทดสอบสมเหตุสมผลไหม (คุณไม่จำเป็นต้องเข้าใจเทคโนโลยี เพียงแค่ตรวจสอบว่ามีแผนก็พอ)
🤖 ตอนนี้เอกสารพร้อมแล้ว ให้ไปที่ขั้นตอนถัดไป
6. ใช้งาน + ทดสอบ
ส่วนที่ใหญ่ที่สุดของโค้ดแล็บ AI จะใช้เอกสารทั้ง 3 รายการนี้เพื่อสร้างแอป ซึ่งทั้งโค้ดและการทดสอบจะอยู่ด้วยกันในครั้งเดียว เมื่อส่วนนี้สิ้นสุดลง คุณจะมีโค้ดเบสที่ใช้งานได้ซึ่งผ่านการทดสอบของตัวเอง
เหตุใดจึงต้องเขียนโค้ดและเทสต์พร้อมกัน
engineering.md ระบุอยู่แล้วว่าควรมีการทดสอบใดบ้าง (ส่วนกลยุทธ์การทดสอบ) การติดตั้งใช้งานจะไม่เสร็จสมบูรณ์จนกว่าการทดสอบเหล่านั้นจะผ่าน เราจึงทำทั้ง 2 อย่างในขั้นตอนเดียว
🤖 เปลี่ยนไปใช้ Gemini 3.1 Pro ที่มีความสามารถในการคิดขั้นสูง (แนะนำ)
ขั้นตอนที่ 1 — ขอให้ AI สร้างทั้งโค้ดและเทสต์
📝 วางข้อความนี้:
You're going to do two things in one shot.
PART 1 — IMPLEMENT THE APP CODE
- Build it according to @engineering.md (stack, file structure)
- Match the UI described in @ui.md
- Use the patterns in @reference/ as guidance for code style
- Backend: use Python with `uv` for dependency management
- If your chosen stack requires Node.js and it isn't installed on my
system, install it via Antigravity (use brew/winget/apt) — ask
permission first
- DO NOT start any dev servers — that's a later section
PART 2 — APPLY THE TEST-GATE SKILL
After the code is written, apply the test-driven-dev skill from
.agent/skills/skills-garden/eng-skills/test-driven-dev.md.
Use the "Testing strategy" section in @engineering.md as the test plan.
IMPORTANT: Mock the Gemini API calls in tests — use a stub that returns
fake response data. The real API key isn't set up yet, and tests should
be deterministic and free anyway (best practice).
The skill should:
1. Write the tests described in the Testing strategy
2. Run them (use pytest for Python, Vitest or Jest for JS)
3. If any fail, fix the CODE (not the tests) and re-run
4. Up to 3 retry attempts max
5. If still failing after 3 tries, STOP and tell me what's broken
When Antigravity asks permission to run commands (uv sync, uv pip
install, pytest, etc.), click Allow.
Report results when both parts are done.
🤖 คลิกอนุญาตในป๊อปอัป (หลายรายการ)
ขั้นตอนที่ 2 — อ่านรายงานฉบับสุดท้าย
เมื่อเสร็จแล้ว ให้ตรวจสอบสิ่งต่อไปนี้
- ✅ มีโฟลเดอร์
backend/ที่มีโค้ด - ✅ มีโฟลเดอร์
frontend/ที่มีโค้ด - ✅ มีโฟลเดอร์
tests/ที่มีไฟล์ทดสอบ - ✅ ข้อมูลสรุประบุว่า "การทดสอบทั้งหมดผ่าน" (ไม่ใช่ "ไม่ผ่านหลังจากลองอีก 3 ครั้ง")
- ✅ ตัวแทนไม่ได้เริ่มเซิร์ฟเวอร์ใดๆ
จะเกิดอะไรขึ้นหากการลองใหม่ทั้ง 3 ครั้งล้มเหลว
พบได้น้อยแต่ก็เป็นไปได้ โดยปกติแล้วหมายความว่ากลยุทธ์การทดสอบของเอกสารด้านวิศวกรรมไม่สมจริงสำหรับสิ่งที่สร้างขึ้น
📝 วางข้อความนี้:
The auto-fix loop hit the 3-try cap. Pull up @engineering.md and look
at the Testing strategy section. Is the strategy realistic for what
got built? Suggest updates to the doc so the tests align with reality.
Don't change the code yet — update the doc, then re-apply the
test-driven-dev skill.
จะทำอย่างไรหากพบสิ่งผิดปกติ
👉 หาก AI สร้างสิ่งที่ไม่ตรงกับเอกสาร โปรดกลับไปที่เอกสาร อย่าขอให้ AI "แก้ไขโค้ด" แยกกัน
ตัวอย่าง
I see you built the chat as a popup, but @ui.md says it should be a
full page. Either update ui.md if a popup is actually better, OR
rebuild the chat as a full page to match the current ui.md.
เสมอ: เอกสารคือแหล่งข้อมูลที่เชื่อถือได้
✅ จุดตรวจสอบ: มีโค้ด มีการทดสอบ และการทดสอบผ่าน พร้อมตั้งค่าคีย์ API แล้ว
7. การตั้งค่า Google Cloud + คีย์ API
ขั้นตอนที่ 1 — รับคีย์ Gemini API จาก AI Studio (1 นาที)
- เปิด https://aistudio.google.com/app/apikey ในแท็บเบราว์เซอร์ใหม่
- ลงชื่อเข้าใช้ด้วยบัญชี Google เดียวกัน
- คลิก "สร้างคีย์ API" (ด้านขวาบน)
- กล่องโต้ตอบจะเปิดขึ้นพร้อมเมนูแบบเลื่อนลงของโปรเจ็กต์
- หากคุณสร้างโปรเจ็กต์ Google ไว้แล้ว คุณสามารถเลือกโปรเจ็กต์นั้น แล้วคลิก "สร้างคีย์ API ในโปรเจ็กต์ที่มีอยู่"
- หากไม่มีในรายการ: คลิก "สร้างโปรเจ็กต์"
- คัดลอกคีย์ API ที่ปรากฏ เริ่มต้นด้วย
AIza...ประมาณ 40 อักขระ
✏️ วางไว้ในที่ที่ปลอดภัย — คุณจะต้องส่งให้ Antigravity ในขั้นตอนถัดไป
ขั้นตอนที่ 2 - บอก Antigravity ให้ตั้งค่า .env (30 วินาที)
เปิดแชทใน Antigravity
⚠️ หยุด โปรดอ่านข้อความนี้ก่อนวาง
พรอมต์ด้านล่างมีตัวยึดตำแหน่ง PASTE_YOUR_API_KEY_HERE และ PASTE_YOUR_PROJECT_ID_HERE
คุณต้องแทนที่ค่าเหล่านี้ด้วยค่าจริงจากขั้นตอนที่ 1 ไม่เช่นนั้นไฟล์ .env จะมีข้อความ ⚠️ PASTE_... ตามตัวอักษรและแอปของคุณจะใช้งานไม่ได้
ก่อนคลิกส่ง ให้สแกนพรอมต์และตรวจสอบว่าคุณเห็นข้อความต่อไปนี้
GEMINI_API_KEY=AIzaSy...(เริ่มด้วยAIzaSy, ~40 อักขระ)
หากยังเห็น
⚠️ PASTE_...
ที่ใดก็ได้ในพรอมต์ แต่อย่าเพิ่งส่ง ให้แทนที่ก่อน
📝 พรอมต์เพื่อวาง (แทนที่
⚠️ PASTE_...
เครื่องหมายก่อน):
Apply the gemini-api-dev skill from .agent/skills/gemini-skills/skills/gemini-api-dev/.
(If that skill isn't found, fall back to .agent/skills/skills-garden/eng-skills/gemini-api.md)
Create a .env file in the backend folder with these settings:
- GEMINI_API_KEY= ⚠️ PASTE_YOUR_API_KEY_HERE
- Any other env vars the app needs based on @engineering.md
Also verify:
- .env is in .gitignore so the key never gets committed
- The backend code reads GEMINI_API_KEY at startup
- The Gemini SDK is initialized correctly (use google-genai for Python)
When Antigravity asks permission to install Python packages, click Allow.
When done, show me the .env contents with the KEY redacted (just first 6 chars + ...).
🤖 สิ่งที่คาดไว้: เอเจนต์สร้าง .env ติดตั้ง google-genai (คุณคลิกอนุญาต) ยืนยันด้วยคีย์ที่ปิดบังบางส่วน
✅ .env created at backend/.env
GEMINI_API_KEY=AIzaSy... (40 chars, redacted)
.env is already in .gitignore ✓
Backend reads GEMINI_API_KEY via os.getenv() ✓
Gemini client initialized ✓
8. ดูตัวอย่างและยืนยัน
สร้างโค้ดแล้ว การทดสอบผ่าน กำหนดค่าคีย์ API แล้ว ตอนนี้ให้เปิดแอปแล้วคลิกไปรอบๆ
สิ่งที่มนุษย์ตรวจพบ (แต่การทดสอบพลาด)
Tests Catch | Humans Catch |
ค่าที่ส่งคืนไม่ถูกต้อง | สีไม่สวย |
การเรียกใช้ฟังก์ชันที่ใช้งานไม่ได้ | ข้อความที่สร้างความสับสน |
การนำเข้าที่ขาดหายไป | ปุ่มในตำแหน่งที่แปลก |
ข้อผิดพลาดที่เกิดจากความคลาดเคลื่อน 1 | ภาพเคลื่อนไหวดูไม่ราบรื่น |
ข้อบกพร่องทางตรรกะ | อารมณ์ไม่ดี |
ขั้นตอนที่ 1 ขอให้ Antigravity เริ่มเซิร์ฟเวอร์การพัฒนา
🎯 MODEL: Default (Flash) is fine.
📝 วางข้อความนี้:
Please start the dev server(s) so I can preview the app in my browser.
Tell me the URL when it's ready. When Antigravity asks permission to
run the server command, I'll click Allow.
🔔 ป๊อปอัป: uv run uvicorn main:app --reload (หรือคล้ายกัน) → คลิกอนุญาต
ขั้นตอนที่ 2 - เปิด URL ตัวอย่าง
🤖 ตัวแทนรายงานว่า
Backend running at: http://localhost:8000
Frontend served at: http://localhost:8000 (backend serves it)
โดยปกติแล้ว URL จะเป็น http://localhost:8000 หรือ http://localhost:5173
👉 คลิก URL ในแชท หรือคัดลอกและวางลงในแท็บเบราว์เซอร์ใหม่
ขั้นตอนที่ 3 - คลิกไปรอบๆ
ใช้เหมือนกับผู้ใช้จริง
- คลิกทุกปุ่ม
- พิมพ์ข้อความ
- วางเมาส์เหนือรายการต่างๆ
- ลองใช้โฟลว์หลักตั้งแต่ต้นจนจบ
หากทุกอย่างดูดีแล้ว ให้ข้ามไปที่ขั้นตอนที่ 9.7 (เขียน README) คุณต้องทำตามขั้นตอนที่ 9.4-9.6 ก็ต่อเมื่อพบปัญหา
ขั้นตอนที่ 4 — เขียน README
เมื่อแอปทำงานแล้ว ให้ล็อกแอปโดยทำดังนี้
📝 วางข้อความนี้:
The app works! Please create a README.md in the project root that explains:
- What this app does (in plain English)
- How to install it on a new machine (uv sync, etc.)
- How to run the dev server(s)
- The 3 design docs (@product.md, @ui.md, @engineering.md) are the
source of truth — anyone can read them to understand the system
Save it as README.md.
🤖 สิ่งที่คาดไว้: README.md จะปรากฏในรายการไฟล์
เหตุใด README จึงมีความสำคัญ
✅ เช็คพอยต์: คุณคลิกไปรอบๆ แอป แก้ไขปัญหา (หากมี) และบันทึก README
9. 🎉 คุณส่ง MVP แล้ว
คุณทำได้แล้ว
สิ่งที่คุณสร้าง
- ✅ เว็บแอปที่ทำงานด้วยระบบ AI
- ✅ เอกสารการออกแบบ 3 ฉบับ (
product.md,ui.md,engineering.md) - ✅ ชุดโปรแกรมทดสอบจริงที่ทำงานทุกครั้งที่คุณเปลี่ยนโค้ด
- ✅
README.mdเพื่อให้คุณกลับมาที่หน้านี้ได้ทุกเมื่อ - ✅ การเชื่อมต่อกับ AI จาก Gemini ของ Google
คุณเปลี่ยนจากไอเดีย → แอปที่ใช้งานได้โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว เหลือเชื่อ
สิ่งที่คุณได้เรียนรู้
ทักษะ | ความสำคัญ |
ข้อกำหนด → โค้ด + ทดสอบ → ยืนยัน | วางแผนก่อน สร้างโค้ดและเทสต์ไปพร้อมกัน คลิกที่ตำแหน่งสุดท้าย ตามลำดับนั้นเสมอ |
แก้ไขเอกสาร ไม่ใช่โค้ด | หากมีสิ่งผิดปกติ ให้เปลี่ยนแพ็กเกจและสร้างใหม่ ไม่ต้องแก้ไข |
การทดสอบเป็นด่านความปลอดภัย | รวมอยู่ในการติดตั้งใช้งาน - AI จะตรวจจับสิ่งที่ไม่สมเหตุสมผลก่อนที่คุณจะต้องทำ |
กฎการถดถอย | ข้อบกพร่องที่พบโดยมนุษย์ทุกข้อจะกลายเป็นการทดสอบ ข้อบกพร่องจะกลับมาไม่ได้ |
การหมุนตามเอกสาร | เมื่อมีการเปลี่ยนแปลงทิศทาง ให้เปลี่ยนเอกสาร ส่วน AI จะจัดการส่วนที่เหลือ |
ขั้นตอน 3 ชั้นของ Antigravity | ภาษาอังกฤษในแชท → คำสั่งตัวแทนเลือก → คุณอนุมัติ |
จะกลับมาในสัปดาห์หน้าไหม
- เลือกแถวอื่นจากตาราง 8 สัปดาห์
- โคลนที่เก็บของสัปดาห์นั้นผ่านปุ่ม "โคลนที่เก็บ" ของ Antigravity
- ทักษะจะได้รับการติดตั้งใหม่ในแต่ละพื้นที่ทำงาน (ขอบเขตระดับพื้นที่ทำงาน = ไม่มีสถานะที่เหลือ)
- คุณใช้โปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google เดียวกันซ้ำได้
- ส่วนที่เหลือทั้งหมดเป็นเวิร์กโฟลว์เดียวกันกับที่คุณเพิ่งเรียนรู้
ขั้นตอนถัดไป
- เผยแพร่โปรเจ็กต์: เผยแพร่โปรเจ็กต์ของคุณที่เว็บไซต์ Coding Jam
- สร้างที่บ้าน: เอกสารทั้ง 3 ฉบับของคุณจะพกพาได้ เปิดในเครื่องมือ AI ใดก็ได้และสร้างต่อ
- ชวนเพื่อน: จับคู่ผ่าน Codelab นี้กับคนที่ไม่เคยรู้จัก การสอนเป็นวิธีที่เร็วที่สุดในการเรียนรู้