สร้างเว็ปแอปเองด้วย Gemini CLI

ผมมีปัญหากับการสร้างเว็ปเอง คือ ต้องพยายามจัดสรรขนาดข้อมูลเพื่อไม่ให้เว็ปไซด์บวม เพราะเปลืองพื้นที่Host และส่งผลให้เว็ปช้า

อย่างพวกรูปสินค้าที่ขายบนเว็ป ก็ต้องพยายามลดขนาดให้เล็กที่สุด แต่ยังคงคมชัดอยู่

ผมใช้มาแทบทุกวิธีที่นึกออก เช่น

• สร้าง Canva แล้วอัพโหลดรูปไปใส่ ตอน Download ลงมาก็ลดขนาด
• หาเว็ปไซด์ลดขนาดรูป
• ใช้ Photoshop ลดขนาดรูป

แทบทุกวิธีรู้สึกว่าไม่ค่อยสะดวก และน้องๆที่ร้านก็ไม่ถนัดเหมือนเรา ที่จะมาใช้เครื่องมือหลายๆอย่าง

ประจวบเหมาะ ผมมีโอกาสเรียน Gemini CLI เบื้องต้นกับ แอดทอย แล้วมองว่าเราให้เอาไอช่วยเราสร้างเว็ปแอปได้นี่นา เพื่อแก้ปัญหานี้ น้องในร้านก็แค่เข้าเว็ปก็สามารถทำงานแทนเราได้แล้ว

นี่คือกระบวนการที่ผมทำครับ

1. ใช้ Gemini CLI สร้างเว็ปแอปแบบที่เราต้องการไว้ในเครื่องคอมเรา ผมสั่งมันว่า "ให้สร้างเว็ปแอปที่ใช้ crop รูปแบบ 1:1 ให้ได้รูปที่ชัดที่สุด โดยขนาดไฟล์ไม่เกิน 100kb "
2. ตัว Gemini CLI ก็จะค่อยๆสร้างให้เราครับ สร้างมาแล้วก็แก้ ทำแบบนี้อยู่พักใหญ่ เพื่อให้ได้เว็ปแบบที่เราต้องการ
3. ผมอัพโหลดโค้ดทั้งหมดขึ้น github และ vercel ตามที่ Gemini แนะนำ
4. แล้วสร้าง Subdomain บนเว็ปของผมเอง ชื่อ onebyone
5. จากนั้นก็แก้ DNS ให้ชี้มาที่ subdomain นี้
6. เป็นอันสำเร็จครับ

เพื่อนๆที่ไม่ได้ทำงานสายไอที หรือพวกเว็ป อาจจะงงๆคำศัพท์นะครับ ผมเองก็งง แต่ก็ใช้วิธีว่าติดตรงไหน ก็ให้ AI อธิบายเรา ไม่เข้าใจก็ถามเลย เหมือนให้เค้าเป็นลูกน้องคนนึงของเรา (แต่เค้าเก่งกว่าเรา)

สุดท้ายก็ได้ เว็ปแอปที่ต้องการครับ https://onebyone.caveman-store.com/

วิธีใช้

1. แค่อัพโหลดรูปที่เราต้องการ crop 1:1 เข้าไปครับ
2. สามารถแก้ขนาดรูป Flip หมุน และเลือก resolution ของรูปได้ แต่ defult อยู่ที่ รูปขนาด 1000x100 ขนาดไฟล์ 100kb ครับ
3. จากนั้นก็กด download ลงมาใช้งานได้เลยครับ

ลองเข้าไปใช้งานได้นะครับ ผมเองก็ไม่แน่ใจว่าโค้ดที่เขียนขึ้นมาดีมากน้อยแค่ไหน พยายามหาช่องทางปรับปรุงไปเรื่อยๆครับ

หวังว่าจะมีประโยชน์นะครับ แป๋ง