การสร้าง ระบบบันทึกรายรับ-รายจ่าย (Web App) โดยใช้ Google Sheets เป็นฐานข้อมูล และ Google Apps Script (GAS) ร่วมกับ HTML/Tailwind CSS สำหรับหน้าจอใช้งาน (Frontend) สามารถทำได้ง่ายและไม่ต้องมีค่าใช้จ่ายเพิ่มเติม โดยมีขั้นตอนและโค้ดตัวอย่างที่พร้อมใช้งานดังนี้ครับ
เปิด Google Sheets แล้วสร้างสเปรดชีตใหม่ ตั้งชื่อว่า ระบบรายรับรายจ่าย
ในแผ่นงานแรก (Sheet1) ให้ตั้งชื่อหัวคอลัมน์ในบรรทัดแรก (Row 1) ดังนี้:
A1: วันที่
B1: ประเภท
C1: หมวดหมู่
D1: จำนวนเงิน
E1: หมายเหตุ
ที่เมนูด้านบนของ Google Sheet ไปที่ ส่วนขยาย (Extensions) > Apps Script
ลบโค้ดเดิมในไฟล์ Code.gs ออก แล้ววางโค้ดชุดนี้ลงไป:
JavaScript
function doGet() {
return HtmlService.createTemplateFromFile('Index')
.evaluate()
.setTitle('ระบบบันทึกรายรับ-รายจ่าย')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
// ฟังก์ชันบันทึกข้อมูลลง Sheet
function addData(formData) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([
formData.date,
formData.type,
formData.category,
Number(formData.amount),
formData.note || ''
]);
return { status: 'success' };
}
// ฟังก์ชันดึงข้อมูลสรุปและรายการล่าสุด
function getDashboardData() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
var totalIncome = 0;
var totalExpense = 0;
var recentTransactions = [];
// วนลูปเริ่มตั้งแต่แถวที่ 2 (ข้าม Header)
for (var i = 1; i < data.length; i++) {
var row = data[i];
if (!row[0]) continue;
var dateVal = row[0] instanceof Date ? row[0].toISOString().split('T')[0] : row[0];
var type = row[1];
var category = row[2];
var amount = Number(row[3]) || 0;
var note = row[4];
if (type === 'รายรับ') {
totalIncome += amount;
} else if (type === 'รายจ่าย') {
totalExpense += amount;
}
recentTransactions.push({
date: dateVal,
type: type,
category: category,
amount: amount,
note: note
});
}
recentTransactions.reverse(); // แสดงรายการใหม่อยู่บนสุด
return {
totalIncome: totalIncome,
totalExpense: totalExpense,
balance: totalIncome - totalExpense,
transactions: recentTransactions.slice(0, 10) // แสดง 10 รายการล่าสุด
};
}
ในหน้า Apps Script คลิกที่เครื่องหมาย + ข้างๆ ไฟล์ (Files) แล้วเลือก HTML
ตั้งชื่อไฟล์ว่า Index (จะได้ไฟล์ Index.html)
วางโค้ดนี้ลงในไฟล์ Index.html:
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body { font-family: 'Sarabun', sans-serif; }
</style>
</head>
<body class="bg-slate-100 min-h-screen p-4 md:p-8">
<div class="max-w-4xl mx-auto space-y-6">
<div class="text-center py-4">
<h1 class="text-3xl font-bold text-slate-800">💰 ระบบบันทึกรายรับ - รายจ่าย</h1>
<p class="text-slate-500 text-sm mt-1">บันทึกและติดตามการใช้จ่ายอย่างง่ายผ่าน Google Sheets</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
<p class="text-sm font-medium text-slate-500">รายรับทั้งหมด</p>
<p id="totalIncome" class="text-2xl font-bold text-emerald-600 mt-2">฿0.00</p>
</div>
<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
<p class="text-sm font-medium text-slate-500">รายจ่ายทั้งหมด</p>
<p id="totalExpense" class="text-2xl font-bold text-rose-600 mt-2">฿0.00</p>
</div>
<div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
<p class="text-sm font-medium text-slate-500">คงเหลือสุทธิ</p>
<p id="totalBalance" class="text-2xl font-bold text-blue-600 mt-2">฿0.00</p>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
<h2 class="text-lg font-semibold text-slate-700 mb-4">➕ บันทึกรายการใหม่</h2>
<form id="recordForm" onsubmit="handleFormSubmit(event)" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-600 mb-1">วันที่</label>
<input type="date" id="date" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
</div>
<div>
<label class="block text-sm font-medium text-slate-600 mb-1">ประเภท</label>
<select id="type" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
<option value="รายรับ">รายรับ</option>
<option value="รายจ่าย">รายจ่าย</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-600 mb-1">หมวดหมู่</label>
<input type="text" id="category" placeholder="เช่น เงินเดือน, ค่าอาหาร, ค่าน้ำไฟ" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
</div>
<div>
<label class="block text-sm font-medium text-slate-600 mb-1">จำนวนเงิน (บาท)</label>
<input type="number" step="0.01" id="amount" placeholder="0.00" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-slate-600 mb-1">หมายเหตุ</label>
<input type="text" id="note" placeholder="รายละเอียดเพิ่มเติม (ถ้ามี)" class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
</div>
<div class="md:col-span-2 text-right">
<button type="submit" id="submitBtn" class="bg-blue-600 text-white font-medium py-2.5 px-6 rounded-lg hover:bg-blue-700 transition">บันทึกข้อมูล</button>
</div>
</form>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
<h2 class="text-lg font-semibold text-slate-700 mb-4">📋 รายการล่าสุด</h2>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm text-slate-600">
<thead class="bg-slate-50 text-slate-700 font-semibold border-b">
<tr>
<th class="p-3">วันที่</th>
<th class="p-3">ประเภท</th>
<th class="p-3">หมวดหมู่</th>
<th class="p-3">หมายเหตุ</th>
<th class="p-3 text-right">จำนวนเงิน</th>
</tr>
</thead>
<tbody id="transactionTable" class="divide-y divide-slate-100">
<tr>
<td colspan="5" class="p-4 text-center text-slate-400">กำลังโหลดข้อมูล...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// ตั้งค่าวันที่เริ่มต้นเป็นวันนี้
document.getElementById('date').valueAsDate = new Date();
// โหลดข้อมูลเมื่อเปิดหน้าเว็บ
window.onload = function() {
loadDashboard();
};
function loadDashboard() {
google.script.run.withSuccessHandler(renderDashboard).getDashboardData();
}
function renderDashboard(data) {
document.getElementById('totalIncome').innerText = '฿' + data.totalIncome.toLocaleString('th-TH', {minimumFractionDigits: 2});
document.getElementById('totalExpense').innerText = '฿' + data.totalExpense.toLocaleString('th-TH', {minimumFractionDigits: 2});
document.getElementById('totalBalance').innerText = '฿' + data.balance.toLocaleString('th-TH', {minimumFractionDigits: 2});
const tableBody = document.getElementById('transactionTable');
if (data.transactions.length === 0) {
tableBody.innerHTML = '<tr><td colspan="5" class="p-4 text-center text-slate-400">ยังไม่มีรายการบันทึก</td></tr>';
return;
}
tableBody.innerHTML = data.transactions.map(item => {
const isIncome = item.type === 'รายรับ';
const amountClass = isIncome ? 'text-emerald-600 font-semibold' : 'text-rose-600 font-semibold';
const sign = isIncome ? '+' : '-';
return `
<tr class="hover:bg-slate-50">
<td class="p-3">${item.date}</td>
<td class="p-3"><span class="px-2 py-1 text-xs rounded-full ${isIncome ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}">${item.type}</span></td>
<td class="p-3">${item.category}</td>
<td class="p-3 text-slate-400">${item.note || '-'}</td>
<td class="p-3 text-right ${amountClass}">${sign}฿${Number(item.amount).toLocaleString('th-TH', {minimumFractionDigits: 2})}</td>
</tr>
`;
}).join('');
}
function handleFormSubmit(e) {
e.preventDefault();
const btn = document.getElementById('submitBtn');
btn.disabled = true;
btn.innerText = 'กำลังบันทึก...';
const formData = {
date: document.getElementById('date').value,
type: document.getElementById('type').value,
category: document.getElementById('category').value,
amount: document.getElementById('amount').value,
note: document.getElementById('note').value
};
google.script.run.withSuccessHandler(function(res) {
document.getElementById('recordForm').reset();
document.getElementById('date').valueAsDate = new Date();
btn.disabled = false;
btn.innerText = 'บันทึกข้อมูล';
loadDashboard();
}).addData(formData);
}
</script>
</body>
</html>
คลิกปุ่ม ทำรายการใหม่ (Deploy) มุมขวาบน > เลือก การทำให้ใช้อย่างเป็นทางการใหม่ (New deployment)
คลิกไอคอนฟันเฟือง ⚙️ ข้างคำว่า เลือกประเภท (Select type) แล้วเลือก เว็บแอป (Web app)
ตั้งค่าการเข้าถึง:
คำอธิบาย (Description): ระบบบันทึกรายรับรายจ่าย
เรียกใช้ในฐานะ (Execute as): ฉัน (Me)
ผู้ที่มีสิทธิ์เข้าถึง (Who has access): * เลือก ทุกคน (Anyone) หากต้องการเปิดผ่านเบราว์เซอร์หรือมือถือได้ทันทีโดยไม่ต้องเข้าสู่ระบบด้วยบัญชีเดิมทุกครั้ง
คลิก ทำให้ใช้อย่างเป็นทางการ (Deploy)
กดยอมรับสิทธิ์การเข้าถึง (Authorize Access) และเลือกบัญชี Google ของคุณ
คัดลอก URL เว็บแอป (Web App URL) ที่ได้ นำไปเปิดใช้งานบนคอมพิวเตอร์ หรือกดบันทึกไว้ในสมาร์ตโฟนเพื่อใช้งานได้ทันทีครับ
1 ระบบจัดการงาน (To-Do List)
บันทึกการบ้าน โปรเจกต์ และติดตามสถานะว่างานไหนทำเสร็จแล้วบ้าง
2 ระบบบันทึกรายรับ-รายจ่าย
ฝึกฝนวินัยทางการเงิน บันทึกค่าขนมและค่าใช้จ่ายในแต่ละวัน
3 ระบบบันทึกคำศัพท์ (Vocab Tracker)
จดคำศัพท์ภาษาอังกฤษที่เจอใหม่ๆ พร้อมคำแปล เพื่อใช้ทบทวน
4 ระบบคำนวณและตั้งเป้าเกรด (GPAX)
กรอกคะแนนสอบเพื่อคำนวณเกรดเฉลี่ย และวางแผนการเรียน
5 ระบบไดอารี่อารมณ์ (Mood Tracker)
บันทึกความรู้สึกในแต่ละวัน เพื่อสำรวจสุขภาพจิตของตนเอง
6 ระบบเช็คชื่อด้วย QR Code
ให้นักเรียนสแกนเพื่อเช็คชื่อเข้าแถวหรือเข้าชมรม ลดการใช้กระดาษ
7 ระบบยืม-คืนหนังสือ/อุปกรณ์
จัดการอุปกรณ์กีฬาของห้องเรียน หรือหนังสือในมุมรักการอ่าน
8 ระบบส่งผลงานออนไลน์
แนบลิงก์ Google Drive หรือไฟล์เพื่อส่งการบ้านให้คุณครู
9 ระบบโหวต/ลงคะแนนเสียง
โหวตเลือกหัวหน้าห้อง เลือกสีเสื้อกีฬาสี พร้อมแสดงผลกราฟ
10 ระบบแจ้งซ่อม/แจ้งปัญหา
แจ้งหลอดไฟเสีย โต๊ะพัง ให้ฝ่ายอาคารสถานที่เข้ามาดูแล
11 ระบบจองคิว (Queue System)
จองเวลาเข้าพบครูแนะแนว จองคิวใช้งานคอมพิวเตอร์ในห้องสมุด
12 ระบบสั่งอาหารล่วงหน้า (Pre-order)
สั่งน้ำหรือขนมในสหกรณ์ล่วงหน้า เพื่อไปรับช่วงพักเที่ยงได้ทันที
13 ระบบจัดการสต๊อกสินค้า (Inventory)
ใช้งานในร้านค้าจำลองของโรงเรียน หรือวิชาธุรกิจเพื่อดูยอดคงเหลือ
14 ระบบรวมลิงก์ (Linktree ห้องเรียน)
รวมช่องทางการติดต่อ โซเชียลมีเดีย หรือเอกสารสำคัญของห้อง
15ระบบติดตามสุขภาพและ BMI
บันทึกน้ำหนัก ส่วนสูง และคำนวณดัชนีมวลกายในคาบพละศึกษา
16ระบบกล่องรับความคิดเห็น
รับ Feedback แบบไม่ระบุตัวตน เพื่อปรับปรุงการทำงานของชมรม
17 ระบบสุ่มชื่อ (Randomizer)
สุ่มชื่อเพื่อนออกมาตอบคำถาม หรือใช้จับฉลากของขวัญปีใหม่
18 ระบบสมุดโทรศัพท์รุ่น (Directory)
ค้นหาเบอร์โทรศัพท์และข้อมูลติดต่อของเพื่อนๆ ในระดับชั้น
19 ระบบหารค่าใช้จ่ายทัศนศึกษา
คำนวณเงินกองกลาง หารค่ารถ ค่ากินเวลาไปทำรายงานกลุ่ม
20 ระบบ Portfolio ออนไลน์
สร้างหน้าโปรไฟล์แสดงประวัติและผลงาน เพื่อยื่นเข้ามหาวิทยาลัย
21 ระบบจัดการเวรทำความสะอาด
จัดตารางและเช็คชื่อนักเรียนที่รับผิดชอบเวรทำความสะอาดห้องเรียนในแต่ละวัน
22 ระบบแจ้งของหาย / เก็บของได้ (Lost & Found)
ให้นักเรียนโพสต์ข้อมูลหรือค้นหาสิ่งของที่ทำหายหรือเก็บได้ภายในโรงเรียน
23 ระบบจองห้องหรือพื้นที่ส่วนรวม
จองห้องสมุด ห้องประชุม หรือโต๊ะทำงานกลุ่ม เพื่อป้องกันการใช้งานซ้อนทับกัน
24 ระบบลงทะเบียนเข้าชุมนุม/ชมรม
ให้นักเรียนกรอกข้อมูลเพื่อสมัครเข้าชมรม พร้อมแสดงจำนวนที่นั่งว่างแบบ Real-time
25 ระบบติดตามการดื่มน้ำ (Water Tracker)
บันทึกปริมาณน้ำที่ดื่มในแต่ละวัน เพื่อส่งเสริมสุขภาพที่ดีของนักเรียน
26 ระบบสมุดบันทึกความดี / คะแนนจิตพิสัย
บันทึกการทำจิตอาสา หรือให้คุณครู/หัวหน้าห้องให้คะแนนความประพฤติ
27 ระบบคลังเกียรติบัตรออนไลน์
จัดเก็บข้อมูลและลิงก์ไฟล์รูปภาพเกียรติบัตรที่ได้รับ เพื่อใช้ทำ Portfolio ในอนาคต
28 ระบบฐานข้อมูลพรรณไม้ในโรงเรียน
สร้าง QR Code ไปติดที่ต้นไม้ เมื่อสแกนจะแสดงชื่อสายพันธุ์และข้อมูลของต้นไม้นั้นๆ
29 ระบบติดตามเป้าหมายการออมเงิน
ตั้งเป้าหมายสิ่งของที่อยากได้ (เช่น ซื้อโทรศัพท์ใหม่) และบันทึกยอดเงินที่ออมได้ในแต่ละวัน
30 ระบบจัดการงบประมาณกีฬาสี
บันทึกและควบคุมค่าใช้จ่ายในการทำแสตนด์เชียร์หรือชุดพาเหรดของแต่ละคณะสี
31 ระบบบันทึกการอ่านหนังสือ (Reading Log)
จดบันทึกชื่อหนังสือ สรุปใจความสำคัญ และจำนวนหน้าที่อ่านจบในแต่ละเดือน
32 ระบบ Flashcards ทบทวนบทเรียน
ระบบถาม-ตอบสั้นๆ เพื่อใช้ทบทวนความรู้ก่อนสอบร่วมกับเพื่อนๆ
33 ระบบแบบประเมินความพึงพอใจ
ให้เพื่อนๆ เข้ามาให้คะแนนหลังจบการจัดกิจกรรมของโรงเรียนหรือซุ้มงานวิชาการ
34 ระบบสมุดเยี่ยมชม (Guestbook)
สำหรับงานนิทรรศการ ให้ผู้เข้าร่วมงานสามารถพิมพ์ข้อความความประทับใจทิ้งไว้ได้
35 ระบบตารางเรียน/ตารางสอนออนไลน์
แสดงตารางเรียนของห้องที่อัปเดตเสมอ พร้อมลิงก์สำหรับเข้าเรียนออนไลน์ (ถ้ามี)
36 ระบบจัดการร้านบอร์ดเกม / เช่าหนังสือการ์ตูน
บันทึกสถานะว่าใครยืมเกมหรือหนังสืออะไรไป และกำหนดวันคืน (เหมาะกับชมรมบอร์ดเกม)
37 ระบบรวบรวมไอเดีย (Brainstorming Board)
ให้เพื่อนๆ ในกลุ่มส่งไอเดียทำโครงงาน หรือเสนอธีมจัดงานเลี้ยงปีใหม่
38 ระบบบันทึกการส่งเสื้อผ้าซัก
(สำหรับนักเรียนประจำ) บันทึกจำนวนชิ้นเสื้อผ้าที่ส่งซัก เพื่อตรวจสอบตอนรับคืน
39 ระบบติดตามการออกกำลังกาย
บันทึกระยะทางวิ่ง หรือจำนวนเซ็ตในการออกกำลังกายแต่ละวัน
40 ระบบคำนวณและแปลงหน่วย (Unit Converter)
รวมสูตรคำนวณที่ใช้บ่อยในวิชาฟิสิกส์หรือคณิตศาสตร์ สร้างเป็น Web App ให้เพื่อนใช้