เว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองและตู้รับชุดอุปกรณ์การทดลองเพื่อการศึกษา
(Web application for requisition and return the scientific equipmentand Equipment receiving cabinet for education)
บทคัดย่อ
จากปัญหาความล่าช้าของการเบิกอุปกรณ์การทดลองภายในสถานศึกษา ทางคณะผู้จัดทำจึงเห็นถึงความสำคัญของปัญหานี้ จึงได้สร้างเว็บแอปพลิเคชัน โดยมีวัตถุประสงค์เพื่อสร้างเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองและตู้รับชุดอุปกรณ์การทดลอง เพื่อการแก้ไขปัญหาและเพิ่มความสะดวกในการใช้ชุดอุปกรณ์การทดลอง โดยมีการสำรวจความพึงพอใจจากกลุ่มตัวอย่างผู้ใช้งานเว็บแอปพลิเคชันในโรงเรียนอุทัยวิทยาคมจำนวน 50 คน
ผลการดำเนินงาน สามารถนำความรู้ทางด้านการพัฒนาเว็บแอปพลิเคชัน บอร์ด ESP8266 และอุปกรณ์อิเล็กทรอนิกส์และเซ็นเซอร์ รวมถึงการเชื่อมต่อระหว่างเว็บแอปพลิเคชันกับบอร์ดไมโครคอนโทรลเลอร์ผ่าน Google Sheet และ App Script มาประยุกต์สร้างเป็นเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองและตู้รับชุดอุปกรณ์การทดลองเพื่อการศึกษา โดยมีการวัดประสิทธิภาพในด้านความรวดเร็วของการรับส่งข้อมูลระหว่างเว็บแอปพลิเคชันกับบอร์ดไมโครคอนโทรลเลอร์ มีค่าเฉลี่ยคือ 0.1059 วินาที และมีความพึงพอใจโดยรวมอยู่ในระดับ ดี (ค่าเฉลี่ยเท่ากับ 4.31)
ที่มาและความสำคัญ
ในปัจจุบันการบริหารจัดการอุปกรณ์การทดลองและสารเคมีวิทยาศาสตร์ในสถานศึกษา จะประสบปัญหาเกี่ยวกับการติดตามสถานะของอุปกรณ์เมื่อมีการถูกยืมไปแล้วไม่สามารถติดตามการสูญหายของอุปกรณ์ได้ การยืม-คืนอุปกรณ์วิทยาศาสตร์มีการบันทึกข้อมูลในกระดาษ อาจทำให้เกิด ความผิดพลาดเเละยุ่งยากต่อการติดตามอุปกรณ์ที่ถูกยืม อีกทั้งยังใช้เวลานานในการรอคอยที่จะยืม อุปกรณ์การทดลองและสารเคมี
การมีระบบที่ช่วยในการบริหารจัดการอุปกรณ์การทดลองที่มีประสิทธิภาพสามารถช่วย ให้การเรียนการสอนเป็นไปอย่างราบรื่น นักเรียนและครูสามารถเข้าถึงอุปกรณ์ได้ตามความต้องการ และตรงเวลาอีกทั้งยังมีการติดตามอุปกรณ์เป็นไปอย่างแม่นยำและมีประสิทธิภาพมากขึ้นและลดเวลาในการจัดการและบันทึกข้อมูลได้ดีขึ้นช่วยให้การทำงานของผู้จัดเตรียมอุปกรณ์การทดลองมีประสิทธิภาพมากขึ้นและแก้ไขได้ทันเวลา
จากความสำคัญข้างต้น คณะผู้จัดทำจึงได้คิดค้น เว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การ ทดลองวิทยาศาสตร์เพื่อการศึกษาจากการเขียนเว็บแอปพลิเคชันเเละประดิษฐ์ตู้รับชุดอุปกรณ์เพื่อ ช่วยแก้ไขปัญหาและเพิ่มประสิทธิภาพในการบริหารจัดการอุปกรณ์ ซึ่งส่งผลดีต่อการเรียนการสอน และการบริหารทรัพยากรในสถาบันการศึกษา
วัตถุประสงค์
1. เพื่อสร้างและพัฒนาโปรแกรมเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองวิทยาศาสตร์เพื่อการศึกษา
2. เพื่อสร้างตู้รับชุดอุปกรณ์และวัดค่าความรวดเร็วในการส่งข้อมูล
3. เพื่อสำรวจความพึงพอใจของผู้ใช้งานโปรเเกรมเว็บเเอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองทางวิทยาศาสตร์
วัสดุอุปกรณ์เเละเครื่องมือ
1. บอร์ด ESP8266 NodeMCU V2
2. NodeMCU Base Ver 1.0 for ESP8266
3. Servo motor
4. เซ็นเซอร์วัดความสว่างความเข้มแสง LDR Photoresistor Sensor Module
5. เซ็นเซอร์วัดอุณหภูมิและความชื้น Sensor DHT22 แบบ PCB
6. LED ขนาด 5 mm.
7. จอแสดงผล LCD1602 ขนาด 16*2 สีน้ำเงิน
8. ถ่าน 9V
9. สายไฟ
10. หัวแร้งบัดกรี
11. โปรเเกรม Visaul Studio Code
12. โปรเเกรม XAMPP
13. โปรแกรม Arduino IDE
14. โปรเเกรม Skecth up
15. โปรแกรม Responsively
16. โปรแกรม ngrok.exe
17. โปรแกรม Google Sheet 18. โปรแกรม Microsoft word
ขั้นตอนการดำเนินงาน
ในการจัดทำโครงงาน เว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองและตู้รับชุดอุปกรณ์การทดลองเพื่อการศึกษามีขั้นตอนการดำเนินงานดังนี้
1 สืบค้นข้อมูลเกี่ยวกับโครงงาน
2 ขั้นตอนการสร้างเว็บเเอพพลิเคชั่น
2.1 ส่วนของการออกแบบเว็บแอปพลิเคชัน
ออกแบบผ่านโปรแกรม Figma เพื่อช่วยให้เห็นภาพได้ชัดเจนยิ่งขึ้น
2.2 ส่วนของการวางฐานข้อมูล
1) ออกแบบฐานข้อมูลโดยสร้าง ER Diagram เพื่อแสดงโครงสร้าง ของฐานข้อมูล
ER Diagram
2) สร้างตารางผ่านโปรแกรม XAMPP ที่จำลองเว็บเซิร์ฟเวอร์ และใช้ phpMyAdmin เพื่อสร้างตารางสำหรับเก็บข้อมูล ดังนี้
tb_user : เก็บข้อมูลของผู้ใช้งานทั่วไปหรือข้อมูลผู้ใช้หน้าบ้าน
tb_labboy : เก็บข้อมูลของ ผู้จัดเตรียมอุปกรณ์ หรือข้อมูลผู้ใช้หลังบ้าน
tb_experimental : เก็บข้อมูลของอุปกรณ์และสารเคมีต่างๆ
tb_type : แยกประเภทระหว่างสารเคมีและอุปกรณ์จากตาราง tb_experimental
tb_borrow : จัดการระบบการยืม-คืนอุปกรณ์การทดลองต่างๆ
2.3 ส่วนของการพัฒนาเว็บแอปพลิเคชัน
1) ใช้ภาษา PHP ในการเชื่อมต่อฐานข้อมูลกับเว็บแอปพลิเคชัน ผ่านหน้า connect.php
connect.php PHP Script
2) สร้างหน้าต่างๆ ตามที่ได้วางแผนการออกแบบไว้ โดยใช้ภาษา HTML, CSS, และ JavaScript รวมถึงการตรวจสอบสิทธิ์การเข้าถึงและการดึงข้อมูลมาใช้ในแต่ละ หน้าผ่านภาษา PHP
3) สร้างการแจ้งเตือนผ่าน line notify เพื่อแจ้งเตือนไปยัง ผู้จัดเตรียมอุปกรณ์ เมื่อมีการยืมเข้ามา
4) ทำให้เว็บแอปพลิเคชันของเราสามารถรองรับการใช้งานใน หลายรูปแบบ ทั้งในคอมพิวเตอร์และสมาร์ทโฟน (Responsive design)
2.4 ส่วนของการทดสอบระบบ
1) ทดสอบการทำงานของระบบให้รองรับการใช้งานหลายขนาด หน้าจอ (Responsive) ผ่านโปรแกรม Responsively โดยนำลิงก์ http://localhost/project/ ไปใส่ในช่องการค้นหาของโปรแกรม Responsively เพื่อทำการทดสอบ
ทดสอบการ responsive ผ่านโปรแกรมResponsively
2) ทดสอบการนำเว็บขึ้นใช้งานแบบสาธารณะผ่านโปรแกรม ngrok.exe โดยใช้งานผ่าน port 80 และนำลิงก์ที่ได้ไปทดลองใช้งาน
3. ขั้นตอนการประดิษฐ์ตู้รับชุดอุปกรณ์
3.1 ส่วนของการผลิตโครงสร้างตู้รับชุดอุปกรณ์
– สร้างแบบจำลองสามมิติจากโปรแกรม SketchUp
ออกเเบบตู้รับชุดอุปกรณ์จาก Skecth up
3.2 ส่วนของแผงวงจรอิเล็กทรอนิกส์
1) วางบอร์ด ESP8266 ลงบน NodeMCU Base Ver 1.0
2) เชื่อมต่อจอแสดงผล LCD16*2 ขนาด 16×2 กับบอร์ดESP8266 โดยต่อ SDA, SCL, VCC, และ GND กับขาA4,A5,5V,และ GND ของบอร์ด NodeMCU Base Ver1.0
3) เชื่อมต่อเซ็นเซอร์วัดอุณหภูมิและความชื้นกับบอร์ด ESP8266 โดยต่อ OUT, +, และ – กับขา D4, 5V, และ GND ของบอร์ด NodeMCU Base Ver 1.0
4) เชื่อมต่อเซ็นเซอร์วัดความสว่างกับบอร์ด ESP8266 โดยต่อ A0, VCC, และ GND กับขา A0, 5V, และ GND ของบอร์ด NodeMCU Base Ver 1.0
5) เชื่อมต่อ LED กับบอร์ด ESP8266 โดยบัดกรีสายไฟกับขาบวก และขาลบของ LED แล้วต่อ + และ – กับขา D1 และ GND ของบอร์ด NodeMCU Base Ver 1.0
6) นำวงจรที่ต่อเสร็จเรียบร้อยจัดวางภายในโครงสร้างของตู้รับชุด อุปกรณ์
diagram ภาพรวมของระบบ
3.3 ขั้นตอนการเขียนโปรเเกรม Arduino
3.3.1 ติดตั้งโปรแกรม Arduino IDE 1.8.19 สำหรับ Windows
3.3.2 ส่วนของการกำหนดตัวแปร
1) กำหนดขา Input D6 สำหรับ Servo, D7 สำหรับ LED, A0 สำหรับเซ็นเซอร์แสง, และ D4 สำหรับเซ็นเซอร์ DHT22
2) กำหนดตัวแปร httpsAddr และ cellName สำหรับการเชื่อม ต่อกับ Google Sheets
3) กำหนดตัวแปร myServo สำหรับ Servo, dht สำหรับ เซ็นเซอร์ DHT22, และ lcd สำหรับจอ LCD
การกำหนดตัวแปร C++ Script
3.3.3 ส่วนของ void setup ()
1) เขียนคำสั่งเริ่มต้นการสื่อสารอนุกรมที่ 115200 บอดเรต เพื่อดูข้อความใน Serial Monitor
2) กำหนดขา Input และ Output สำหรับปุ่ม, LED, และ Servo
3) เขียนฟังก์ชันเริ่มต้นการทำงานของเซ็นเซอร์ DHT22 และ จอLCD
4) ใช้คำสั่ง WiFiManager เพื่อเชื่อมต่อกับ Wi-Fi
5) ตรวจสอบการเชื่อมต่อ Wi-Fi
void setup () C++ Script
3.3.4 ส่วนของ void loop ()
1) เขียนคำสั่งตรวจจับการกดปุ่ม reset การตั้งค่า Wi-Fi และรีเซ็ต ESP8266
2) เขียนคำสั่งเชื่อมต่อกับ Google Sheets และดึงค่าจากcell A1
3) เขียนคำสั่งควบคุมเซอร์โวและ LED ตามค่าที่ดึงจาก Google Sheets โดยถ้ามีค่าเท่ากับ 1 ให้มีการสั่งการเซอร์โวเพื่อทำการเปิดกล่องและเปิดไฟสถานะLED และเมื่อค่าเท่ากับ 0 ให้มีการสั่งการเซอร์โวเพื่อทำการปิดกล่องและปิดไฟสถานะLED
4) เขียนคำสั่งอ่านค่าจากเซ็นเซอร์ DHT22 เพื่อแสดงอุณภูมิและ ความชื้น และอ่านค่าจากเซ็นเซอร์แสงเพื่อแสดงสถานะการทำงานว่างดยืมเมื่อถึงเวลาดึกและพร้อมทำงานเมื่อถึงเวลากลางวัน โดยแสดงค่าผ่านบนจอ LCD 16*2
void loop () C++ Script
3.3.5 ขั้นตอนการเขียนโปรเเกรม Apps Script
1) เปิดและเลือก Google Sheets ใช้ SpreadsheetApp.openById เพื่อเปิดสเปรดชีตด้วย ID ที่ระบุและใช้ getSheetByName เพื่อเลือกชีตด้วยชื่อที่ระบุ
2) สร้างฟังก์ชัน doGet เพื่อจัดการคำขอ GET โดยฟังก์ชัน doGet จะถูกเรียกใช้งานเมื่อมีคำขอ GET เข้ามาที่ URL ของสคริปต์
3) ดึงพารามิเตอร์จากคำขอ GET ใช้ e.parameter เพื่อดึงค่าของพารามิเตอร์จาก URL ซึ่งสามารถประกอบไปด้วย cmd (คำสั่ง: read หรือ write) cell (เซลล์ที่ต้องการอ่านหรือเขียน) value (ค่าที่ต้องการเขียน ในกรณีที่คำสั่งเป็น write)
4) ตรวจสอบความถูกต้องของคำสั่งและพารามิเตอร์โดยตรวจสอบว่าคำสั่ง (cmd) ที่ส่งมาเป็น read หรือ write ตรวจสอบว่ามีการระบุชื่อเซลล์ (cell) หรือไม่ และสุดท้ายตรวจสอบว่ามีการระบุค่า (value) หรือไม่ในกรณีที่คำสั่งเป็น write
5) ดำเนินการตามคำสั่งที่ได้รับถ้าคำสั่งเป็น write ใช้ getRange เพื่อเลือกเซลล์ที่ต้องการเขียนและใช้setValueเพื่อเขียนค่าไปยังเซลล์นั้นสุดท้ายตรวจสอบว่าการเขียนค่าสำเร็จหรือไม่ และส่งผลลัพธ์กลับ แต่ถ้าคำสั่งเป็น read ใช้ getRange เพื่อเลือกเซลล์ที่ต้องการอ่านและใช้ getValue เพื่ออ่านค่าในเซลล์นั้น และส่งค่ากลับ
6) ส่งผลลัพธ์กลับ ใช้ ContentService.createTextOutput เพื่อส่งข้อความกลับไปยังผู้เรียกใช้
การเขียนโปรเเกรม Apps Script
ผลการทดลอง
การสร้างเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองและตู้รับชุดอุปกรณ์การทดลองเพื่อการศึกษา ในครั้งนี้ได้ทำการศึกษาในหัวข้อตามวัตถุประสงค์สามข้อได้เเก่ เพื่อสร้างและพัฒนา โปรแกรมเว็บแอปพลิเคชัน เพื่อสร้างตู้รับชุดอุปกรณ์และวัดค่าความรวดเร็วในการส่งข้อมูลเพื่อสำรวจความพึงพอใจของผู้ใช้งานโปรเเกรมเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองวิทยาศาสตร์และตู้รับชุดอุปกรณ์ โดยมีผลการทดลองดังนี้
4.1 การสร้างเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองวิทยาศาสตร์เพื่อการศึกษา
จากการศึกษาการสร้างฐานข้อมูลและการเขียนโปรแกรมภาษา HTML, CSS, Java Scripts และ PHP เพื่อประยุกต์สร้างเว็บเเอปพลิเคชันในการเลือกอุปกรณ์การทดลองที่โรงเรียนมีให้ยืม และ มีระบบสำหรับการยืม-คืนอุปกรณ์การทดลอง ซึ่งสามารถนำมาประยุกต์สร้างเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองได้
หน้าของเว็บเเอพพลิเคชัน
การแจ้งเตือนผ่านไลน์
4.2 การสร้างตู้รับชุดอุปกรณ์
จากการศึกษาการเขียนโปรแกรมภาษา C++ เพื่อเปลี่ยนสัญญาณโปรเเกรมของ ESP8266 จากสัญญาณ Wifi ให้เป็นคำสั่งการทำงานของตู้รับชุดอุปกรณ์ สามารถทำให้ประยุกต์สร้างตู้รับ ชุดอุปกรณ์ได้
ตู้รับชุดอุปกรณ์
4.3 สำรวจความพึงพอใจของผู้ใช้งานโปรเเกรมเว็บเเอปพลิเคชันเบิก-คืนอุปกรณ์การทดลอง
ค่าเฉลี่ย 1.00 – 1.50 หมายถึง ปรับปรุง
ค่าเฉลี่ย 1.51 – 2.50 หมายถึง พอใช้
ค่าเฉลี่ย 2.51 – 3.50 หมายถึง ปานกลาง
ค่าเฉลี่ย 3.51 – 4.50 หมายถึง ดี
ค่าเฉลี่ย 4.51 – 5.00 หมายถึง ดีมาก
ตาราง ผลการสำรวจร้อยละความพึงพอใจที่มีต่อผลงานจากกลุ่มทดสอบ
หัวข้อการสำรวจ | ระดับความพึงพอใจจากผู้ใช้งาน 50 คน | ||
| (ค่าเฉลี่ย) | S.D. | แปลผล | |
| ความรวดเร็วของเว็บแอปพลิเคชัน | 4.56 | 0.86987 | ดีมาก |
| ความครบถ้วนของข้อมูลการเบิก | 4.32 | 0.85245 | ดี |
| ความถูกต้องของข้อมูลภายในเว็บ | 4.16 | 0.9434 | ดี |
| ความสะดวกสบายในการยืมเเละคืน | 4.40 | 0.70711 | ดี |
| ความสวยงามของเว็บแอปพลิเคชัน | 4.16 | 1.02794 | ดี |
| เฉลี่ย | 4.31 | 0.88015 | ดี |
จากการสำรวจมีค่าเฉลี่ยระดับความพึงพอใจโดยเฉลี่ยคือ 4.31 และมีค่่าเฉลี่ยส่วนเบี่ยงเบนมาตรฐาน(S.D.)คือ 0.88015 หัวข้อการสำรวจที่มีความพึงพอใจมากที่สุดคือความรวดเร็วของ แอปพลิเคชันมีค่าเฉลี่ยเท่ากับ 4.56
4.4 ทดสอบความรวดเร็วของการส่งรับข้อมูล
เมื่อทดสอบจับเวลารับส่งข้อมูลจากเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองสู่ บอร์ด ESP8266 พบว่ามีความรวดเร็วในการส่งข้อมูลเฉลี่ย(x̄) 0.1059 s ค่าเบี่ยงเบนมาตรฐาน (S.D.)คือ 0.0029
สรุป อภิปรายผล และข้อเสนอแนะ
ในการจัดทำโครงงานคอมพิวเตอร์ เรื่องเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองและตู้รับชุดอุปกรณ์การทดลองเพื่อการศึกษามีจุดประสงค์เพื่อสำรวจความพึงพอใจสำหรับผู้ใช้เว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองและทดสองประสิทธิภาพการส่งข้อมูลจากเว็บแอปพลิเคชันไปยังตู้รับชุดอุปกรณ์ คณะผู้จัดทำโครงงานได้สรุปและอภิปรายดังนี้
สรุปผลการทดลอง
1) จากผลการศึกษาสามารถนำความรู้ด้านการสร้างฐานข้อมูลและการเขียน โปรแกรมมาประยุกต์ใช้กับการสร้างเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองได้
2) จากผลการศึกษาสามารถนำความรู้ด้านการเขียนโปรแกรมในการสั่งการ ทำงาน ประยุกต์ใช้กับตู้รับชุดอุปกรณ์ได้
3) ความพึงพอใจเรื่องความสะดวกสบายความสวยงามความเข้าถึงง่ายความพึงพอใจโดยเฉลี่ยมีค่าเท่ากับ 4.31
4) ค่าความรวดเร็วของการส่งข้อมูลจากเว็บแอปพลิเคชันสู่บอร์ด ESP8266 มีค่าเฉลี่ย 0.1059 ms
อภิปรายผล
1) จากการศึกษาการสร้างฐานข้อมูลและการเขียนโปรแกรมภาษา HTML, CSS, Java Scripts และ PHP ด้วยโปรแกรม Visual Studio Code เพื่อประยุกต์สร้างเว็บ เเอปพลิเคชันในการเลือกอุปกรณ์การทดลองที่โรงเรียนมีให้ยืม และมีระบบสำหรับการยืม-คืนอุปกรณ์การทดลอง สามารถนำมาประยุกต์สร้างเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลองได้
2) จากการศึกษาการเขียนโปรแกรมภาษา C++ ด้วยโปรแกรม Arduino IDE เพื่อเปลี่ยนสัญญาณโปรเเกรมของ ESP8266 จากสัญญาณ Wifi ให้เป็นคำสั่งการทำงานของตู้รับชุด อุปกรณ์ สามารถทำให้ประยุกต์สร้างตู้รับชุดอุปกรณ์ได้
3) จากการสำรวจความพึงพอใจจากผู้ใช้งานเว็บแอปพลิเคชันเบิก-คืน อุปกรณ์การทดลองผู้ใช้งานมีความพึงพอใจโดยอยู่ในระดับดี จากการสั่งอุปกรณ์การทดลองผ่านเว็บแอปพลิเคชันเบิก-คืนอุปกรณ์การทดลอง แต่ยังต้องมีการปรับปรุงเรื่องหน้าต่างเว็บสำหรับในโทรศัพท์
4) ตู้รับชุดอุปกรณ์สามารถรับข้อมูลจากเว็บแอปพลิเคชันผ่านบอร์ด ESP8266 ส่งข้อมูลด้วย Wifi จากเว็บแอปพลิเคชันสู่ Google Sheet สู่บอร์ด ESP8266 สามารถส่งข้อมูล ได้อย่างรวดเร็ว
ข้อเสนอแนะ
5.3.1 ออกแบบให้เหมาะกับการใช้งานในโทรศัพท์
5.3.2 เพิ่มการให้ความรู้เกี่ยวกับสารเคมีและเครื่องมือทดลอง