สูตรลับสร้าง Web App ฟรี! ผสานพลัง Node.js และ Google Apps Script สู่ระบบ Serverless ขนาดย่อม

ในยุคที่การสร้าง Web Application มักมาพร้อมกับค่าใช้จ่าย ทั้งค่า Server, ค่า Database และค่าบำรุงรักษาต่างๆ จะดีกว่าไหมถ้าเราสามารถสร้าง Web App ที่ใช้งานได้จริงโดยแทบไม่ต้องเสียเงินเลย?

บทความนี้จะพาคุณไปทำความรู้จักกับ “สูตรลับ” ที่นักพัฒนาหลายคนนิยมใช้ นั่นคือการจับคู่ความทรงพลังของ Node.js เข้ากับความยืดหยุ่น (และฟรี!) ของ Google Apps Script (GAS) เพื่อสร้างระบบแบบ Serverless ขนาดย่อมที่ใช้งานได้จริง

💡 ทำไมต้อง Node.js + Google Apps Script?

โดยปกติแล้ว Google Apps Script สามารถสร้าง Web App ได้ด้วยตัวเอง แต่ข้อจำกัดคือหน้าตา UI ที่อาจจะปรับแต่งได้ยาก และการจัดการ Routing ที่ไม่ค่อยสะดวก การดึง Node.js เข้ามาช่วยจึงเป็นการอุดช่องโหว่นี้ โดยแบ่งหน้าที่กันทำงานดังนี้:

Google Apps Script (GAS): ทำหน้าที่เป็น Backend / Database โดยใช้ Google Sheets เป็นฐานข้อมูลเก็บข้อมูลต่างๆ และสร้าง API เพื่อรอรับคำสั่ง
Node.js: ทำหน้าที่เป็น Frontend / Middleware (อาจจะใช้ร่วมกับ Express.js หรือ React) คอยจัดการหน้าตาเว็บ (UI) และดึงข้อมูล (Fetch) หรือส่งข้อมูลไปที่ GAS ผ่าน API

ข้อดีของการสถาปัตยกรรมนี้:

ฟรี 100%: ใช้ Google Sheets เป็นฐานข้อมูล ไม่ต้องเช่า Database
ไม่ต้องจัดการ Server: ฝั่งฐานข้อมูลรันบน Server ของ Google
ยืดหยุ่นสูง: ฝั่ง Node.js สามารถตกแต่ง UI หรือเชื่อมต่อกับ Framework อื่นๆ ได้อย่างอิสระ

🛠️ ขั้นตอนการสร้าง (ภาพรวม)

เพื่อให้เห็นภาพชัดเจนขึ้น ลองมาดูสเตปการทำงานง่ายๆ ในการสร้างระบบ “อ่านข้อมูลจาก Google Sheets มาแสดงบนเว็บ” กันครับ

ขั้นตอนที่ 1: สร้าง API ด้วย Google Apps Script

เราจะเขียนโค้ดใน GAS ให้ทำหน้าที่เป็น API (รับ Request แบบ GET)

เปิด Google Sheets เปล่าๆ ขึ้นมา กรอกข้อมูลตัวอย่างลงไป
ไปที่เมนู Extensions > Apps Script
เขียนโค้ดเพื่อแปลงข้อมูลใน Sheet ให้เป็น JSON:

JavaScript

// ฝั่ง Google Apps Script
function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();
  
  // แปลง Array เป็น JSON Object แบบง่าย
  const result = data.map(row => ({
    id: row[0],
    name: row[1],
    email: row[2]
  }));

  return ContentService.createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

กด Deploy > New deployment เลือกประเภทเป็น Web app และตั้งค่าสิทธิ์ให้เข้าถึงได้แบบ “Anyone”
คัดลอก Web App URL เก็บไว้

ขั้นตอนที่ 2: ฝั่ง Node.js (สร้าง Web Server รับข้อมูล)

คราวนี้เราจะใช้ Node.js เป็นตัวกลางในการแสดงผลเว็บ โดยดึงข้อมูลจาก URL ที่ได้จากขั้นตอนแรก

สร้างโปรเจกต์ Node.js (npm init -y)
ติดตั้งแพ็กเกจที่จำเป็น เช่น express และ axios (npm install express axios)
เขียนโค้ดดึงข้อมูล:

JavaScript

// ฝั่ง Node.js (ไฟล์ server.js)
const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

// URL ที่ได้จาก Google Apps Script
const GAS_URL = 'วาง_WEB_APP_URL_ที่นี่';

app.get('/', async (req, res) => {
  try {
    // ยิง Request ไปขอข้อมูลจาก Apps Script
    const response = await axios.get(GAS_URL);
    const data = response.data;
    
    // แสดงผลเป็น JSON หรือจะส่งไปแสดงบน HTML template (เช่น EJS) ก็ได้
    res.json({
      message: 'ดึงข้อมูลจาก Google Sheets สำเร็จ!',
      data: data
    });
  } catch (error) {
    res.status(500).send('เกิดข้อผิดพลาดในการดึงข้อมูล');
  }
});

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}`);
});

ขั้นตอนที่ 3: ทดสอบรัน

เพียงแค่รันคำสั่ง node server.js แล้วเข้าไปที่ http://localhost:3000 คุณก็จะพบกับข้อมูลจาก Google Sheets ที่ถูกดึงมาแสดงผลผ่าน Node.js แบบเรียลไทม์!

🎯 บทสรุป

การจับคู่ระหว่าง Node.js และ Google Apps Script ถือเป็น “Hack” ที่ยอดเยี่ยมมากสำหรับนักพัฒนาที่ต้องการทำโปรเจกต์ขนาดเล็กถึงขนาดกลาง (เช่น ระบบ CRM ภายในองค์กร, ระบบจองคิว, หรือเว็บ Portfolio) ที่ไม่ต้องการความซับซ้อนของฐานข้อมูลใหญ่ๆ และที่สำคัญที่สุดคือ ประหยัดงบประมาณได้อย่างมหาศาล

ลองนำไอเดียนี้ไปต่อยอดกับโปรเจกต์ต่อไปของคุณดูครับ แล้วคุณจะพบว่า Google Sheets ทำอะไรได้มากกว่าที่คุณคิด!

Post Views: 34