สร้าง web app (GAS) ใช้ html5-qrcode สแกนคิวอาร์ แสดงข้อมูลพนักงาน

bysemicon -
0

 


ตัวอย่าง web app (Google Apps Script + HTML + Bootstrap5 + JavaScript) ที่ใช้ html5-qrcode สแกนคิวอาร์ ค้นหา Google Sheet ด้วย รหัสพนักงาน แล้วแสดงข้อมูล: รหัส, ชื่อ-นามสกุล, ตำแหน่ง, รูปโปรไฟล์ (รองรับทั้งเป็น URL สาธารณะ หรือเป็นไฟล์ใน Google Drive ที่เก็บเป็น File ID แล้วจะแปลงเป็น data URL ให้)

สรุปการทำงาน

  • ผู้ใช้เปิดเว็บ → กล้องเริ่มสแกน 
  • เมื่ออ่านคิวอาร์ได้ (ค่าที่ได้คือ employeeId) → เรียก google.script.run.getEmployeeData(employeeId)
  • Server-side (Apps Script) จะค้นชีต (ตามชื่อชีตที่ตั้งไว้) แล้วคืนข้อมูลเป็น JSON ให้หน้าเว็บ
  • หน้าเว็บแสดงข้อมูลด้วย Bootstrap card

โครงสร้าง Google Sheet (ตัวอย่าง)

Sheet name: Employees

คอลัมน์:

  • A: EmployeeID (เช่น E123)
  • B: FullName (เช่น สมชาย ใจดี)
  • C: Position (เช่น เจ้าหน้าที่ไอที)
  • D: Photo (ใส่ได้ 2 แบบ)
    • ถ้าเป็น URL สาธารณะใส่เป็น https://...
    • ถ้าเก็บใน Google Drive ให้ใส่ fileId (เช่น 1aB...)
           URL ใส่เป็น  https://lh5.googleusercontent.com/d/ใส่ fileId
           — ในกรณีนี้ Apps Script จะอ่านไฟล์จาก Drive และส่งกลับเป็น data:image/...;
           — หมายเหตุ: ต้องให้สิทธิ์ Apps Script อ่าน Drive
  • E: QR Code ใส่สูตรที่ E1
 
={"QR Code";ARRAYFORMULA(
  IF(A2:A<>"",
     IMAGE("https://api.qrserver.com/v1/create-qr-code/?size=150x150&qzone=4&data=" & ENCODEURL(A2:A)),
     "")
  )
}

1) Server-side (Code.gs)

สร้างไฟล์ Code.gs ในโครงการ Apps Script แล้ววางโค้ดนี้:

     
// ---------------------- Config ----------------------
const SHEET_NAME = 'Employees'; // ชื่อชีตของคุณ
// ----------------------------------------------------

function doGet(e){
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('Employee QR Lookup')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

/**
 * ดึงข้อมูลพนักงานตามรหัส (employeeId)
 * คืนค่า: { id, name, position, profile } 
 */
function getEmployeeData(empId) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME);
  const data = sheet.getDataRange().getValues();
  const headers = data.shift();

  for (let row of data) {
    if (row[0] == empId) {
      return {
        id: row[0],
        name: row[1],
        position: row[2],
        profile: row[3], // ลิงก์รูปโปรไฟล์
      };
    }
  }
  return null;
}

หมายเหตุ (scope): ถ้าคุณใช้ Drive fileId เพื่ออ่านรูป จะต้องให้สิทธิ์ DriveApp กับสคริปต์ (Apps Script จะขออนุญาตตอน deploy ครั้งแรก) — ถ้าไม่ต้องการให้มีสิทธิ์ Drive ให้เก็บรูปเป็น URL สาธารณะในคอลัมน์ Photo แทน

2) Client-side HTML + JS (index.html)

สร้างไฟล์ index.html ในโปรเจ็กต์ Apps Script แล้ววางโค้ดนี้:

     
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ระบบแสดงข้อมูลพนักงาน</title>

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Html5Qrcode (สำคัญมาก) -->
  <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
</head>
<body class="bg-light p-4">
  <div class="container text-center">
    <h3 class="mb-3">สแกนคิวอาร์โค้ดพนักงาน</h3>
    <div id="reader" style="width: 300px; margin: auto;"></div>

    <div id="result" class="mt-4"></div>
  </div>

  <script>
    const html5QrCode = new Html5Qrcode("reader");

    html5QrCode.start(
      { facingMode: "environment" },
      { fps: 10, qrbox: 250 },
      qrCodeMessage => {
        html5QrCode.stop();
        document.getElementById("result").innerHTML =
          `<div class="alert alert-success">QR Code: ${qrCodeMessage}</div>`;
        
        // เรียกฟังก์ชันฝั่ง GAS เพื่อค้นหาข้อมูลในชีต
        google.script.run.withSuccessHandler(showEmployeeData).getEmployeeData(qrCodeMessage);
      },
      errorMessage => {
        // console.log("QR Error:", errorMessage);
      }
    );

    function showEmployeeData(data) {
      if (!data) {
        document.getElementById("result").innerHTML = `<div class="alert alert-danger">ไม่พบข้อมูลพนักงาน</div>`;
        return;
      }

      document.getElementById("result").innerHTML = `
        <div class="card mx-auto" style="max-width:400px;">
          <img src="${data.profile}" class="card-img-top" alt="Profile">
          <div class="card-body">
            <h5 class="card-title">${data.name}</h5>
            <p class="card-text">
              <strong>รหัส:</strong> ${data.id}<br>
              <strong>ตำแหน่ง:</strong> ${data.position}
            </p>
          </div>
        </div>`;
    }
  </script>
</body>
</html>

การติดตั้ง / Deployment แบบสั้น

  • สร้างโปรเจ็กต์ Google Apps Script ใหม่ (script.google.com) — เลือก "โปรเจ็กต์เปล่า"
  • วาง Code.gs และ index.html ตามด้านบน
  • สร้าง Google Sheet ตามโครงสร้าง (ชื่อชีตต้องตรงกับ SHEET_NAME)
  • ถ้าจะแปลง Drive fileId เป็นรูป ต้องอนุญาต scope ของ Drive — เมื่อ deploy ครั้งแรก Apps Script จะขออนุญาตให้คุณยืนยัน
  • Deploy → Deploy → New deployment → เลือก Web app → ตั้ง access (เช่น “Anyone with the link” หรือ “Anyone within <your domain>”) แล้วกด Deploy
  • เปิด URL ที่ได้ จะเป็นหน้าเว็บแอปพร้อมสแกน

ข้อแนะนำเพิ่มเติม / ข้อควรระวัง

  • ถ้าสตริปต์ต้องอ่านไฟล์จาก Drive จะต้องอนุญาตการเข้าถึง Drive — ถ้าต้องการหลีกเลี่ยง ให้เก็บรูปเป็น URL (เช่นอัพรูปขึ้นเว็บที่เข้าถึงได้) แล้วใส่ URL ในคอลัมน์ Photo
  • หาก QR ของคุณไม่ได้มีแค่ employeeId แต่มี JSON หรือ prefix อื่น ให้บอกผม — ผมจะปรับ handleScannedValue ให้ parse อัตโนมัติ
  • Security: ถ้าข้อมูลพนักงานเป็นข้อมูลละเอียดอ่อน ให้ระวังการตั้งสิทธิ์ของ Web App (ไม่ควรเปิดเป็น public ถ้าไม่จำเป็น)
  • หากต้องการให้รูปที่ได้จาก Drive ไม่นำไปเปิดเผยเป็น data URL (เพราะขนาดใหญ่) — ทางเลือกคือเขียน endpoint getPhotoById ที่ส่งไฟล์เป็น blob ผ่าน doGet แบบเฉพาะ (มีการตรวจสอบสิทธิ์) แทน


DEMO


แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า