รูปเล่มปริญญานิพนธ์_ - Copy (2)

ระบบจัดเกบ็ อุปกรณ์บนเวบ็ ไซตแ์ ละระบบจดจำใบหน้า
Storing device Information on the Website and Facial

Recognition Systems

ศิรลิ ักษณ์ พมิ พ์บงึ
ณฐั นนั ท์ กองลาแซ
ศริ เชษฐ์ ภริ มย์ปยิ ธาริน

ปรญิ ญานิพนธน์ เี้ ป็นสว่ นหน่ึงของการศกึ ษาตามหลกั สูตรปริญญาวิศวกรรมศาสตรบัณฑิต
สาขาวศิ วกรรมอเิ ล็กทรอนิกส์อจั ฉรยิ ะ

คณะวศิ วกรรมศาสตร์ มหาวิทยาลัยเทคโนโลยรี าชมงคลอสี าน วิทยาเขตขอนแก่น
พ.ศ. 2565

ลิขสิทธิ์ของคณะวศิ วกรรมศาสตร์ มหาวิทยาลัยเทคโนโลยีราชมงคลอีสาน

ระบบจัดเกบ็ อปุ กรณบ์ นเว็บไซตแ์ ละระบบจดจำใบหนา้

ศริ ลิ กั ษณ์ พมิ พบ์ งึ
ณัฐนันท์ กองลาแซ
ศิรเชษฐ์ ภิรมยป์ ยิ ธารนิ

ปรญิ ญานิพนธ์นเี้ ปน็ ส่วนหนง่ึ ของการศึกษาตามหลกั สตู รปริญญาวศิ วกรรมศาสตรบัณฑิต
สาขาวิศวกรรมอิเล็กทรอนิกส์อัจฉรยิ ะ

คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเทคโนโลยีราชมงคลอีสาน วิทยาเขตขอนแกน่
พ.ศ. 2565

ลิขสิทธิข์ องคณะวิศวกรรมศาสตร์ มหาวทิ ยาลัยเทคโนโลยีราชมงคลอสี าน

Storing device information on the website and facial recognition systems

Sirilak Phimbueng
Nutanun Konglasae
Sirachet Phirompiyatharin

This Project Report Submitted in Partial Fulfillment of the Requirement for
The Bachelor of Engineering

Department of Smart Electronics Engineering
Rajamangala University of Technology IsanKhonKaen Campus

2022
© Faculty of Engineering Rajamangala University of Technology Isan

ใบรบั รองปรญิ ญานิพนธ์

มหาวิทยาลัยเทคโนโลยีราชมงคลอีสาน วิทยาเขตขอนแก่น

หวั ข้อปริญญานิพนธ์ : ระบบจัดเก็บอปุ กรณ์บนเวบ็ ไซตแ์ ละระบบจดจำใบหน้า
จัดทำโดย : ศริ ลิ กั ษณ์ พิมพบ์ ึง
: ณัฐนนั ท์ กองลาแซ
สาขาวชิ า : ศริ เชษฐ์ ภิรมยป์ ิยธาริน
ประธานทปี่ รึกษา : วศิ วกรรมอเิ ลก็ ทรอนิกส์อัจฉริยะ
: ดร.วทิ ยา ชำนาญไพร และ ผศ.ดร.อังคณา เจริญมี

ได้รับอนุมัติให้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรปริญญาวิศวกรรมศาสตรบัณฑิต
คณะวิศวกรรมศาสตร์ มหาวทิ ยาลยั เทคโนโลยีราชมงคลอสี าน วิทยาเขตขอนแกน่

..................................................คณบดีคณะวิศวกรรมศาสตร์
(ดร.ศภุ ฤกษ์ ชามงคลประดิษฐ์)

วันท่ี.......เดอื น..................พ.ศ..........

คณะกรรมการสอบปรญิ ญานพิ นธ์
.............................................. ประธานกรรมการสอบ

(ผศ.ดร.องั คณา เจริญมี)
.............................................. กรรมการ

(ดร.วิทยา ชำนาญไพร)
.............................................. กรรมการจากสถานประกอบการ

(นายธนพล ศรโี นนยาง)

ก

หัวข้อปริญญานิพนธ์ ระบบจัดเก็บอุปกรณบ์ นเวบ็ ไซตแ์ ละระบบจดจำใบหน้า

จดั ทำโดย ณฐั นันท์ กองลาแซ และ ศริ ิลกั ษณ์ พิมพ์บงึ และ ศิรเชษฐ์ ภริ มย์ปยิ ธารนิ

ปีท่ปี รญิ ญานพิ นธส์ ำเรจ็ พ.ศ.2565

สาขาวิชา วิศวกรรมอิเล็กทรอนิกส์อัจฉรยิ ะ

ท่ปี รกึ ษา ดร.วทิ ยา ชำนาญไพร และ ผศ.ดร.องั คณา เจรญิ มี

บทคัดย่อ

ปริญญานิพนธ์เล่มนี้นำเสนอการพัฒนาระบบการจัดเก็บอุปกรณ์บนเว็บไซตแ์ ละระบบจดจำ
ใบหน้า จากทางบรษิ ัทเดิมยังมีการบนั ทึกขอ้ มูลลงบนกระดาษ ซึ่งทำใหเ้ กดิ ความยุ่งยากในการจัดเก็บ
และค้นหาอกี ท้ังยังให้เกดิ ความล่าชา้ ข้อมลู อาจผิดพลาดได้ จึงมีสร้างระบบเว็บไซต์น้ีข้ึนมาเพื่อลดการ
ใช้กระดาษภายในบริษัทและติดตามตัวพนักงานที่นำอุปกรณ์ไปใช้งานและตรวจสอบข้อมูลการเบิก/
เพิ่มอุปกรณ์ผ่านทาง Google Sheet ได้ตลอดเวลา และในส่วนระบบจดจำใบหน้าจะช่วยในการ
ตรวจสอบพนักงานท่ีเข้ามาใช้บริการในห้องเก็บอุปกรณ์พร้อมกับระบบแจ้งเตือนรายชื่อพนักงาน
พร้อมส่งรูปภาพของบุคคลที่เข้าใช้บริการผ่านไลน์ เพื่อเพิ่มความสะดวกในการค้นหาข้อมูลและ
ตรวจสอบขอ้ มูลอุปกรณ์ไดง้ ่ายขนึ้

โครงสร้างของระบบจดั เกบ็ อุปกรณบ์ นเวบ็ ไซต์และระบบจดจำใบหนา้ โดยผจู้ ัดทำไดอ้ อกแบบ
ระบบเว็บไซต์ประกอบด้วยระบบ Loginและหน้าโฮมเพื่อเลือกรายการของฟอร์มบันทึกข้อมูลพร้อม
ส่งข้อมูลการเบิกเพิ่มอุปกรณ์แจ้งเตือนผ่านไลน์ ในการจัดทำโครงงานได้นำGoogle App Script มา
ช่วยในการพัฒนาและจัดการโค้ดโดยใช้ภาษาJavaScriptในการพัฒนาระบบหลังบ้านในส่วนการ
ตกแต่งหน้าต่างผู้ใช้งานได้มีการนำ Bootstrap Framework มาจัดการในเรื่องของการตกแต่งหน้า
เว็บไซต์และระบบจัดเก็บอุปกรณ์บนเว็บไซต์ได้นำ Google Sheet มาเป็นฐานข้อมูลเพื่อตรวจสอบ
ข้อมูลของการเบิกเพิ่มอุปกรณ์ ส่วนของระบบจดจำใบหน้าจะมีการแจ้งเตือนรายชื่อของบุคคลที่รู้จกั
และไม่รู้จักพร้อมแคปรูปภาพส่งไปที่ไลน์โดยใช้โปรแกรม Image Processing ในการสร้างระบบนี้
ขึ้นมาและในส่วนของเครื่องตรวจจับสามารถตรวจรู้คนเดินผ่านได้เพื่อเป็นoptionเสริมให้กับระบบ
จดจำใบหน้า

ผลการทดสอบระบบจัดเก็บอุปกรณ์บนเว็บไซต์และระบบจดจำใบหน้า ในส่วนหน้า Login
เมื่อกรอก Username Password ไม่ถูกต้อง ระบบจะมีการแจ้งเตือนให้กรอกชื่อผู้ใช้หรือรหัสผ่าน
ใหม่ เมื่อมีการเข้าใช้งานถูกต้องจะแสดงชื่อสิทธิ์ และแสดงการเข้าสู่ระบบเรียบร้อย และสามารถเขา้
ไปตรวจสอบข้อมูลผ่าน Google Drive และเข้าไปดูฐานข้อมูลใน Google Sheetได้ ฟังก์ชันการ
สแกนคิวอาร์โค้ดและคิวบาร์โค้ดไม่สามารถสแกนที่มีขนาดต่ำกว่า 0.8 x 0.8 นิ้วหรือ 2 x 2
เซนติเมตรได้ ในส่วนของระบบจดจำใบหน้าสามารถสแกนใบหน้าบุคคลที่รู้จักและบุคคลที่ไม่รู้จัก
พร้อมแคปรูปภาพและข้อความแจ้งเตือนผ่านไลน์ได้และยังสามารถจดจำใบหน้าบุคคลได้ไม่น้อยกว่า
10 คน ในส่วนของเครือ่ งตรวจรู้คนเดนิ ผ่านสามารถตรวจจบั บคุ คลเดนิ ผา่ นไดใ้ นระยะ 0.1 เมตร ถงึ 1
เมตร ซง่ึ ผลทดสอบเป็นไปตามวัตถปุ ระสงคท์ กุ ประการ

ข

Project Title Storing device information on the website and facial recognition

Proposed by Sirilak Phimbueng and Nutanun Konglasae and

Sirachet Phirompiyatharin

Academic Year 2022

Department of Smart Electronics Engineering

Advisor Dr. Vithaya Chamnanprai ,

Asst. Prof. Dr. Angkana Charoenmee

Abstract
This thesis presents the development of web-based device storage and facial
recognition systems. The original company also recorded information on paper. This
makes it difficult to store and locate and also causes delays. Data can go wrong.
Therefore, this website system was created to reduce the use of paper within the
company, track the employees who use the device, and check the information of
equipment withdrawal or addition via Google Sheet at any time. And the face
recognition system will help to check the employees who come to use the service in
the device storage room, along with the system to notify the list of employees and
send pictures of people who use the service via Line. to make it easier to find
information and check device information more easily.
The structure of the device storage system on the website and the facial
recognition system by the organizers have designed the website system to consist of
the system login and home page to select a list of record forms with information to
add additional notification devices via Line. In the preparation of the project, Google
App Script has been used to help develop and manage the code using the JavaScript
language in the development of the back-end system in the user window decoration,
and has brought the Bootstrap Framework to manage the decoration of the page.
Website And the device storage system on the website has brought Google Sheet as a
database to check the information for adding additional equipment. The face
recognition system will notify the list of known and unknown people along with
capturing images sent to LINE by using an image processing program to create this
system, and the detector can detect people. can walk as an option to add to the facial
recognition system.
Test results of the device storage system on the website and the facial

recognition system In the Login page, when the username and password are entered

incorrectly, the system will prompt you to enter a new username or password. When

ค

the access is valid, it will show the permission name. and show login successfully. And
can check the data through Google Drive and access the database in Google Sheet. QR
Code scanning functions cannot scan smaller than 0.8 x 0.8 inches or 2 x 2 centimeters.
The face recognition system can scan known and unknown faces with image caps. And
messages can be alerted via Line, which can also recognize the faces of at least 10
people. As for the pedestrian detection machine, it can detect people walking at a
distance of 0.1 meters to 1 meter, meaning that the test results meet every objective
Things.

ง

กติ ตกิ รรมประกาศ

ปริญญานิพนธ์ฉบับนี้ได้รับความช่วยเหลืออย่างดียิ่งจาก ดร.อังคณา เจริญมี ดร.วิทยา
ชำนาญไพร อาจารยท์ ี่ปรกึ ษาปริญญานพิ นธ์ และพ่ีเล้ียงจากสถานประกอบการ ซึ่งกรณุ าให้คำแนะนำ
และถ่ายทอดความรู้ ตลอดจนควบคุมการทำโครงงานจนประสบความสำเร็จ ผู้จัดทำโครงงานขอ
กราบขอบพระคุณเปน็ อย่างสงู ไว้ ณ โอกาส นี้

ขอกราบขอบพระคุณ ดร.อังคณา เจริญมี ดร.วิทยา ชำนาญไพร และสถานประกอบการ
พี่เลี้ยงนายธนพล ศรีโนนยาง และอาจารย์ในสาขาอิเล็กทรอนิกส์อัจฉริยะทุกท่าน ที่กรุณาถ่ายทอด
ความรู้ ตลอดระยะเวลาในการศึกษา รวมทั้งบุคคลที่ปรากฏตามรายการอ้างอิงที่ผู้จัดทำโครงงานใช้
อ้างอิง

ประโยชน์และคุณค่าอันพึงมีจากปริญญานิพนธ์ฉบับนี้ ผู้จัดทำโครงงานขอมอบเป็น
กตญั ญบู ูชาแด่ บิดา มารดา ครูอาจารย์ตลอดจนผมู้ ีพระคณุ ทกุ ทา่ น

ศริ เซษจ์ ภริ มยป์ ยิ ธารนิ
ณัฐนนั ท์ กองลาแซ
ศริ ลิ ักษณ์ พมิ พ์บงึ

สารบัญ จ

บทคัดย่อ (ภาษาไทย) หนา้
บทคดั ย่อ (ภาษาอังกฤษ) ก
กิตตกิ รรมประกาศ ข
สารบัญ ง
สารบัญตาราง จ
สารบญั รปู ซ
บทที่ ฌ

1 บทนำ 1
1.1 สถานประกอบการ 2
1.2 ความเป็นมาและความสาํ คัญของปัญหา 2
1.3 วัตถุประสงค์ของโครงงาน 2
1.4 ขอบเขตของโครงงาน 3
1.5 วิธีการหรือข้นั ตอนในการดำเนินงาน 3
1.6 ประโยชนท์ ี่คาดวา่ จะไดร้ ับ 3
4
2 ทฤษฎีและงานวจิ ัยทีเ่ กี่ยวข้อง 4
2.1 บทนำ 4
2.2 ทฤษฎเี กยี่ วกับระบบเวบ็ ไซต์ 4
2.2.1 JavaScript 5
2.2.2 Bootstrap 5 8
2.2.3 QR Code 8
2.2.4 Apps Script 9
2.2.5 Line Application 10
2.2.6 LINE Notify 11
2.3 Arduino 12
2.3.1 Arduino (Arduino IDE) 14
2.3.2 Arduino Uno R3 16
2.4 Ultrasonic 19
2.5 โมดลู บนั ทึกเสียง ISD1820 21
2.6 ลำโพง 22
2.7 กล้องเวบ็ แคม 22
2.7.1 ความหมายของเว็บแคม (Webcam) 23
2.7.2 ชนิดของกล้องเวบ็ แคม (Webcam)

ฉ

สารบญั (ต่อ)

บทท่ี หน้า
3 วิธกี ารดำเนินงาน 25
3.1 บทนำ 25
3.2 ศึกษาและรวบรวมข้อมูล 26
3.3 กรอบแนวคิดและการออกแบบเว็บไซตร์ ะบบจดั เก็บอุปกรณ์ 26
3.4 ข้ันตอนการสร้างระบบเว็บไซต์ 29
3.5 การออกแบบและพัฒนาระบบจดจำใบหนา้ 44
3.6 ขัน้ ตอนการดาวโหลดโปรแกรมรบบจดจำใบหนา้ 46
3.7 ข้นั ตอนการทำระบบจำจำใบหน้า 48
3.8 การออกแบบของแผงวงจรแจง้ เตือนผ่านเสยี งตรวจรู้คนเดินผา่ น 56
4 ผลการทดลอง 61
4.1 บทนำ 61
4.2 ผลการทดสอบระบบจัดเก็บอุปกรณ์บนเว็บไซต์จำกัดสิทธิ์ใช้งานเฉพาะพนักงาน 61
บริษัท ศูนย์สือ่ สารขอ้ มูล จงั หวัดขอนแก่น
4.3 ผลการทดสอบเวบ็ ไซตก์ ารใช้ google sheet เปน็ ฐานข้อมูล 63
4.4 ผลการทดสอบเว็บไซต์สามารถสแกนคิวอารโ์ คด้ และควิ บารโ์ ค้ดที่มขี นาดไม่ต่ำกวา่ 64
0.8 × 0.8 นว้ิ หรือ 2 × 2 เซนตเิ มตร
4.5 ผลการทดสอบการเทรนใบหน้าเพ่ือจดจําใบหน้าให้แจ้งเตอื นผูเ้ ข้าใช้งานผา่ น line 68
4.6 ผลการทดสอบระบบจดจำใบหน้าได้ไม่น้อยกวา่ 10 คน 70
4.7 ผลการทดสอบเคร่อื งตรวจจบั สามารถตรวจรู้คนเดนิ ผ่านได้ 73
5 สรุปผลการดำเนนิ งานและขอ้ เสนอแนะ 74
5.1 บทนำ 74
5.2 สรุปผลทไี่ ดจ้ ากการดำเนินงาน 74
5.3 ปัญหาและแนวทางการแกไ้ ข 75
5.4 ข้อเสนอแนะในการปรับปรุงโครงงานปรญิ ญานิพนธ์ 75

สารบญั (ต่อ) ช

บรรณานกุ รม หนา้
ภาคผนวก 76
ภาคผนวก ก ข้อมูล Arduino ONU R3 77
ภาคผนวก ข ขอ้ มูลโมดูลบนั ทกึ เสยี ง ISD1820 78
ภาคผนวก ค ขอ้ มูล Sensor HC-SR04 84
ภาคผนวก ง โค้ดเวบ็ ไซตร์ ะบบจดั เกบ็ อปุ กรณ์ 90
ภาคผนวก จ โค้ดระบบเครื่องตรวจร้คู นเดินผา่ น 95
ภาคผนวก ฉ ลายวงจรพิมพ์ ดา้ นล่าง และรปู ของวงจรเคร่ืองตรวจรคู้ นเดินผ่าน 129
ประวตั ิผู้เขียน 131
133

ซ

สารบัญตาราง

ตารางที่ หน้า
58
3.1 รายการอุปกรณ์ระบบจดจำใบหน้าและเคร่ืองตรวจรู้คนเดินผ่าน 61
62
4.1 แสดงผลการทดสอบจำกดั สทิ ธใ์ิ นการใช้งาน
64
4.2 แสดงผลการทดสอบสทิ ธ์ิการเข้าใช้งานระบบจัดเก็บอุปกรณ์
66
4.3 แสดงผลการทดสอบคิวบาร์โค้ดมีขนาดต่ำกว่า 0.8 × 0.8 นิว้ หรือ 2 × 2
เซนติเมตร 68

4.4 แสดงผลการทดสอบควิ อาร์โค้ดมขี นาดต่ำกวา่ 0.8 × 0.8 นิว้ หรอื 2 × 2 70
เซนตเิ มตร 73

4.5 แสดงผลการทดสอบการเทรนใบหน้าเพ่ือจดจําใบหนา้ ใหแ้ จ้งเตอื นผูเ้ ข้าใชง้ าน
ผา่ น line

4.6 แสดงผลการทดสอบระบบจดจำใบหนา้ ได้ไม่น้อยกวา่ 10 คน

4.7 แสดงผลการทดสอบระยะที่ตรวจจับเครอื่ งตรวจรคู้ นเดนิ ผ่านเข้าห้องอปุ กรณ์

สารบญั รปู ฌ

รูปท่ี หน้า
1.1 NT บรษิ ทั โทรคมนาคมแหง่ ชาติ จำกัด (มหาชน) 1
1.2 แผนทตี่ ้งั NT บรษิ ทั โทรคมนาคมแหง่ ชาติ จำกัด (มหาชน) 2
2.1 ชอ่ื และลกั ษณะของภาษาJavaScript 5
2.2 JavaScript ใน <body> 5
2.3 bootstrap 5 6
2.4 bootstrap 5 icons SVG 6
2.5 color palette 7
2.6 Bootstrap v5 form (Digital Video Recorder ) 7
2.7 รหสั QR Code 8
2.8 Apps Script 9
2.9 LINE Application 10
2.10 LINE notify 10
2.11 ทดลองเชอ่ื มตอ่ กับ LINE Notify 11
2.12 โปรแกรมArduino IDE 12
2.13 การเชอ่ื มต่อ Arduino กบั Computer 13
2.14 เลือกรนุ่ บอรด์ Arduino ท่ีตอ้ งการ Upload 13
2.15 เลอื กหมายเลข Comport ของบอร์ด 13
2.16 กดป่มุ Verify เพ่ือตรวจสอบความถกู ตอ้ ง และ Compile โคด้ โปรแกรม 14
2.17 Upload โคด้ โปรแกรม 14
2.18 ดา้ นหน้าของ Arduino OUN R3 15
2.19 ด้านหลังของ Arduino OUN R3 15
2.20 ขาของ Arduino OUN R3 15
2.21 Ultrasonic Module HC- SR04 17
2.22 แสดง Timing diagram 17
2.23 ISD1820 Voice Recorder Module 19
2.24 The pinout can be easily seen in the Board Legend 20
2.25 Interfacing Diagram 20
2.26 ขนาดโมดูล ISD1820 20
2.27 แสดงลำโพง 21

สารบญั รูป (ต่อ) ญ

รปู ท่ี หน้า
2.28 ภาพจากกล้องเวบ็ แคมตัวแรกของโลก 22
2.29 ลักษณะตา่ ง ๆของกล้องเว็บแคม 23
2.30 กลอ้ งเวบ็ แคมแบบมีสาย 23
2.31 กล้องเวบ็ แคมแบบไร้สาย 24
3.1 แสดงแผนภาพขน้ั ตอนการดำเนนิ โครงงาน 25
3.2 แสดงแผนผงั การรวบรวมจากแหลง่ ขอ้ มูล 26
3.3 กรอบแนวคิดและการออกแบบเวบ็ ไซตร์ ะบบจัดเก็บอปุ กรณบ์ นเวบ็ ไซต์ 27
3.4 การออกแบบ Flow chart สร้างเว็บไซต์ 27
3.5 บลอ็ กไดอะแกรมการทำงานของระบบเว็บไซต์ 28
3.6 แสดงวธิ ีการเขา้ google dive 29
3.7 แสดงวธิ ีเข้า google Sheet 29
3.8 วธิ กี ารสร้าง User Name และPassword 29
3.9 แสดงวธิ กี ารแก้ไขสคริปต์ 30
3.10 วธิ ีการสรา้ งไฟล์ Login.html และไฟล์ welcome .html 30
3.11 แสดงการเขียนภาษา JavaScript 30
3.12 ทดลองการใช้งานของเวบ็ ไซต์ 31
3.13 การเลอื กคำส่ัง 31
3.14 ลิงค์ที่เราไดจ้ ากการสร้างเว็บไซต์ 31
3.15 หนา้ Login ท่เี ราได้สร้างขน้ึ 32
3.16 หนา้ Login ใสร่ หสั เขา้ สู่ ระบบ 32
3.17 Login สำเร็จ คลกิ เข้าสู่ระบบ 32
3.18 การสรา้ งหนา้ เว็บไซต์หน้า Home 33
3.19 เลือกเมนู ส่วนขยาย 33
3.20 สรา้ งไฟล์มี code.gs > index.html >form.html>> form2.html 33
3.21 เร่มิ ขน้ั ตอนการเขียนโค้ด 34
3.22 ทดสอบการใชง้ านของเว็บไซตท์ ่เี ขยี น 34
3.23 การเลือกคำส่งั 34
3.24 ลิงคท์ ่เี ราได้จากการสร้างเว็บไซต์ 35
3.25 ฟอร์มเบิก/เพ่ิมอุปกรณ์ทไี่ ด้สรา้ งข้ึน 35
3.26 หนา้ ฟอร์มอปุ กรณ์การเบิก 35
3.27 การเบิกอปุ กรณเ์ สรจ็ 36
3.28 หน้าฟอร์มอุปกรณ์การเพ่ิม 36

สารบญั รูป (ต่อ) ฎ

รปู ที่ หน้า
3.29 บนั ทกึ การเพ่ิมอุปกรณเ์ สรจ็ 36
3.30 ข้อมลู ใน google sheet 37
3.31 วิธกี ารนำข้อมลู ไปเชอ่ื มกบั หน้า login 37
3.32 การเลือกคำสงั่ 37
3.33 Copy ลิงคเ์ พ่ือนำไปใช้ทดสอบ 38
3.34 นำลิงคไ์ ปวางไว้ท่ี ไฟล์ welcome.html 38
3.35 ระบบแบบสมบรู ณ์ 38
3.36 เขา้ google ไปท่ี https://notify-bot.line.me/en/ 39
3.37 ขอ to ken 39
3.38 คลกิ Generate token 39
3.39 ต้งั ชื่อกลุม่ Line เบกิ อุปกรณ์ 40
3.40 To ken ที่ได้เบิกอุปกรณ์ 40
3.41 ตง้ั ชือ่ กลมุ่ Lineเพิ่มอปุ กรณ์ 41
3.42 To ken ที่ได้เพม่ิ อุปกรณ์ 41
3.43 แอด line Notify 41
3.44 กลุ่มแจง้ เตือนเบกิ และเพ่มิ อุปกรณ์ 42
3.45 นำ To ken มาใสใ่ นโค้ด Cord.gs 42
3.46 แสดงขอ้ มลู การแจ้งเตอื นของกลมุ่ NT stock-เบิก/เพิ่ม 43
3.47 ออกแบบ Flow chart การทำงานของระบบจดจำใบหนา้ 44
3.48 บลอ็ กไดอะแกรมการทำงานของระบบจดจำใบหน้า 45
3.49 Download โปรแกรมจดจำใบหน้า 46
3.50 Download โปรแกรม 46
3.51 โปรแกรมพร้อมใช้งาน 46
3.52 ขอ License โปรแกรม 47
3.53 คลกิ ตรงคำวา่ Help 47
3.54 รหัสท่เี รา Copy ใส่ในช่อง Signature 47
3.55 การสรา้ งระบบจดจำใบหนา้ 48
3.56 Face Trainer 48
3.57 ตงั้ ชือ่ บคุ คลท่ีตอ้ งการจะเทรนใบหนา้ 48
3.58 แอดรปู ภาพ ท่ีเราตอ้ งการจะเทรนใบหนา้ 49
3.59 นำตัว Payload Selections ออกมา 49
3.60 คลิกถูกทีช่ ่อง Face Rec 49

สารบัญรูป (ต่อ) ฏ

รปู ท่ี หน้า
3.61 นำตัว Logical ตอ่ สายเข้ากบั Payload Selections 50
3.62 การตั้งค่า Logical 50
3.63 นำ if Else ออกมาท้ังหมด 3 ตวั 50
3.64 เขยี นโคด้ คำส่ังของบล็อก if Else ตวั ที1่ 51
3.65 การหน่วงเวลาดว้ ย Delay(1) 51
3.66 ตง้ั ค่าและเขยี นโคด้ คำสงั่ ของบลอ็ ก if Else ที่ 2 51
3.67 ต้ังคา่ และเขียนโค้ด คำส่งั ของบล็อก if Else ที่ 3 52
3.68 การหนว่ งเวลาด้วย Delay(2) 52
3.69 ใช้ Box ของ Wait(1) เช่ือมต่อไปยัง Box ของ if else(2) 52
3.70 Box ของ Line Notify ออกมาท้ังหมด 2 ตัว 53
3.71 สร้าง Line กลุม่ พรอ้ มตั้งชื่อกลมุ่ 53
3.72 to ken สำหรับเขียนโค้ด 53
3.73 คลกิ Box ของ Line Notify 54
3.74 เขียน Script ใน Box ของ Line Notify(1) 54
3.75 เขยี น Script ใน Box ของ Line Notify(2) 54
3.76 แสดงระบบจดจำใบหนา้ และแจง้ เตอื นผ่านไลน์ท่สี มบูรณ์ 55
3.77 กลอ้ งเวบ็ แคม รุน่ YG79 55

3.78 แผนผงั การทำงานของวงจรเคร่อื งตรวจรคู้ นเดนิ ผา่ น 56
3.79 บลอ็ กไดอะแกรมการทำงานของเคร่ืองตรวจรู้คนเดินผา่ น 57
3.80 การออกแบบแผงวงจรแจง้ เตือนผ่านเสยี งตรวจรคู้ นเดินผ่าน 57
3.81 แสดงลายวงจรของวงจรแจง้ เตือนผา่ นเสยี งตรวจรูค้ นเดนิ ผ่าน 58
3.82 วงจรจริงเพือ่ ทำการทดลองเครอ่ื งแจ้งเตือนผ่านเสยี ง 59
3.83 วงจรทป่ี ระกอบเสรจ็ ดา้ นในและดา้ นนอก 59
3.84 แสดงการเชอื่ มต่ออปุ กรณข์ องแผงวงจร 60
3.85 แสดงถงึ การต่อใชง้ านวงจรต้นแบบ 60
4.1 แสดงผลการทดสอบการใช้ google sheet เปน็ ฐานขอ้ มลู ในการเบกิ อุปกรณ์ 63
4.2 แสดงผลการทดสอบการใช้ google sheet เปน็ ฐานขอ้ มลู ในการเบิกอปุ กรณ์ 63

บทที่ 1
บทนำ

1.1 สถานประกอบการ

รูปท่ี 1.1 NT บริษทั โทรคมนาคมแหง่ ชาติ จำกัด (มหาชน)
1.1.1 สถานท่ีตัง้ สถานประกอบการ

บรษิ ัท : NT บริษัทโทรคมนาคมแหง่ ชาติ จำกัด (มหาชน)
National Telecom Public Company Limited

ท่ตี งั้ : 293, 3 ม.13 ถนน หน้าเมอื ง ตำบลในเมือง อำเภอเมืองขอนแกน่
จังหวดั ขอนแกน่ 40000

2

รปู ที่ 1.2 แผนทีต่ ัง้ NT บรษิ ัทโทรคมนาคมแหง่ ชาติ จำกดั (มหาชน)

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

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

จากเหตผุ ลดังกล่าวเนื่องจากปจั จบุ ัน บรษิ ัท โทรคมนาคมแห่งชาติ จำกดั ยงั มกี ารจัดเก็บ
ข้อมูลต่างๆ เช่น การเบิกอุปกรณ์ การเพิ่มอุปกรณ์การบันทึกข้อมูลต่างๆ โดยใช้การบันทึกข้อมูลลง
บนกระดาษ ซึ่งทำให้เกดิ ความยุ่งยากในการจดั เก็บค้นหาอีกท้ังเกิดความลา่ ช้าและข้อมลู อาจผิดพลาด
ได้จึงต้องนำระบบคอมพิวเตอร์เข้ามาใช้ในการอำนวยความสะดวกเเก้ปัญหาต่างๆใหเ้ กดิ ความสะดวก
รวดเร็วข้นึ

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

1.3 วัตถุประสงค์
1.3.1 เพ่อื จดั เก็บข้อมลู ของอุปกรณ์
1.3.2 เพื่อเป็นการอำนวยความสะดวกให้กบั พนังงานบริษัท
1.3.3 เพ่อื เปน็ ความระเบยี บเรยี บร้อยและสามารถตรวจสอบอุปกรณ์ได้ทุกเมื่อ
1.3.4 เพอื่ แจง้ เตอื นคนเขา้ ห้องอุปกรณ์ ผา่ นไลน์
1.3.5 เพอ่ื ใชภ้ าษา JavaScript ในการพฒั นาระบบหลังบ้าน (backend)

3

1.4 ขอบเขตการดำเนนิ งาน
1.4.1 จำกัดสทิ ธใิ์ ชง้ านเฉพาะพนักงาน ศนู ย์ส่ือสารขอ้ มูล จังหวดั ขอนแกน่ เทา่ นั้น
1.4.2 เว็บไซตใ์ ช้ google sheet เป็นฐานข้อมลู
1.4.3 เว็บไซต์สามารถสแกนคิวอาร์โคด้ และคิวบารโ์ ค้ดที่มีขนาดไม่ตำ่ กว่า 0.8 × 0.8 นิ้ว

หรือ 2 × 2 เซนติเมตร
1.4.4 สามารถเทรนใบหน้าเพื่อจดจาํ ใบหนา้ ให้แจ้งเตือนผู้เข้าใช้งานผ่าน line
1.4.5 สามารถจดจำใบหนา้ ไดไ้ ม่น้อยกว่า 10 คน
1.4.6 เครอ่ื งตรวจจบั สามารถตรวจร้คู นเดนิ ผา่ นได้

1.5 วิธกี ารหรอื ข้นั ตอนในการดำเนินงาน
1.5.1 ศึกษาและคน้ ควา้ หาข้อมลู
1.5.2 นำเสนอหัวขอ้ และรบั คำแนะนำจากอาจารยท์ ป่ี รึกษาและพเี่ ลี้ยง
1.5.3 ออกแบบระบบจดั เกบ็ อุปกรณ์บนเวบ็ ไซต์และระบบจดจำใบหน้า
1.5.4 สรา้ งระบบจัดเกบ็ อุปกรณบ์ นเว็บไซต์
1.5.5 สรา้ งระบบจดจำใบหน้า
1.5.6 ทดสอบระบบจดั เก็บอุปกรณแ์ ละระบบจดจำใบหนา้
1.5.7 สร้างเครอ่ื งตรวจรู้เมือ่ คนเดนิ ผา่ น
1.5.8 ทดสอบระบบเครอื่ งตรวจรู้
1.5.9 ปรับปรุงและแกไ้ ขระบบจัดเก็บอปุ กรณ์บนเวบ็ ไซตแ์ ละระบบจดจำใบหน้า
1.5.10 สรปุ ผลการดำเนินงานและจดั ทำรายงานดำเนนิ งาน

1.6 ผลท่คี าดวา่ จะได้รบั
1.6.1 สามารถจดั เก็บขอ้ มูลอปุ กรณไ์ ด้
1.6.2 สามารถช่วยใหพ้ นกั งานเกดิ ความสะดวกในการสืบหาขอ้ มูลผ่านระบบอนิ เตอร์เน็ต
1.6.3 สามารถตามตัวบคุ คลทเี่ บกิ /เพม่ิ อุปกรณ์ได้
1.6.4 สามารถแจง้ เตอื นขอ้ มูลการเบกิ /เพม่ิ อุปกรณ์ผ่านไลน์ได้
1.6.5 สามารถแกไ้ ขขอ้ มูลท้ังหมดภายในเว็บได้ (เฉพาะAdmin)
1.6.6 สามารถจดจำใบหนา้ ผู้เข้าใช้งานได้
1.6.7 สามารถแจ้งเตอื นผ้ใู ช้งานทเ่ี ข้าห้องอปุ กรณผ์ า่ นไลน์ได้

4

บทท่ี 2
ทฤษฎีและงานวิจัยท่เี กี่ยวขอ้ ง

2.1 บทนำ
ในบทนี้จะกล่าวถึง ทฤษฎีพื้นฐานที่เกี่ยวกับการจัดเก็บอุปกรณ์บนเว็บไซต์และระบบ

จดจำใบหน้าผ่านกล้อง webcam สำหรับบริษัท โทรคมนาคมแห่งชาติ จำกัด การออกแบบระบบ
จัดเก็บอุปกรณ์บนเว็บไซต์นี้กล่าวเป็นงานวจิ ัยเพราะพบว่ามีการใช้งานน่าสนใจและยังพบว่ามีปัญหา
ภายในบริษัทในการจัดเกบ็ หรือตามอุปกรณ์ โดยที่เวบ็ ไซต์นนั้ สามารถสแกนผ่าน QR Code เข้าสหู่ น้า
เว็บไซต์เพื่อทำการเบิกหรือเพิ่มอุปกรณ์และยังและในส่วนของระบบจดจำใบหน้าก็สามารถสแกน
จดจำใบหน้าของพนักงานภายในบริษัทได้และยังมีการส่งข้อมูลแจ้งเตือนผ่าน Apps Line จึงมีความ
จำเป็นที่จะต้องอ้างอิงถึงทฤษฎีที่เกี่ยวข้องเพื่อนำมาใช้ในการออกแบบระบบจัดเก็บอุปกรณ์บน
เว็บไซต์ ระบบจดจำใบหน้าและเครื่องแจ้งเตือนผ่านเสียงตรวจรู้คนเดิน จึงมีความจำเป็นที่จะต้อง
อ้างอิงถงึ ทฤษฎที ีเ่ ก่ยี วขอ้ งเพือ่ ให้ทราบถึงเหตุผลท่นี ำมาใชเ้ พือ่ การออกแบบและการสรา้ งผลงาน

2.2 ทฤษฎที ีเ่ กี่ยวกบั ระบบเว็บไซต์
2.2.1 JavaScript
JavaScript (JS) เป็นภาษาเขียนโปรแกรมที่ถูกพัฒนาขึ้นตามข้อกำหนดของ

ECMAScript (ES) เป็นภาษาที่เอาไว้เขียนโปรแกรมเพื่อวัตถุประสงค์ทั่วไป ถูกกำหนดมาตฐานโดย
European Computer Manufacturers Association ภาษา JavaScript เป็นภาษาระดับสูงถูก
คอมไพล์ในขณะที่โปรแกรมรนั และเป็นภาษาที่มรี ปู แบบการเขยี นแบบหลายกระบวนทัศน์ เช่น การ
เขียนแบบเชิงขั้นตอน การเขียนโปรแกรมเชิงวัตถุ หรือแบบ Functional จุดเริ่มต้นของภาษา
JavaScript นั้นเริ่มมาจากการที่มันถูกพัฒนาขึ้นมาเพื่อเป็นภาษาบนเว็บบราวน์เซอร์สำหรับจัดการ
กับ DOM (Document Object Model) และทำให้หน้าเว็บเป็นแบบ Dynamic จากความยืดหยุ่น
และคุณสมบัติที่โดดเด่นของภาษา ทำให้ทุกวันนี้ JavaScript ไดถ้ ูกนำมาเขียนโปรแกรม Command
Line หรอื โปรแกรมทร่ี ันอยู่บนเวบ็ server บน Node.js คุณสมบัติของภาษา JavaScript Java Script
สามารถใช้เขียนโปรแกรมแบบง่ายได้ โดยไม่ต้องพึ่งภาษาอื่น JavaScript มีคำสั่งที่ตอบสนองกับ
ผู้ใช้งานเมื่อผู้ใช้คลิกที่ปุ่ม หรือ Checkbox ก็สามารถสั่งให้เปิดหน้าใหม่ได้ ทำให้เว็บไซต์ของเรามี
ปฏิสัมพันธ์กับผู้ใช้งานมากขึ้น JavaScript สามารถเขียนหรือเปลี่ยนแปลง HTML Element ได้คือ
สามารถเปลี่ยนแปลงรูปแบบการแสดงผลของเว็บไซต์ได้ JavaScript สามารถใช้ตรวจสอบข้อมูลได้
JavaScript สามารถใช้ในการตรวจสอบผู้ใช้ได้ JavaScript สร้าง Cookies เก็บข้อมูลของผู้ใช้ใน
คอมพวิ เตอร์ของผูใ้ ชเ้ องได้

5

รูปท่ี 2.1 ชอ่ื และลักษณะของภาษาJavaScript
(ที่มา: https://www.guimee.com/adblog/498/javascript-)
JavaScript เป็นภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า “สคริปต์” (script) ซึ่งในการสร้างและพัฒนา
เว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งาน
ได้มากขึ้น ซึ่งก่อนที่จะเริ่มเรียนเรื่อง Java Scrip นั้น จำเป็นต้องมีความรู้พื้นฐานเรื่อง HTML และ
CSS เสียกอ่ น

รูปท่ี 2.2 JavaScript ใน <body>
(ที่มา: https://medium.com/@worawit422/)
ในการใช้งาน JavaScript นนั้ จำเปน็ ตอ้ งใส่ Code ให้อยรู่ ะหว่างแท็ก <script> และ </script>
โดยตัวคำสง่ั JavaScript นีจ้ ะอยใู่ นส่วนแท็ก <head> และ <body> ของเอกสาร HTML เช่น
JavaScript ในแท็ก <body> ตวั อย่างเช่นรจู้ ักกับตัวแปรใน JavaScript Global Variable เปน็ ตวั
แปรท่ีสามารถเรยี กใชไ้ ด้ทุกที่ นั่นคอื ประกาศไวน้ อกฟังก์ชนั Local Variable เป็นตัวแปรทสี่ ามารถ
เรียกไดเ้ ฉพาะในฟงั กช์ นั ใดฟังกช์ ันหนงึ่ ทีม่ กี ารกำหนดตวั แปรไว้เทา่ น้ัน น่นั คือได้ประกาศตวั แปรไว้
ภายในฟงั ก์ชนั
2.2.2 Bootstrap 5
Bootstrap คือ Frontend Framework ยี่ห้อหนึ่งที่ช่วยให้เราสามารถสร้างหน้า
เว็บให้ตรงตามแบบที่เราต้องการได้ง่ายขึ้น เพราะ Bootstrap มีทั้งระบบ grid ที่ช่วยเรื่องการวาง
layout ที่รองรับในแบบ responsive และมี component สำเร็จรูปให้ใช้ ถ้าอยากได้ของที่ต้องใช้
บ่อยๆ แต่ไม่อยากคราฟเองเช่น table card หรือปุ่มสวยๆ Bootstrap ก็สามารถช่วยให้เราสร้าง

6

ขึ้นมาได้ง่ายๆ Bootstrap ประกอบด้วยไฟล์ 2 ประเภทด้วยกัน คือ 1.ไฟล์ CSS Stylesheet 2.ไฟล์
JavaScript (JS) โดยแบง่ หน้าท่ีการทำงาน ไฟล์ CSS หน้าท่ีCSS คือ ภาษาท่ีใช้สำหรบั ตกแต่งเอกสาร
HTML/XHTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ ตามที่ต้องการ CSS ย่อมา
จาก Cascading Style Sheets มลี ักษณะเป็นภาษาท่ีมีรูปแบบในการเขียน Syntax แบบเฉพาะและ
ได้ถูกกำหนดมาตรฐานโดย W3C เป็นภาษาหนึ่งในการตกแต่งเว็บไซต์ ได้รับความนิยมอย่าง
แพร่หลาย ส่วนไฟล์ JavaScript (JS) ทำหน้าที่จัดการในเรื่องของ Component หรือส่วนประกอบ
ต่าง ๆ JS ไฟล์เป็นเอกสารข้อความที่มีบรรทัดของรหัส JavaScript รหัสเหล่าน้ีใช้งาน JavaScript มี
การอ้างอิงจากหน้าเว็บเมื่อผู้ชมการดำเนินการดำเนินการกับผู้ที่หน้าเว็บที่ต้องมีการดำเนินการของ
ฟังก์ชนั การทำงานที่ได้รับการต้ังโปรแกรมลงในหน้าเว็บผ่านรหัส JavaScript ท่ีพบในที่สอดคล้อง .js
ไฟล์ในเว็บเซิร์ฟเวอร์ ฟังก์ชันเหล่านี้อาจรวมโดยอัตโนมัติปิดหรือเปิดหน้าต่างเว็บเบาเซอร์หรือแท็บ
วางเมาสล์ ำดับตรวจสอบรปู แบบและอื่น ๆ รหัสเหลา่ นีใ้ ชง้ าน JavaScript นอกจากนีย้ ังสามารถใช้ใน
การสร้างกล่องแบบเลื่อนลงด้วยฟังก์ชันการโต้ตอบ Notepad ไมโครซอฟท์สามารถนำมาใช้ในการ
เปิดและดูเน้ือหาของเหลา่ นี้ .js ไฟล์

รปู ที่ 2.3 bootstrap 5
(ทม่ี า: https://mdbootstrap.com/articles/jquery/whats-new-in-bootstrap-5/?csort=best)

รปู ท่ี 2.4 bootstrap 5 icons SVG
(ที่มา: https://www.designil.com/bootstrap-5-new/)

7

รปู ท่ี 2.5 color palette
(ที่มา: https://www.designil.com/bootstrap-5-new/)

รปู ที่ 2.6 Bootstrap v5 form
(ท่มี า: https://www.designil.com/bootstrap-5-new/)
2.2.2.1 ความเปลี่ยนแปลงของ Bootstrap5

1) ไม่มี jQuery อีกตอ่ ไป
2) ไม่ support IE10
3) อัพเดท JavaScript แบบครั้งย่ิงใหญ่ เรียกได้วา่ ลา้ งของเก่าอัพเดท
Class แลแก้ไข CSS
4) Containers แบบ Responsive
5) ตวั กรดิ ยงั คงเป็น 12 columns เหมอื นเดิมนะครบั
6) ใช้ icon แบบ SVG แทน font icon
7) ปรบั การจัดการ Grid เปน็ flexbox และ grid layout
8) ปรบั ตวั Sticky top ใหเ้ ป็น responsive

8

2.2.3 QR Code
รหัสคิวอาร์ (QR code ย่อจาก Quick Response code) หรือ คิวอาร์โค้ด เป็น

เครื่องหมายการคา้ ของบารโ์ คด้ เมทรกิ ซ์หรอื บาร์โค้ดสองมติ ิ สมยั ก่อนสำหรับอุตสาหกรรมยานยนต์ใน
ญ่ีปุน่ บาร์โค้ดเป็นปา้ ยสำหรบั ใหเ้ ครือ่ งอา่ นด้วยแสงที่บันทึกข้อมลู เก่ยี วกบั สงิ่ ของที่ตวั รหัสติดอยู่ รหสั
คิวอาร์มีมาตรฐานของหลักการเข้ารหัส 4 แบบ ตัวเลข อักขระอักษรเลข ไบต์หรือเลขฐานสอง และ
คันจิสำหรับเก็บข้อมูลดิบ รหัสคิวอาร์ยังเป็นที่นิยมนอกเหนือจากอุตสาหกรรมยานยนต์ เนื่องจาก
ความสามารถในการอ่านเร็วและพื้นที่เก็บข้อมูลที่มากกว่าเมื่อเทียบกับบาร์โค้ดรหัสผลิตภัณฑ์สากล
รหัสคิวอาร์นำมาใช้ในการตามรอยผลิตภัณฑ์ การระบุสิ่งของ การระบุเวลา การจัดการเอกสาร และ
การตลาดรหัสคิวอาร์ประกอบด้วยมอดูลสีดำ จัดวางในกริดบนพื้นหลังสีขาว ซึ่งสามารถอ่านได้ด้วย
เคร่อื งมืออ่านภาพ เช่น กล้องถ่ายรปู เคร่อื งสแกน และประมวลผลด้วยกระบวนการแกไ้ ขข้อผิดพลาด
จนภาพถูกแปลความหมายอย่างเหมาะสม และถอดออกมาจากรหัสท่ีนำเสนอเปน็ ภาพในแนวตั้งและ
แนวนอนจนไดข้ ้อมูลที่ตอ้ งการ

รปู ท่ี 2.7 รหสั QR Code
(ท่มี า: https://isecosmetic.com/wiki/QR_code)
2.2.4 Apps Script
Apps Script คือ แพลตฟอร์มที่ช่วยในการพัฒนาแอปพลิเคชันด้วยการเขียนโค้ด
ทน่ี ้อยลง (Low-Code) ซงึ่ ตอบโจทยใ์ นการขยายฟังกช์ ันการทำงานใหม่ๆได้ด้วยตนเอง นอกจากนี้ยัง
สามารถปรับให้เป็นระบบอัตโนมัติได้อย่างรวดเร็วและง่ายดาย โดยไม่จำเป็นต้องมีทักษะด้านการ
พัฒนาซอฟต์แวร์อย่างผู้เชียวชาญ Apps Script ช่วยเปลี่ยนงานที่แสนน่าเบื่อให้กลายเป็นระบบ
อัตโนมัติ โดยการเชื่อมต่อกับแอปพลิเคชันจาก Google Workspace ที่ใช้ในชีวิตประจำวัน คุณ
สามารถเพิ่มฟังก์ชันการทำงานหรือปรับแต่งการทำงานได้ทุกที่ทุกเวลาที่จำเป็น ทำให้ผู้ใช้มีเวลาให้
ความสำคัญกับงานส่วนอ่ืนและสามารถใช้เวลาเหล่านั้นให้เกิดประโยชน์สูงสุดอีกด้วย นอกจากนี้
Apps Script สามารถใช้งานได้หลากหลาย

9

รปู ท่ี 2.8 google sheet และ google Drive
(ทมี่ า: https://www.dmit.co.th/th/google-workspace-updates-th/)
สามารถเพิ่มเมนู กล่องโต้ตอบ และแถบด้านข้างที่ต้องการใน Google Docs, Sheets,
และ Forms ได้ด้วยตนเอง สามารถเขียน functions และ macros ใน Google Sheets ด้วยตนเอง
สามารถเผยแพร่เว็บแอป ทั้งแบบ Standalone หรือแบบฝังใน Google Sites สามารถโต้ตอบกับ
บริการอื่นๆ ของ Google ได้อย่างรวดเร็วและง่ายดาย ไม่ว่าจะเป็น AdSense, Analytics,
Calendar, Drive, Gmail และ Maps สามารถสร้างส่วนเสรมิ และเผยแพร่ไปยัง Google Workspace
Marketplace ชีตได้รับการออกแบบมาโดยคำนึงถึงความต้องการขององค์กรที่ยืดหยุ่นและมีความ
คล่องตัว ฟีเจอร์ AI จะช่วยให้คุณมีข้อมูลเชิงลึกที่ถูกต้องเพื่อทำการตัดสินใจทางธุรกิจที่สำคัญได้
สถาปัตยกรรมในระบบคลาวด์ช่วยให้คุณทำงานร่วมกับทุกคนได้ทุกเมื่อและในทุกที่ที่ต้องการ
นอกจากนี้ชีตยังใช้งานร่วมกับระบบภายนอกได้ ซึ่งรวมถึง Microsoft Office และยังขจัดความ
ยุ่งยากในการทำงานกับแหล่งขอ้ มูลต่างๆ ชีตสร้างขึ้นบนโครงสรา้ งพื้นฐานของ Google และจะมอบ
อิสระในการสร้างสรรค์ให้แก่คุณ พร้อมทั้งยังช่วยเก็บรักษาข้อมูลให้ปลอดภัยอีกด้วย วิธีการสร้าง
สคริปต์ หากคุณใช้ Docs, Sheets, หรือ Slides ให้คลิกที่เครื่องมือ (Tools) จากนั้นเลือกโปรแกรม
แก้ไขสคริปต์ (Script editor) หากคุณใช้ Forms ให้คลิกเพิ่มเติม (More) จากนั้นเลือกโปรแกรม
แก้ไขสคริปต์ (Script editor) สร้างสคริปต์ของคุณ Apps Script รองรับภาษายอดนิยมบนเว็บ อาทิ
HTML, CSS และ JavaScript ทำให้สร้างงานไดโ้ ดยไมจ่ ำเป็นต้องเรียนรูเ้ ฟรมเวิร์กใหม่
2.2.5 LINE Application

LINE Application นั้นเป็นโปรแกรมที่ถูกสร้างขี้นในช่วงกลางปี 2010 โดยการ
ร่วมมือของบริษัท Naver Japan Corporation และบริษัท livedoor โดยมี NHN Japan เป็น
ผู้พัฒนาฟีเจอร์ต่างๆ ของไลน์ และในส่วนของการตลาดด้านธุรกิจนั้นยกให้บริษัทแม่ที่เกาหลี NHN

10

Corporation จัดการ หลังจากที่เปิดตัวได้เพียงไม่นาน ก็ได้รับการตอบรับถึงหลายสิบล้านuserใน
ญี่ปุ่น ประเด็นแรกที่ใชใ้ นการสร้างโปรแกรมแชท LINE ขึ้นมาก็มีสาเหตุมาจากเหตุการณ์แผ่นดินไหว
ที่ภมู ภิ าค Tohoku เมื่อตน้ ปี 2011 ในตอนนนั้ ระบบการตดิ ตอ่ ทางการโทรศัพท์ลม่ อย่างไม่เปน็ ท่า ทำ
ให้ NHN Japan ตัดสินใจออกแบบ App ที่สามารถใช้ได้ทั้งบนสมาร์ทโพน บน laptop และ
คอมพิวเตอร์พีซี ซึ่งจะทำงานบนเครือข่ายข้อมูลที่สามารถแชทตอบโต้ได้รวดเร็วและต่อเนื่อง LINE
เป็นโปรแกรมแชทที่สามารถใช้งานได้ทั้งโทรศัพท์มือถือที่มีระบบปฏิบัติการ iOS, Android,
Windows Phone ล่าสุดสามารถใช้งานได้บนคอมพิวเตอร์ PC และ Mac ได้แล้ว ด้วยความที่มี
ลูกเลน่ มากมาย สามารถแชท ส่งรปู สง่ ไอคอน สง่ Sticker ตัง้ คา่ คยุ กันเปน็ กลมุ่ ฯลฯ ทำให้มีผู้ใช้งาน
แอพนเี้ ป็นจำนวนมาก

รูปที่ 2.9 LINE Application
(ที่มา: https://techsauce.co/pr-news/covid-19-info-hub-mini-app-line)
2.2.6 LINE Notify

เป็นบริการหนึ่งจากทาง LINE ที่ทำให้คุณสามารถเชื่อมต่อข้อมูลระหว่าง Web
service ของคุณ กับ LINE และส่งการอัพเดตจาก Web service นั้น ๆมายังแชท LINE ของคุณหรือ
กลุ่ม LINE ที่คุณอยู่ ได้ทันที และตลอด 24 ชั่วโมง ที่มีการอัพเดต เรียกได้ว่าแจ้งเตือนกันแบบ Real
Time สำหรับการใช้งานนั้น ถือว่าไม่ซับซ้อน และง่ายต่อการเชื่อมต่อมาก ๆ เพราะเพียงแค่สมัคร
แลว้ เขา้ สูร่ ะบบผา่ น LINE ของเรา กส็ ามารถเรม่ิ ใช้งานได้ทันที

รปู ท่ี 2.10 LINE notify
(ทมี่ า: https://notify-bot.line.me/th/)

11

ทดลองเชื่อมต่อกับ Web service โดยวันนี้ เราจะมาทดลองเชื่อมต่อกับ Web service ยอดนิยม
อย่าง Google ซึ่งในทีนี้จะเป็น Google Form เพื่อรับการแจ้งเตือนผ่านทางไลน์ทันทีเมื่อมีคนมา
กรอกฟอร์มของเรานั่นเอง แต่ก่อนอื่น อย่าลืมเพิ่ม LINE Notify เป็นเพื่อนก่อน เพื่อให้ LINE Notify
สามารถส่งขอ้ ความถงึ เราได้

รปู ท่ี 2.11 ทดลองเชื่อมต่อกับ LINE Notify
(ทมี่ า: https://www.lineofficialaccount.com/what_is_line_notify.php?fbclid)

2.3 Arduino
Arduino คือ โครงการโปรเจคหนึ่งที่นำตัว IC Microcontroller ในตระกูลต่าง ๆ มา

ประยุกต์ใช้รว่ มกันกับภาษา C ซึ่งภาษา C ในที่นี้เป็นลักษณะเฉพาะเลย (Library ของ Arduino) ทำ
ให้สามารถใช้ตัวคำสั่งโค้ดตัวเดียวกันกับตัว IC Microcontroller ที่แตกต่างกันได้เลย Arduino นั้น
ถูกออกแบบมาให้สามารถนำไปใช้งานได้ง่าย จึงเหมาะสำหรับใครที่เป็นมือใหม่ ไม่มีความรู้ด้าน
สถาปัตยกรรมก็สามารถทำได้เช่นกัน อีกทั้งยังสามารถปรับแต่ง ดัดแปลงอะไรต่าง ๆ ได้อีกมากมาย
ทเี่ ราสามารถนำตวั Arduino ไปตอ่ ยอดเป็นสิ่งต่าง ๆ จดุ เดน่ ของ Arduino Board ก็คือ ความง่ายใน
การต่อกับอุปกรณเ์ สริมตา่ ง ๆ ท่ผี ู้ใชอ้ ย่างเราสามารถตอ่ วงจร Electronic ไดอ้ ยา่ งงา่ ยดาย เพราะเขา
ทำตัว I/O ของบอร์ดมาใหเ้ รยี บร้อยแล้วนั่นเอง

2.3.1 Arduino (Arduino IDE)
ในการเขียนโปรแกรมควบคุมการทำงานของบอร์ด Arduino Board เพราะเป็น

โปรแกรมที่ใช้งานง่าย เขียนด้วยภาษา C และความที่เป็น Open Source ทำให้ใช้งานได้โดยไม่มี
ค่าใช้จ่าย ได้รับความนิยมสูง จึงทำให้มีแหล่งข้อมูลให้ศึกษาค้นคว้าเพิ่มเติมในเว็บบอร์ดหรอื เว็บไซต์
ในอินเทอร์เน็ตอีกมากมาย และในส่วนของบอร์ด Arduino Board เองนั้น เป็นบอร์ด
ไมโครคอนโทรลเลอร์ที่มีขาพอร์ตอินพุตและเอาต์พุตที่มากพอในการนำไปใช้งานจริงสามารถต่อกับ
เซนเซอร์ได้ทงั้ แบบดจิ ิตอลและแอนะล็อก และยงั ต่อเพอ่ื ขบั อุปกรณ์เอาต์พุตให้ทำงานโดยที่เราจะต้อง
เขียนโปรแกรมเพื่อสั่งงานให้บอร์ด Arduino Board สามารถควบคุมอุปกรณ์ต่างๆ เช่น ควบคุมการ
เปิดปิดหลอดไฟ ปลั๊กไฟฟ้า หรือเครื่องรดน้ำต้นไม้ เป็นต้น นอกจากนี้เพื่อให้เกิดการประยุกต์ใช้งาน
แบบ IoT เราสามารถควบคุมบอร์ดผ่านทางอินเทอร์เน็ตได้โดยต่อบอร์ดเสริม Arduino Ethernet

12

Shield เขา้ กับบอร์ดหลัก เนือ่ งจากบอร์ด Arduino Board มีราคาไมส่ งู มาก จงึ เปน็ การช่วยประหยัด
ต้นทุนวัสดุอุปกรณ์

รปู ท่ี 2.12 โปรแกรมArduino IDE
(ท่มี า: https://www.robotsiam.com/article/2/)

2.3.2 Arduino Uno R3
Arduino Uno R3 คำว่า Uno เป็นภาษาอิตาลี ซึ่งแปลว่าหนึ่ง เป็นบอร์ด

Arduino รุ่นแรกที่ผลิตออกมา มีขนาดประมาณ 68.6×53.4 mm. เป็นบอร์ดมาตรฐานที่นิยมใช้งาน
มากที่สุด เนื่องจากเป็นขนาดที่เหมาะสาหรับการเริ่มต้นเรียนรู้ Arduino และมี Shields ให้เลือกใช้
งานได้มากกว่าบอร์ด Arduino รุ่นอื่นๆArduino อ่านว่า (อา-ดู-อิ-โน่ หรือ อาดุยโน่) เป็นบอร์ด
ไมโครคอนโทรเลอร์ตระกูล AVR ที่มีการ พัฒนาแบบ Open Source คือมีการเปิดเผยข้อมูลทั้งด้าน
Hardware และ Software ตัว บอร์ด Arduino ถูกออก แบบมาให้ใช้งานได้ง่าย ดังนั้นจึงเหมาะสห
รบั ผเู้ ริ่มต้นศกึ ษา ท้ังนผ้ี ู้ใช้งานยงั สามารถ ดดั แปลง เพิ่มเตมิ พัฒนาตอ่ ยอดทั้งตัวบอรด์ หรือโปรแกรม
ต่อได้อีกด้วยความง่ายของบอร์ด Arduino ในการต่ออุปกรณ์เสริมต่างๆ คือผู้ใช้งานสามารถต่อวงจร
อิเล็กทรอนิกส์จากภายนอกแล้วเชื่อมต่อเข้ามาที่ขา I/O ของบอร์ด หรือเพื่อความสะดวกสามารถ
เลือกต่อ กับบอร์ดเสริม (Arduino Shield) ประเภทต่างๆ เช่น Arduino XBee Shield, Arduino
Music Shield, Arduino Relay Shield, Arduino Wireless Shield, Arduino GPRS Shield เ ป็ น
ต้น มาเสยี บกับบอรด์ บนบอรด์ Arduino แล้วเขียนโปรแกรมพัฒนาต่อได้เลย

2.3.2.1 จุดเด่นที่ทำให้บอร์ด Arduino เป็นท่ีนยิ ม
1) ง่ายตอ่ การพัฒนา มีรปู แบบค าสง่ั พ้นื ฐาน ไม่ซับซอ้ นเหมาะสำหรบั ผเู้ รมิ่ ต้น
2) มี Arduino Community กลมุ่ คนทีร่ ว่ มกันพัฒนาท่แี ข็งแรง
3) Open Hardware ทำให้ผใู้ ชส้ ามารถนำบอรด์ ไปตอ่ ยอดใช้งานไดห้ ลายด้าน
4) ราคาไม่แพง
5) Cross Platform สามารถพฒั นาโปรแกรมบน OS ใดกไ็ ด้

13

2.3.2.2 รูปแบบการเขียนโปรแกรมบน Arduino

รูปที่ 2.13 การเช่อื มต่อ Arduino กับ Computer
(ท่มี า: https://blog.thaieasyelec.com/what-is-arduino-ch1/)

2.3.2.3 เขียนโปรแกรมบนคอมพิวเตอร์ ผ่านทางโปรแกรม Arduino IDE ซ่ึง
สามารถดาวนโ์ หลดได้จาก Arduino.cc/en/main/software

รปู ที่ 2.14 เลือกรุน่ บอร์ด Arduino ทีต่ อ้ งการ Upload
(ที่มา: https://blog.thaieasyelec.com/what-is-arduino-ch1/)

2.3.2.4 หลังจากที่เขียนโค้ดโปรแกรมเรียบร้อยแล้ว ให้ผู้ใช้งานเลือกรุ่นบอร์ด
Arduino ทใ่ี ช้และ หมายเลข Com port

รปู ท่ี 2.15 เลอื กหมายเลข Comport ของบอร์ด
(ทีม่ า: https://blog.thaieasyelec.com/what-is-arduino-ch1/)

14

2.3.2.5 กดปุ่ม Verify เพื่อตรวจสอบความถูกต้องและ Compile โค้ดโปรแกรม
จากน้นั กดปุ่ม Upload โคด้ โปรแกรมไปยังบอรด์ Arduino ผ่านทางสาย USB เมื่ออับโหลดเรียบร้อย
แล้ว จะแสดงข้อความแถบ ข้างล่าง “Done uploading” และบอร์ดจะเริ่มท างานตามที่เขียน
โปรแกรมไวไ้ ดท้ ันที

รูปที่ 2.16 กดปุม่ Verify เพ่ือตรวจสอบความถูกต้อง และ Compile โค้ดโปรแกรม
(ท่มี า: https://blog.thaieasyelec.com/what-is-arduino-ch1/)

รปู ท่ี 2.17 Upload โค้ดโปรแกรม
(ที่มา: https://blog.thaieasyelec.com/what-is-arduino-ch1/)
2.3.2.6 Arduino Uno R3 เป็นบอร์ด Arduino ที่ได้รับความนิยมมากที่สุด เนื่องจาก
ราคาไม่แพง ส่วนใหญ่โปรเจคและ Library ต่างๆ ที่พัฒนาขึ้นมา Support จะอ้างอิงกับบอร์ดนี้เป็น
หลัก เนอ่ื งจากเปน็ ขนาดทีเ่ หมาะสำหรับการเร่ิมตน้ เรียนรู้ Arduino และมี Shields ให้เลือกใช้งานได้
มากกว่าบอร์ด Arduino รุ่นอื่นๆที่ออกแบบมาเฉพาะมากกว่า โดยบอร์ด Arduino Uno ได้มีการ
พัฒนาเรื่อยมา ตั้งแต่ R2 R3 และรุ่นย่อยที่เปลี่ยนชิปไอซีเป็นแบบ SMD และข้อดีอีกอย่างคือ กรณี
ที่ MCU เสยี ผูใ้ ชง้ านสามารถซอื้ มาเปลยี่ นเองไดง้ ่าย

15

รปู ที่ 2.18 ด้านหนา้ ของ Arduino OUN R3
(ท่ีมา: http://www.lungmaker.com/uno)

รูปที่ 2.19 ดา้ นหลงั ของ Arduino OUN R3
(ที่มา: https://www.arduino4.com/product/3/arduino-uno-r3-)

รปู ที่ 2.20 ขาของ Arduino OUN R3
(ท่มี า: https://www.hobbyeng.com/?p=123)

16

Summary

Microcontroller ATmega328
Operating Voltage 5V
Input Voltage (recommended) 7-12V
Input Voltage (limits) 6-20V
Digital I/O Pins 14 (of which 6 provide PWM output)
Analog Input Pins 6
DC Current per I/O Pin 40 mA
DC Current for 3.3V Pin 50 mA
Flash Memory 32 KB (ATmega328) of which 0.5 KB used by bootloader
SRAM 2 KB (ATmega328)
EEPROM 1 KB (ATmega328)
Clock Speed 16 MHz

2.4 Ultrasonic
หมายถึง คลื่นเสียงที่มีความถี่สูงเกินกว่าที่หูมนุษย์จะได้ยิน โดยทั่วไปแล้วหูของมนุษย์

โดยเฉลี่ยจะได้ยินเสียงสูงถึงเพียงแค่ประมาณ 15 KHz เท่านั้น แต่พวกที่อายุยังน้อย ๆ อาจจะได้ยิน
เสียงที่มี ความถี่สูงกว่านี้ได้ ดังนั้นโดยปกติแล้วคำว่า Ultrasonic คจึงมักจะหมายถึงคลื่นเสียงที่มี
ความถี่สูงกว่า 20 KHz ขึ้นไป จะสงู ข้ึนจนถงึ เทา่ ใดไมไ่ ด้ระบจุ ำกดั เอาไว้

สาเหตุที่มีการนำเอาคลื่นย่าน Ultrasonic มาใช้ก็เพราะว่าเป็นคลื่นทีมีทิศทางทำให้เรา
สามารถเลง็ คลื่นเสยี งไปยงั เป้าหมายทีต่ ้องการได้โดยเจาะจง เรือ่ งนีเ้ ปน็ คุณสมบัติของคลื่นอย่างหนึ่ง
ยิ่งคลื่นมีความถี่ สูงขึ้นความยาวคลื่นก็จะยิ่งสั้นลง ถ้าความยาวคลื่นยาวกว่าช่องเปิด ที่ให้เสียงนั้น
ออกมา ของตวั ก าเนิดเสียง ความถ่นี น้ั เช่น คลื่นความถี่ 300 Hz ในอากาศจะมคี วามยาวถึงประมาณ
1 เมตรเศษ ๆ ซึ่งจะยาวกว่าช่องที่ให้ คลื่นเสียงออกมาจากตัวก าเนิดเสียงโดยทั่วไปมากมายคลื่นจะ
หักเบนที่ขอบดา้ นนอกของตวั กำเนิดเสียงทำให้ เกิดการกระจายทิศทางคลืน่ แต่ถ้าความถี่สงู ขึน้ มาอยู่
ในย่าน Ultrasonic อย่างเช่น 40 KHz จะมีความยาว คลื่นในอากาศเพียงประมาณ 8 มม. เท่านั้นซ่งึ
เล็กกว่ารูเปิดของตัวที่ให้กำเนิดเสียงความถี่นี้มากคลื่นเสียงจะไม่ มีการเลี้ยวเบนที่ขอบจึงพุ่งออกมา
เป็นลำแคบ ๆ หรือที่เราเรียกว่า “มีทิศทาง” การมีทิศทางของคลื่นเสียงย่าน Ultrasonic ทำให้เรา
นำไปใช้งานได้หลายอย่าง เช่น นำไปใช้ใน เครื่องควบคุมระยะไกล (Ultrasonic remote control)
เครื่องล้างอุปกรณ์ (Ultrasonic cleaner) โดยให้สั่นที่ความถี่สูง เครื่องวัดความหนาของวัตถุโดย
สังเกตระยะเวลาที่คลื่นสะท้อนกลับมา เครื่องวัดความลึกและ ท าแผนที่ใต้ท้องทะเล ใช้ในเครื่องหา
ตำแหน่งอวัยวะบางสว่ นในร่างกาย ใช้ทดสอบการรัว่ ไหลของท่อ เปน็ ต้น โดยความถีท่ ีใ่ ชข้ ้นึ อยู่กับการ
ใช้งาน เช่น คลื่นเสียงต้องเดินทางผ่านอากาศแล้ว ความถี่ที่ใช้ก็มักจะจำกัดอยู่ เพียงไม่เกิน 50 KHz
เพราะที่ความถี่สูงขึ้นกว่านี้อากาศจะดูดกลืนคลื่นเสียงเพิ่มขึ้นมาก ทำให้ระดับความแรง ของคล่ืน
เสียงที่ระยะห่างออกไปลดลงอย่างรวดเร็ว ส่วนการใช้งานด้านการแพทย์ซึง่ ต้องการรัศมที ำการส้ัน ๆ

17

ก็อาจใช้ความถี่ในช่วง 1 MHz ถึง 10 MHz ขณะที่ความถี่เป็น GHz ( 109 Hz ) ก็มีใช้กันในหลายๆ
การใชง้ าน ทีต่ วั กลางที่คลนื่ เสียงเดินทางผา่ นไม่ใช่อากาศ

รปู ท่ี 2.21 Ultrasonic Module HC- SR04
(ทมี่ า: https://www.google.com/search?q=Ultrasonic+Module+HC-+SR04+)

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

2.4.1 หน้าที่และการทำงาน รูปแบบต่าง ๆ Ultrasonic เซ็นเซอร์ประกอบด้วย ตัว
ตรวจจับด้วยคลื่น Ultrasonic, ชุดส่ง สัญญาณ, ชุดประมวลผลและชุดoutput มักจะใช้เป็นภาครับ
และภาคส่ง อาจมีระบบซึ่งประกอบด้วยส่วน หลักๆ แยกกันอยู่ 2 ส่วน ในระหว่างการทำงาน
เซ็นเซอร์จะท าการส่งสัญญาณเสียงซึ่งเรียกว่า “ซาวด์พาร์ เซลส์” (Sound parcels) ให้ขบวนการ
ทางอิเลก็ ทรอนิกส์ ของเวลาท างานไปเรือ่ ย ๆจนกระท่ังมีการรบั การ สะทอ้ นครั้งแรกเกิดขึ้น สำหรับ
การทำงานเป็นวงจร Ultrasonic เซ็นเซอร์ จะส่งผ่านคลื่นพัลซ์ เสียงที่ช่วงเวลาสม่ำเสมอ หรือ
ช่วงเวลาที่เปลี่ยนแปลง คลื่นเสียงที่ปล่อยออกไปจะถูกสะท้อนได้โดยวัตถุที่เหมาะสม โดยเซ็นเซอร์
และ ระบบการท างานจะรบั การสะท้อนของคลนื่ เสียงที่สะท้อนกลบั มา ความกวา้ งของคลื่นพัลซ์ของ
เสียงอย่ใู นชว่ ง 2.-200 ไมโครเซท

รปู ท่ี 2.22 แสดง Timing diagram
(ท่มี า: https://www.researchgate.net/figure/Timing-Diagram-for-HC-SR04-Ultrasonic)

18

เวลาในการเดินทางของคลื่นพัลซ์ของคลื่นเสียงเป็นการวัดระยะห่างจากวัตถุ ทั้งนี้ขึ้นอยู่กับชนิดของ
เซ็นเซอร์ ระยะห่างนี้น าไปแสดงในรูปของสัญญาอนาล็อก (Analog Signal) (เช่น 0-20 mA)
สัญญาณลอจิก (Logic Signal) (เช่น สัญญาณลอจิก 8 bit) ตลอดทั้ง ซีเรียลอินเตอร์เฟส (Serial
Interface) (RS232) หรือ การเปรียบเทียบกับค่าอ้างอิงในรูปของสวิสซ์พัลซ์ที่เรียกว่า ไทม์เฟรม
(Time Frame)เนื่องจากขบวนการดำเนินไปตามเวลาที่คลื่นสะท้อนเดินทาง ไม่ใช่เป็นไปตามความ
เข้มของคลื่น สะท้อน จึงจัดได้ว่า Ultrasonic เซ็นเซอร์ มีข้อดีเหนือกว่าเซ็นเซอร์แบบออปติคอล
(Optical Sensor) เวลาท่ี คล่ืนสะท้อนการเดินทางจะ ท าใหข้ บวนการด าเนนิ โดยไมข่ ้นึ กบั ความเข้ม
ของคลื่นสะท้อน ตราบเท่าที่วัตถุ ยังคงสะท้อนคลื่นที่สามารถตรวจจับได้ออกมา ดังนั้นคุณลักษณะ
การสวทิ ซไ์ ม่เปลีย่ นไป แม้ในสภาวะทกี่ าร สะทอ้ นเป็นไปอย่างไม่ดีคลนื่ สะทอ้ นที่อ่อนจะมีผลต่อความ
ถูกตอ้ งในการตรวจจับวัตถุ ซง่ึ อาจท าให้ไม่สามารถ ท าการตรวจจับวตั ถุไดเ้ ลย ความเร็วที่เปล่ียนไป
ของคลื่นพัลซ์ของเสียง มีผลกระทบตอ่ พิสัย การท างานของ สวิทช์ (ระยะทาง) โดยตรงเซ็นเซอร์ท า
งานด้วยวงจรเวลาที่คงที่ (เช่น t = 20 ms) จะส่งคลื่นเสียงออกมาอย่าง สม่ำเสมอ (ดังแสดงในรูป)
ดังนนั้ วงจรเวลาจะเปน็ ตวั กำหนดชว่ งและวงจรการท างานของสวทิ ซข์ องเซน็ เซอร์

2.4.2 ผลกระทบของอณุ หภมู ิ(Temperature Effect)
ความไวของเสียงขึ้นอยู่กับแรงดัน และ อุณหภูมิของก๊าซที่เสียงเดินทางผ่าน ใน

การประยุกต์ใช้ Ultrasonic ส่วนใหญ่องค์ประกอบอื่นๆ และรงดันของก๊าซจะถูกกำหนดให้มี
ความสัมพันธ์กัน ในขณะที่อุณหภูมิไม้ ได้ถูกก าหนดไว้ โดยความไวของเสียงจะเพิ่มขึ้น 1 % ต่อ
อุณหภมู ิท่เี พมิ่ ขนึ้ 10° F (6° C)

2.4.3 มุมของวตั ถ(ุ Target Angle)
วตั ถทุ ี่มลี กั ษณะแบนทีต่ ้งั กับแกนของลำแสงจะสะท้อนพลังงานเสยี งไปยังเซ็นเซอร์

ได้มากที่สุดดังนั้น ถ้ามุมของวัตถุเพิ่มมากขึ้น พลังงานโดยรวมจะส่งกลับไปยังเซ็นเซอร์ได้น้อยลง
สำหรับ Ultrasonic ใหญ่ มุมของวัตถุควรจะน้อยกว่า หรือเท่ากับ 10 องศา กระแสอากาศที่
เนื่องมาจากลม, พัดลม, อปุ กรณน์ วิ แมติกหรือแหล่งอืน่ ๆสามารถรบกวนเส้นทางของ พลงั งานเสียงได้
ดงั น้ันเซน็ เซอรอ์ าจไมส่ ามารถตรวจจบั วตั ถใุ นสภาพแวดล้อมแบบนี้ได้

2.4.4 Wire connecting direct as following
5V Supply
Trigger Pulse Input
Echo Pulse Output
0V Ground

2.4.5 Electric Parameter
Working Voltage DC 5 V
Working Current 15mA

19

Working Frequency 40Hz
Max Range 4m
Min Range 2cm
Measuring Angle 15 degree
Trigger Input Signal 10uS TTL pulse
Echo Output Signal Input TTL lever signal and the range in
proportion Dimension 45*20*15mm

2.5 โมดูลบนั ทกึ เสยี ง ISD1820
ISD1820 คือโมดูลสำหรับการบันทึกเสียงสามารถบันทึกเสียงและเล่นเสียงได้ในตัวเดียว

สามารถบันทึกได้8-20 วนิ าทแี ละเป็นโมดลู ท่ีไมโครโฟนในตัวมโี หมดสำหรับเปิดเสียงไมโครโฟนโดยไม่
บนั ทึกได้ โมดลู นีส้ ามารถส่งั งานด้วยไมโครคอนโทรลเลอร์หรือจะสั่งงาผ่านปุ่มด้านบนโมดูลได้เลยผู้ใช้
สามารถนำไปต่อยอดหรือพัฒนาในการนำไปประยกุ ต์ใชไ้ ด้กับงเลน่ เสยี งต่างๆคุณสมบัติของ ISD1820
interface ปุ่มกด การเล่นสามารถเปิดใช้งานขอบหรือระดับ โหมดปิดเครื่องอัตโนมัติ ตัวขับเสียงบน
ชิป8โอหม์ power supply (VCC) 3VDC สามารถควบคุมได้ทั้งแบบแมนนวลหรือโดย MCU2.7.4.6
อัตราตัวอย่างและระยะเวลาเปลี่ยนแปลงได้โดยการเปลีย่ นตัวต้านทานตัวเดียวบนั ทึกเสียงได้นานถึง
20 วนิ าที การใช้งานอัดเสยี งและเล่นเสยี งบนโมดลู ISD1820สวติ ช์ FT สำหรบั ต่อเป็นไมค์ออกเคร่ือง
เสียง เลื่อนไปที่ OFF สวิตช์ REPEAT สำหรับเล่นซ้ำไปเรื่อย ๆ เลื่อนไปที่ OFFจ่ายไฟ 3-5V ที่ช่อง
VCC กดปุ่ม REC อัดเสียงที่ไมค์ จะเห็นไฟสีแดงบนโมดูสว่างกดปุ่ม PLAYE เล่นเสียงหนึ่งครั้ง กดปุ่ม
PLAYL เล่นเสยี งในขณะทก่ี ด

รปู ที่ 2.23 SD1820 Voice Recorder Module
(ทม่ี า: https://components101.com/modules/isd1820-record-and-playback-module)

20

รูปที่ 2.24 The pinout can be easily seen in the Board Legend
(ทม่ี า: https://components101.com/modules/isd1820-record-and-playback-module)

2.5.1 เครื่องบันทึกเสียงและโมดูลการเล่นที่ใช้ ISD1820 สามารถควบคุมได้อย่าง
ง่ายดายโดยใช้ไมโครคอนโทรลเลอร์ เช่น PIC, Arduino ฯลฯ ผ่านpin การสื่อสาร I/O
ดจิ ติ อลสามตัว

รูปที่ 2.25 Interfacing Diagram
(ท่มี า: https://components101.com/modules/isd1820-record-and-playback-module)

รปู ที่ 2.26 ขนาดโมดูล ISD1820
(ทม่ี า: https://components101.com/modules/isd1820-record-and-playback-module)

21

2.6 ลำโพง
ลำโพง เป็นอุปกรณ์ไฟฟ้าเชิงกลอย่างหนึ่ง ทำหน้าที่แปลงสัญญาณไฟฟ้าให้เป็นเสียง มี

ด้วยกันหลายแบบคำว่าลำโพงมักจะเรียกรวมกัน ทั้งดอกลำโพง หรือตัวขับ (driver) และลำโพงทั้งตู้
(speaker system) ที่ประกอบด้วยลำโพงและวงจรอิเล็กทรอนิกส์สำหรับแบ่งย่านความถี่
(Crossover Network) ลำโพงนับเปน็ องคป์ ระกอบทสี่ ำคัญในระบบเครื่องเสียง โดยมีขนาดตั้งแต่เล็ก
เท่าปลายนิ้ว จนถึงใหญ่ขนาดเส้นผ่าศูนย์กลางนับสิบนิ้ว โดยมีโครงสร้างที่แตกต่างกัน และให้เสียงที่
แตกต่างกันด้วย ประกอบด้วย โครงลำโพงและ จะมีแม่เหล็กถาวรติดอยู่ พร้อมเหล็กปะกับบน-ล่าง
ซึ่งจะมีแกนโผล่ขึ้นมาด้านบนทำให้เกิดเป็นช่องว่างแคบ ๆ เป็นวงกลมเราเรียกว่าช่องแม่เหล็ก
(Magnetic Gap) ซึง่ แรงแมเ่ หลก็ ท้ังหมดจะถูกสง่ มารวมกันอย่างหนาแนน่ ทตี่ รงน้ี ถา้ แม่เหล็กมีขนาด
เล็กก็ให้แรงน้อย (วัตต์ต่ำ) ขนาดใหญ่ก็มีแรงมาก (วัตต์สูง) ในปัจจุบันจะมีลำโพงที่ออกแบบให้มวี ตั ต์
สูงเป็นพิเศษ โดยใช้แม่เหล็กขนาดใหญ่ และบางแบบจะซ้อน 2 หรือ 3 ชั้น จะได้วัตต์สูงขึ้นอีกมาก
หลักการทำงานของลำโพงเมื่อมีการป้อนสัญญาณไฟฟ้าให้กับขดลวดเสียงของลำโพงหรือมีการนำ
ลำโพงไปต่อกับ เครื่องขยายสัญญาณเสียงจะมีสัญญาณเสียงออกมาที่ลำโพงหลักการคือ เมื่อมี
สัญญาณไฟฟ้าป้อนเข้ามาจะเกิดเส้นแรงแม่เหล็กเกิดขึ้นโดยรอบอำนาจ ของเส้นแรงแม่เหล็กจะดูด
และผลักกับเส้นของแม่เหล็กถาวรตามสัญญาณไฟฟ้าที่ได้จากความถีเ่ สยี ง ซึ่งมีความถี่เสียงตั้งแต่ 10
Hz - 20 KHz ที่มีการเปล่ียนแปลงเฟสตลอดเวลาทำให้กรวยกระดาษที่ยึดติดกับขดลวดเสียงเกดิ การ
เคลื่อนท่ีดูด และผลักอากาศ จึงเกดิ เปน็ คลื่นเสยี งขน้ึ สว่ นสำคัญที่สุดของเครื่องเล่นเหล่าน้ีก็คือลำโพง
โดยหนา้ ที่สำคญั สุดของลำโพงคือ เปลย่ี นสญั ญาณทางไฟฟ้าที่ได้มาจากเคร่ืองขยายเป็นสัญญาณเสียง
ลำโพงที่ดีจะต้องสร้างเสียงให้เหมือนกับต้นฉบับเดิมมากที่สุด โดยมีการผิดเพี้ยนน้อยที่สุด เสียงเป็น
คลื่นตามยาว เสียงแหลมและทุ้มขึน้ กับความถี่ ส่วนสียงดังหรอื ค่อยข้ึนอยู่กบั ขนาด Amplitude ของ
คลื่นน้นั

รปู ที่ 2.27 แสดงลำโพง
(ท่มี า:https://www.atprosound.com/howspeakerwork/?fbclid=IwAR14aoyrXhbAu63U4C)

22

2.7 กล้องเว็บแคม
กล้องเว็บแคมที่เราใช้คุยแบบเห็นหน้ากันบนคอมพิวเตอร์มายาวนานนั้น ใครจะรู้ว่าต้น

กำเนิดของมันมีที่มาที่ไม่ธรรมดาและน่าสนใจอยู่ไม่น้อยเลยทีเดียว เพราะว่ามันเกิดมาจากความ
"ขี้เกียจเดิน" ของผู้ที่คิดค้น ที่ขี้เกียจเดินไปดูว่าเครื่องชงกาแฟบ่อย ๆ เท่านั้นเอง กล้องเว็บแคมตัว
แรกของนั้นถูกคิดค้นโดยกลุ่มนักวิทยาการคอมพิวเตอร์ที่มหาวิทยาลัยแคมบริดจ์เมื่อปี 1991
เพ่อื ที่จะใช้ตง้ั กล้องไว้ดูเคร่ืองชงกาแฟว่ายงั คงมีกาแฟเหลอื ในหม้อให้ด่ืมหรือไม่ อา่ นมาถึงตรงน้ีหลาย
คนอาจจะนึกสงสัยว่าแคเ่ ดนิ ไปดูหม้อกาแฟถึงกบั ตอ้ งสร้างกล้องเว็บแคมขึ้นมาเลยหรือซึ่งจริง ๆ แล้ว
มันมีเหตุผล กลุ่มนักวิทยาการคอมพิวเตอร์มักจะทำงานกันจนดึกดื่น ทำให้กาแฟกลายเป็นเครื่องดื่ม
ยอดนิยมของพวกเขา แต่ปัญหาก็คือเครื่องชงกาแฟนั้นอยู่ในห้องทำงานที่ชื่อว่า Trojan Room ซึ่ง
แน่นอนวา่ คนที่ทำงานอยู่คนละห้องหรือคนละช้นั จะต้องเสยี เวลาเดนิ มาท่ีเครื่องชงกาแฟ และอาจจะ
พบว่า กาแฟหมดทำให้ต้องเดินกลับห้องทำงานไปดว้ ยอารมณ์หงุดหงิดไม่ใช่น้อยหลังจากนั้นอีก 2 ปี
ในปี 1993 ก็มีการนำภาพจากกล้องเว็บแคมขึ้นไปอยู่บนหน้าเว็บไซต์เพื่อให้สามารถดูได้ผ่าน
อินเทอร์เน็ต โดยหน้าเว็บไซต์ดังกล่าวถูกปิดไปเมื่อเดือนสิงหาคมปี 2001 หลังจากนั้นกล้องเว็บแคม
ตัวแรกของโลกนี้ก็ถกู นำไปประมูลบน eBay โดยมีมูลค่าสูงกว่า $5,000 หรือมากกว่า 150,000 บาท
เลยทีเดยี ว

รปู ท่ี 2.28 ภาพจากกลอ้ งเว็บแคมตวั แรกของโลก
(ท่มี า: https://men.kapook.com/view212786.html)

2.7.1 ความหมายของเว็บแคม (Webcam)
เว็บแคม (Webcam) หรือเรียกเต็ม ๆ ว่า Web Camera แต่ในบางครั้งก็มีคน

เรียกว่า Video Camera หรือ Video Conference เปน็ อปุ กรณP์ inทสี่ ามารถจับภาพเคล่อื นไหวของ
เราไปปรากฏในหน้าจอมอนิเตอร์ และสามารถส่งภาพเคลื่อนไหวนี้ผ่านระบบเครือข่ายเพื่อให้คนอีก
ฟากหนงึ่ สามารถเห็นตวั เราเคลื่อนไหวได้เหมือนอยูต่ ่อหน้า ถือว่าเป็นอปุ กรณ์ที่มปี ระโยชน์อีกตัวหนึ่ง
และเริ่มมีความจำเป็นมากขึ้นเรื่อย ๆ ยี่ห้อกล้องเว็บแคมที่มีชื่อเสียงและใช้กันทั่วไป โดยที่เด่นที่สุด

23
ในตอนนี้ คือ กล้องเว็บแคมของ Logitech ซึ่งผลิตกล้องเว็บแคมออกมาในท้องตลาดมากที่สุด ทั้ง
เร่ืองคณุ ภาพและความสวยงามกจ็ ัดอย่ใู นอันดับต้น ๆ

รูปที่ 2.29 ลักษณะตา่ ง ๆของกล้องเวบ็ แคม
(ทีม่ า: http://chinnapatsassssy.blogspot.com/2018/11/blog-post_3.html)
2.7.2 ชนิดของกล้องเว็บแคม (Webcam) กล้องเว็บแคม (Webcam) แบ่งออกได้ 2 ชนิด
คือ แบบมีสายและแบบไร้สาย โดยแตล่ ะชนดิ มคี วามแตกตา่ งกนั ดงั น้ี กล้องเว็บแคม Web Cam แบบ
มีสาย

รปู ท่ี 2.30 กลอ้ งเวบ็ แคมแบบมีสาย
(ที่มา: http://chinnapatsassssy.blogspot.com/2018/11/blog-post_3.html)
2.7.2.1 กล้องเว็บแคมแบบมีสายจะมีความยุ่งยากในเรื่องการใช้สายต่อพ่วงเข้ากับเครื่อง
คอมพิวเตอร์ แต่จะมีราคาถูกกว่าแบบไร้สายมาก ทำให้คนส่วนใหญ่นิยมซื้อกล้องเว็บแคม

24

(Webcam) แบบมีสายมาใช้งาน ข้อเสีย ของกล้องเว็บแคม (Webcam) แบบมีสาย คือ ทำให้ไม่
สามารถวางตัวกล้องได้ไกลจากเครื่องคอมพิวเตอร์ ทำให้กล้องไม่สามารถจับภาพเคลื่อนไหวใน
ระยะไกล ๆ ไดเ้ หมือนแบบไรส้ าย

2.7.2.2 กล้องเว็บแคม (Webcam) แบบไร้สายจะมรี าคาค่อนข้างแพงมากเม่ือเทียบ
กับแบบมีสาย เนื่องจากตัวกล้อง ต้องใช้เทคโนโลยีแบบไร้สายที่เรียกว่า Wireless Wi
Fi หรือ IEEE 802.11 ที่ค่อนข้างมีต้นทุนสูง จึงส่งผลใหต้ ัวกล้องมีราคาแพงจึงไม่ค่อยไดร้ บั ความนิยม
นัก จุดเด่น ของกล้องเว็บแคม (Webcam) แบบไร้สาย คือ สามารถนำไปติดตง้ั ทจ่ี ุดใดกไ็ ด้ โดยไมต่ ้อง
คำนึงระยะห่างระหวา่ งตวั กลอ้ งกบั คอมพวิ เตอร์

รูปท่ี 2.31 กลอ้ งเวบ็ แคมแบบไร้สาย
(ทมี่ า: http://chinnapatsassssy.blogspot.com/2018/11/blog-post_3.html)

ส่วนประกอบของกล้องเว็บแคม (Webcam) โดยหลัก ๆ แล้ว การซื้อกล้องเว็บแคม (Webcam) มา
ใช้งาน จะเห็นว่ากล้องเว็บแคม (Webcam) ประกอบด้วยส่วนต่าง ๆ ที่สำคัญดังนี้ เลนส์กล้อง จะทำ
หน้าที่ในการจับภาพเคลือ่ นไหวต่าง ๆ ที่เคลื่อนไหวผ่านไปมาอยู่หน้ากล้องหรืออยู่ในตำแหน่งท่เี ลนส์
กล้องสามารถมองเห็นภาพได้ ตัวปรับระยะโฟกสั จะทำหน้าที่ในการปรับโฟกัสของภาพเพื่อให้ภาพมี
ความชัดเจนมากขึน้ ฐานรองกลอ้ ง มไี วส้ ำหรบั เปน็ ท่ตี งั้ ของตวั กล้องซึ่งช่วยใหเ้ ราสามารถวางกล้องบน
หน้าจอคอมพวิ เตอร์ได้สะดวก เวบ็ แคม (webcam) หรือ เวบ็ แคเมรา (web camera) หมายถึงกล้อง
วีดีโอที่ใช้สำหรับการเชื่อมต่อกับคอมพิวเตอร์ แล็ปท็อป หลักการใช้งานเว็บแคมก็คือ การสื่อสาร
ออนไลน์ในรูปแบบเห็นหน้าตาคู่สนทนาผ่านทางอินเทอร์เน็ต ในทางธุรกิจกล้องเว็บแคมช่วยในการ
ประชุมออนไลน์โดยที่ผู้เข้าร่วมประชุมสามารถประชุมร่วมกันโดยไม่จำเป็นต้องเดินทางมาอยู่ใน
สถานที่เดียวกัน นอกจากนี้มีการใช้งาน webcam สำหรับความปลอดภัยอื่นๆโดยปกติแล้ว
คอมพิวเตอร์ Notebook รุ่นใหม่ๆ จะมีกล้องติดมาให้ไม่จำเป็นตอ้ งซื้อเวบ็ แคมมาติดต้ังเพ่ิมแต่อย่าง
ใด แต่สำหรบั ในบางคร้ังกล้องเว็บแคมทม่ี ากับตัว Notebook อาจมีฟงั ก์ชั้นให้เลน่ นอ้ ย ภาพและเสียง
ทีไ่ ดไ้ ม่ตอบโจทย์

25

บทท่ี 3
วธิ กี ารดำเนินโครงงาน
3.1 บทนำ
การออกแบบและพัฒนาดำเนินการสร้างเว็บไซต์การเก็บบันทึกข้อมูลของอุปกรณ์ผ่านทาง
เว็บไซต์และระบบจดจำใบหนา้ ผ่านทาง Image Processing ผจู้ ัดทำไดเ้ ริ่มจากการศกึ ษาและรวบรวม
ข้อมูลจากสื่อทางอินเทอร์เน็ต และหนังสือต่างๆ และจะนำเอาข้อมูลได้มาออกแบบและพัฒนา
โครงงานระบบจัดเก็บอปุ กรณ์บนเว็บไซต์และระบบจดจำใบหน้า โดยการออกแบบและพัฒนานั้น ได้
ทำการนำเสนอต่ออาจารย์ที่ปรึกษาและพี่เลี้ยงจากสถานประกอบการเ พื่อรับข้อเสนอแนะในการ
ออกแบบ เมอ่ื ได้ชนิ้ งานที่สร้างไว้กท็ ำการเสนออาจารย์ทป่ี รึกษาเพ่ือตรวจหาและแก้ไขในจุดบกพร่อง
ของโครงงาน เพือ่ ใหส้ ำเรจ็ ตามวัตถุประสงคท์ ี่กำหนดไว้ จำเป็นตอ้ งวางแผนกำหนดการทง้ั ด้านทฤษฎี
ที่เกี่ยวข้องการศึกษาค้นคว้าข้อมูลจากแหล่งข้อมูลต่างๆ เพื่อให้สามารถนำไปประยุกต์ในงานตาม
วัตถุประสงค์ที่กำหนดไว้และนำไปใช้ให้เกิดประโยชนส์ งู สุดได้ โดยทำการวางแผนการทำงานไว้ดงั รปู
ที่ 3.1

รูปท่ี 3.1 แสดงแผนภาพการดำเนนิ โครงงาน

26

3.2 ศกึ ษาและรวบรวมข้อมูล
ในการศกึ ษาและรวบรวมข้อมลู เพื่อนาํ ขอ้ มูลที่ได้ศึกษามาดำเนนิ การสร้างเวบ็ ไซต์และระบบ

จดจำใบหน้าไดจ้ ากแหลง่ ข้อมูลต่างๆ ดังต่อไปน้ี
3.2.1 จากอาจารย์ทีป่ รกึ ษา

ขอคำแนะนำและรวบรวมข้อมูลเกี่ยวกับการสร้างเว็บไซต์การเก็บสต๊อกของและ ระบบจดจำใบหน้า
จากอาจารยท์ ี่ปรึกษา เพอ่ื นำขอ้ มูลท่ีได้มาสรา้ งเว็บไซต์การเก็บสต๊อกของ

3.2.2 จากสื่ออินเตอร์เน็ตศึกษาค้นคว้าและรวบรวมข้อมูลการสร้างเว็บไซต์การเก็บสต๊อก
อุปกรณ์และการเก็บข้อมูลต่างๆ เพื่อนำข้อมูลที่ได้จากการศึกษาค้นคว้ามาเป็นแนวทางในการสร้าง
เว็บไซตก์ ารเกบ็ สต๊อกและการเกบ็ ข้อมูลต่างๆ

3.2.3 จากหนงั สอื
ศกึ ษาค้นคว้าและรวบรวมขอ้ มลู จากหนงั สอื ต่างๆ ท่ีเกีย่ วข้องกบั การเขียนเวบ็ ไซและภาษาตา่ งๆ เพือ่
นำมาเป็นแนวทางในการสร้างเว็บไซต์การเกบ็ สตอ๊ กของ

3.2.4 จากปริญญานิพนธ์ตา่ งๆ
ศึกษาค้นคว้าและรวบรวมข้อมูลจากหนังสือปริญญานิพนธ์เซนเซอร์อุณหภูมิแบบไร้

สมั ผัส เพ่ือนำมาเป็นแนวทางในการสรา้ งระบบแจง้ เตือนซง่ึ สามารถเขยี นเป็นแผนผงั การรวบรวมจาก
แหล่งขอ้ มลู ได้ดงั รปู ท่ี 3.3

รูปท่ี 3.2 แสดงแผนผังการรวบรวมจากแหลง่ ข้อมูล

3.3 กรอบแนวคดิ และการออกแบบเว็บไซตร์ ะบบจัดเกบ็ อุปกรณ์
การออกแบบและการสร้างเว็บไซต์จะประกอบไปด้วยหน้า login เข้าใช้งาน และหน้าเหลัก

เพื่อเข้าสู่ระบบ จัดเก็บอุปกรณ์และเพิ่มอุปกรณ์โดยจะมีฟังก์ชั่นปุ่มเพื่อเลือกทำรายการ ในส่วนของ
ฟอร์มเบกิ อุปกรณ์ก็จะประกอบไปดว้ ย ชอื่ นามสกุลผเู้ บกิ ชอ่ื เล่น และหมวดหมู่ ย่ีห้อ เบอร์โทรศัพท์
เลขซีเรียลนัมเบอร์ระบบสแกนคิวอาร์โค้ด ปุ่มบันทึกข้อมูล และมีการเก็บข้อมูลที่ทำรายการไว้ ใน
google sheet และเมื่อทำรายการเบิกหรือเพิ่มอุปกรณ์ เสร็จ ข้อมูลที่ทำรายการจะแจ้งเตือนไป
ยังไลน์ จึงได้ทำการออกแบบตามข้อมูลของภาษา java scriptและ bootstrap เพื่อสร้างเป็นระบบ
จัดเกบ็ อปุ กรณบ์ นเวบ็ ไซต์

27
รปู ที่ 3.3 กรอบแนวคิดและการออกแบบเวบ็ ไซต์ระบบจัดเกบ็ อุปกรณ์บนเวบ็ ไซต์

28

รปู ที่ 3.4 การออกแบบ Flow chart สรา้ งเว็บไซต์
อธิบายบล็อกการทำงาน

เมื่อมีการกด Login เช้าสู่ระบบเว็บไซต์ User ทำการป้อนข้อมูล Username
password ถ้ามีการใส่ Username password ผิดระบบจะมีการแจ้ง ให้กรอกข้อมูลเข้าใช้งานใหม่
ถ้าใช่ให้มีการเข้าสู่หน้าเลือกรายการ User ก็ต้องเลือกว่าจะเบิกหรือจะเพิ่มอุปกรณ์ จากนั้นพอเลือก
รายการเสรจ็ ไปหน้ากรอกข้อมูล พอมีการกรอกข้อมูลครบ ก็บนั ทกึ ข้อมูล ขอ้ มูลจะเกบ็ ไวใ้ น Google
sheet และทำการแจ้งเตือนผ่านไลน์

29

รปู ที่ 3.5 บลอ็ กไดอะแกรมการทำงานของระบบเว็บไซต์
อธบิ ายบล็อกการทำงาน

บล็อกไดอะแกรมการทำงานของระบบเว็บไซต์เมื่อเข้าสู่เว็บไซต์ระบบ จะโชว์หน้า
Login ให้ผู้ใช้งานเข้าสู่ระบบโดยการกรอก Username password ที่ได้กำหนดไว้ จากนั้นจะมีการ
เข้าสู่หน้าเลือกรายการหรือหน้า Home เพื่อเลือกรายการ เบิก เพิ่มอุปกรณ์ จากนั้นทำการบันทึก
ข้อมูลไปยัง Google sheet และแจ้งเตือนข้อมูลการเบิกอุปกรณ์ผ่านไลน์ จากนั้นกลับไปที่หน้า
Home เพือ่ ทำรายการใหม่
3.4 ขน้ั ตอนการและวธิ ีการสรา้ งระบบเว็บไซต์

3.4.1 ทำการสร้างเวบ็ ไซตห์ น้า login โดยนำ Google App Script มาชว่ ยในการพฒั นาและ
จัดการโค้ดโดยใช้ภาษา JavaScript ในการพฒั นาระบบหลังบา้ นในการตกแตง่ หน้าต่างผู้ใช้งาน และ
ไดม้ ีการนำ Bootstrap Framework มาการตกแต่งหนา้ เวบ็ ไซต์ ขน้ั ตอนแรกเข้าไปที่ Google Diver

รูปที่ 3.6 วธิ กี ารเขา้ google dive

30

3.4.2 ทำการสรา้ งสเปรตซตี เลือกที google Sheet ตามข้ันตอนตามรปู ท่ี 3.7

รปู ท่ี 3.7 แสดงวธิ เี ขา้ google Sheet
3.4.3 นำฐานข้อมลู ของเรามาใส่ แลว้ ตงั้ User Name และ Password ตามความต้องการ

รปู ที่ 3.8 วิธีการสรา้ ง User Name และPassword
3.4.4 ทำการเขยี นโคด้ โดย เลือกไปท่ี

1. เลอื กเมนสู ่วนขยาย
2. เลือก App Script

รปู ท่ี 3.9 แสดงวธิ กี ารแก้ไขสคริปต์

31
3.4.5 สร้างไฟล์ html. ท้งั หมด 2 ไฟล์ดงั น้ี1. Login.html ไฟล์ 2. welcome .html โดยมี
ข้ันตอนดังน้ี ไปที่ ไฟล์ >>ใหม่ >>เลือกไฟล์ html. สว่ นไฟล์ Code.gs จะมมี าให้อยู่แล้วเมอ่ื เราทำ
การกดสร้างไฟล์

รูปท่ี 3.10 วิธีการสร้างไฟล์ Login.html และไฟล์ welcome .html
3.4.6 จะได้ไฟล์ท้ังหมด3 ไฟล์ในการสรา้ งระบบLogin จากนน้ั ทำการเขียนโค้ดโดยใช้ภาษา
JavaScript ทงั้ 3 ไฟล์

รูปที่ 3.11 แสดงการเขยี นภาษา JavaScript

32

3.4.7 เมื่อมีการเขยี นโคด้ เสร็จแล้ว ใหท้ ำการทดสอบการใช้งานของเว็บไซต์ดงั น้ี
ไปทเ่ี มนูเผยแพร่ >>ใช้งานเป็นแอปพลิเคชนั

รูปท่ี 3.12 ทดลองการใช้งานของเว็บไซต์
3.4.8 ต้ังค่าและเลือกคำส่งั ตามรปู ที่ 3.13 แลว้ ทำการกดอัปเดต

รูปท่ี 3.13 การเลือกคำสัง่

33

3.4.9 นำลงิ ค์ทไี่ ดน้ ำไปทดสอบการใชง้ าน Copy ลงิ คไ์ ปวางในเบาเซอร์

รปู ที่ 3.14 ลิงค์ทเ่ี ราได้จากการสรา้ งเวบ็ ไซต์

3.4.10 และน่คี ือหนา้ เวบ็ ไซต์ทีไ่ ด้นำลงิ คไ์ ปทดสอบ จากน้ันทำการใส่รหัสทีเ่ ราทำการตั้งคา่ ไว้
ใน google sheet จากข้อความข้างต้น

รูปท่ี 3.15 หนา้ Login ทเ่ี ราไดส้ ร้างขน้ึ
3.4.11 ทำการใส่Username Passwordท่ีเราทำการตั้งไวก้ ่อนหนา้ น้ีแลว้ กดLoginเขา้ ใช้งาน

รปู ที่ 3.16 หน้า Login ใสร่ หัสเขา้ สู่ ระบบ

34
3.4.12 เม่อื เขา้ สรู่ ะบบสำเร็จจะขนึ้ หนา้ ดังรูปท่ี 3.17 หน้าคลกิ คำวา่ CLICK เป็นการเข้าสู่
เวบ็ ไซต์หรอื ปุ่ม logout

รปู ท่ี 3.17 Login สำเรจ็ คลิกเข้าสู่ระบบ
3.4.13 ทำการสร้างหนา้ เว็บไซตห์ นา้ Homeเพ่ือเลือกรายการเบกิ เพิ่มอปุ กรณ์ สร้าง google
sheet ขน้ึ มาใหม่ โดยนำขอ้ มูลท่ีเราไดต้ ้องการนำมาใส่ในgoogle sheet สร้างทั้งหมด 2 ซีต

รูปท่ี 3.18 การสรา้ งหน้าเวบ็ ไซตห์ น้า Home
3.4.14จากนน้ั ทำการเขียนโค้ดโดย เลือกไปที่ สว่ นขยาย >>เลือก App Script

รปู ที่ 3.19 เลอื กเมนู สว่ นขยาย