Create Simple Web เรียน Vibe Code เริ่มจากศูนย์

จากคอร์สที่ผมลงเรียนตั้งแต่ช่วงมีนาคม Mini Gemini Bootcamp มาสู่บทเรียนที่ต่อยอดจากการใช้ Gemini CLI ในการสร้าง project ต่าง ๆ หากคุณผู้อ่านสนใจคอร์สนี้สามารถอ่านสรุปคอร์สที่ผมได้เขียนไว้ได้เลยครับ

1. ✍️ From FC to Bootcamp: My Gemini CLI Story
2. Mini Gemini Bootcamp [Day 2]
3. MINI Gemini bootcamp [ Day 2.2] เรียนรู้ AI ในวันปิดเทอม

โดยทั้งสามบทความได้ปูพื้นฐานเกี่ยวกับเรื่องของ AI และการใช้ AI ในรูปแบบต่าง ๆ โดยเฉพาะการใช้ผ่าน CLI บทคอมพิวเตอร์ ซึ่งแสดงให้เห็นความก้าวหน้ามาสู่ยุคของ Agentic AI อย่างเห็นได้ชัด

วันนี้ผมขอมาเขียนสรุปบทเรียนต่อใน Module : Feeling The Vibe ผมขอสารภาพตรง ๆ ว่าเมื่อเห็นหัวข้อและศัพท์เทคนิคก็รู้สึกไม่มั่นใจว่าจะเรียนรู้ได้เข้าใจไหม เนื่องจากผมไม่ค่อยได้เขียนโปรแกรมเท่าไหร่ แต่เมื่อได้เรียนรู้บทเรียนนี้จบ ต้องขอขอบคุณแอดทอยมากเลยที่ทำให้การเรียนรู้ในแต่ละส่วนกลับเข้าใจง่าย และเห็นถึงความสามารถของ AI ที่เหมือนกับเสกทุกอย่างให้เราได้ดังใจปรารถนา ขอเพียงแค่มีไอเดีย แล้วขอแค่บอก AI จัดการให้ได้เลยครับ ... ถ้าคุณผู้อ่านอยากรู้แล้วนะครับว่าการเรียนรู้ในบทนี้เป็นอย่างไร เรามาดูไปพร้อม ๆ กันเลยนะครับ

เรียนการ Vibe Code จากศูนย์

ผมเป็นคนนึงที่เห็นแอดทอยทำคอมมูนิตี้ของเหล่านักเขียนอย่าง Midgard นี้ขึ้นมาด้วยการใช้ CLI เป็นเครื่องมือช่วยในการสร้างสรรค์ผลงานนี้ ทำให้ผมอยากทำได้บ้าง อยากสร้างเว็บไซต์ง่าย ๆ โดยใช้ AI เมื่อแอดทอยประชาสัมพนธ์บทเรียนนี้ขึ้นมาผมตื่นเต้นมาก ๆ และหลังจากเรียนจบก็อยากเขียนสรุปไว้เดี๋ยวกลัวลืมครับ เริ่มจากในบทเรียนนี้แอดให้เราได้ฝีก Vibe กันผ่านโปรเจ็ค Simple Web Vanilla HTML + CSS + (Minimal JS) ซึ่งอธิบายง่ายคือเป็นการสร้างเว็บไซต์ในรูปแบบของ Landing Page ที่เราสามารถสร้างเสร็จได้ง่ายและสามารถนำไปต่อยอดต่อไปได้เีอีกด้วย โดยใช้ความรู้พื้นฐาน HTML + CSS และแม้จะไม่รู้โค้ดเหล่านี้เราสามารถใช้การพูดคุยกับเจ้า AI ก็ได้คำตอบที่ดีเหมือนกันครับ

ก่อนเริ่มโปรเจ็คแอดแนะนำให้รู้จัก 3 ภาษาพื้นฐานสำหรับการสร้าง simple/ static website คือ

• HTML สำหรับสร้าง content บนเพจ
• CSS สำหรับตกแต่ง i.e. style sheets
• JS สำหรับเพิ่มลูกเล่น interaction ต่างๆบนเว็บ เช่น theme toggle ส่วน editor ที่ใช้คือ VS Code ทีนี้เมื่อเราเริ่มรู้แล้วว่าจะเจออะไรบ้างในการสร้างโปรเจ็คแรก ถัดมาคือคำศัพท์ที่ใช้ในการ vibe code คือ
• GitHub = Google Drive
• Repo = Folder
• Commit = Save

เริ่มต้นจากการเรียก Gemini ขึ้นมาจาก terminal แล้ว /auth แล้ว Sign in บัญชีของเราเพื่อเริ่มทำงาน และหากเราต้องการขึ้นบรรทัดใหม่เราก็แค่กด CTRL+J จากนั้นเราได้ใช้ GoogleSearch ในการให้ ai research how to deploy a simple html css js file on github pages. เราก็จะได้เห็นว่าขั้นตอนในการสร้างนั้นมีอะไรบ้าง แล้วเราก็ลองให้ ai ช่วยวางแผนการสร้างผ่าน

ok, let's plan to build my portfolio website as a data analyst on github pages. 
specs: 
1. moderm dark theme, jetbrains mono font 
2. hero section use my name "Warut Kruakaeo" (data analyst)
3. build 3 projects on my profile
4. add contact details
plan how to create this site on github page step by step.

โดยขั้นตอนนี้เราให้ ai ช่วยวางแผนโดยเราสามารถค้นหา font ผ่าน Google Font ได้ และเรายังให้สร้างในส่วนของ hero section คือหน้าแรกแสดงข้อมูลที่อยากให้คนที่เข้ามาในเว็บไซต์เห็น โดยขั้นตอนนี้สำคัญมากเพราะเราควรมีการวางแผนก่อนเริ่มโปรเจ็คใด ๆ โดยสามารถใช้ keyword ว่า "Let's Plan หรือ Enter Plan Mode" ก็ได้ เมื่อเสร็จแล้ว gemini จะสร้างไฟล์​ plans.md มาให้เรา เมื่อเราต้องการเรียกใช้หรือ refer ไฟล์นี้ก็เพียงแค่ @ตามด้วยชื่อไฟล์แค่นี้เอง โดย.md เป็น Markdown file ซึ่งเหมาะกับการใช้ในการบันทึก Plan ของเรา

เวลาที่เราสั่งงาน AI เราต้องทำการ approve ก่อน โดยการอ่าน plan ว่าตรงกับความต้องการของเราไหม ถ้าหากต้องการเพิ่มเติมหรือปรับแก้เราก็แค่บอก AI ได้เลย อ่าน plan ก่อนในทุก ๆ ครั้ง

เมื่อผ่านแล้วเราก็ให้ model สร้างเว็บไซต์ขึ้นมา ซึ่งในการสร้างไฟล์ขึ้นมานั้นจะทำการสร้างขึ้นมา 2-3 ไฟล์ โดยไฟล์แรก index.html = โครงสร้างของเว็บไซต์ ระบุ title ระบุ content ส่วน css = เป็นการปรับหน้าตาเว็บไซต์ให้สวยงามขึ้น ส่วน java script = การทำแอคชันต่าง ๆ

และแล้วหน้าตาเว็บไซต์ที่เราสั่งทำไปเมื่อสักครู่จะเผยโฉมมาให้เห็นแล้วนะครับ ซึ่งในการดูหน้าตาเว็บเราจะใช้ vs code โดยการที่จะเรียกก็แค่เปิดโหมด shell จากนั้น code . ถ้าอยากได้อะไรเพิ่มเราสามารถแก้ไขใน vs code หรือสั่งใน gemini ให้ช่วย update ก็ได้ เช่นเพิ่ม light/dark ด้วยคำสั่ง

add a toggle switch to change our site to light theme 
(dark is a default). this switch is at the top right conner. 
and switch is basic icon  (sun/moon)
  

ก็จะได้หน้าตาดังนี้

ว้าว 🤩 เราก็ได้หน้าเว็บไซต์ออกมาเพียงไม่กี่นาที เราอยากได้อะไร เราก็แค่สื่อสารกับ AI ของเรา

Deployed web ผ่าน GitHub

GitHub คือ อะไร ? GitHub เป็นเหมือน Google Drive สำหรับ Developer ที่สามารถอัพโหลดโค้ดขึ้นได้ อัพโหลด artifact เช่น pdf รูปภาพง่าย ๆ โดยเราสามารถชวนเพื่อนมาร่วมทำงานในโปรเจ็คของเราได้ สามารถใช้งานได้ฟรี Repositories = Folder ในการเก็บโค้ด เรามาเริ่มจากการ Create repo เพื่อนำไปใช้ต่อ โดยเวลาทำงาน software + vibe coding จะมีเครื่องมือที่ชื่อว่า git

git คือซอฟต์แวร์สำหรับทำ version control ให้เราเซฟ (commit) การทำงานของเราเป็นระยะๆ สามารถย้อนเวลาไปมาได้

วิธีในการติดตั้งก็แสนง่ายแค่เราสั่งงานด้วย

install git on this machine, and init git for this project

โดย 5 คำสั่งที่เราใช้ใน git คือ

• git init เริ่มต้นใช้ git ในโปรเจ็คนั้นๆของเรา
• git status เช็คว่ามีไฟล์อะไรที่เพิ่ม ลบ หรือเปลี่ยนแปลงบ้าง
• git add เพิ่มไฟล์นั้นๆเข้าไปใน staging เตรียมไฟล์สู่ขั้นตอน commit
• git commit อารมณ์เหมือนเรา save game เซฟ snapshot ของไฟล์และโปรเจ็ค ณ เวลานั้นๆ
• git push ผลักหรือ push โค้ดเราขึ้นไปบน GitHub Repo

ถ้าเราจะใช้คำสั่งเหล่านี้ก็แค่

commit and push our code to github repo

Gemini ก็จะรันคำสั่งให้เราอัตโนมัติ ซึ่ง Gemini จะรันคำสั่ง git status, git add, git commit และ git push ตามลำดับ

กลับมาที่โปรเจ็คของเรา เรารันคำสั่งว่า

git init for this project

เพื่อสร้างการแทกโปรโปรเจคของเราว่ามีไฟล์ไหนเปลี่ยนแปลง นอกจากนี้เราสามารถใช้ git branch git status

I want to make our first commit

โดย git commit เพื่อเซฟหน้าจอโปรเจค เพื่อใช้ในการย้อนเวลาที่เรา commit ไว้ได้เลย ในการทำงานจริงเมื่อเราสร้างฟีเจอร์ใหม่ แนะนำให้ commit

I want to push our code to this github repo : url ที่เราก็อปไว้จาก github

แล้วถ้าเราอยากสร้างไฟล์ README ก็แค่ป้อนคำสั่ง

write README for this project, commit and push to github repo

โดยกระบวนการพัฒนานี้จะมี 3 ขั้นตอนคือ สร้างไฟล์ , commit แล้ว push

จากนั้นคือกระบวนการสำคัญเราก็แค่เข้า settings เลือก page ไปตรง branch เลือก main และ /docs กด save โดยเราก็ไปแก้ชื่อโฟล์เดอร์เป็น docs แค่นี้เอง แล้วเว็บเราก็สามารถ deploy ได้แล้ว เย้ ....