Vibe Coding : พัฒนา Google Apps Script ด้วย Clasp + AI
บทความทั่วไป

Vibe Coding : พัฒนา Google Apps Script ด้วย Clasp + AI

บุรินท์ สุภีวี

การพัฒนา Web App ด้วย Google Apps Script (GAS) ผ่าน Script Editor บนหน้าเว็บ มักสร้างความอึดอัดเรื่องระบบ Auto-complete ที่ยังไม่ครอบคลุม ไม่มี Git ช่วยทำ Version Control และที่สำคัญที่สุดคือ ไม่สามารถใช้พลังของ AI Coding Assistants (เช่น Cursor, VS Code, GitHub Copilot) ได้เต็มประสิทธิภาพ

บทความนี้จะพาคุณเปลี่ยน workflow ด้วยการใช้ Clasp (Command Line Apps Script Projects) เครื่องมือจาก Google ที่จะช่วย Clone โปรเจกต์ลงมาทำในเครื่อง (Local) ให้คุณ Vibe Coding ร่วมกับ AI ได้อย่างอิสระ แล้วค่อย Push & Deploy กลับขึ้น Cloud ในคำสั่งเดียว

1. ติดตั้ง Clasp และเปิดสิทธิ์เข้าถึงระบบ

เริ่มด้วยการติดตั้ง clasp ผ่าน Node.js และเปิดสิทธิ์การเชื่อมต่อบน Google Account ของคุณ

  1. เปิดสิทธิ์ Apps Script API: ไปที่หน้า Google Apps Script Settings แล้วเปลี่ยนสถานะ Google Apps Script API ให้เป็น ON
  2. ติดตั้งและ Login ผ่าน Terminal:
# ติดตั้ง Clasp แบบ Global
npm install -g @google/clasp

# ล็อกอินเข้าสู่ระบบ Google Account
clasp login

photo-1629654297299-c8506221ca97?auto=format&fit=crop&w=800&q=80

2. ดึงโค้ดลงเครื่อง (Clone Project)

ไปที่โปรเจกต์ Google Apps Script บนเบราว์เซอร์ของคุณ เพื่อนำ Script ID มาใช้ดึงไฟล์ลงเครื่อง

  1. เข้าไปที่ Project Settings (ไอคอนฟันเฟืองทางซ้าย)
  2. คัดลอกรหัสในช่อง Script ID
  3. สั่ง Clone ลงโฟลเดอร์ในเครื่องผ่าน Terminal:
# สร้างโฟลเดอร์ใหม่และเปิดเข้าไป
mkdir my-gas-webapp
cd my-gas-webapp

# Clone โค้ดลงมาที่เครื่อง
clasp clone "YOUR_SCRIPT_ID_HERE"

photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=800&q=80

3. เข้าสู่ช่วง Vibe Coding ร่วมกับ AI ให้หนำใจ!

เมื่อไฟล์มาอยู่ในเครื่องแล้ว เปิดโฟลเดอร์โปรเจกต์ด้วย IDE สาย AI คู่ใจ เช่น Cursor หรือ VS Code (ร่วมกับ Copilot / Claude Dev)

เทคนิคการพัฒนา Web App บน Local:

  1. แยกไฟล์เป็นสัดส่วน: สร้างไฟล์ index.html, styles.html (สำหรับ CSS / Tailwind), และ scripts.html (สำหรับ Client JavaScript)
  2. ใช้ AI เจน UI และ Logic: สั่ง AI เขียนหน้าตาอินเทอร์เฟซ และจัดการฟังก์ชันฝั่ง Server ใน Code.gs
  3. จัดการ Version Control: สามารถใช้ Git เพื่อคุมเวอร์ชันโค้ด และ push ขึ้น GitHub ได้ตามปกติ
// ตัวอย่าง Code.gs (Server-side)
function doGet(e) {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle('Vibe Coding Web App')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function getAppData() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
return sheet.getDataRange().getValues();
}

photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=800&q=80

4. Push และ Deploy กลับขึ้น Cloud

เมื่อพัฒนาและทดสอบโค้ดเรียบร้อยแล้ว ส่งโค้ดกลับขึ้น Google Cloud และสั่งสร้าง Deployment เวอร์ชันใหม่ได้ทันที

# Push โค้ดทั้งหมดขึ้น Google Apps Script
clasp push

# (Optional) ใช้ Watch mode เพื่อ auto-push ทุกครั้งที่กด Save
clasp push -w

# Deploy เป็น Web App เวอร์ชันใหม่
clasp deploy --description "Vibe coding release v1.0"

photo-1607799279861-4dd421887fb3?auto=format&fit=crop&w=800&q=80

สรุปข้อดีของการย้ายมาใช้ Clasp

  1. ⚡ เขียนโค้ดไวขึ้นหลายเท่า: ดึงความสามารถ AI มาช่วยเติมโค้ดและแก้บั๊กได้ทันที
  2. 📁 จัดระเบียบโปรเจกต์ง่าย: ไม่ต้องทนเขียนโค้ดกองรวมกันในไฟล์เดียวบนหน้าเว็บ
  3. 🛡️ ปลอดภัยด้วย Git: มีประวัติการแก้ไขโค้ด ย้อนกลับเวอร์ชันเดิมได้ตลอดเวลา
  4. 🚀 Deploy ในคำสั่งเดียว: อัปเดตงานขึ้น Cloud ได้ลื่นไหลไม่สะดุด
ประเมินบทความ:
5.0 จาก 5 (1 รีวิว) เข้าสู่ระบบเพื่อให้คะแนน
แชร์เรื่องนี้:

ความคิดเห็น (0)

เข้าสู่ระบบ เพื่อเขียนความคิดเห็น