เปลี่ยนข้อมูลดิบเป็นแดชบอร์ดสุดหรู: วิธีสร้าง Dashboard ด้วย Google Apps Script จากไฟล์ CSV แบบฟรี 100%

/ Web Development / By

คู่มือการพัฒนาแบบ Serverless สำหรับนักวิเคราะห์ข้อมูลและนักพัฒนา

ในยุคปัจจุบันที่ข้อมูลมีการอัปเดตอยู่ตลอดเวลา หลายองค์กรมักจะส่งออกข้อมูล (Export) จากระบบ ERP, CRM หรือระบบฐานข้อมูลภายในออกมาในรูปแบบของไฟล์ CSV (Comma-Separated Values) ซึ่งการนำไฟล์เหล่านี้มาเปิดใน Excel หรือ Google Sheets เพื่อทำรายงานซ้ำๆ ทุกวันอาจเป็นเรื่องที่น่าเบื่อและเสียเวลา

จะดีกว่าไหมถ้าเราสามารถอัปโหลดไฟล์ CSV นั้นเข้าไปใน Google Drive แล้วให้ระบบเปลี่ยนข้อมูลดิบเหล่านั้นเป็น Web-based Dashboard ที่สวยงาม เข้าใจง่าย และเข้าถึงได้จากทุกที่ทันที? บทความนี้จะพาคุณไปเจาะลึกวิธีทำระบบนี้ด้วย Google Apps Script (GAS) ซึ่งใช้งานได้ฟรี 100% โดยไม่ต้องเช่าโฮสติ้งหรือเซิร์ฟเวอร์ใดๆ เลย

💡 สถาปัตยกรรมของระบบ (System Architecture)

ระบบแจ้งเตือนและแสดงผลแดชบอร์ดนี้ประกอบด้วย 3 ส่วนหลักๆ ทำงานประสานกันดังนี้:

  1. Data Source (Google Drive): ไฟล์ CSV ที่เราอัปโหลดขึ้นมาแทนที่ไฟล์เดิมในโฟลเดอร์ที่กำหนดไว้
  2. Backend Processing (Google Apps Script): สคริปต์จะคอยอ่านไฟล์ CSV แปลงข้อมูลให้อยู่ในรูปแบบ JSON Object ผ่านฟังก์ชันภายใน
  3. Frontend Display (HTML Service + Chart.js): หน้าเว็บแอปพลิเคชันที่สร้างขึ้นด้วย HTML/CSS/JS โดยดึงไลบรารี Chart.js มาช่วยวาดกราฟเส้น กราฟแท่ง หรือกราฟวงกลมให้สวยงามและตอบสนองผู้ใช้ (Responsive)

🛠️ ขั้นตอนที่ 1: การเตรียมไฟล์ CSV ใน Google Drive

ให้คุณสร้างไฟล์ CSV ตัวอย่าง (เช่น sales_data.csv) แล้วอัปโหลดขึ้นไปไว้บน Google Drive จากนั้นให้นำ File ID ของไฟล์นั้นมาใช้งาน (File ID คือรหัสตัวอักษรและตัวเลขยาวๆ ที่อยู่ใน URL ของไฟล์นั้น)

ตัวอย่างโครงสร้างข้อมูลในไฟล์ CSV (sales_data.csv):

ข้อมูลโค้ด

Month,Sales,Expenses,Profit
January,12000,8000,4000
February,15000,9000,6000
March,18000,10000,8000

💻 ขั้นตอนที่ 2: เขียนโค้ดฝั่ง Backend (Code.gs)

ให้เปิด Google Apps Script ขึ้นมา (ไปที่ script.google.com หรือกดสร้างจาก Google Drive) จากนั้นใส่โค้ดฝั่ง Server-side ด้านล่างนี้ลงไปเพื่อทำหน้าที่อ่านและแปลงไฟล์ CSV:

JavaScript

// โค้ดฝั่ง Code.gs
function doGet() {
  // เรียกใช้ไฟล์ Index.html เพื่อแสดงผลหน้าเว็บ
  return HtmlService.createTemplateFromFile('Index')
      .evaluate()
      .setTitle('Sales Performance Dashboard')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getCsvData() {
  // เปลี่ยนเป็น File ID ของคุณที่อยู่ใน Google Drive
  const fileId = 'YOUR_CSV_FILE_ID_HERE'; 
  
  try {
    const file = DriveApp.getFileById(fileId);
    const csvContent = file.getBlob().getDataAsString('UTF-8');
    
    // ใช้ฟังก์ชันภายในของ Apps Script ในการ Parse CSV
    const rawData = Utilities.parseCsv(csvContent);
    
    if (rawData.length <= 1) return { headers: [], rows: [] };
    
    // แยกส่วนหัวตาราง (Headers) และข้อมูล (Rows)
    const headers = rawData[0];
    const rows = rawData.slice(1);
    
    return {
      headers: headers,
      rows: rows
    };
  } catch (error) {
    Logger.log('Error reading CSV: ' + error.toString());
    return { error: error.toString() };
  }
}

🌐 ขั้นตอนที่ 3: สร้างหน้ากากแสดงผล Frontend (Index.html)

กดปุ่มเครื่องหมายบวก (+) ในหน้า Apps Script แล้วเลือกสร้างไฟล์ HTML ตั้งชื่อว่า Index จากนั้นใส่โค้ดการจัดเลย์เอาต์และการวาดกราฟดังนี้:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
  <!-- ดึง Chart.js มาใช้งาน -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f6f9; color: #333; }
    .container { max-width: 1000px; margin: 0 auto; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .chart-box { width: 100%; height: 400px; margin-top: 20px; }
    .loading { text-align: center; font-size: 18px; color: #666; padding: 50px 0; }
  </style>
</head>
<body>

<div class="container">
  <h2>Dashboard สรุปผลการดำเนินงาน</h2>
  <div id="loader" class="loading">กำลังโหลดข้อมูลจากไฟล์ CSV...</div>
  <div class="chart-box">
    <canvas id="salesChart"></canvas>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // เรียกฟังก์ชันฝั่ง Backend (Code.gs) แบบ Asynchronous
    google.script.run
      .withSuccessHandler(renderDashboard)
      .withFailureHandler(function(err) {
        document.getElementById('loader').innerText = 'เกิดข้อผิดพลาด: ' + err;
      })
      .getCsvData();
  });

  function renderDashboard(data) {
    document.getElementById('loader').style.display = 'none';
    
    if(data.error) {
      alert('Error: ' + data.error);
      return;
    }

    // เตรียมข้อมูลสำหรับ Chart.js
    const labels = data.rows.map(row => row[0]); // เดือน (Month)
    const sales = data.rows.map(row => parseFloat(row[1])); // ยอดขาย
    const expenses = data.rows.map(row => parseFloat(row[2])); // ค่าใช้จ่าย

    const ctx = document.getElementById('salesChart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'ยอดขาย (Sales)',
          data: sales,
          backgroundColor: '#3182ce',
          borderWidth: 1
        }, {
          label: 'ค่าใช้จ่าย (Expenses)',
          data: expenses,
          backgroundColor: '#e53e3e',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: { y: { beginAtZero: true } }
      }
    });
  }
</script>
</body>
</html>

🚀 ขั้นตอนที่ 4: ทำการ Deploy เป็น Web App

เพื่อให้คนอื่นหรือคุณสามารถเข้ามาดูหน้า Dashboard นี้ผ่านเบราว์เซอร์ได้ ให้ทำตามขั้นตอนการ Deploy ดังนี้:

  1. มองไปที่มุมขวาบนของหน้าสคริปต์ คลิกปุ่ม Deploy (การทำให้ใช้งานได้) > เลือก New deployment
  2. คลิกรูปเฟืองข้าง Select type เลือกประเภทเป็น Web app (เว็บแอป)
  3. ตั้งค่าโครงสร้างสิทธิ์การเข้าถึง:
    • Execute as: เมนูนี้ให้เลือกเป็น Me (บัญชีของคุณเอง) เพื่อให้บอทใช้สิทธิ์ของคุณในการเข้าอ่านไฟล์ CSV ใน Drive ได้
    • Who has access: เลือกเป็น Anyone (ทุกคน) หรือจะจำกัดไว้แค่คนในองค์กรของคุณก็ได้
  4. กดปุ่ม Deploy ระบบจะขอให้คุณยืนยันสิทธิ์ (Authorize Access) ให้กดตกลงให้เรียบร้อย
  5. คุณจะได้ Web app URL มา สามารถนำ URL นี้ไปเปิดบนเบราว์เซอร์หรือแชร์ให้ทีมงานเข้ามาดูผลการอัปเดตข้อมูลได้ทันที

🎯 ประโยชน์และการนำไปต่อยอด (Use Cases)

ด้านการใช้งานแนวทางการต่อยอดระบบให้มีประสิทธิภาพยิ่งขึ้น
ความสดใหม่ของข้อมูลเมื่อมีการอัปโหลดไฟล์ CSV ชุดใหม่มาทับไฟล์เดิมใน Drive หน้าแดชบอร์ดจะเปลี่ยนตามทันทีโดยไม่ต้องแก้โค้ดอีก
ผสานระบบภายนอกสามารถตั้งเวลา (Trigger) ให้ Apps Script ไปดึงไฟล์ CSV มาจากอีเมล (Gmail) หรือระบบภายนอกผ่าน API มาเซฟลง Drive อัตโนมัติได้
การประหยัดต้นทุนทดแทนระบบ BI ที่มีราคาแพง เหมาะสำหรับโปรเจกต์ขนาดเล็กหรือแดชบอร์ดดูภายในแผนก
Post Views: 26

Related Posts

Subscribe
Subscribe
Scroll to Top