สวัสดีค่ะทุกท่าน,, ด้วยประเด็นที่ร้อนแรงเรื่อง Barcode ในช่วงเลือกตั้งที่ผ่านมา ซึ่งนักวิชาการหลายท่านออกมาให้ความรู้เรื่องการอ่านค่าบาร์โค้ด และหลายคนเริ่มตั้งคำถามว่าจริงๆ แล้วระบบสแกนบาร์โค้ดทำงานอย่างไร และถ้าเราอยากสร้างระบบแบบนั้นขึ้นมากเอง ต้องใช้อุปกรณ์อะไรบ้างและต้องมีระบบที่ซับซ้อนรองรับไหม
คำตอบคือ…ไม่จำเป็นเลยค่ะ เราสามารถสร้างสิ่งนี้ขึ้นมาได้เองแบบง่ายๆ 😊
ซึ่งเครื่องมือที่เราใช้ก็คือ BarcodeReader (Recorder) บนเว็บ ที่เชื่อมต่อกับ Google Apps Script เพื่อบันทึกข้อมูลลง Google Sheets แบบ Real-time
โดยในบทความนี้ นิกจะชวนทุกท่านมาสร้างระบบสแกนบาร์โค้ดของตัวเอง….
ที่เมื่อ Scan แล้วให้ข้อมูลวิ่งเข้า Google Sheets อัตโนมัติ แบบไม่ต้องติดตั้ง Application ไม่ต้องซื้อเครื่องสแกนเฉพาะทาง และที่สำคัญสามารถใช้ได้ง่ายๆ ทั้งบนมือถือและในโน้ตบุ๊ก แบบ Step by Step ตั้งแต่เข้าเว็บ ตั้งค่า URL ไปจนถึงตรวจสอบข้อมูลใน Spreadsheet =>> Let’s go (☞ﾟヮﾟ)☞
#0 BarcodeReader (Recorder) คืออะไร?
BarcodeReader (Recorder) คือ Web Application สำหรับสแกนบาร์โค้ดผ่านกล้องของอุปกรณ์เราโดยตรง ไม่ว่าจะเป็น Laptop, Tablet หรือ Smartphone ก็ตามค่ะ โดยไม่ต้องติดตั้งโปรแกรมเพิ่มเติม ซึ่งหลักการทำงานของระบบนี้มี 3 ส่วนหลักๆ ดังนี้
ตัวอ่านบาร์โค้ด (Scanner) ซึ่งในที่นี้คือกล้องมือถือ/โน้ตบุ๊ก
ตัวรับข้อมูล (Webhook/ Script): ในบทความนี้จะใช้เป็น Google Apps Script
ฐานข้อมูลปลายทาง: Google Sheets
ดังนั้นเมื่อเราสแกนบาร์โค้ดผ่านกล้อง Flow ของค่าบาร์โค้ดที่ถูกอ่านมาจะเป็นดังนี้ค่ะ
ข้อมูลจะถูกอ่าน → ส่งไปยัง Script → บันทึกลง Spreadsheet
ซึ่งความดีงามคือ ทุกอย่างทำงานแบบ Online ที่ใช้เพียงเว็บบราวเซอร์เท่านั้น และบันทึกข้อมูลแบบ Real-time ค่ะ
#1 Step by Step การสร้างระบบสแกนบาร์โค้ด
1.1 เข้า Website สำหรับสแกน
ขั้นตอนแรก ให้เข้าไปที่ URL นี้ค่ะ: https://barcode-reader-mtn3.vercel.app/ Barcode reader by Panaya Sudta
หน้าเว็บจะเป็น UI ง่ายๆ สำหรับเปิดกล้องและอ่านบาร์โค้ด ยังไม่ต้องสแกนนะคะ เพราะเราต้องตั้งค่าปลายทางก่อน
1.2 วิธีการตั้งค่า Google Sheet/ Apps Script (ครั้งแรก) ตามขั้นตอนดังนี้
เปิด Google Sheet ที่เราต้องการ หรือเข้าไปที่ https://docs.google.com/spreadsheets/ ที่เราต้องการใช้งาน แล้วไปที่เมนู Extensions แล้วเลือก Apps Script
หลังจากเลือก Apps Script แล้วจะมีการเปิดหน้าต่างใหม่ขึ้นมาแบบอัตโนมัติ ตามภาพด้านล่างนี้ค่ะ ซึ่งในส่วนนี้ให้ทุกท่านลบโค้ดเดิมออก (และทำการ Rename Apps Script ได้นะคะถ้าต้องการ)
หลังจากที่ลบโค้ดเดิมออกแล้ว ให้ Copy โค้ดด้านล่างนี้ ไปวางแทนที่โค้ดเดิมได้เลยค่ะ
function doPost(e) {
try {
// ตรวจสอบว่ามี parameter e และ postData หรือไม่
if (!e) {
throw new Error('No event parameter received');
}
if (!e.postData) {
throw new Error('No postData in request');
}
if (!e.postData.contents) {
throw new Error('No contents in postData');
}
// Log ข้อมูลที่ได้รับ
Logger.log('Received data: ' + e.postData.contents);
// ดึง spreadsheet และ sheet
const ss = SpreadsheetApp.getActiveSpreadsheet();
let sheet = ss.getSheetByName('Sheet1');
// ถ้าไม่มี Sheet1 ให้ใช้ sheet แรก
if (!sheet) {
sheet = ss.getSheets()[0];
Logger.log('Using first sheet: ' + sheet.getName());
}
// ตรวจสอบว่ามี header หรือยัง
const lastRow = sheet.getLastRow();
if (lastRow === 0) {
// ถ้ายังไม่มีข้อมูล ให้เพิ่ม header
sheet.appendRow(['บาร์โค้ด', 'วันที่/เวลา']);
Logger.log('Added headers');
}
// แปลง JSON
const data = JSON.parse(e.postData.contents);
if (!data.barcode) {
throw new Error('No barcode in request data');
}
const barcode = data.barcode;
// สร้าง timestamp
const timestamp = Utilities.formatDate(
new Date(),
'Asia/Bangkok',
'dd/MM/yyyy HH:mm:ss'
);
// เพิ่มข้อมูลลงใน row ใหม่
sheet.appendRow([barcode, timestamp]);
Logger.log('Appended: ' + barcode + ' at ' + timestamp);
// ส่งผลลัพธ์กลับ
return ContentService
.createTextOutput(JSON.stringify({
success: true,
message: 'บันทึกสำเร็จ',
barcode: barcode,
timestamp: timestamp,
sheet: sheet.getName()
}))
.setMimeType(ContentService.MimeType.JSON);
} catch (error) {
Logger.log('Error: ' + error.toString());
return ContentService
.createTextOutput(JSON.stringify({
success: false,
error: error.toString(),
message: 'เกิดข้อผิดพลาด: ' + error.toString()
}))
.setMimeType(ContentService.MimeType.JSON);
}
}
function doGet(e) {
return ContentService
.createTextOutput(JSON.stringify({
success: true,
message: 'Apps Script is working! Use POST request to append data.',
timestamp: new Date().toISOString()
}))
.setMimeType(ContentService.MimeType.JSON);
}
// ฟังก์ชันทดสอบ - ใช้ฟังก์ชันนี้เพื่อทดสอบก่อน Deploy
function testDoPost() {
const testData = {
postData: {
contents: JSON.stringify({ barcode: 'TEST123456' })
}
};
const result = doPost(testData);
Logger.log(result.getContent());
return result.getContent();
}
หลังจากวางโค้ดในช่อง Script เรียบร้อยแล้วให้ทุกท่านกด Save (💾)
แล้วทดสอบโค้ดก่อน Deploy ด้วยการเลือกฟังก์ชัน testDoPost จาก dropdown แล้วกด Run ค่ะ
หลังจากนั้นระบบจะมี Pop-up ขึ้นมาถามเรื่อง Permissions ว่าเราจะให้เข้าถึงข้อมูลไหม
ก็ให้เรากดอนุญาต และ Continue ไปเรื่อยๆ นะคะ (ถ้าเป็นครั้งแรก จะขออนุญาต: คลิก Authorize access → เลือก Google Account → คลิก Advanced → คลิก Go to [project name] (unsafe) → คลิก Allow )
ท้ายสุดถ้าเราลอง Run แบบ testDoPost แล้วผ่าน หน้าตาของ Execution log จะแสดงดังภาพด้านล่างนี้ค่ะ เป็นอันว่ารันผ่าน^^
หลังจากนั้นให้เลือก Deploy แล้วไป New deployment
แล้วคลิกไอคอนรูปฟันเฟือง ⚙️ ข้างๆ “Select type” แล้วเลือกเป็น Web app ค่ะ
แล้วตั้งค่า Configuration ต่างๆ ดังนี้ค่ะ
Execute as: ให้เลือกเป็น Me (Email ที่ทุกท่านใช้สร้าง Google Sheet/ Apps Script)
Who has access: ให้เลือกเป็น Anyone (ไม่ใช่ “Anyone with Google account” นะคะ ไม่งั้นจะ Run แล้ว error)
หลังจากนั้นให้คลิก “Deploy” ได้เลยค่ะ หลังจากนั้นจะมี Pop-up ตามภาพด้านล่างนี้ขึ้นมา (ในส่วนนี้ก็ให้เรา Copy Deployment ID กับ Web app URL เก็บเอาไว้สักแห่งด้วยนะคะ)
ซึ่งถ้า Deploy แล้วไม่ติดปัญหาอะไรจะมีข้อมูล Barcode เป็น TEST123456 กับเวลาที่ Scan ที่เป็น Testing Data ถูกเพิ่มเข้าไปเป็นข้อมูลแรกใน Google Sheet ที่เราสร้างไว้ตั้งแต่ขั้นตอนแรกตามภาพด้านล่างนี้นะคะ
จากขั้นตอนก่อนหน้านี้ทุกท่านได้ทำการตั้งค่าใน Google Sheet ที่เป็น Database ของเราเสร็จเรียบร้อยแล้วค่ะ
ต่อไปให้ทุกท่านกลับไปตั้งค่าในหน้า Website: https://barcode-reader-mtn3.vercel.app :Barcode Scanner by Panaya Sudta โดยเลือกไปที่ไอคอน “⚙️ ตั้งค่า”
แล้วนำ Web app URL (ที่ขึ้นต้นด้วย https://script.google.com/macros/s/…) ที่เรา Copy เอาไว้จากขั้นตอนด้านบน เลื่อนลงมาด้านล่างสุด แล้วเอาไปวาง แล้วคลิก “บันทึก URL ” ค่ะ
ซึ่งเมื่อบันทึก URL เสร็จเรียบร้อยแล้ว จะมีการแสดงข้อความว่า “เชื่อมต่อกับ Google Sheet แล้ว” แสดงขึ้นมา เป็นอันเสร็จเรียบร้อยค่ะ สามารถใช้งาน Scan ข้อมูลได้เลย
#2 ทดลองใช้งาน Barcode Reader
ในส่วนของขั้นตอนนี้ ให้เพื่อนๆ ทุกท่านหยิบมือถือขึ้นมาค่ะ เข้าไปที่ Website เดิม https://barcode-reader-mtn3.vercel.app :Barcode Scanner by Panaya Sudta
นำ Web app URL (ที่ขึ้นต้นด้วย https://script.google.com/macros/s/…) ที่เรา Copy เอาไว้จากขั้นตอนด้านบน เลื่อนลงมาด้านล่างสุด แล้วเอาไปวาง แล้วคลิก “บันทึก URL ” ค่ะ
แล้วไปที่ สแกนบาร์โค้ด แล้ว “เริ่มสแกน” หลังจากนั้นให้ “Alow” Access กล้องของ Smart phone แล้วส่องไปที่ Barcode ที่เราต้องการได้เลยค่ะ^^
หลังจากสแกนเสร็จ เราสามารถเข้าไปดูข้อมูลได้ที่ URL ที่เราสร้างไว้แต่แรก ที่เมื่อเปิดเข้าไป จะเห็นข้อมูลถูกบันทึกเป็นแถวใหม่ในตารางทันทีแบบ Real-time สแกนปุ๊บ ขึ้นปั๊บค่ะ โดยข้อมูลจะประกอบด้วย 💬
Timestamp (วันที่และเวลา)
รหัสบาร์โค้ดที่สแกน
Last but not Least..
จากประเด็นร้อนเรื่อง Barcode ที่หลายคนตั้งคำถาม วันนี้เราลองถอยออกมาดูในมุมเทคโนโลยี จะเห็นว่าระบบสแกนบาร์โค้ดพื้นฐานไม่ได้ซับซ้อนอย่างที่คิด เพียง 4 ขั้นตอน: 1.เข้าเว็บ 2.วาง Script URL 3.อนุญาตกล้องและสแกน 4. ตรวจสอบข้อมูลใน Google Sheets ก็สามารถสร้างระบบบันทึกข้อมูลแบบอัตโนมัติได้แล้วค่ะ
Digital Transformation บางครั้งไม่จำเป็นต้องเริ่มจากโครงการใหญ่เสมอไป แค่เข้าใจกลไกพื้นฐาน แล้วออกแบบการเชื่อมต่อข้อมูลให้ถูกจุด เราก็สามารถสร้างระบบที่มีประสิทธิภาพได้ด้วย Online Tools ต่างๆ ตามความต้องการได้ค่ะ😉😊
