สร้าง Interactive Dashboard เชื่อมต่อ Google Sheets แบบ Real-Time ด้วย Gemini ง่ายๆ ใน 4 ขั้นตอน! โดยจารย์งอก TechEd

หมดยุคที่การทำ Dashboard สำหรับผู้บริหารจะต้องใช้เวลาเขียนโค้ดหลายวัน หรือต้องพึ่งพาโปรแกรมซับซ้อนราคาแพงเสมอไป วันนี้เราสามารถใช้ผู้ช่วยอัจฉริยะอย่าง Gemini ในการออกแบบและเขียนโค้ดสร้าง Interactive Dashboard แบบ HTML ที่ดึงข้อมูลจาก Google Sheets ได้แบบ Real-Time พร้อมปุ่มอัปเดตข้อมูล แถมแชร์เป็นลิงก์ให้ทีมใช้งานได้ทันที

มาดูวิธีเสก Dashboard ฉบับผู้บริหารด้วย 4 ขั้นตอนง่ายๆ กันเลย

1. เข้าสู่หน้า Gemini App

เริ่มต้นง่ายๆ เพียงเปิดเบราว์เซอร์แล้วไปที่ gemini.google.com (ล็อกอินด้วยบัญชี Google ของคุณให้เรียบร้อย) เตรียมไอเดียหรือเป้าหมายของ Dashboard ที่คุณต้องการวิเคราะห์ไว้ในใจ

2. ป้อนคำสั่ง (Prompt) ขั้นเทพ

กุญแจสำคัญคือการเขียน Prompt ให้ครอบคลุมทั้ง "บริบทความต้องการ" และ "ผลลัพธ์ทางเทคนิค" คุณสามารถคัดลอก Prompt ด้านล่างนี้ไปปรับใช้ได้เลย:

ตัวอย่าง Prompt: "ช่วยออกแบบ Interactive Dashboard ผลการนำ Canvas Feature มาใช้ในการทำงาน สำหรับผู้บริหาร/หัวหน้าหลักสูตร เป้าหมายการวิเคราะห์: ดูแนวโน้ม, เปรียบเทียบคณะ/หน่วยงาน, ตรวจจุดที่ต้องปรับปรุง

ขอให้เสนอ:

• KPI หลัก 4 ตัว
• กราฟที่เหมาะสม 4 แบบ
• ตัวกรอง (Filter) 3 ตัว
• Insight ที่คาดว่าจะพบ

สิ่งที่ต้องการ: ต้องการโค้ดเป็น HTML พร้อม CSS/JS โดยให้สามารถเชื่อมต่อข้อมูลระหว่าง Google Sheets กับ Dashboard แบบ Real Time (ดึงข้อมูลผ่าน Published CSV) และขอให้มีปุ่มกด Update ข้อมูลบนหน้า Dashboard ด้วย"

เมื่อกดส่งคำสั่ง Gemini จะวิเคราะห์ความต้องการและร่างโครงสร้างให้คุณทันที พร้อมเขียนโค้ด HTML ที่ฝังไลบรารีกราฟและสคริปต์สำหรับดึงข้อมูลจาก Google Sheets มาให้เสร็จสรรพ

ตัวอย่างข้อมูล : https://docs.google.com/spreadsheets/d/1-xxhMU2eX9ioQBst6nhZobttoeae6Lx4j5RAZ1XbjnM/copy

3. ตรวจสอบและแก้ไขด้วยการ Prompt ซ้ำ (Refine)

โค้ดเวอร์ชันแรกอาจจะยังไม่สมบูรณ์ 100% หรือคุณอาจอยากปรับเปลี่ยนดีไซน์เพิ่มเติม นี่คือจุดเด่นของการใช้ AI คุณสามารถสั่งแก้ได้เหมือนคุยกับโปรแกรมเมอร์ส่วนตัว เช่น:

• "ช่วยเปลี่ยนสีกราฟแท่งเปรียบเทียบคณะให้เป็นโทนสีฟ้า-น้ำเงินหน่อย"

• "ปุ่ม Update ข้อมูลอยากให้มีไอคอนรีเฟรช และย้ายไปอยู่มุมขวาบน"

• "โค้ดที่ให้มาดึงข้อมูล Google Sheets ไม่ขึ้น ช่วยตรวจสอบส่วนดึงข้อมูล (Fetch API) ให้หน่อย"

Gemini จะทำการแก้ไขและอัปเดตโค้ดให้คุณจนกว่าจะได้หน้าตาฟังก์ชันที่พอใจ

4. ทดสอบและแชร์เป็นลิงก์ให้คนอื่นใช้งานได้เลย

เมื่อปรับแก้จนได้ผลลัพธ์ที่พอใจแล้ว คุณไม่จำเป็นต้องเอาโค้ดไปฝากบนเว็บโฮสติ้งให้ยุ่งยาก เพราะสามารถแชร์ตรงจากหน้าต่าง Gemini ได้ทันที

1. เซ็ตอัป Google Sheets: นำข้อมูลของคุณไปใส่ใน Google Sheets จากนั้นไปที่ File > Share > Publish to web เลือกเป็น CSV แล้วนำลิงก์ที่ได้ไปให้ Gemini อัปเดตใส่ไว้ในโค้ด HTML

2. สร้างลิงก์แชร์จาก Gemini: ที่หน้าจอแชทของ Gemini กดปุ่ม Share & export (แชร์และส่งออก) ที่อยู่ด้านล่างคำตอบ แล้วเลือก Share (สร้างลิงก์สาธารณะ)

3. ส่งให้ผู้บริหาร: คัดลอก URL ที่ระบบสร้างให้ แล้วส่งให้ผู้บริหารหรือทีมงานคลิกเข้ามาดูการทำงานของ Dashboard พร้อมผลลัพธ์โค้ดที่รันบนหน้าเว็บได้ทันที

การใช้ Gemini ไม่เพียงแต่ช่วยลดระยะเวลาจากหลักวันเหลือเพียงไม่กี่นาที แต่ยังช่วยไกด์ไอเดียในการเลือก KPI และกราฟที่เหมาะสมกับมุมมองผู้บริหารได้อย่างมืออาชีพ ลองนำวิธีนี้ไปปรับใช้กับงานข้อมูลของคุณดูได้เลย!