แค่พิมพ์ Prompt เดียว ได้แอปบันทึกรายรับ-รายจ่าย พร้อม Dashboard เชื่อม Google Sheets ทันที — ทำได้ด้วย Lovable.dev

สร้าง Dashboard จากข้อมูลบน Google Sheets แบบง่ายๆ ด้วย Lovable.dev

Excerpt (สรุปสั้น — สำหรับการ์ดบทความ & SEO Description): บทความนี้พาคุณสร้าง Web App บันทึกรายรับ-รายจ่ายพร้อม Dashboard สรุปยอดรายวัน เชื่อมต่อตรงกับ Google Sheets ของคุณ โดยใช้ Lovable.dev — AI สร้างเว็บแอปจาก prompt ภาษาไทย ทำได้ภายใน 5 นาที โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว

Meta Title: สร้าง Dashboard จาก Google Sheets ด้วย Lovable.dev | realprogrammersbynaiyachon

Meta Description: เรียนรู้วิธีสร้าง Web App สมุดบัญชีรายวัน เชื่อมต่อ Google Sheets บันทึกรายรับ-รายจ่ายได้จริงภายใน 5 นาที ด้วย Lovable.dev ไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว

Lovable.dev คืออะไร?

Lovable.dev คือเครื่องมือ AI ที่สร้างเว็บแอปพลิเคชันจาก prompt หรือคำอธิบายภาษาธรรมดา ไม่ว่าจะเป็นภาษาไทยหรืออังกฤษ — คุณบอกว่าอยากได้อะไร AI จะเขียนโค้ดและสร้างแอปออกมาให้ใช้งานได้จริง พร้อม Preview แบบ Real-time

จุดเด่นที่น่าสนใจคือระบบ Connectors ที่ให้แอปเชื่อมต่อกับเครื่องมือภายนอกได้โดยตรง ไม่ว่าจะเป็น Google Sheets, Stripe, หรือ Airtable โดยไม่ต้องตั้ง backend เอง

บทความนี้จะใช้ Google Sheets เป็นฐานข้อมูล แล้วสร้าง Web App สมุดบัญชีรายวัน ที่บันทึกรายรับ-รายจ่าย พร้อม Dashboard สรุปยอดของแต่ละวัน

ขั้นตอนที่ 1 — เข้าเมนู Connectors บน Lovable.dev

หลังจาก Login เข้า Lovable.dev แล้ว ให้มองที่แถบเมนูด้านซ้าย จะเห็นเมนู Connectors อยู่ใต้ Resources คลิกเข้าไปได้เลย

ขั้นตอนที่ 2 — เลือก Google Sheets จากรายการ Connectors

ในหน้า Connectors จะเห็นรายชื่อ App & Chat connectors ทั้งหมด เลื่อนหาและคลิกที่ Google Sheets ซึ่งมีคำอธิบายว่า "Read and update spreadsheets"

หากเห็นป้าย Enabled สีเขียวอยู่แล้ว แสดงว่า Connector ถูกเปิดใช้งานใน Workspace ของคุณแล้ว

ขั้นตอนที่ 3 — กด "+ Add connection" เพื่อเชื่อมบัญชี Google

ในหน้ารายละเอียด Google Sheets Connector จะเห็นส่วน Connections ที่แสดงรายการการเชื่อมต่อที่มีอยู่ ให้กดปุ่ม + Add connection ที่มุมขวาบน

ขั้นตอนที่ 4 — ตั้งชื่อ Connection แล้วกด Connect

กรอกชื่อที่ต้องการสำหรับ connection นี้ เช่น "Naiyachon's Google Sheets" จากนั้นเลือกว่าใครสามารถใช้ connection นี้ได้ แล้วกดปุ่ม Connect

ระบบจะเปิดหน้าต่างใหม่ให้ Login Google Account และ Authorize การเข้าถึง Sheets

ระบบจะขอ permission เข้าถึง Google Sheets ให้กด Allow เพื่อให้ Lovable สามารถอ่านและเขียนข้อมูลใน Sheets ของคุณได้

ขั้นตอนที่ 5 — พิมพ์ Prompt บอก AI ว่าต้องการอะไร

กลับไปที่หน้า Home แล้วพิมพ์ Prompt บอก Lovable ว่าต้องการสร้างอะไร พร้อมแนบ URL ของ Google Sheet ที่ต้องการบันทึกข้อมูลลงไปด้วย

ตัวอย่าง Prompt ที่ใช้ในบทความนี้:

ช่วยสร้าง web app ที่สามารถ สรุปรายรับรายจ่าย ของแต่ละวัน และสามารถ บันทึกข้อมูลได้ด้วย https://docs.google.com/spreadsheets/d/...

เคล็ดลับ: ยิ่ง Prompt ละเอียด ผลลัพธ์ยิ่งดี ระบุฟีเจอร์ที่ต้องการให้ครบ เช่น แสดงสรุปรายรับ-รายจ่าย, กรองตามวัน, ลบรายการได้

ขั้นตอนที่ 6 — เลือก Google Sheets Connection แล้วกด Connect

Lovable จะตรวจพบว่าแอปต้องการเชื่อมต่อกับ Google Sheets และแสดง Dialog ให้เลือก connection ที่สร้างไว้ เลือกชื่อ connection ของคุณ แล้วกดปุ่ม Connect

ขั้นตอนที่ 7 — รอ AI สร้างแอป แล้ว Preview ได้เลย!

Lovable จะเริ่มวิเคราะห์ความต้องการและสร้างโค้ดทั้งหมดให้อัตโนมัติ ใช้เวลาประมาณ 30 วินาทีถึง 1 นาที เมื่อเสร็จแล้วจะเห็น Preview แอป สมุดบัญชีรายวัน ทางขวามือทันที

ขั้นตอนที่ 8 — ทดสอบบันทึกรายการ

กรอกข้อมูลในฟอร์ม เพิ่มรายการ เลือกประเภท (รายรับ / รายจ่าย) ระบุหมวดหมู่ จำนวนเงิน และกด บันทึกลง Google Sheets

แอปจะแสดงข้อความ "บันทึกเรียบร้อย" และ Dashboard จะอัปเดตยอดรายรับ-รายจ่าย-คงเหลือสุทธิทันที

ขั้นตอนที่ 9 — ตรวจสอบข้อมูลใน Google Sheets

เปิด Google Sheet ที่ระบุไว้ใน Prompt จะเห็นข้อมูลที่บันทึกจากแอปถูกส่งมาเก็บอยู่ในสเปรดชีตเรียบร้อย ตรงตาม Column ที่แอปสร้างไว้ให้

โครงสร้าง Column ที่แอปสร้างให้อัตโนมัติ: