|
Web Application ในโพสนี้จะเป็นระบบรับเข้าสินค้าเนื้อสัตว์ที่เป็นแท่งของร้านอาหาร ที่เราสามารถกรอกฟอร์มรายละเอียดของเนื้อสัตว์แต่ละแท่งและสั่งปริ้นเป็น QR Code มาแปะที่แท่งเนื้อของเราได้ทันที และเวลาเบิกออกก็สามารถใช้โทรศัพท์มือถือ ในการ scan QR Code ที่แปะอยู่ที่แท่งเนื้อได้เลย  Screenshot
และข้อมูลทั้งหมดจะทำการ record เข้าไปยัง Google Sheets แบบอัตโนมัติ ทำให้เราสามารถนำไปทำรายงานสินค้าคงเหลือ และ รายงานน้ำหนักรวมของเนื้อสัตว์แต่ละแท่งได้ทันที
 Screenshot Screenshot
ซึ่งเราก็สามารถสร้าง Web Application อีกตัวขึ้นมาที่จะเป็นตัวที่เราสามารถใช้ในการ scan เบิกสินค้าได้ทันที
ซึ่งระบบทั้งหมดนี้ผมใช้ AI มาช่วยลดเวลาในการพัฒนาระบบจนเหลือแค่ไม่กี่ชั่วโมงเท่านั้นเอง
ถ้าใครอยากลองนำไปปรับแต่งเพิ่มเติมก็สามารถนำ prompt ด้านล่างนี้ไปลองปรับดูได้เลยนะครับ
แจกฟรี! Prompt ระบบจัดการสต๊อกสินค้าด้วย QR Codeสร้าง Web Application สำหรับการสร้าง QR Code จากข้อมูลสินค้า เพื่อใช้ในการเช็คสต็อก โดยใช้ Google App Scriptข้อกำหนด: 1. อินเทอร์เฟซ (HTML/CSS/JavaScript):ใช้ HTML, CSS, และ JavaScript ในไฟล์เดียวมีธีมสีขาว-เหลือง และใช้ Font Kanitมีฟอร์มสำหรับกรอกข้อมูลสินค้า ropdown สำหรับเลือกประเภทสินค้า: สันคอหมู, สันนอกหมู, หมูสามชั้น, เนื้อริบอาย, เนื้อใบพาย, เนื้อชัคโรล, เนื้อวากิวช่องสำหรับกรอกน้ำหนัก (กิโลกรัม) ซึ่งต้องเป็นตัวเลขทศนิยม 2 ตำแหน่งช่องสำหรับกรอกวันที่รับเข้า โดยมีปุ่ม "วันนี้" และ "เมื่อวาน" เพื่อใส่ค่าวันที่อัตโนมัติหน้าแสดงผลลัพธ์:แสดง QR Code ขนาดใหญ่ และเป็นสีดำแสดงรายละเอียดสินค้าประกอบด้วย: ชื่อเนื้อ, น้ำหนัก, และวันที่รับเข้าจัดหน้าให้พร้อมสำหรับการพิมพ์ (print-friendly) ในแนวนอน (landscape)ขนาดสำหรับพิมพ์ 60mm x 40mmในหน้าพิมพ์ ให้แสดงเฉพาะข้อมูล (ไม่มีคำนำหน้าเช่น "ประเภทเนื้อ:")2. การทำงาน (Google App Script):บันทึกข้อมูลที่กรอกในฟอร์มลงใน Google SheetsSheet 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 ด้านล่างนี้ได้เลยครับ
สำเนาของ Template ระบบรับเข้าสินค้า QR Code_.xlsx
(71.65 KB, ดาวน์โหลดแล้ว: 1)
ถ้าอยากให้วิธีการทำแบบ step by step แล้วไม่อยากอ่าน instruction ที่ AI สร้างขึ้นมาให้ก็สามารถดูจากคลิปด้านล่างนี้ได้เลยนะครับ
| 
โพสต์