ใคร ๆ ก็ Vibe Coding ได้!

เสกเว็บง่าย ๆ ด้วย Google AI Studio พร้อมขึ้นเว็บได้แบบฟรี ๆ

บอกเลยใคร ๆ ก็ Vibe Coding ได้!

.

ใคร ๆ ก็บอกว่า AI อัพเดตกันทุกวัน ก่อนหน้านี้เราใช้ Google AI Studio เพื่อลอง generate รูป และ video ใช่ไหม เราไม่ได้เข้ามาหลายเดือน มีอัพเดตเยอะมาก แล้วพี่ในทีมมี knowledge sharing สอนใช้ Google AI Studio แล้วมันเขียนโค้ดได้ด้วย ทำเสร็จแล้วเอาโค้ดลง Github ได้ด้วยนะ เพื่อเอาไปบิ้วใน Vercel ได้แบบฟรี ๆ! ต้องลองหน่อยล่ะ บอกเลยใคร ๆ ก็ใช้ได้

.

ก่อนอื่น Google AI Studio คืออะไร? คือเครื่องมือที่ทำให้เราสร้าง และทดลองใช้แอพ AI จาก Gemini ได้อย่างง่ายดาย โดยการพิมพ์ prompt สิ่งที่เราต้องการนั่นเอง สามารถเปิด Google AI Studio และ login เพื่อเข้าใช้งาน

แล้วขั้นตอนการทำเป็นยังไง ไปดูกัน

⭐ Prompt สั่ง AI สร้างของ

ไปที่ Build แล้วใส่สิ่งที่เราอยากได้ลองไปที่เราอยากได้ลงไป สามารถพิมพ์ภาษาอังกฤษ หรือภาษาไทยก็ได้ ในที่นี้เราอยากได้เครื่องคิดเลข ที่หาค่าเฉลี่ยจาก input count ให้เรา แล้วก็ compare ว่าอันไหนถูกสุด เช่น

```

ช่วยทำเครื่องคิดเลขสำหรับ

- คำนวณหาค่าเฉลี่ย จากจำนวน input ที่ใส่มา

- คำนวณเปรียบเทียบระหว่างราคาและปริมาณ อันไหนถูกกว่ากัน

```

```

create calculator website for

- calculate avg value with some output

- compare qualtity and price

```

ตัว Model เราจะเห็น Gemini 2.5 Pro พอกดแล้วจะเป็น Advanced settings มีให้เราเปลี่ยน model มี Gemini 2.5 Pro และ Gemini 2.5 Flash ส่วน System instructions template จะมีเป็น React (TypeScript) ที่เป็น default และ Angular (TypeScript) แล้วเราสามารถใส่ system instructions ได้นะ

เมื่อเราพิมพ์สิ่งที่เราต้องการ พร้อมแก้ไข setting แล้ว กด Build ได้เลย รอ AI ทำงาน เสกเว็บให้เรา

⭐ ลองปรับแต่งแก้ไข

เมื่อได้แล้วเรียบร้อย ลองเล่นดู ถ้าอยากได้อะไรเพิ่มเติม พิมพ์ในแชทได้เลย ดูความแตกต่างว่าอันไหนถูกแก้ไปบ้าง โดยกด View diff หรือจะกลับไป version ก่อนหน้าด้วย Restore checkpoint ก็ได้นะ

นอกจาก text เรายังอัพโหลดไฟล์ ไม่ว่าจะเป็นรูป, text file, pdf file แล้วก็พูดเพื่อสั่งงานได้ อีกอันที่น่าสนใจ คือ Add annotation ฟีลเหมือน Firebase Studio ที่ตีกรอบ หรือชี้จุดที่เราต้องการ เมื่อวาดเสร็จ กด Add to chat มันจะ screenshot มาให้เราเลย แล้วบอกให้ทำอะไรบ้าง เช่น เอากรอบค่าเฉลี่ยมาอยู่ตรงนี้หน่อย

ถ้าอยากเปลี่ยนชื่อแอพ ให้กดที่ปากกาเพื่อเปลี่ยนชื่อแอพได้ แล้วก็เปลี่ยนรายละเอียดได้ แต่เปลี่ยนใจเธอไม่ได้ เอ้ยย เปลี่ยน prompt ไม่ได้นะ ถ้าเราลืมว่าเราเคยพิมพ์ prompt สั่งอันนี้ยังไงก็ดูจากตรงนี้ได้ แก้เสร็จอย่าลืมกด Save

ส่วนที่เราเห็นคือส่วน preview เลือกดูหน้าจอ Mobile กับ Tablet ได้เลย ถ้าอยากอ่านโค้ดดูในส่วนของ Code ได้เลย

⭐ ลองแชร์ให้เพื่อน

อย่าลืมกด Publish your app ก่อนนะ ไม่งั้นแชร์ไม่ขึ้น เปิดก็ไม่ได้ แล้วก็ไป check อีกทีที่ Advanced share permissions ก็ได้นะ ถ้าอยากแชร์แค่ไม่กี่คนก็น่าจะเลือก email ใส่ได้เหมือนแชร์ไฟล์จาก Google Drive ปกติเลย

⭐ เก็บโค้ดของเราไว้ที่ Github

ก่อนอื่นกดปุ่ม save to Github เพื่อเซฟโค้ด แล้วมันจะขึ้นหน้าข้าง ๆ ให้เรา กด Sign in to Github to continue แล้วก็เลือกอันที่เป็น Github user ของเรา แล้วก็กด Install & Authorize เพื่อเชื่อมต่อกับ Github ของเรา

จากนั้นสร้าง repository ใหม่ ตั้งชื่อ แล้วก็ set visibility เป็น Public แล้วกด Create Git repo รอสักแปป มันจะขึ้น file change และ commit message ที่เราไม่ต้องทำอะไรกับมัน กด Stage and commit all changes โล้ดดด เราก็จะได้ Github repo มาแล้ว

ปล. ถ้าเราแก้ใน Google AI Studio เนี่ย เราสามารถอัพขึ้น Github ได้เลย แต่ถ้าเราแก้โค้ดใน Github มันจะไม่อัพเดตที่ Google AI Studio นะ

⭐ เอาเว็บขึ้น Vercel

จริง ๆ มันมี option นึงคือ เอาไปขึ้น Google Cloud Run ได้ เข้าใจว่ามันจะไม่ฟรี เพราะมันคิดแบบ pay-per-use ซึ่งบางคนมองว่าแชร์อันนั้นก็น่าจะจบแล้วใช่ไหม 555555 แต่ลิ้งมันยาวแล้วก็ก็อปเก็บไง deploy เป็น website มันสะดวกกว่า ซึ่งอันนี้ Github Page มันไม่รองรับไง

แต่มีอันฟรีอีกอันที่ยอดนิยม คือ Vercel ใช้งานได้หลากหลายด้วย

ก่อนอื่น เข้าไปที่เว็บเขา และ login ด้วย Github จากนั้นกด Add New… → Project แล้วเลือก repo ที่ต้องการ โดยกด Import แล้วจะพาไปหน้า New Project ตัว Framework Preset เป็น Vite แล้วกด Deploy ได้เลย

ถ้า deploy เสร็จแล้วได้หน้าขาว ๆ ต้องเพิ่มอันนี้ที่ body ในหน้า index.html ด้วยนะ เนื่องจาก browser ไม่เข้าใจ TypeScript ที่มีในโปรเจกต์นี้ เลยไม่สามารถรันได้โดยตรง จึงทำการ transpilation" เพื่อแปลงเป็นไฟล์ JavaScript เสียก่อน (อันนี้เราไปถาม Google AI Studio อีกที)

```html

<script type="module" src="./index.js"></script>

```

พอมัน deploy เสร็จแล้ว เราจะได้ url ที่ส่งต่อให้เพื่อน ๆ ได้ ก็อปตรงช่อง domain ได้เลย

ถ้าจะแก้เราก็สั่งให้ AI แก้จาก Google AI Studio แล้วก็อัพเดตโค้ดตรงแท็บ code ได้เลย แก้เสร็จก็กด save แล้วกด Save to Github อีกทีนึง สักพักรอบิ้วจบ

รู้สึกว่า url ไม่สวย อยาแก้ ไปที่ Settings → Domain แล้วก็กดปุ่ม Edit พิมพ์ชื่อที่เราต้องการได้เลย แต่ต้องไม่ซํ้ากับที่มีอยู่แล้ว แล้วก็กด save เท่านี้ก็ได้แล้ว

.

เห็นไหมไม่ยากเลยใช่ไหม แล้วอยากให้ลองใช้ AI tool ตัวไหนทำอะไร คอมเม้นมาบอกกันได้เลย

#รวมเรื่องไอที #รอบรู้ไอที #เรื่องราววันนี้ #ประสบการณ์ตรง #Lemon8ฮาวทู