แจกฟรี! Template WebApp ระบบจัดการสต๊อกแบบ QR Code พร้อมแจก prompt สำหรับสร้าง code ด้วย AI

Web Application ในโพสนี้จะเป็นระบบรับเข้าสินค้าเนื้อสัตว์ที่เป็นแท่งของร้านอาหาร ที่เราสามารถกรอกฟอร์มรายละเอียดของเนื้อสัตว์แต่ละแท่งและสั่งปริ้นเป็น QR Code มาแปะที่แท่งเนื้อของเราได้ทันที และเวลาเบิกออกก็สามารถใช้โทรศัพท์มือถือ ในการ scan QR Code ที่แปะอยู่ที่แท่งเนื้อได้เลย

Screenshot

และข้อมูลทั้งหมดจะทำการ record เข้าไปยัง Google Sheets แบบอัตโนมัติ ทำให้เราสามารถนำไปทำรายงานสินค้าคงเหลือ และ รายงานน้ำหนักรวมของเนื้อสัตว์แต่ละแท่งได้ทันที

Screenshot

ซึ่งเราก็สามารถสร้าง Web Application อีกตัวขึ้นมาที่จะเป็นตัวที่เราสามารถใช้ในการ scan เบิกสินค้าได้ทันที

Screenshot

ซึ่งระบบทั้งหมดนี้ผมใช้ AI มาช่วยลดเวลาในการพัฒนาระบบจนเหลือแค่ไม่กี่ชั่วโมงเท่านั้นเอง

ถ้าใครอยากลองนำไปปรับแต่งเพิ่มเติมก็สามารถนำ prompt ด้านล่างนี้ไปลองปรับดูได้เลยนะครับ

แจกฟรี! Prompt ระบบจัดการสต๊อกสินค้าด้วย QR Code

สร้าง Web Application สำหรับการสร้าง QR Code จากข้อมูลสินค้า เพื่อใช้ในการเช็คสต็อก โดยใช้ Google App Script

ข้อกำหนด: 1. อินเทอร์เฟซ (HTML/CSS/JavaScript):

ใช้ HTML, CSS, และ JavaScript ในไฟล์เดียว

มีธีมสีขาว-เหลือง และใช้ Font Kanit

มีฟอร์มสำหรับกรอกข้อมูลสินค้า:

Dropdown สำหรับเลือกประเภทสินค้า: สันคอหมู, สันนอกหมู, หมูสามชั้น, เนื้อริบอาย, เนื้อใบพาย, เนื้อชัคโรล, เนื้อวากิว

ช่องสำหรับกรอกน้ำหนัก (กิโลกรัม) ซึ่งต้องเป็นตัวเลขทศนิยม 2 ตำแหน่ง

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

หน้าแสดงผลลัพธ์:

แสดง QR Code ขนาดใหญ่ และเป็นสีดำ

แสดงรายละเอียดสินค้าประกอบด้วย: ชื่อเนื้อ, น้ำหนัก, และวันที่รับเข้า

จัดหน้าให้พร้อมสำหรับการพิมพ์ (print-friendly) ในแนวนอน (landscape)

ขนาดสำหรับพิมพ์ 60mm x 40mm

ในหน้าพิมพ์ ให้แสดงเฉพาะข้อมูล (ไม่มีคำนำหน้าเช่น "ประเภทเนื้อ:")

2. การทำงาน (Google App Script):

บันทึกข้อมูลที่กรอกในฟอร์มลงใน Google Sheets

Sheet ID: "YOUR GOOGLE SHEET ID"

ชื่อชีท: "บันทึกรับเข้า"

ข้อมูลที่บันทึกต้องเรียงตามคอลัมน์ดังนี้:

Column A: Timestamp (ตัวเลข 13 หลัก)

Column B: วันที่รับเข้า

Column C: ประเภท

Column D: น้ำหนัก

หลังจากบันทึกข้อมูลเรียบร้อยแล้ว ให้นำค่าจาก Column A (Timestamp) มาสร้างเป็น QR Code โดยใช้ QuickChart API: https://quickchart.io/

ต้องมีการจัดการกับวันที่ที่ส่งมาจาก HTML ให้ถูกต้อง เพื่อป้องกันข้อผิดพลาด เช่น "Invalid Date"

3. ไฟล์ที่ต้องการ:

Code.gs (Google App Script)

index.html (HTML, CSS, JavaScript)

ต้องแน่ใจว่าการส่งข้อมูลระหว่าง index.html และ Code.gs ทำงานได้อย่างถูกต้องและไม่มีข้อผิดพลาดในการแสดงผล QR Code

โดย AI จะทำการสร้าง file Code.gs กับ index.html มาให้เราสามารถนำไปวางใน Google App Script เพื่อสร้างเป็น web application สำหรับสร้าง QR Code และ record ข้อมูลไปยัง Google Sheets ได้ทันทีครับ

ส่วนในกรณี application สำหรับการ Scan QR Code เพื่อเบิกสินค้าก็สามารถนำ prompt ด้านล่างนี้ไปลองปรับใช้ดูได้เลยครับ

แจกฟรี! Prompt ระบบเบิกสินค้าด้วย QR Code

สร้าง Web Application สำหรับสแกน QR Code และบันทึกข้อมูลลง Google Sheets โดยมีรายละเอียดดังนี้:

โครงสร้างโค้ด: แยกโค้ดเป็น 2 ไฟล์ ได้แก่ index.html สำหรับหน้าเว็บแอปพลิเคชัน และ Code.gs สำหรับ Google Apps Script ที่เป็น backend

ไฟล์ index.html:

สร้างหน้าเว็บที่ใช้กล้องของอุปกรณ์เพื่อสแกน QR Code ได้

ใช้ไลบรารี jsQR ในการสแกน

มีปุ่มสำหรับเปิด-ปิดกล้อง และหน้าจอกล้องจะถูกซ่อนไว้ตอนแรก

เมื่อสแกนสำเร็จ จะปิดกล้องทันทีเพื่อป้องกันการบันทึกข้อมูลซ้ำ

แสดงผลลัพธ์ที่ได้จาก Google Apps Script บนหน้าจอ

ไฟล์ Code.gs:

รับค่าจาก QR Code ที่สแกนได้

เชื่อมต่อกับ Google Sheet ID: "YOUR GOOGLE SHEET ID"

Logic การทำงาน:

ตรวจสอบว่าค่าจาก QR Code ตรงกับข้อมูลใน Column A ของชีทชื่อ AvailableLot หรือไม่

สำคัญ: ในการเปรียบเทียบข้อมูล ให้แปลงค่าจากทั้งสองด้าน (ค่าจาก QR Code และค่าในชีท) ให้เป็น String และใช้ .trim() เพื่อตัดช่องว่าง เพื่อความแม่นยำในการเปรียบเทียบ

ถ้าพบข้อมูลที่ตรงกัน:

ดึงข้อมูลจาก Column C และ D ของแถวนั้น

บันทึกข้อมูลลงในชีทชื่อ บันทึกเบิก โดยบันทึก Timestamp (เวลาที่บันทึก), QR Code, และ Date

สำคัญ: ในการดึงค่าไทม์โซนสำหรับ Timestamp ให้ใช้ spreadsheet.getSpreadsheetTimeZone() เพื่อป้องกันข้อผิดพลาด cannot read properties of null

ส่งข้อความตอบกลับไปยังหน้าเว็บเพื่อแจ้งว่า "บันทึกข้อมูลเรียบร้อยแล้ว!" พร้อมแสดงข้อมูลที่ดึงมาได้

ถ้าไม่พบข้อมูล:

ไม่ต้องบันทึกข้อมูล

ส่งข้อความ "ไม่พบข้อมูล!" กลับไปยังหน้าเว็บเพื่อแจ้งเตือน"

โดยผลลัพท์จากการสร้างด้วย AI จะออกมาไม่เหมือนกัน ผมแนะนำว่าถ้า AI สร้างผลลัพท์ออกมาแล้วใช้งานไม่ได้ ให้ลองทำการบอกให้ AI ปรับแต่งแก้ไขให้ หรือจะลอง run prompt ใหม่ก็ได้ครับ

แต่ถ้าใครไม่อยากให้ AI สร้าง code ให้ อยากจะลอง download template ตัวที่พร้อมใช้งานไปลองศึกษาดูก็สามารถ download ระบบที่ link ด้านล่างนี้ได้เลยครับ
Download Template ระบบจัดการสต๊อกสินค้าด้วย QR Code

หรือถ้าอยากโหลดเฉพาะ script ก็สามารถโหลดได้ที่ GitHub link ด้านล่างนี้ได้เลยครับ
Script ระบบจัดการสต๊อกสินค้าด้วย QR Code (WebApp สำหรับรับเข้าสินค้า)
Script ระบบจัดการสต๊อกสินค้าด้วย QR Code (WebApp สำหรับเบิกสินค้า)

ถ้าอยากให้วิธีการทำแบบ step by step แล้วไม่อยากอ่าน instruction ที่ AI สร้างขึ้นมาให้ก็สามารถดูจากคลิปด้านล่างนี้ได้เลยนะครับ