อยากสร้าง Web Application ที่เป็นฟอร์มสวยๆ ไว้เก็บข้อมูล ไม่ว่าจะเป็นระบบลงทะเบียนเรียน, ระบบเช็คสินค้าเข้า-ออก หรือระบบบันทึกรายรับ-รายจ่าย แต่ติดปัญหาเรื่องการเขียนโค้ด
.
คลิปนี้ผมมีเทคนิคที่จะช่วยให้คุณสร้างฟอร์มหน้าตาดีแบบมืออาชีพ โดยมีผู้ช่วยส่วนตัวคือ AI ที่จะช่วยเขียนโค้ดให้เราแบบ Step-by-Step ข้อมูลทั้งหมดจะถูกส่งไปเก็บที่ Google Sheets ทันที
โดยในครั้งนี้ผมมีตัวช่วยมาให้เลือกใช้ถึง 2 รูปแบบ ตามความถนัดครับ:
.
1️⃣ Gemini Gem (น้อง Gem): ผู้ช่วยอัจฉริยะใน Google Gemini ที่ผมเซ็ตอัพไว้ให้แล้ว แค่บอกความต้องการ 3 ข้อ (อยากได้ฟอร์มอะไร, เก็บใน Sheets ชื่ออะไร, หน้าตาแบบไหน) น้องจะเจนโค้ดให้ทันที
📌 Link น้อง Gem ช่วยสร้าง Form
2️⃣ Web App สร้าง Prompt: สำหรับใครที่ไม่ถนัดใช้ Gem ผมสร้างเครื่องมือหน้าจอ Interface ให้กรอกรายละเอียดที่ต้องการ แล้วระบบจะสร้าง “Prompt แบบละเอียด” ให้เอาไปสั่ง AI เขียนโค้ดต่อได้แม่นยำสุดๆ
🛠️ ขั้นตอนการใช้งานคร่าวๆ:
เตรียม Google Sheets: สร้างไฟล์ใหม่และกำหนดหัวข้อคอลัมน์ที่ต้องการเก็บข้อมูล (เช่น ชื่อ, เบอร์โทร, รูปภาพ)
ใช้ AI ช่วยสร้าง script: โดยให้ใช้ Gem หรือ WebApp ด้านบนเพื่อให้ได้โค้ดไฟล์ Code.gs (Backend) และ index.html (Frontend)
Deploy: นำโค้ดไปวางในส่วน “ส่วนขยาย (Extensions)” > “Apps Script” ใน Google Sheets แล้วกด Deploy เป็น Web App ก็จะได้ลิงก์ฟอร์มไปใช้งานทันที
เทคนิคนี้จะช่วยให้เราได้ฟอร์มที่เหมาะสำหรับนำไปใช้ในองค์กร ธุรกิจขนาดเล็ก หรือชมรมต่างๆ โดยมีความสำคัญคือมีความยืดหยุ่นสูงที่เราสามารถปรับรูปแบบต่างๆได้ทันที
หวังว่าจะเป็นประโยชน์นะครับ ถ้าติดปัญหาการสร้างโปรเจคสามารถเข้ามาคุยกันได้ที่ Facebook: บริหารงานแบบคนไอที ได้เลยครับ!
💳 ชอบคลิปที่ช่วยเพิ่มประสิทธิภาพการทำงานแบบนี้สามารถสมัครสมาชิกช่องได้ที่
https://www.youtube.com/channel/UChxmhkD8uSSzUOkfMO_p5oQ/join
🎓 สนใจคอร์สสร้าง Template ระบบสต๊อกสินค้าใน Google Sheets สอนโดยผมเอง สามารถดูรายละเอียดได้ที่ลิงค์นี้เลย
https://www.skilllane.com/courses/GoogleSheets-Noobitguy
🎓 สนใจคอร์ส สร้าง Web Application โดยไม่ต้องเขียนโค้ดด้วย Lovable AI สอนโดยผมเอง สามารถดูรายละเอียดได้ที่นี้เลย
https://page.futureskill.co/lovablewebapp?aff=446
🎥 อุปกรณ์ที่ผมใช้
กล้อง Sony ZV-E10 kit 16-50mm
Mouse Logitech MX Master 3s
MacBook Air M2
ไมค์ wireless Saramonic Blink 500
เก้าอี้ Anda Seat X-Air Pro Ergonomic Gaming Chair
แขนจับจอ Anda Seat Stealth A6L Ergonomic Monitor Arm
ไมโครโฟน AKG Lyra
ไฟส่องหน้าจอ Xiaomi Light Bar
