แจก Prompt สร้าง Dashboard แบบไม่ต้องโค้ด! ด้วย Lovable

มีข้อมูลอยู่ใน Google Sheets แล้วอยากจะนำมาสร้างเป็น Dashboard แต่ไม่รู้จะเริ่มยังไง!

ตามปกติกรณีที่มีข้อมูลใน Google Sheets แล้วอยากจะสร้างรายงานเพื่อวิเคราะห์ข้อมูล ถ้าเราไม่สร้างกราฟขึ้นมาใน Google Sheets ก็อาจจะต้องใช้วิธีการเชื่อมข้อมูลไปยัง Application อื่นๆเช่น Looker Studio ซึ่งล้วนแล้วแต่เป็นวิธีที่ใช้เวลานานทั้งสิ้น
.
ในโพสนี้ผมจะมาแจก Prompt เพื่อนำเอา AI มาช่วยสร้างเป็น Web Application สำหรับแสดงข้อมูลวิเคราะห์ยอดขายแบบไฮโซ ที่สามารถทำตามได้ภายในเวลาแค่ 10 นาที

โดยในลำดับแรกให้เราทำการสร้าง Script ใน Google App Script โดยให้ AI ช่วยสร้าง script ตาม prompt ดังต่อไปนี้ได้เลย

ต้องการเปลี่ยนข้อมูลใน file แนบให้สามารถเข้าถึงได้ด้วย WebApp
ให้ทำการสร้าง Script ใน Google App Script โดยให้แปลงข้อมูลจาก Google Sheets ให้อยู่ในรูปแบบ JSON(Array of Objects) ที่สามารถนำไปเชื่อมต่อกับ platform Lovable แบบ realtime ได้

** ไม่ให้ใช้วิธีส่งข้อมูลแบบ CORS

ข้อมูลใน Google Sheets เป็นข้อมูลการขายในช่องทางต่างๆ
อยู่ภายใต้ชื่อ Sheets ที่ชื่อว่า : ชีต1

ข้อมูลที่อยู่ภายใน Sheets นี้อยู่ใน column ดังต่อไปนี้,
Column A : วันที่
Column B : ช่องทางการขาย
Column C : เดือน
Column D : สถานะ
Column E : ยอดรวม
Column F : Year-Month
Column G : Year

โดยในกรณีที่ถ้าเรามีข้อมูลชุดอื่น ให้เราทำการเปลี่ยนชื่อชีทที่เก็บข้อมูล รวมถึงรายละเอียดข้อมูลในแต่ละ column ให้ถูกต้อง

หรือถ้าอยากทดสอบกับข้อมูล Google Sheets ยอดขายตัวอย่างก็สามารถ download file ได้ที่นี้เลยครับ

หลังจากนั้น AI จะทำการสร้าง file Google App Script ขึ้นมาซึ่งเราก็สามารถนำ script มาวางใน file google sheets ของเราได้ทันที

Sc

โดยหลังจากนั้นให้เราทำการ deploy script เพื่อสร้างเป็น URL โดยการกดปุ่ม “การทำให้ใช้งานได้” และ เลือกการทำให้ใช้งานได้รายการใหม่

ให้เลือกประเภทเป็น “เว็บแอป” และ ผู้มีสิทธิ์เข้าถึงเป็น “ทุกคน” และกดปุ่ม “การทำให้ใช้งานได้” ได้เลย

โดยถ้าไม่มีอะไรผิดพลาดถ้าเราทำการเปิดดูข้อมูลใน link ที่ Google App Script สร้างขึ้นมาให้ เราจะเห็นข้อมูลใน Google Sheets ของเราในรูปแบบ JSON ดังภาพต่อไปนี้ (ถ้าได้ใกล้เคียงแบบนี้แต่ format ไม่สวยงามเหมือนแบบนี้ก็ไม่เป็นไรนะครับ)

หลังจากนั้นเราจะไปทำการสร้าง Web Application ใน platform Lovable กันต่อ แต่เพื่อให้ผลลัพท์ออกมาได้ตามความต้องการมากที่สุด ผมจึงแนะนำให้ใช้ AI ในการสร้าง prompt ให้ โดยให้ทำการ prompt ตามตัวอย่างด้านล่างนี้ได้เลย

ฝากสร้าง Prompt สำหรับการนำไปสร้าง webapp ใน Lovable.dev


โดยต้องการสร้าง Data analytic dashboard เพื่อวิเคราะห์ ข้อมูลขายของออนไลน์ โดยให้ดึงข้อมูลจาก URL ของ Google App Script ดังต่อไปนี้ <URL>


แบบที่ user สามารถ interact กับข้อมูลได้ และมีข้อมูลดังต่อไปนี้


1. มีกราฟสำหรับวิเคราะห์ยอดขายในแต่ละเดือน และปี

2. มี filter ให้สามารถเลือกข้อมูลต่างๆได้ที่ด้านบน โดยเมื่อเลือกข้อมูลแล้ว ข้อมูลด้านล่างในส่วนของกราฟจะทำการ refresh อัตโนมัติ

3. ให้ทำการแสดงข้อมูลที่ได้ทำการ filter แล้วแบบตาราง แบบที่สามารถทำการ sort ข้อมูลได้

ตีมของ Interface ขอแบบ minimal ใช้สีแบบ Professional
ให้ใช้ font ที่ชื่อว่า Kanit จาก Google Fonts

โดยให้เราทำการนำเอา URL ของ Google App Script ที่ได้มาวางที่คำว่า <URL> ได้เลย รวมถึงให้ทำการระบุลักษณะของ dashboard และ feature ตามต้องการได้เลย

และหลังจากที่ AI ได้ทำการสร้าง Prompt ขึ้นมาก็ให้เราทำการนำ prompt ที่ได้รับไปทำการใส่ที่ platform Lovable เพื่อสร้าง Dashboard ได้ทันที

โดยถ้าใครที่ยังไม่เคยมี account ของ Lovable ก็สามารถสมัครได้ฟรีที่ลิงค์นี้เลยครับ

🔗 Link สมัคร platform Lovable.dev
https://lovable.dev/?via=wongsagorn

แค่นี้เราก็จะได้ระบบ Dashboard แบบไฮโซ ที่ข้อมูลจะปรับเปลี่ยนตาม dropdown ที่เลือกแบบ realtime ครับ ลองเอาเทคนิคนี้ไปลองปรับใช้กันดูได้เลย

สามารถดูคลิปวีดีโอด้านล่างนี้เพื่อดูวิธีการแบบ step by step ได้เลย

🔗 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

🎥 อุปกรณ์ที่ผมใช้

กล้อง 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

Leave a Reply

Your email address will not be published. Required fields are marked *