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

ระบบจัดเกบ็ อุปกรณ์บนเวบ็ ไซตแ์ ละระบบจดจำใบหน้า
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 ได้
ตลอดเวลา ระบบจดจำใบหน้าจะช่วยในการตรวจสอบพนักงานท่ีเข้ามาใช้บรกิ ารห้องจัดเก็บอุปกรณ์
พร้อมระบบแจ้งเตือนรายชื่อพนักงานพร้อมถ่ายภาพส่งผ่านแอป Line เพื่อเพิ่มความสะดวกในการ
เช็คขอ้ มูลหรือตรวจสอบผา่ นข้อมูลทางสมาร์ทโพน หรอื คอมพวิ เตอร์ได้

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

ผลการทดสอบระบบจัดเก็บอุปกรณ์บนเว็บไซต์และระบบจดจำใบหน้า ในส่วนหน้า 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 the project presents development of web storage and facial recognition
systems to present the design and development of web-based device storage and
facial recognition systems. To reduce the use of paper within the company and keep
track of employees using the machine. You can check the withdrawal/adding of devices
information via Google Sheets at any time facial recognition systems will help to check
the employees who come to use the service of the device storage room, along with
the system to notify the list of employees and take pictures sent through the Line app
to increase the convenience of checking information or checking through the member's
information. smartphone or computer.
Development of web storage and facial recognition systems the students have
designed a website system consisting of a login system to prevent access to the
website. The website device storage system uses google sheet as a database to store
data for adding devices and also scans the Qr code to scan the serial number of
different devices and has a notification system for adding devices via Line The facial
recognition system will notify the names of known and unknown people with a photo
capturing to LINE. The detector can detect pedestrians.
Test results of the device storage system on the website and the facial
recognition system In the login page, when the username password is 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 via google drive and access the database in google sheet. QR code
and QR code scanning function cannot scan the size less than 0 . 8 x0 . 8 inches or 2x2
centimeters as for the face recognition system, it can scan the faces of known and
unknown people by capturing images and notifications via LINE, and it can also
recognize the faces of at least 10 people. It can detect pedestrians within 0.1 meter
to 1 meter distance which is within the specified scope.

ค

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

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

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

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

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

สารบัญ ง

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

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 ทดลองเชือ่ มต่อกับ Web service 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) ซึง่ ตอบโจทย์ในการขยายฟังก์ชันการทำงานใหม่ๆได้ดว้ ยตนเอง นอกจากนี้ยัง
สามารถปรับให้เป็นระบบอัตโนมัติได้อย่างรวดเร็วและง่ายดาย โดยไม่จำเป็นต้องมีทักษะด้านการ
พฒั นาซอฟตแ์ วรอ์ ยา่ งผู้เชยี วชาญ

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
Corporation จัดการ หลังจากที่เปิดตัวได้เพียงไม่นาน ก็ได้รับการตอบรับถึงหลายสิบล้านuserใน
ญี่ปุ่น ประเด็นแรกที่ใช้ในการสร้างโปรแกรมแชท LINE ขึ้นมาก็มีสาเหตุมาจากเหตุการณ์แผน่ ดินไหว

10

ทีภ่ มู ิภาค 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 ทดลองเชอื่ มต่อกับ Web service
(ท่มี า: https://medium.com/artisan-brain-academy/)

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 เองนั้น เป็นบอร์ด
ไมโครคอนโทรลเลอร์ที่มีขาพอร์ตอินพุตและเอาต์พุตที่มากพอในการนำไปใช้งานจริงสามารถต่อกับ

12

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

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

2.3.2 Arduino Uno R3
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.arduitronics.com/product/20/ultrasonic-sensor-module-hc-sr04-5v)

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
Working Frequency 40Hz
Max Range 4m
Min Range 2cm

19

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ทสี่ ามารถจบั ภาพเคลอื่ นไหวของ
เราไปปรากฏในหน้าจอมอนิเตอร์ และสามารถส่งภาพเคลื่อนไหวนี้ผ่านระบบเครือข่ายเพื่อให้คนอีก
ฟากหนึง่ สามารถเห็นตวั เราเคล่ือนไหวได้เหมือนอยตู่ ่อหน้า ถือว่าเปน็ อปุ กรณ์ที่มีประโยชน์อีกตัวหน่ึง
และเริ่มมีความจำเป็นมากขึ้นเรื่อย ๆ ยี่ห้อกล้องเว็บแคมที่มีชื่อเสียงและใช้กันทั่วไป โดยที่เด่นที่สุด
ในตอนนี้ คือ กล้องเว็บแคมของ Logitech ซึ่งผลิตกล้องเว็บแคมออกมาในท้องตลาดมากที่สุด ทั้ง
เร่อื งคณุ ภาพและความสวยงามก็จดั อย่ใู นอันดับตน้ ๆ

23

รปู ท่ี 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 กล้องเว็บแคมแบบมีสายจะมีความยุ่งยากในเรื่องการใช้สายต่อพ่วงเข้ากับเครื่อง
คอมพิวเตอร์ แต่จะมีราคาถูกกว่าแบบไร้สายมาก ทำให้คนส่วนใหญ่นิยมซื้อกล้องเว็บแคม
(Webcam) แบบมีสายมาใช้งาน ข้อเสีย ของกล้องเว็บแคม (Webcam) แบบมีสาย คือ ทำให้ไม่
สามารถวางตัวกล้องได้ไกลจากเครื่องคอมพิวเตอร์ ทำให้กล้องไม่สามารถจับภาพเคลื่อนไหวใน
ระยะไกล ๆ ไดเ้ หมอื นแบบไร้สาย

2.7.2.2 กลอ้ งเว็บแคม (Webcam) แบบไร้สายจะมีราคาค่อนข้างแพงมากเม่ือเทียบ
กับแบบมีสาย เนื่องจากตัวกล้อง ต้องใช้เทคโนโลยีแบบไร้สายที่เรียกว่า Wireless Wi

24

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

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

บทที่ 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 กรอบแนวคิดและการออกแบบเวบ็ ไซต์ระบบจดั เกบ็ อุปกรณ์บนเวบ็ ไซต์

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

28

อธิบายบล็อกการทำงาน
เม่ือมีการกด Login เช้าสู่ระบบเว็บไซต์ User ทำการป้อนข้อมูล Username

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

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

อธบิ ายบล็อกการทำงาน
บล็อกไดอะแกรมการทำงานของระบบเว็บไซต์เมื่อเข้าสู่เว็บไซต์ระบบ จะโชว์หน้า

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

29

3.4 ขนั้ ตอนการออกแบบและสร้างเว็บไซต์
3.4.1 สรา้ งเวบ็ ไซต์หนา้ login ผา่ น google drive

รปู ท่ี 3.6 วธิ กี ารเขา้ google dive
3.4.2 เลอื กที google sheet

รูปที่ 3.7 แสดงวธิ เี ข้า google Sheet
3.4.3 เสรจ็ แลว้ ตง้ั User Name และPassword

รูปที่ 3.8 วิธีการสร้าง User Name และPassword

30

3.4.4 เลอื กท่ี เมนสู ่วนขยาย>>เลอื ก App Script

รูปท่ี 3.9 แสดงวิธีการแก้ไขสคริปต์
3.4.5 สรา้ งไฟล์ Login.html ไฟล์ welcome .html ไปที่ ไฟล์>>ใหม>่ เลือกไฟล์ html.

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

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

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

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

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

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

32

3.4.10 หน้าเว็บไซต์ ทำการใช้รหสั ทเ่ี ราทำการตัง้ ค่าไวใ้ น google sheet

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

รูปท่ี 3.16 หน้า Login ใส่รหัสเข้าสู่ ระบบ
3.4.12 หนา้ คลิกคำว่า CLICK เปน็ การเขา้ ส่เู วบ็ ไซต์

รปู ที่ 3.17 Login สำเร็จ คลิกเขา้ ส่รู ะบบ

33
3.4.13 ข้ันตอนการสรา้ งหน้าเวบ็ ไซต์หน้า Home สรา้ ง google sheet ขนึ้ มาใหม่

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

รูปที่ 3.19 เลือกเมนู ส่วนขยาย
3.4.15 สร้างไฟลท์ ั้งหมด 4 ไฟลม์ ี code.gs > index.html >form.html>> form2.html

รูปท่ี 3.20 สรา้ งไฟล์ code.gs > index.html >form.html>> form2.html

34

3.4.16 ทำการเขยี นโคด้ ดว้ ยภาษา JavaScript

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

รูปท่ี 3.22 ทดสอบการใชง้ านของเวบ็ ไซตท์ เี่ ขยี น
3.4.18 ตง้ั คา่ ตามรูปด้านล่าง แลว้ กดupdate

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

35

3.4.19 Copyลิงค์ไปวางทดสอบทเ่ี บาเซอร์

รูปที่ 3.24 ลิงคท์ เ่ี ราได้จากการสรา้ งเว็บไซต์
3.4.20 จะได้หน้า Home คลิกไปท่ีฟอรม์ เบิกอุปกรณแ์ ละเพิม่ อปุ กรณ์

รปู ท่ี 3.25 ฟอรม์ เบกิ /เพมิ่ อุปกรณท์ ่ีไดส้ ร้างข้นึ
3.4.21 หนา้ เวบ็ ไซต์ฟอรม์ เบิกอุปกรณ์

รูปท่ี 3.26 หน้าฟอร์มอปุ กรณ์การเบกิ