← กลับ MHS2 Hub

MHS2 HUB · LEARN BY BUILDING

ฐานโปรเจกต์ที่คุณต่อยอดได้ด้วย AI

ดูโครงสร้างและ source ของระบบจริง แล้วใช้ AI ช่วยวิเคราะห์ ปรับแต่ง และสร้างระบบในแบบของคุณ

01

WORKSHOP · READY TO LEARN

สมุดโทรศัพท์ง่าย ๆ ของหน่วยงาน

บทเรียนเริ่มต้นที่เห็นภาพครบวงจร: หน้าเว็บเรียก Google Apps Script เพื่ออ่านและจัดการข้อมูลใน Google Sheets

1Google Sheetเก็บข้อมูล 6 คอลัมน์
→
2Apps Scriptเป็น API ของระบบ
→
3Web pageค้นหาและจัดการรายชื่อ

ทำตามนี้เพื่อได้ระบบต้นแบบ

  1. สร้าง Google Sheet และสร้างชีตชื่อ เบอร์โทร
  2. สำรองแถว 1–4 ไว้สำหรับส่วนหัว แล้วเริ่มข้อมูลจริงที่แถว 5
  3. กำหนดคอลัมน์: ลำดับ, โรงเรียน, ผู้อำนวยการ, ตำบล, อำเภอ, โทรศัพท์
  4. วาง Code.gs ใน Extensions → Apps Script
  5. Deploy เป็น Web app แล้วนำ URL ที่ได้ไปใส่ในหน้า index.html
  6. ทดสอบค้นหา เพิ่ม แก้ไข และลบข้อมูลทีละรายการ

อ่านโค้ดแล้วจะได้เรียนรู้อะไร

  • doGet() และ doPost() รับคำสั่งจากหน้าเว็บ
  • listAll() อ่านข้อมูลจาก Sheet เป็น JSON
  • addRecord(), updateRecord(), deleteRecord() จัดการข้อมูล
  • renumberSeq() จัดเลขลำดับใหม่หลังลบ

ข้อสังเกตสำคัญ: โค้ดชุดเรียนรู้นี้ยังไม่ตรวจสิทธิ์ที่ฝั่ง Apps Script สำหรับคำสั่งเพิ่ม/แก้ไข/ลบ จึงไม่ควรใช้ endpoint แบบเปิดสาธารณะกับข้อมูลจริงโดยไม่เพิ่มการยืนยันสิทธิ์ก่อน

02

FULL STACK · FRONTEND + APPS SCRIPT

ระบบทะเบียนครุภัณฑ์แบบออนไลน์

ศึกษาระบบจริงที่มีทั้งหน้าเว็บและ Apps Script backend: login, ทะเบียนตามกลุ่มงาน, บัญชีรวม, รายงาน และ flow ตัดจำหน่าย

เส้นทางอ่านโค้ดที่แนะนำ

  1. เริ่มจากค่ากลาง: 9 กลุ่มงาน, สถานะ และวิธีได้มา
  2. อ่าน doLogin(), session และฟังก์ชัน api() ของหน้าเว็บ
  3. อ่าน doGet() ฝั่ง Apps Script เพื่อเห็น action ของระบบทั้งหมด
  4. ตาม flow addRecord() → syncSummary() → รายงาน
  5. ตาม flow ตัดจำหน่าย: pullDisposedRecords() → confirmDisposeRecord()

โครงสร้างที่ต้องเตรียมเมื่อนำไปต่อยอด

  • กำหนด Spreadsheet ของหน่วยงานตนเองใน SS_ID
  • สร้างชีตของ 9 กลุ่มงาน และให้ข้อมูลเริ่มที่แถว 5
  • เรียก setup หนึ่งครั้งเพื่อสร้าง บัญชีรวม, ตัดจำหน่าย และ admins
  • Deploy Apps Script เป็น Web App แล้วตั้ง URL ในหน้าเว็บ

Grill ก่อนใช้จริง: backend ปัจจุบันตรวจ login ได้ แต่ action เพิ่ม/แก้ไข/ลบยังไม่ได้ตรวจสิทธิ์ที่ฝั่ง Apps Script โดยตรง และ setup() มีบัญชีเริ่มต้นอยู่ในโค้ด จึงควรเพิ่ม server-side authorization และเปลี่ยนบัญชีเริ่มต้นก่อนนำไปใช้กับข้อมูลจริง

03

OFFLINE TOOL · DOCUMENT WORKFLOW

Jangmao70 — โปรแกรมสร้างเอกสารจ้างเหมาบริการผู้ปฏิบัติงานให้ราชการ

เริ่มจากการใช้งานโปรแกรมแบบ offline ก่อน แล้วเปิดดู source เพื่อทำความเข้าใจว่าเครื่องมือเอกสารหนึ่งตัวถูกออกแบบอย่างไร

วิธีเรียนที่แนะนำ

ใช้งานก่อนดาวน์โหลดและทดลองสร้างเอกสารจากข้อมูลตัวอย่าง
อ่านคู่มือทำตามขั้นตอนใช้งาน เพื่อเข้าใจจุดที่โปรแกรมช่วยลดงาน
ต่อยอด sourceกลับไปดู repo เมื่อมีความต้องการปรับเอกสารหรือเพิ่มขั้นตอนของหน่วยงาน
04

IMAGE HUB · TWO AUDIENCES

picturemhs2 — ระบบอัปโหลดและค้นหาแฟ้มภาพ

ศึกษาการออกแบบระบบที่แยกทางเข้าให้ผู้ดูแลอัปโหลดภาพ และให้บุคคลทั่วไปค้นหาภาพได้สะดวก

เลือกเส้นทางที่ตรงกับคุณ

ผู้ดูแลและผู้อัปโหลด: เข้าหน้าแอดมินเพื่อจัดการและเพิ่มภาพเข้าสู่ระบบ

บุคลากรทั่วไป: เข้าหน้าสาธารณะเพื่อค้นหาและเปิดดูแฟ้มภาพ

หน่วยงาน: ใช้คู่มือ Organization Migration เพื่อวางระบบที่มีผู้ดูแลและผู้ใช้งานหลายกลุ่ม

ผู้ใช้คนเดียว: ใช้คู่มือ Personal Single User เพื่อสร้าง Hub ภาพส่วนตัวที่เป็นระเบียบ

โจทย์ที่ควรถามขณะศึกษา

  • ใครอัปโหลดภาพ และใครค้นหาภาพ
  • จะตั้งชื่อ หมวด และคำค้นอย่างไรให้หาเจอภายหลัง
  • ภาพใดควรเปิดเผย และภาพใดต้องจำกัดสิทธิ์
05

SPECIALIZED AI · REUSE THE EXISTING PROJECT

PassaduAIagent — สร้าง Agent เฉพาะด้าน

ใช้โปรเจกต์เดิมเป็นต้นแบบในการจัดความรู้เฉพาะด้าน เพื่อช่วยสรุปและตอบคำถามอย่างมีขอบเขต

กำหนดขอบเขตระบุเรื่องที่ Agent ตอบได้และตอบไม่ได้
จัดแหล่งความรู้แยกเอกสารอ้างอิงให้ค้นหาและตรวจที่มาได้
ทดสอบคำถามใช้คำถามจริงเพื่อตรวจคำตอบและปรับคู่มือ
06

INVENTORY WEB APP · GOOGLE SHEETS + APPS SCRIPT

Inventory — ระบบคลังวัสดุสิ้นเปลืองออนไลน์

ต้นแบบระบบรับเข้า จ่ายออก คงเหลือ ใบเบิกพัสดุ และรายงาน โดยใช้หน้าเว็บร่วมกับ Google Sheets และ Apps Script

INVENTORY WORKFLOWตัดสต็อกทันที · แก้ไขและตรวจย้อนหลังได้ระบบใช้บัญชีความเคลื่อนไหวเป็นแกน ไม่พึ่งจำยอดคงเหลือด้วยมือ
01 · ผู้ดูแลคลังรับพัสดุเข้าคลังบันทึกรายการ · จำนวน · เอกสารอ้างอิง+ รับเข้า
02 · ฐานข้อมูลกลางบัญชีคลังพัสดุรายการ · หมวด · หน่วยนับ · จุดเตือนขั้นต่ำยอดพร้อมเบิก
03 · ผู้ขอเบิกสแกน QR / เปิดฟอร์มเลือกกลุ่มงาน · ชื่อผู้เบิก · ค้นหารายการส่งรายการเบิก
04 · ระบบตรวจจำนวนคงเหลือคำนวณจำนวนจ่ายจริง และแจ้งรายการขาดกันยอดติดลบ
05 · ใบเบิกบันทึกและตัดสต็อกออกเลขที่รายการ พร้อมจำนวนที่จ่ายจริง− จ่ายออก
06 · ผู้ดูแลDashboard / Auditดูคงเหลือ รายงาน และประวัติการแก้ไขติดตามได้

ตารางการเคลื่อนไหวที่ต้องเห็นชัด

เหตุการณ์ยอดคลังหลักฐานที่เก็บ
บันทึกรับพัสดุ+ เพิ่มReceipts / เอกสารอ้างอิง
ผู้ขอเบิกและบันทึกรายการ− ลดตามจำนวนจ่ายจริงWithdrawals + WithdrawalItems
แก้ไขเลขที่รายการเดิม↻ คำนวณใหม่EditLogs พร้อมเหตุผล
ยกเลิกใบเบิก+ คืนเข้ายอดสถานะ cancelled + EditLogs

โครงสร้างข้อมูลที่ควรอ่านก่อน

  • Categories, Items, Departments และ Staff คือข้อมูลตั้งต้น
  • Receipts บันทึกรับเข้า, Withdrawals และ WithdrawalItems บันทึกใบเบิกและรายการจ่าย
  • Adjustments ใช้ปรับยอดพร้อมเหตุผล, EditLogs เก็บร่องรอยการแก้ไข
  • Settings เก็บค่าระบบ เช่น รูปแบบเลขที่ใบเบิกและ PIN ผู้ดูแล

สูตรยอดคงเหลือ: รับเข้า + ปรับยอด − จำนวนที่จ่ายในใบเบิกที่ไม่ถูกยกเลิก

ลำดับการทำงาน

  1. เปิด Spreadsheet แล้วสั่ง Inventory → Setup database เพื่อสร้างชีตและข้อมูลตั้งต้น
  2. ตั้งหมวด รายการวัสดุ หน่วยนับ จุดเตือนขั้นต่ำ กลุ่มงาน และรายชื่อเจ้าหน้าที่
  3. บันทึกรับพัสดุเข้าคลัง ก่อนเปิดให้สร้างใบเบิก
  4. ผู้ขอเลือกกลุ่มงานและรายการ ระบบตรวจสต็อก คำนวณจำนวนจ่าย/ขาด และสร้างเลขใบเบิกตามปีงบประมาณ
  5. ผู้ดูแลดูประวัติ แก้ไขหรือยกเลิกโดยระบุเหตุผล แล้วตรวจ Dashboard และรายงานตามช่วงเวลา/หน่วยงาน

สิ่งที่ต่อยอดได้ด้วย AI

เพิ่มหน้าจอให้ AI ช่วยออกแบบฟอร์มรับเข้า ใบเบิก หรือหน้าสรุปสำหรับบทบาทใหม่
เพิ่มกติกาคลังกำหนดวงเงิน ขั้นอนุมัติ หรือเงื่อนไขเตือนเมื่อวัสดุใกล้หมด
เพิ่มรายงานสรุปการใช้รายเดือน หมวดที่ใช้มาก และหน่วยงานที่เบิกสูง

Grill ก่อนใช้จริง

ยังไม่ควรคัดลอกการตั้งค่านี้ไป Deploy ทันที: Web App ที่เปิดให้เข้าถึงแบบสาธารณะต้องมีการตรวจสิทธิ์ฝั่งเซิร์ฟเวอร์ที่รัดกุมทุก action ที่สำคัญ

  • ย้ายบัญชีและรหัสผ่านออกจาก source ไปเก็บใน Script Properties หรือใช้ระบบยืนยันตัวตนที่เหมาะสม
  • กำหนดสิทธิ์ผู้ดูแลสำหรับรับเข้า ปรับยอด แก้ไข และยกเลิกใบเบิก
  • ทดสอบการหมดอายุของ session, การเข้าถึง API โดยตรง และร่องรอยใน EditLogs
  • หากใช้ข้อมูลจริง ให้จำกัดผู้เข้าถึง Web App และ Spreadsheet ตามบทบาท
07

ONLINE CHECK-IN · GOOGLE SHEETS + APPS SCRIPT

ระบบเช็คชื่อออนไลน์สำหรับการประชุม

ระบบรับลงทะเบียนจากหน้าเว็บ พร้อมสร้างแท็บประชุมรายวัน สรุปผู้เข้าร่วม และตรวจรายชื่อที่ยังไม่มาใน Google Sheets

องค์ประกอบของระบบ

  • checkin2.html คือหน้าหลักแบบค้นหาโรงเรียน
  • checkin.html คือหน้าสำรองเมื่อหน้าหลักใช้งานไม่ได้
  • MasterData เก็บชื่อโรงเรียน ตำบล และอำเภอ โดยระบบอ่านจากคอลัมน์ B–D
  • เมนูใน Spreadsheet สร้างแท็บประชุม, สรุปผู้มา และสรุปผู้ที่ยังไม่มา

เส้นทางทำตามเพื่อสร้างระบบของตนเอง

  1. สร้าง Spreadsheet และเตรียมชีต MasterData
  2. วาง Code.gs, DatePicker.html, AttendedSummary.html และ MissingSummary.html
  3. รีเฟรช Spreadsheet เพื่อให้เมนู “ระบบเช็คชื่อ” ปรากฏ
  4. สร้างแท็บประชุมจากเมนู แล้ว Deploy เป็น Web App
  5. ตั้ง URL ที่ได้ใน checkin2.html และ checkin.html

Grill ก่อนใช้จริง: endpoint ปัจจุบันเปิดรับ doPost() จากหน้าเว็บโดยไม่มีการยืนยันตัวตน จึงควรเพิ่ม token หรือกลไกตรวจสิทธิ์หากระบบเปิดให้เข้าถึงสาธารณะ

08

STATIC HUB · LEARN THE FOUNDATION

สร้าง Hub ของคุณเองด้วย mhs2hub

เรียนรู้การรวมระบบ คู่มือ และโปรเจกต์ย่อยไว้ในหน้าเดียวด้วย static HTML, CSS และ JavaScript แล้วใช้ AI ช่วยอ่านโครง สร้างเนื้อหา และต่อยอดอย่างเป็นระบบ

เริ่มอ่านจาก 3 ไฟล์นี้

  1. index.html — โครงหน้า Hub, Section และลิงก์ไปยังระบบย่อย
  2. style.css — สี การ์ด animation และการแสดงผลบนมือถือ
  3. script.js — slideshow, เพลง, interaction และส่วนพักสมอง

จากนั้นดูโฟลเดอร์ของแต่ละระบบ เช่น Phonebook/, MHS2Assets/, learning/ และ checkin-appscript/ เพื่อเรียนรู้วิธีแยกงานให้ดูแลง่าย

แนวทางนำไปทำ Hub ของคุณ

  1. ลิสต์ระบบและกลุ่มผู้ใช้ที่ต้องเข้าถึงก่อน
  2. เพิ่ม Section และการ์ดที่พาผู้ใช้ไปยังปลายทางชัดเจน
  3. สร้างโฟลเดอร์แยกสำหรับระบบย่อย พร้อมคู่มือและ source
  4. ใช้ AI ช่วยร่างการ์ด, ตรวจ relative path และอธิบายโค้ดที่มีอยู่
  5. ทดสอบทุกลิงก์ก่อน commit แล้วเผยแพร่ผ่าน GitHub Pages

หลักสำคัญ: ให้ Hub เป็น “ประตูเข้า” ที่เรียบง่าย ส่วนรายละเอียดและระบบจริงอยู่ในหน้า/โฟลเดอร์ย่อย เพื่อให้ขยายต่อได้โดยไม่ทำให้หน้าแรกหนักเกินไป