โครงงาน การออกแบบเทคโนโลยี เรื่อง แอปพลิเคชันบันทึกคะแนนการท าบริเวรนักเรียน ผ ้จัดท าู นายธราธร เปล่งศรี ชั้นมัธยมศึกษาปี ที่ 5/1 เลขที่ 3 นางสาวสุภาพร อินทะเสน ชั้นมัธยมศึกษาปี ที่5/1 เลขที่ 17 นายเอกณรงค์ หลกับุญ ชั้นมัธยมศึกษาปี ที่ 5/1 เลขที่ 20 นางสาวพิชญา สุดสาร ชั้นมัธยมศึกษาปี ที่ 5/1 เลขที่ 22 นางสาวมาริษา สาสังข์ ชั้นมัธยมศึกษาปี ที่ 5/1 เลขที่ 23 รายวิชา ว32104การออกแบบเทคโนโลยี โรงเรียนส้มป่ อยพิทยาคม อ าเภอราษีไศล จังหวัดศรีสะเกษ ส านักงานเขตพื้นที่การศึกษามัธยมศึกษาศรีสะเกษ ยโสธร
ก กิตติกรรมประกาศ โครงงาน การออกแบบเทคโนโลยีเรื่อง แอปพลิเคชันบันทึกคะแนนการท าบริเวรนักเรียนน้ี ส าเร็จลุลวงได้ด้วยความกรุณาจาก อาจารยณ์ ัฐพล บวัพนัธ์ที่ไดใ้ห้โอกาสในศึกษาโครงงานในคร้ังน้ี ตลอดจนให้คา ปรึกษาและแก้ไขข้อบกพร่องพร้อมท้งัข้อเสนอแนะต่างๆ จนโครงงานเล่มน้ีเสร็จ สมบูรณ์ คณผจู้ดัทา ขอขอบพระคุณเป็นอยา่งสูง สุดทา้ยน้ีคณะผูจ้ดัทา หวงัเป็นอย่างยิ่งว่าโครงงานน้ีจะเป็นประโยชน์ในการใช้ศึกษาแก่ผู้ที่ สนใจศึกษาต่อไป คณะผู้จัดท า
ข หัวข้อโครงงาน :แอปพลิเคชันบันทึกคะแนนการท าบริเวรนักเรียน ประเภทของโครงงาน :โครงงานการออกแบบเทคโนโลยี ผู้เสนอโครงงาน : นายธราธร เปล่งศรี ช้นั มัธยมศึกษาปี ที่ 5/1 เลขที่3 นางสาวสุภาพร อินทะเสน ช้นัมธัยมศึกษาปีที่5/1 เลขที่17 นายเอกณรงค์ หลักบุญ ช้นั มัธยมศึกษาปี ที่ 5/1 เลขที่ 20 นางสาวพิชญา สุดสาร ช้นั มัธยมศึกษาปี ที่ 5/1 เลขที่ 22 นางสาวมาริษา สาสังข์ ช้นั มัธยมศึกษาปี ที่ 5/1 เลขที่ 23 ครูทปี่รึกษาโครงงาน : นายณัฐพล บัวพันธ์ ปี การศึกษา : 2567 บทคัดย่อ การทา โครงการคร้ังน้ีมีวตัถุประสงค์คือ 1.เพิ่มประสิทธิภาพในการตรวจสอบเเละให้ คะเเนนการท าบริเวณของนักเรียน 2.สนับสนุนการเรียนรู้และการพัฒนาทักษะด้านเทคโนโลยีของ นักเรี ยน คณะผู้จัดท าได้สร้างรู ปแบบแอปพลิเคชันบันทึกคะแนนการท าบริ เวณ โดยมีข้อมูล ประกอบด้วย ชื่อ-สกุล ช้ัน เลขที่โดยมีกลุ่มตวัอย่าง คือ นักเรียนช้ันมธัยมศึกษาปีที่5/1 โรงเรียน ส้มป่อยพิทยาคม ปี การศึกษา 2567 จ านวน 5 คน ผลการทา โครงการ พบวา่แอปพลิเคชนัสามารถใชง้านไดต้ามวตัถุประสงคท์ ี่ต้งัไว้สามารถ อา นวยความสะดวกและตรวจเช็คยอ้นหลงัได้อีกท้งัยงัเป็นการสนบัสนุนการเรียนรู้ดา้นเทคโนโลยแีละ สามารถนา ไปใชเ้ป็นแนวทางในการใชป้ระโยชน์ต่อไป
ค สารบัญ เรื่อง หน้า กิตติกรรมประกาศ…………………………………………………………………………… ก บทคัดย่อ……………………………………………………………………………............... ข สารบัญ……………………………………………………………………………………...... ค สารบัญภาพ……………………………………………………………………………........... จ บทที่ 1 บทน า…………………………………………………………………………………. 1 ที่มาและความส าคัญ………………………………………………………………. 1 วัตถุประสงค์………………………………………………………………………. 2 ขอบเขตของการศึกษา…………………………………………………………….. 2 ประโยชน์ที่คาดวา่จะได้รับ……………………………………………………….. 2 บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง………………………………………………………. 3 เว็บแอปพลิเคชัน………………………………………………………………….. 3 โปรแกรม Construct 2…………………………………………………………….. 4 ภาษา HTML………………………………………………………………………. 5 Firebase……………………………………………………………………………. 6 ฐานข้อมูล (Database) …………………………………………………………….. 7 บทที่ 3 วิธีด าเนินการ…………………………………………….………………………......... 8 ตอนที่ 1ขอบเขตการศึกษา............................................................................……. 8 ตอนที่ 2วัสดุอุปกรณ์............................................................................................... 8 ตอนที่ 3ข้นัตอนการด าเนินการ............................................................................... 9 ตอนที่ 4วิธีเก็บรวบรวมขอ้มูล................................................................................. 13
ง สารบัญ(ต่อ) เรื่อง หน้า บทที่ 4 ผลการด าเนินงาน…………………………………………….………………………. 15 ผลการด าเนินงาน...................................................................................................... 15 ผลการทดสอบการพัฒนาระบบ................................................................................ 15 บทที่ 5 สรุปผลและข้อเสนอแนะ …………………………………………….………………. 16 สรุปผลการพัฒนาโครงงาน..................................................................................... 16 ข้อเสนอแนะ............................................................................................................ 16 บรรณานุกรม 17 ภาคผนวก 18
จ สารบัญภาพ ภาพที่ หน้า 1 โครงสร้างการออกแบบแอปพลิเคชัน…………………………………………….......... 9 2 ข้นัตอนการออกแบบผา่น Canva..................................................................................... 9 3 การเริ่มสร้างฐานขอ้มูลใน Firebase……………………………………………………. 10 4 การเตรียมเมล็การสร้างฐานข้อมูลแบบ realtime databaseใน Firebase................................ 10 5 จัดวางหน้าแอปพลิเคชัน ใน Construct 2……………………………………………...... 11 6 การคดัลอกลิงกแ์ละขอ้มูลของ database........................................................................... 11 7 นา ลิงก์database วางลงใน FirebaseAPIV3 ใน Construct 2………………………. 12 8 เขียนโคด้คา สั่ง........................................................................................................... 12 9 เขียนโคด้คา สั่ง........................................................................................................... 12 10 เขียนโคด้คา สั่ง........................................................................................................... 13 11 การนา ขอ้มูลไปเก็บไวใ้น database……………………………………………………... 13 12 การลงบันทึกคะแนน…………………………………………….................................. 14 13 การแสดงผลคะแนนการลงบันทึกคะแนน………………………………………………. 14 15 Qr code Cleanscore …………………………………………….................................. 15
บทที่ 1 บทน ำ ที่มำและควำมส ำคัญ ปัจจุบนัความกา้วหน้าทางเทคโนโลยีสารสนเทศก่อให้เกิดการเปลี่ยนแปลงยิ่งใหญ่ต่อทุก วงการ ทวั่ โลกรวมถึงการพฒันาแอปพลิเคชันของคนไทยดว้ยและในแง่ของเทคนิควิธีการเกี่ยวกบั การศึกษาและกระบวน การพัฒนาเทคโนโลยีแอปพลิเคชันต่างๆในการใชง้าน เป็นการเรียนรู้การ พฒันาเทคโนโลยีที่ไม่มีขีดจา กัด ทา ให้คนเราหันมาให้ความส าคัญและสนใจในการพัฒนา เทคโนโลยีสารสนเทศเพื่อให้เกิดประโยชน์สูงสุด แก่ผูใ้ช้งานแอปพลิเคชันทุกคน นอกจากน้ีแลว้ เรายังต้องการเครื่องมือที่จะสามารถสร้างเน้ือหาและข้อมูลต่างๆ ไวร้องรับการเขา้ถึง นั่นก็คือ เทคโนโลยีเว็บไซต์ซึ่ งเป็ นตัวกลางคอยให้ข้อมูลต่างๆแก่ผูใ้ช้โดยการพัฒนาของเทคโนโลยี อินเทอร์เน็ตและเว็บไซต์ได้ถูกเปลี่ยนแปลงจากเดิม ในสังคมที่มีการพฒันาในทุกๆดา้น ท้งัในดา้นเศรษฐีกิจ สังคม การเมืองโดยเฉพาะอยา่ง ยงิ่ดา้นเทคโนโลยีสารสนเทศจา เป็นตอ้งอาศยัปัจจยัหลายๆประการเก้ือหนุนกนัแต่ปัจจยัหลกัของ การพัฒนาจ าเป็นต้องอาศัยทรัพยากรบุคคลที่มีคุณภาพน้ัน จะต้องมีคุณสมบัติท้ังทางด้าน สมรรถภาพทางร่างกายแข็งแรงและจิตใจที่ดี มีสติ มีความรู้ความสามารถ มีความอดทน ขยัน ขนัแข็ง ไม่ย่อทอ้ต่อความยากลา บากเผชิญปัญหาและอุปสรรคดว้ยความมุ่งมนั่คุณสมบตัิเหล่าน้ี จา เป็นตอ้งถูกหล่อหลอมใหเ้กิดข้ึนในตวับุคคล การสร้างสภาพแวดล้อมการเรียนรู้มีความส าคัญส าหรับการเรียนรู้และการท างานของทุก คนใน สถานศึกษา การจัดบรรยากาศที่เหมาะสมและสิ่งอา นวยความสะดวกที่เพียงพอสามารถสร้าง ประสบการณ์การ เรียนรู้ที่ดีข้ึนได้นักเรียนควรมีบทบาทและมีส่วนร่วมในกิจกรรมที่เกี่ยวกับ สิ่งแวดลอ้มของสถานศึกษา เพื่อให้พวกเขามีความเขา้ใจและความรับผิดชอบต่อสภาพแวดลอ้ม ของตนเองและสถานศึกษา สภาพแวดล้อมที่ดีของสถานศึกษามีส่วนส าคัญในการสร้างความคิด จิตใจและคุณธรรมที่ดีให้กบันักเรียน การจดับรรยากาศและสิ่งแวดล้อมที่สนับสนุนการพัฒนา ผู้เรียนและสถานศึกษาจะส่งผลต่อการเรียนรู้และพฒันาบุคลิกภาพของครูและนกัเรียนไดอ้ยา่งเต็ม ประสิทธิภาพ สิ่งส าคญัที่จะสร้างสภาพแวดลอ้มที่เหมาะสมส าหรับการเรียนรู้และการทา งานที่มี ประสิทธิภาพ โดยการกา หนดบทบาทของผู้เรียนและหน่วยงานในการรับผิดชอบต่อหน้าที่ของ ตนเอง จะต้องมีแรงกระตุน้หรือสิ่งเร้า เพื่อการพฒันาบุคคลพร้อมท้งัใชเ้ครื่องมือที่สะดวกสบาย
2 รวดเร็ว และสามารถตรวจเช็คข้อมูลย้อนหลงัไดอ้ย่างง่ายและถูกตอ้ง เพื่อสนับสนุนเป้าหมายใน การดูแลรักษาสิ่งแวดลอ้มที่เอ้ือต่อการเรียนรู้และการทา งานในสถานศึกษา ด้วยเหตุผลดงักล่าวคณะผูจัดท าโครงงาน ้ จึงสนใจศึกษาและจัดท าแอปพลิเคชันบันทึก การท าบริเวณของนักเรียน ที่ใช้บันทึกการท าบริเวณโดยเป็ นเครื่องมือที่สะดวกสบายและสามารถ ตรวจเช็คข้อมูลได้ อนัส่งผลต่อการพฒันาบุคคล สังคมและประเทศชาติใหย้งั่ยนืต่อไป วตัถุประสงค ์ 1.เพิ่มประสิทธิภาพในการตรวจสอบเเละใหค้ะเเนนการทา บริเวณของนกัเรียน 2.สนับสนุนการเรียนรู้และการพัฒนาทักษะด้านเทคโนโลยีของนักเรียน ขอบเขตของกำรศึกษำ ชื่อ-สกุล ช้นัเลขที่ของนกัเรียนกลุ่มตวัอยา่งไดแ้ก่ กลุ่มตัวอย่ำง นกัเรียนช้นัมธยมศึกษาปี ที่ ั 5/1 โรงเรียนส้มป่ อยพิทยาคม ปี การศึกษา 2567จ านวน 5 คน ประโยชน์ที่คำดว่ำจะได้รับ 1.ช่วยเพิ่มประสิทธิภาพและความสะดวกสบายในการบันทึกข้อมูลการท าบริเวณ 2.ช่วยเพิ่มทกัษะและความรู้เขา้ใจดา้นเทคโนโลยขีองนกัเรียน 3.คณะผูจ้ดัทา ได้เพิ่มทกัษะในการเขียนโปรแกรม และฝึ กการท างานที่มีการวางแผน อยา่งเป็นข้นัตอน
บทที่ 2 เอกสำรและงำนวิจัยที่เกี่ยวข้อง การจัดท าโครงงานรายวิชาการออกแบบเทคโนโลยีเรื่องแอปพลิเคชันบันทึกคะแนนการ ท าบริเวณของนักเรียน คณะผู้ศึกษาได้ท าการศึกษาแนวคิด หลักการและทฤษฎี โดยได้น าเสนอ รายละเอียด ดงัต่อไปน้ี 1. เว็บแอปพลิเคชัน 2. โปรแกรม Construct 2 3. ภาษา HTML 4. Firebase 5.ฐานข้อมูล (Database) 1. เว็บแอปพลิเคชัน วศิวกรรมซอฟตแ์วร์โปรแกรมประยุกตบ์นเวบ็หรือเรียกโดยทบัศพัทว์า่เวบ็แอปพลิเคชัน คือโปรแกรมประยุกต์ที่เข้าถึงด้วยโปรแกรมค้นดูเว็บผ่านเครือข่ายคอมพิวเตอร์อย่างหรือเว็บ แอปพลิเคชันเป็นที่นิยมเนื่องจากความสามารถในการอปัเดตและดูแล โดยไม่ตอ้งแจกจ่ายและ ติดต้งับนเครื่องผูใ้ช้ตวัอย่างเว็บแอปพลิเคชันได้แก่เว็บเมล การพาณิชย์อิเล็กทรอนิกส์ การ ประมูลออนไลน์ กระดานสนทนาบล็อก ( https://goo.gl/VSbx91 ) การท างานของ Web Application น้ันโปรแกรมส่วนหน่ึงจะวางตัวอยู่บน Rendering Engine (เร็นเดอริงเอนจิน) ซึ่ งตัว Rendering Engine จะทา หน้าที่หลักๆ คือน าเอาชุดคา สั่งหรือ รู ปแบบโครงสร้างข้อมูลที่ใช้ในการแสดงผล น ามาแสดงผลบนพ้ืนที่ส่วนหน่ึงในจอภาพ โปรแกรมส่วนที่วางตวัอยูบ่น Rendering Engine จะทา หนา้ที่หลกัๆ คือการเปลี่ยนแปลงแกไ้ขสิ่งที่ แสดงผลจดัการตรวจสอบขอ้มูลที่รับเขา้มาเบ้ืองตน้และการประมวลบางส่วนแต่ส่วนการทา งาน หลักๆ จะวางตัวอยู่บนเซอร์เวอร์ ในลักษณะ Web Application แบบเบ้ืองต้น ฝั่งเซิร์ฟเวอร์จะ ประกอบไปดว้ยเว็บเซิร์ฟเวอร์ซ่ึงทา หน้าที่เชื่อมต่อกบั ไคลเอนต์ตามโปรโตคอล HTTP/ HTTPS โดยนอกจากเวบ็เซิร์ฟเวอร์จะทา หน้าที่ส่งไฟล์ที่เกี่ยวเนื่องกบัการแสดงผลตามมาตรฐาน HTTP ตามปกติทวั่ ไปแล้ว เว็บเซิร์ฟเวอร์จะมีส่วนประมวลผลซ่ึงอาจจะเป็นตวัแปลภาษา เช่น Script Engine ของภาษา PHP หรืออาจจะมีการติดต้งั.NET Framework (ดอทเน็ต เฟรมเวิร์ก) ซ่ึงมีส่วน แปลภาษา CLR (ซี แอล อาร์) ที่ใช้แปลภาษา intermediate (อินเทอะมีดิอิท) จากโค้ดที่เขียนด้วย
4 B.NET (วี บี ดอทเน็ต) หรือ C#.NET (ซีฉาบ ดอทเน็ต) หรืออาจจะเป็ น J2EE ที่มีส่วนแปลไบต์โค้ด ของคลาสที่ได้จากโปรแกรมภาษาจาวา เป็ นต้น และWeb Application คือการเขียนโปรแกรมที่ให้ ตอบสนองต่อผูใ้ชม้ากที่สุด แต่รูปแบบของ Web Application จะอยู่ในรูปแบบของเวบ็ซ่ึงน้นัก็คือ สามารถใชง้านไดทุ้กหนา้จอที่มีความแตกต่างของขนาดหนา้จอเพราะมนัสามาสรถยดืหยุน่และอด ตัวได้ตามสภาพของ UI (ยูไอ) น้นัเอง (https://goo.gl/RY4FJu ) Web application คือการพฒันาระบบงานบนเวบ็ซ่ึงมีขอ้ดีคือขอ้มูลต่าง ๆ ในระบบมีการ ไหลเวียนในแบบ Online ท้ังแบบ Local (ภายในวงLAN) และ Global (ออกไปยังเครือข่าย อินเตอร์เน็ต) ท าให้เหมาะส าหรับงานที่ต้องการข้อมูลแบบ Real-time ระบบมีประสิทธิภาพ แต่ใช้ งานง่าย เหมือนกับท่านทา กา ลังท่องเว็บ ระบบงานที่พฒันาข้ึนมาจะตรงกับความต้องการกับ หน่วยงานหรือห้างร้านมากที่สุด ไม่เหมือนกบั โปรแกรมส าเร็จรูปทวั่ ไป ที่มกัจะจดัทา ระบบใน แบบกวา้ง ๆ ซ่ึงมักจะไม่ตรงกับความต้องการที่แท้จริง ระบบสามารถโต้ตอบกับลูกค้า หรื อ ผู้ใช้บริการแบบ Real Time ทา ให้เกิดความประทบั ใจเครื่องที่ใชง้านไม่จา เป็นตอ้งติดต้งัโปรแกรม ใด ๆ เพิ่มเติมท้งัสิ้น ตวัอยา่งระบบงานที่เหมาะกบัเวบ็แอพพลิเคชนั่เช่น ระบบการจองสินคา้หรือบริการต่าง ๆ เช่น การจองที่พัก การจองโปรแกรมทัวร์การจองแผ่น CD-DVD ฯลฯ ระบบงานบุคลากร ระบบงาน แผนการตลาด ระบบการสั่งซ้ือแบบพิเศษ ระบบงานในโรงเรียน เช่น ระบบงานวดัและ ประเมินผล ระบบงานปกครอง ระบบงานห้องสมุด ระบบการลงทะเบียน เช็คเกรด ฯลฯ ระบบงาน อื่น ๆ ที่ตองการน าข้อมูลมา Online ค่าใช้จ่ายในการทา เวบ็แอพพลิเคชนั่ปกติจะใช้วิธีการค านวณ จากขอบเขตของระบบงาน และปริมาณของข้อมูลที่ไหลเวียนในระบบ รวมถึงปัจจัยด้านอื่น ๆ ซึ่ง ทางเวบ็ โปรแกรมเมอร์จะคา นวณราคาออกเป็นงาน ๆ ไป ซ่ึงส่วนใหญ่จะมีค่าใชจ้่ายต่าง ๆ ต่อไปน้ี รวมกนั 2. โปรแกรม Construct 2 Construct 2 คือ Engine ส าหรับสร้างเกม 2 มิติ ด้วยภาษา HTML5 โดยลดข้นัตอนการเขียน Code ให้น้อยที่สุด ซึ่งเกมที่ใช้ภาษา HTML5 จะสามารถ Run บนอุปกรณ์ได้หลายประเภท ไมว่า่จะ เป็น PC แท็บเล็ต หรือ Smart Phone ซึ่งนนั่ ท าให้เกมที่สร้างด้วย Construct 2 มีช่องทางการเผยแพร่ หรือจดจา หน่วยได้หลายช่องทาง Quick & Easy การสร้างเกมด้วย Construct 2 สามารถท าได้ง่ายๆ ไม่กี่ข้นั ตอน เพียงแค่ คลิกลากและวางวัตถุลงหน้าจอเพิ่ม Behavior ให้วัตถุ และท าให้พวกมันมีชีวิตด้วย Event ท้งัน้ีเรา สามารถ Preview เพื่อทดลองผลงานไดเ้ท่าที่เราตองการ
5 Powerful Event System ระบบการเขียน Event ของเกมถูกออกมาให้ง่ายและใช้ภาษที่ ใกล้เคียงภาษามนุษย์เพียงแค่ผู้พัฒนาเข้าใจระบบตรรกะพ้ืนฐาน ก็สามารถสร้างเกมง่ายๆ ได้แล้ว 3. ภำษำ HTML ต้นก าเนิดของภาษา HTML เกิดจาก เมื่อปี1989 นักฟิ สิ กส์ชื่อ Tim Berners-Lee แห่ง สถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้ส าหรับ นกัวจิยัของสถาบนัเพื่อแบ่งขอ้มูลกนัและถูกพฒันามาเรื่อยๆจนถึงปัจจุบนั HTML เป็นตวัยอ่มาจาก Hypertext Markup Language เป็ นภาษาหลักที่ใช้ในการแสดงผลบนเว็บ บราวเซอร์ในอินเตอร์ โดย สามารถน าเสนอขอ้มูลตวัอกัษร รวมท้งัเชื่อมต่อเพื่อ แสดงภาพ , เสียง และไฟล์ในรูปแบบอื่นๆ ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ 1. ส่วนของคา สั่ง (tag) เป็นส่วนที่กา หนดรูปแบบของขอ้ความที่แสดง ซ่ึงเราเรียกว่า Tag โดยจะอยใู่นเครื่องหมาย < ... > 2. ส่วนของบทความทั่วๆไป เป็นส่วนของข้อควา มที่เราต้องการแสดงผล ( https://goo.gl/y7PqWx ) HTML ยอ่มาจากคา วา่ Hypertext Markup Language เป็ นภาษาหลักที่ใช้ในการสร้างไฟล์ เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document) ซ่ึงพฒันาข้ึนมา จาก ภาษ า SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee เป็ นภาษ า มาตรฐานที่ใช้พฒันาเอกสารในรูปแบบของเว็บเพจเผยแพร่บนระบบเครือข่ายอินเทอร์เน็ต มี โครงสร้างการเขียนที่อาศยัตวักา กบัเรียกวา่แท็ก(Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ เรียกใช้10 เอกสารเหล่าน้ีโดยการใช้โปรแกรมเว็บบราวเซอร์(Web Browser) เช่น Mozilla Firefox, Opera , Nescape navigator, Internet Explorer ฯลฯ เป็ นต้น ในปัจจุบัน HTML เป็ น มาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ที่เรียกว่า XHTML ซึ่ งเป็ นลักษณะของโครงสร้าง XML แบบหน่ึงที่มีหลกัเกณฑ์ในการกา หนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มา ทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กนัอยู่ในปัจจุบนัขณะที่ HTML รุ่น 5 ยงัคงยงัอยู่ในระหว่างการ พิจารณาในการใช้งานองค์ประกอบของภาษา HTML สามารถแบ่งออกได้2 ส่วน คือ ส่วนที่เป็น ขอ้ความทวั่ๆ ไปและส่วนที่เป็นคา สั่งที่ใชก้า หนดรูปแบบข้อความที่แสดง ซ่ึงเราเรียกวา่แท็กโดย แท็กค าสั่งของ HTML จะอยใู่นเครื่องหมาย< และ > (https://goo.gl/h8NR7t) ในการสร้างโฮมเพจน้นัสิ่งที่จะช่วยดึงดูดผูช้ม หรือสร้างความประทบั ใจให้กบัผูช้มก็คือ รูปลักษณ์ของโฮมเพจ จะเห็นได้จากในหลาย ๆ โฮมเพจได้มีการน าเอารูปภาพเขา้มาประกอบกบั
6 น้ือหาทา ให้โฮมเพจน้นัมีสีสัน ดูเด่นและน่าติดตามมากยงิ่ข้ึน ซ่ึงที่มาของรูปภาพเหล่าน้ีก็อาจจะมา จากการ scan หรือการออกแบบด้วยโปรแกรม graphic ต่าง ๆ เช่น photoshop, coreldraw หรือ paint shop pro ซ่ึงรูปภาพที่เรานิยมใชก้นัทวั่ ไปในการแสดงใน โฮมเพจ มีอยู่2 ชนิดคือ 1.ไฟล์ gif (compuserve graphic interchange fomat) มีนามสกุล .gif สามารถเก็บความ ละเอียดได้ ไม่เกิน 8 bit มีการบีบยอ่ยขอ้มูลมาก ทา ให้ไฟล์มีขนาดเล็ก สามารถแสดงสีได้สูงสุด 256 สีส่วน ใหญ่เราจะใชก้บัภาพที่ไม่ตอ้งการความละเอียดมาก มีสีนอ้ย ๆ เช่นภาพโลโก้นอกจากน้นัไฟลภ์าพ ชนิดน้ียงัสามารถถูกน ามาใช้ท าเป็นภาพเคลื่อนไหวที่เรียกวา่ gif animation ได้ หรืออาจจะน ามาใช้ ส าหรับภาพที่เราตอ้งการใหม้ีแบก็กราวดโ์ปร่งใส (transparent backgroud) 2.ไฟล์ jpeg (joint photographic experts group) มีนามสกุลเป็ น .jpg เหมาะส าหรับใช้งาน ส าหรับภาพที่ตอ้งการความละเอียด สามารถเก็บรายละเอียดไดถ้ึง 24 บิตสามารถแสดงสีได้เป็ น ล้าน ๆ สีซึ่งไฟลช์นิดน้ีเราสามารถกา หนดระดับในการบีดอัดข้อมูลได้อีกด้วย HTML ย่อมาจากคา ว่า HyperText Markup Language เป็ นภาษาหลักในการสร้างเว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document : ข้อความในเอกสารที่ เชื่อมโยงถึงข้อมูลต่าง ๆ ได้) ซ่ึงพัฒนามาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee ในปี ค.ศ.1990 ซึ่ งใช้ในระบบของ CERN (Conseil Europeen pour la Recherche Nucleaire) เบ้ืองตน้ ไดเ้ริ่ม ใชใ้นประเทศสวิตเซอร์แลนด์จากน้นัก็ไดแ้พร่ขยาย ออกไป ระบบน้ีไดถู้กต้งัชื่อวา่ World Wide Web ( WWW ) ที่เรารู้จกักนัมาจนถึงปัจจุบนั 4. Firebase คือชุดเครื่องมือและบริการที่ครอบคลุมซึ่งน าเสนอเป็ นแพลตฟอร์ม Backend-as-a-Service (BaaS) ช่วยให้นกัพฒันาสร้าง เปิดใช้และขยายท้งัแอปพลิเคชนัมือถือและเว็บไดอ้ย่างง่ายดายมี ฐานขอ้มูลเรียลไทม์การพิสูจน์ตวัตน พ้ืนที่เก็บขอ้มูลโฮสติ้งและคุณลกัษณะอื่นๆ อีกมากมายและ จดัการท้งัหมดได้จากแพลตฟอร์มเดียว หัวใจหลักคือFirebase มีฐานข้อมูลแบบเรียลไทม์ที่ซิงค์ ข้อมูลระหว่างอุปกรณ์ที่เชื่อมต่อท้ังหมดแบบเรียลไทม์ฐานข้อมูลใช้โมเดลข้อมูลเชิง เอกสาร NoSQL ซ่ึงช่วยให้นกัพฒันาสามารถจดัเก็บขอ้มูลในลกัษณะที่ยืดหยุ่นและปรับขนาดได้ ข้อมูลถูกจัดเก็บในรูปแบบ JSON และฐานข้อมูลรองรับธุรกรรมปรมาณูและการแจ้งเตือน เหตุการณ์ตามเวลาจริงFirebaseยงัใหบ้ริการการตรวจสอบสิทธ์ิที่มีประสิทธิภาพ ช่วยให้นกัพฒันา สามารถใช้การตรวจสอบผูใ้ชท้ ี่ปลอดภยัในแอปของตนไดอ้ย่างง่ายดาย รองรับผูใ้ห้บริการยืนยนั ตวัตนหลายราย เช่น อีเมล/รหสัผา่น หมายเลขโทรศพัท์และผใู้หบ้ริการบุคคลที่สามยอดนิยม
7 5. ฐำนข้อมูล(Database) หมายถึง ที่รวมของสารสนเทศที่สัมพนัธ์กนัแต่ละฐานข้อมูลประกอบด้วยหน่วยของ ขอ้มูลเรียกว่า แฟ้มขอ้มูล(File) โดยแต่ละแฟ้มขอ้มูลประกอบดว้ยหน่วยของขอ้มูลที่เล็กลงมาอีก ระดบัหน่ึงเรียกวา่ระเบียน (Record) และแต่ละระเบียนประกอบดว้ยหน่วยของขอ้มูลเรียกวา่เขต ข้อมูล (Field) เขตขอ้มูลประกอบไปดว้ยหน่วยของขอ้มูลที่เล็กกรองลงไปอีกคือไบตห์รืออกัขระ (Character) 5.1 ระบบฐำนข้อมูล (Database System) คือระบบที่รวบรวมขอ้มูลต่าง ๆ ที่เกี่ยวขอ้งกนั เข้าไว้ด้วยกนัอย่างมีระบบมีความสัมพนัธ์ระหว่างขอ้มูลต่าง ๆ ที่ชัดเจน ในระบบฐานข้อมูลจะ ประกอบด้วยแฟ้มขอ้มูลหลายแฟ้มที่มีขอ้มูลเกี่ยวขอ้งสัมพนัธ์กนัเขา้ไวด้ว้ยกนัอยา่งเป็นระบบและ เปิ ดโอกาสให้ผู้ใช้สามารถใชง้านและดูแลรักษาป้องกนัขอ้มูลเหล่าน้ีไดอ้ยา่งมีประสิทธิภาพ โดยมี ซอฟต์แวร์ที่ เปรียบเสมือนสื่อกลางระหวา่ง
บทที่ 3 วิธีด ำเนินกำร โครงงานเรื่อง แอปพลิเคชันบันทึกคะแนนการท าบริเวณของนักเรียนมีวัตถุประสงค์เพื่อ เพิ่มประสิทธิภาพในการดูแลติดตามการท าบริเวณของนักเรียนและสนับสนุนการเรียนรู้และการ พัฒนาทักษะด้านเทคโนโลยีของนักเรียน คณะผู้จัดท าจึงมีการด าเนินการศึกษาค้นคว้าและน าเสนอ ดงัน้ี ตอนที่ 1ขอบเขตการศึกษา ตอนที่ 2วัสดุอุปกรณ์ ตอนที่ 3ข้นัตอนการด าเนินการ ตอนที่ 4 วิธีเก็บรวบรวมขอ้มูล ตอนที่ 1 ขอบเขตกำรศึกษำ ชื่อ-สกุล ช้นัเลขที่ของนกัเรียนกลุ่มตวัอยา่งไดแ้ก่ กลุ่มตวัอยา่ง นกัเรียนช้นัมธยมศึกษาปี ที่ ั 5/1 โรงเรียนส้มป่ อยพิทยาคม ปี การศึกษา 2567จ านวน 5 คน ตอนที่ 2วสัดุอปุกรณ ์ วสัดุอุปกรณ์ 1.คอมพิวเตอร์ 2.โทรศัพท์มือถือ 3.เครือข่ายอินเตอร์เน็ต โปรแกรม 1.Canva 2.Construct 2 3.Firebase
9 ตอนที่ 3 ขั้นตอนกำรด ำเนินกำร 1. เขียนแผนผังออกแบบโครงสร้างการออกแบบแอปพลิเคชัน ภาพที่ 1โครงสร้างการออกแบบแอปพลิเคชัน 2.ออกแบบรูปแบบหน้าแอปพลิเคชัน โดยใช้ canva ภาพที่ 2ข้นัตอนการออกแบบผา่น Canva
10 3.สร้างฐานขอ้มูลเพื่อใชใ้นการเก็บรวบรวมขอ้มูลใน database ของเว็บไซต์fire base โดยท าการสร้าง project ใน firebase และสร้างฐานข้อมูลเป็ น realtime database ภาพที่ 3การเริ่มสร้างฐานขอ้มูลใน Firebase ภาพที่ 4การสร้างฐานข้อมูลแบบ realtime databaseใน Firebase
11 4.สร้าง application ในโปรแกรม construct 2 4.1 น าหน้า application ที่ได้จากการออกแบบ จัดวางใน construct 2 ภาพที่ 5จัดวางหน้าแอปพลิเคชัน ใน Construct 2 4.2 เชื่อมต่อproject construct 2กบัลิงค์database ในเว็บไซต์ firebase โดยการน า ลิงกแ์ละขอ้มูลของ database ไปกรอกใส่ใน object ที่ชื่อFirebaseAPIV3 ดังรูป ภาพที่ 6การคดัลอกลิงกแ์ละขอ้มลูของdatabase
12 ภาพที่ 7 นา ลิงก์database วางลงใน FirebaseAPIV3 ใน Construct 2 4.3 เขียนโคด้ สั่งการทา งานของ construct 2 ภาพที่ 8 เขียนโคด้คา สงั่ ภาพที่ 9 เขียนโคด้คา สงั่
13 ภาพที่ 10เขียนโคด้คา สงั่ 4.4 ทดสอบระบบและปรับปรุงแกไ้ข 5.เผยแพร่ application ตอนที่ 4วิธีเกบ็รวบรวมข้อมูล 1.เมื่อมีการสมัครใช้งานหรือลงทะเบียน ระบบจะน าข้อมูล username และ password ไปเก็บไวท้ี่database ของเว็บไซต์ firebase ภาพที่ 11การนา ขอ้มูลไปเก็บไวใ้น database 2.เมื่อจะเข้าสู่ระบบ ระบบจะตรวจสอบ username และ password ว่าตรงกับใน database ที่บนัทึกไวห้รือไม่ 2.1 หากว่า username และ password ตรงกบัขอ้มูลใน database จะสามารถเขา้สู่ ระบบและใช้งานได้ 2.2 หากวา่ username และ password ไม่ตรงกบัขอ้มูลใน database ก็จะไม่สามารถ เขา้สู่ระบบและใชง้านได้
14 3.การบันทึกคะแนน เมื่อคุณครูมีการลงบันทึกให้คะแนนการท าบริเวณของนักเรียนนักเรียน ระบบจะบันทึกคะแนนลงใน local storage ขอ application ภาพที่ 12การลงบันทึกคะแนน 4.เมื่อมีการบันทึกคะแนน คะแนนก็จะแสดงใหน้กัเรียนไดเ้ห็นคะแนนของตนเอง ภาพที่ 13การแสดงผลคะแนน
บทที่ 4 ผลกำรด ำเนินงำน ผลกำรด ำเนินงำน การจัดท าโครงงานรายวิชาการออกแบบเทคโนโลยีเรื่องแอปพลิเคชันบันทึกคะแนนการท า บริเวณของนักเรียน เน้ือหาที่เกี่ยวขอ้งกบัการสร้างแอปพลิเคชันได้แก่ชื่อ ช้นัเลขที่และคะแนนการท า บริเวณของนกัเรียนภายในห้องเรียน นกัเรียนที่มาทา บริเวณหรือไม่มาทา ในวนัน้นั แล้วสรุปคะแนนการท า บริเวณของนกัเรียนท้งัหมด โดยมีวัตถุประสงค์เพิ่มประสิทธิภาพในการตรวจสอบเเละให้คะเเนนการท า บริเวณของนักเรียน และสนับสนุนการเรียนรู้และการพัฒนาทักษะด้านเทคโนโลยีของนักเรียน คณะผู้จัดท า ได้ดา เนินงานตามข้นัตอนการดา เนินงานที่วางแผนไว้สามารถdownloadแอปพลิเคชัน Cleanscore ได้จาก ลิงกห์รือ Qr code น้ี ภาพที่ 14 Qr code Cleanscore ผลกำรทดสอบกำรพัฒนำระบบ ใ น ก าร ท ดส อ บ ก าร ส ร้ า งแ อป พ ลิ เ ค ชันบันทึ ก คะ แ นน ก า รท า บ ริ เ วณ ข อง นัก เ รี ย น Clean score ผู้จัดท าได้ใช้วิธีการทดสอบระบบ โดยการทดลองใช้แอปพลิเคชัน จากการทดสอบ พบวา่แอปพลิเคชัน Cleanscore ไดพ้ฒันาข้ึนและสามารถทา งานไดค้รบที่ตอ้งที่ ก ดหนด ไว้คือ การส มัครหรือเข้าใ ช้งาน การลงคะเ เนนการท า บริเวณ ชื่อ ช้ัน เลข ที่ ของนกัเรียนภายในห้อง เเละสรุปคะเเนนของนักเรียนท้งัหมดไดเ้เละมีระบบประกาศผล ทา ให้นักเรียน สามารถติดตามขอ้มูลข่าวสารเเละคะเเนนได้
บทที่ 5 สรุปผลและข ้ อเสนอแนะ การจัดท าโครงงานรายวิชาการออกแบบเทคโนโลยีเรื่องแอปพลิเคชันบันทึกคะแนนการท า บริเวณของนักเรียน โดยมีวัตถุประสงค์เพิ่มประสิทธิภาพในการตรวจสอบเเละใหค้ะเเนนการทา บริเวณของ นั ก เ รี ย น แ ล ะ ส นั บ ส นุ น ก า ร เ รี ย น รู้ แ ล ะ ก า ร พัฒ น า ทัก ษ ะ ด้ า น เ ท ค โ น โ ล ยี ข อ ง นั ก เ รี ย น คณะผู้จัดท าจึงได้สรุปผลการพัฒาโครงงานและข้อเสนอแนะ ดงัน้ี สรุปผลกำรพฒันำโครงงำน สรุปไดว้า่แอปพลิเคชันบันทึกคะแนนการท าบริเวณนักเรียน Cleanscore สามารถใช้งานได้ตาม วตัถุประสงค์ที่ต้งัไว้โดยช่วยอา นวยความสะดวกในการบันทึกคะแนนและติดตามการท าบริเวณของ นกัเรียน อีกท้งัยงัช่วยลดภาระงานของครูในการจดัการขอ้มูลคะแนนอย่างมีประสิทธิภาพ โดยยงัสามารถ พฒันาต่อเพื่อเพิ่มฟังก์ชนัการใช้งานที่ตอบโจทยผ์ูใ้ช้มากยิ่งข้ึนในอนาคตและเป็ นการสนับสนุนการเรียนรู้ ด้านเทคโนโลยี ซึ่งสามารถใช้เป็ นแนวทางเพื่อน าไปใช้ประโยชน์ในสถานศึกษาและเป็ นองค์ความรู้ส าหรับ การศึกษาและการทา งานของผทู้ี่สนใจในอนาคตสูงยงิ่ข้ึนไป ข้อเสนอแนะ 1.พัฒนาระบบการวิเคราะห์ผลคะแนนในรูปแบบกราฟหรือรายงานสรุป 2.จดัอบรมการใชง้านแอพพลิเคชนั่ใหก้บัครูและนกัเรียน 3.ปรับปรุงประสิทธิภาพและพฒันาแอพพลิเคชนั่อยา่งต่อเนื่อง
17 บรรณานุกรม นนัทวฒัน์ไชยรัตน์. 2560.ขอ้มูลเกี่ยวกบั HTML https://appmaster.io/th/blog/firebase-khuue-aair โ ป ร แ ก ร ม Construct 2 https://www.168training.com/training/document/คู่มือโ ป รแกร ม% 20Construct%202.pdf ปิยะดนยัวเิคียน. พ้ืนฐานภาษา HTML . ลักษณะภาษา HTML https://krupiyadanai.wordpress.com มาร์คัสอัลเลน. 2567. ความหมายและประเภทของฐานข้อมูล https://www.guru99.com/th/introduction- to-database-sql.html ระบบฐานข้อมูล. http://wbi.msu.ac.th/file/2846/doc_44930.471354166746.pdf โปรแกรมประยุกต์บนเว็บ https://th.m.wikipedia.org/wiki วรชาติ. 2561. Web Application (เว็บ แอปพลิเคชัน) คืออะไร ห้องเรียนความรู้. 2562. https://www.uds.co.th/article/2020/06/24/web-application/ แอปมาสเตอร์.ความหมายและขอ้มูลเกี่ยวกบั Fire base https://appmaster.io/th/blog/firebase-khuue-aair
18 ภาคผนวก
18