อยากสร้าง landing page แบบ hiso พร้อมระบบเก็บข้อมูลลงไปยัง Google Sheets แบบรวดเร็วภายใน 10 นาที
ทุกคนสามารถลองใช้ platform Lovable AI ซึ่งเป็น platform ที่สามารถช่วยให้เราสร้างหน้าเว็บไซท์แบบ hiso ได้ภายในไม่กี่ prompt
โดยถ้าเรายังไม่มี Account ของ Lovable ก็สามารถสมัครได้ที่นี้เลยครับ Lovable.dev
โดยใน Step แรกให้เราทำการสร้างไฟล์ Google Sheets ที่ต้องการเก็บข้อมูลขึ้นมาก่อน
และให้ทำการตั้งชื่อหัว Column ในแถวที่ 1 ให้เป็นชื่อข้อมูลที่เราต้องการจะทำการเก็บจาก Website
หลังจากนั้นเราจำเป็นต้องสร้างระบบทางเชื่อมข้อมูลระหว่าง Google Sheets และเว็บไซท์ที่เรากำลังจะสร้างขึ้น ก็ให้เราไปยัง AI ตัวไหนก็ได้ และให้ทำการ prompt ดังต่อไปนี้ได้เลย
ต้องการสร้าง script code.gs เพื่อรับค่า POST Webhook URL ใน Google App Script
ให้ทำการรับค่าเข้ามา 3 ค่าและนำไปเก็บไว้ใน file Google Sheets
ในชื่อชีทที่มีชื่อว่า "Data" โดยเก็บใน column ต่อไปนี้
Column A : Timestamp
Column B : ชื่อ
Column C : เบอร์ติดต่อ
Column D : หมายเหตุ
โดยค่าที่รับมาจะเป็น JSON Format ดังต่อไปนี้
{
"name": {{name}},
"phone": {{phone}},
"notes": {{notes}}
}
Field name "name ให้ทำการเก็บข้อมูลที่ Column B : ชื่อ
Field name "phone ให้ทำการเก็บข้อมูลที่ Column C : เบอร์ติดต่อ
Field name "notes ให้ทำการเก็บข้อมูลที่ Column D : หมายเหตุ
โดยให้เราทำการเปลี่ยนค่าที่อยู่ในส่วนสีแดงให้เป็นไปตามข้อมูลชื่อชีท และ หัว column ที่เราตั้งไว้
และหลังจากที่เราได้ script จาก AI แล้วก็ให้ทำการนำไปวางใน App Script ของชีทได้ทันที
ให้ทำการ Deploy ระบบโดยการกดปุ่ม “การทำให้ใช้งานได้” และเลือก “การทำให้ใช้งานได้รายการใหม่” แล้วเราจะได้ เป็น link Webhook มา ให้เราทำการ copy เก็บไว้ได้เลย
หลังจากนั้นเราจะมาทำการสร้างเว็บไซท์ของเราด้วยระบบ Lovable.dev กัน ซึ่งก็สามารถไปที่ระบบ Lovable และ ทำการพิมพ์ prompt เพื่อสร้างเว็บไซท์ที่มีฟอร์มการลงทะเบียนอะไรก็ได้ขึ้นมาได้เลย แต่ในตัวอย่างนี้ผมจะทำการสร้าง Landing Page สำหรับขายสินค้าอาหารเสริมเพื่อสุขภาพ ซึ่งผมจะทำการ prompt ดังต่อไปนี้
สร้าง Landing Page สำหรับขายสินค้าอาหารเสริมเพื่อสุขภาพ โดยมีองค์ประกอบดังนี้:
**Hero Section:**
- รูปภาพผลิตภัณฑ์ (product สินค้าเพื่อสุขภาพ)
- หัวข้อ: "อาหารเสริมเพื่อสุขภาพ"
- คำอธิบาย: "สูตรพิเศษจากสมุนไพรไทยแท้ 100%"
- จุดเด่น 3 ข้อ: ธรรมชาติ, ปลอดภัย, คุณภาพพรีเมียม
**Form Section:**
- ชื่อ-นามสกุล (field: name)
- เบอร์โทรศัพท์ (field: phone)
- ข้อความเพิ่มเติม (field: notes)
- ปุ่ม: "รับโปรโมชั่นพิเศษเลย!"
- ข้อความ CTA: "กรอกฟอร์มเพื่อรับส่วนลดพิเศษสูงสุด 30%"
**Technical:**
- ส่งข้อมูลไปยัง: [Webhook URL]
- JSON format: {"name": "", "phone": "", "notes": ""}
- Form validation ด้วย zod
- แสดง Loading และ Toast notifications
**Design:**
- สีเขียวธรรมชาติ และทอง
- รองรับภาษาไทย
- Clean และ Modern
- Responsive
- มี Animation เบาๆโดยให้เราทำการปรับเปลี่ยน webhook URL ให้เป็น URL ที่เราได้มาจาก Google App Script ได้เลย
รวมทั้งถ้าเราต้องการเก็บข้อมูลที่แตกต่างกันออกไปก็สามารถปรับแต่งที่ส่วนของ JSON FORMAT ได้
แค่นี้เราก็จะได้ระบบที่สามารถทำการเชื่อมระหว่างหน้าเว็บไซท์ที่เราสร้างใน Lovable กับ Google Sheets ได้แบบอัตโนมัติ ซึ่งเราก็สามารถนำไปใช้ใน project อื่นๆได้เช่น ระบบการลงทะเบียนงานต่างๆ หรือระบบสต๊อกสินค้า และ อื่นๆ
🔗 Link สมัคร platform Lovable.dev
https://lovable.dev/?via=wongsagorn
💳 ชอบคลิปที่ช่วยเพิ่มประสิทธิภาพการทำงานแบบนี้สามารถสมัครสมาชิกช่องได้ที่
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
