[สอน + แจกฟรี!] สอนวิธีสร้าง Web App เก็บ Lead ลูกค้าเข้า Google Sheet ด้วย Gemini (ฉบับมือใหม่ทำตามได้ทันที)

สวัสดีครับเพื่อนๆ วันนี้ผมมีเคล็ดลับสุดเจ๋งที่จะช่วยให้ชีวิตการทำงานของเพื่อนๆ ง่ายขึ้นแบบ 300% มาฝากกันครับ เคยไหมครับที่อยากจะมีหน้าเว็บไซต์สวยๆ ไว้ให้ลูกค้ากรอกข้อมูล หรือที่เรียกกันว่า “Lead Generation Form” แต่พอจะเริ่มทำทีไรก็ติดเรื่องเขียนโค้ดไม่ได้ หรือไม่อยากเสียเงินจ้างโปรแกรมเมอร์แพงๆ

วันนี้ผมจะมาแชร์วิธี “สร้าง Web App” สำหรับเก็บ Lead ลูกค้าด้วยตัวเอง โดยใช้พลังของ AI ตัวเก่งอย่าง Gemini มาช่วยเขียนโค้ดให้เราแบบฟรีๆ แถมข้อมูลยังวิ่งตรงเข้า Google Sheet ของเราทันที ทั้งหมดนี้ใช้เวลาเพียง 5 นาทีเท่านั้นครับ! ถ้าพร้อมแล้ว เตรียมหน้าจอให้พร้อม แล้วทำไปพร้อมกันเลย

ทำไมต้องใช้ Gemini + Google Sheets ในการสร้าง Web App?

ก่อนจะไปดูวิธีทำ เรามาดูกันก่อนว่าทำไมวิธีนี้ถึงน่าสนใจ:

1. ประหยัดงบ: ไม่ต้องเช่า Host ไม่ต้องซื้อ Domain แพงๆ เพราะเราใช้ Google Apps Script เป็นตัวรันระบบ
2. จัดการง่าย: ข้อมูลลูกค้าจะถูกจัดเก็บใน Google Sheet ที่เราคุ้นเคย นำไปวิเคราะห์ต่อหรือทำ CRM ได้ทันที
3. สวยงามและทันสมัย: เราสามารถสั่งให้ Gemini ใช้เทคโนโลยีอย่าง Tailwind CSS มาตกแต่งหน้าตา Web App ให้ดูโปรเหมือนมืออาชีพทำเองเลยล่ะครับ

ขั้นตอนที่ 1: เตรียม Google Sheet พื้นที่เก็บข้อมูลของเรา

ขั้นแรกเราต้องมี “ถัง” สำหรับเก็บข้อมูลก่อนครับ

1. เปิด Google Sheet ใหม่ขึ้นมา (วิธีลัดคือพิมพ์ sheet.new ในช่อง URL ของเบราว์เซอร์ได้เลย)
2. เปลี่ยนชื่อ Sheet: ตรงแถบด้านล่าง ให้เปลี่ยนชื่อเป็น “Customer” (หรือชื่ออื่นที่เพื่อนๆ ชอบ แต่ต้องจำให้แม่นนะครับ เพราะเราต้องบอก Gemini ให้ตรงกัน)
3. คัดลอก Spreadsheet ID: สังเกตที่ URL ของหน้า Google Sheet ครับ จะมีช่วงตัวอักษรยาวๆ ที่อยู่ระหว่าง /d/ และ /edit ให้คัดลอกชุดตัวอักษรนั้นเก็บไว้ใน Notepad ก่อนครับ นี่คือ ID สำคัญที่เราจะใช้เชื่อมต่อระบบ

ขั้นตอนที่ 2: ใช้ Gemini เขียนโค้ดให้เรา (The Magic Part!)

คราวนี้มาถึงพระเอกของเราแล้วครับ ให้เพื่อนๆ ไปที่ gemini.google.com แล้วพิมพ์คำสั่ง (Prompt) ที่ผมเตรียมมาให้ได้เลยครับ

Prompt สำหรับก๊อปปี้ไปวาง

ช่วยสร้าง Web App สำหรับบันทึกข้อมูลลูกค้าลงใน Google Sheet โดยใช้ Google Apps Script ให้หน่อย

1.รูปแบบข้อมูลที่ต้องการ: ชื่อ-นามสกุล, เบอร์โทรศัพท์, อีเมล, ประเภทลูกค้า (Dropdown: สนใจสินค้า/สอบถามบริการ), และหมายเหตุ
2.ตกแต่งหน้าจอด้วย Tailwind CSS ให้ดูสะอาดตา ทันสมัย และเป็น Responsive (ใช้งานบนมือถือได้)
3.ระบุชื่อ Sheet ว่า 'Customer' และใช้ Spreadsheet ID คือ [วาง ID ที่คัดลอกมาที่นี่]
4.เมื่อบันทึกสำเร็จ ให้มีแจ้งเตือนแบบ Sweet Alert สวยๆ และเคลียร์ข้อมูลในฟอร์มให้พร้อมรับคนถัดไปด้วยครับ ขอโค้ดแยกเป็น 2 ส่วน คือ Code.gs และ index.html นะครับ"
5.ด้านล่างเขียนว่า Power by bookintelligent.com

ขั้นตอนที่ 3: นำโค้ดไปติดตั้งใน Google Apps Script

เมื่อได้โค้ดจาก Gemini มาแล้ว ให้เรากลับไปที่หน้า Google Sheet ที่เราสร้างไว้ครับ

1. ไปที่เมนู ส่วนขยาย (Extensions) > เลือก Apps Script
2. ไฟล์ Code.gs: ลบโค้ดเดิมที่อยู่ในไฟล์ทิ้งให้หมด แล้วนำโค้ดส่วนที่เป็น .gs จาก Gemini มาวางลงไปแทน แล้วกดปุ่มบันทึก (รูปแผ่นดิสก์)
3. สร้างไฟล์ HTML: กดเครื่องหมาย + ตรงด้านซ้ายมือ เลือกสร้างไฟล์ HTML แล้วตั้งชื่อว่า “index” (ไม่ต้องพิมพ์ .html นะครับ)
4. ลบโค้ดเริ่มต้นออก แล้วนำโค้ดส่วนที่เป็น .html จาก Gemini มาวางแทนที่ แล้วกดบันทึกอีกครั้งครับ

ขั้นตอนที่ 4: การ Deploy เพื่อเปลี่ยนโค้ดให้เป็น Web App จริง

ตอนนี้ระบบเราพร้อมแล้วครับ เหลือแค่เปิดใช้งานจริง!

1. กดปุ่ม ทำให้ใช้งานได้ (Deploy) สีฟ้าๆ ที่มุมขวาบน
2. เลือก การทำให้ใช้งานได้รายการใหม่ (New Deployment)
3. เลือกประเภทเป็น เว็บแอป (Web App)
4. การตั้งค่าสำคัญ:
   • Execute as: เลือกเป็น Me (ตัวเราเอง)
   • Who has access: เลือกเป็น Anyone (ทุกคน) เพื่อให้ลูกค้าทั่วไปสามารถเข้ามากรอกข้อมูลได้
5. กด Deploy แล้วจะมีหน้าต่างเด้งขึ้นมาขอสิทธิ์ (Authorize access) ให้กดอนุญาตให้เรียบร้อยครับ (ถ้ามีคำเตือนเรื่องความปลอดภัย ให้กด Advanced > Go to… (unsafe) เพื่อทำต่อได้เลยครับ เพราะเป็นแอปที่เราสร้างเอง)

ขั้นตอนที่ 5: ทดสอบระบบ เก็บ Lead แรกกันเลย!

หลังจากรันก็จะได้ลิงค์มาสามารถกดเข้าไปดูได้

https://script.google.com/macros/s/AKfycbzOJNYDQXdPqCqd2Zlq2qh7RtwTdSRHA8TnohYhc5s8TtewCHQkIShhMXUha33Bi9Dq_A/exec

หลังจาก Deploy เสร็จ เพื่อนๆ จะได้ Web App URL มาครับ ให้คัดลอก URL นั้นไปเปิดในแท็บใหม่ หรือส่งให้เพื่อนช่วยลองกรอกข้อมูลดู

ลองพิมพ์ชื่อ เบอร์โทร แล้วกดบันทึกดูครับ ถ้ามี Sweet Alert เด้งขึ้นมาว่า “บันทึกสำเร็จ!” ให้ลองกลับไปดูที่ Google Sheet ของเรา… ข้อมูลมาปรากฏอยู่ใน Sheet เรียบร้อยแล้วครับ!

🔽ดาวน์โหลด Webapp ไปใช้

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

ตอนนี้ ผมมีทำ [Template Pro] ระบบบัญชีรายรับ รายจ่าย เงินออม ด้วย Google Sheets มี Dashboard สรุป (Income Expense Saving Tracker) สามารถดูรายละเอียดได้ที่ Link นี้

ลองดูบทความเพิ่มเติมได้ดังนี้

• Template Free Google Sheet & Excel ดาวน์โหลดฟรี
• Passive Income สำหรับพนักงานประจำ
• สร้างอิสรภาพทางการเงินได้อย่างไร