ก เว็บแอปพลิเคชัน To-do list "To-do list" Webapplication โรงเรียนเสาไห้ “วิมลวิทยานุกูล” จังหวัดสระบุรี คณะผู้จัดทำโครงงาน 1. นายกนกศักดิ์ วงษ์สอน 2. นายภัทราวุธ บุญมี 3. นายบุญพักตร์ บุญภักดี รายงานนี้เป็นส่วนหนึ่งของโครงงานสาขาวิชาคอมพิวเตอร์ การนำเสนอโครงงานของนักเรียนจากโรงเรียนในโครงการห้องเรียนพิเศษวิทยาศาสตร์ คณิตศาสตร์ เทคโนโลยีและสิ่งแวดล้อม เครือข่ายภาคกลางตอนบน ประจำปีการศึกษา 2566
ข เว็บแอปพลิเคชัน To-do list "To-do list" Webapplication โรงเรียนเสาไห้ “วิมลวิทยานุกูล” จังหวัดสระบุรี คณะผู้จัดทำโครงงาน 1. นายกนกศักดิ์ วงษ์สอน 2. นายภัทราวุธ บุญมี 3. นายบุญพักตร์ บุญภักดี อาจารย์ที่ปรึกษาโครงงาน 1. นายประเจิด อู่อะรุญ 2. นางสาวสิริพร ท้วมไทย รายงานนี้เป็นส่วนหนึ่งของโครงงานสาขาวิชาคอมพิวเตอร์ การนำเสนอโครงงานของนักเรียนจากโรงเรียนในโครงการห้องเรียนพิเศษวิทยาศาสตร์ คณิตศาสตร์ เทคโนโลยีและสิ่งแวดล้อม เครือข่ายภาคกลางตอนบน ประจำปีการศึกษา 2566
ก บทคัดย่อ โครงงานเว็บแอปพลิเคชัน To-do list เป็นแอปพลิเคชันที่ช่วยให้ผู้ใช้งานสามารถ จัดการและวางแผนงานต่าง ๆ ได้อย่างเป็นระเบียบและมีประสิทธิภาพ โดยมีวัตถุประสงค์เพื่อศึกษา และสร้างแอปพลิเคชันที่สามารถใช้งานได้ เริ่มจากการหาข้อมูลในสิ่งที่ผู้ใช้งานต้องการเพื่อนำข้อมูล มาออกแบบและสร้างเว็บแอปพลิเคชัน To-do list ตามหลักการ PDCA ซึ่งเป็นกระบวนการใน การวางแผน ลงมือทำ ตรวจสอบและการปรับปรุง เพื่อให้ได้มาถึงรูปแบบของเว็บแอปพลิเคชัน To-do list และฟังก์ชันการใช้งานที่เราต้องการ โดยมีขั้นตอนดังนี้ ขั้นตอนการสร้างตัวต้นแบบ (Prototype) ครั้งที่ 1 เป็นร่างแบบลงกระดาษแล้วนำไปสอบถามความคิดเห็นผู้ใช้งานเพื่อนำข้อมูลที่ ได้มาปรับปรุงเป็นตัวต้นแบบ (Prototype) ครั้งที่ 2 โดยทำแบบร่างตัวต้นแบบในโปรแกรม figma ซึ่งเป็นโปรแกรมที่สามารถใช้ในการออกแบบตัวต้นแบบและจำลองฟังก์ชันการทำงานต่าง ๆ จากนั้น นำตัวต้นแบบที่ได้ไปสอบถามผู้ใช้งานเพื่อนำมาเขียนโปรแกรมโดยใช้ Visual Studio เริ่มจากการ เขียนโค้ดให้หน้าต่างการใช้งานตรงกับตัวต้นแบบจากนั้นนำมาเขียนโค้ดฟังก์ชันการทำงานที่เราได้ กำหนดไว้ประกอบไปด้วย (1).ระบบการสมัครเข้าใช้งานเว็บแอปพลิเคชัน To-do list (2).การเพิ่ม และลบข้อความสิ่งที่เราต้องการ (3).ปฏิทินการแจ้งเตือนเพื่อที่จะสามารถจัดตารางการทำงานได้ เมื่อได้เว็บแอปพลิเคชัน To-do list ที่สามารถใช้งานได้ตามจุดประสงค์แล้วจึงนำไปทดสอบเพื่อหา จุดบกพร่องหรือสิ่งที่สามารถพัฒนาเพื่อนำไปปรับปรุงแก้ไขตามหลักของ PDCA เพื่อทำให้เว็บ แอปพลิเคชัน To-do list สามารถใช้งานได้อย่างมีประสิทธิภาพมากที่สุด
ข กิตติกรรมประกาศ การจัดทำโครงงานเรื่อง การเว็บแอพลิเคชั่นเพื่อช่วยให้การบริหารจัดการสามารถดำเนินการ จนประสบ ความสำเร็จลุล่วงไปด้วยดี เนื่องจากได้รับความอนุเคราะห์และสนับสนุนเป็นอย่างดียิ่งจาก คุณครูประเจิด อู่อะรุญ คุณครูสิริพร ท้วมไทย คุณครูชิษณุพงศ์ เข็มนาค ที่ได้กรุณาให้คำปรึกษา ความรู้ ข้อคิดข้อแนะนำ และปรับปรุงแก้ไข ข้อบกพร่อง จนกระกระทั่งการทำโครงงาน ครั้งนี้สำเร็จ เรียบร้อยด้วยดี คณะผู้จัดทำโครงงานขอกราบขอบพระคุณเป็นอย่างสูงไว้ ณ ที่นี้ ขอขอบคุณเพื่อนร่วมงานทุกคนที่อำนวยความสะดวก และช่วยเหลือในการทำโครงงานใน ครั้งนี้ สุดท้ายนี้คณะผู้จัดทำหวังว่างานวิจัยฉบับนี้คงเป็นประโยชน์สำหรับหน่วยงานที่เกี่ยวข้อง และผู้ ที่สนใจศึกษา คณะผู้จัดทำ
ค สารบัญ หน้า บทคัดย่อ ก กิตติกรรมประกาศ ข สารบัญ สารบัญรูป สารบัญรูปภาคผนวก ค จ ฉ บทที่ 1 บทนำ 1 1.1 ที่มาและความสำคัญ 1 1.2 วัตถุประสงค์ 1 1.3 ขอบเขตของการศึกษา 2 1.4 นิยามศัพท์เฉพาะ 2 1.5 ประโยชน์ที่คาดว่าจะได้รับจากโครงงาน 3 บทที่ 2 เอกสารและงานวิจัยรที่เกี่ยวข้อง 4 2.1 แนวคิดและทฤษฏีที่เกี่ยวข้อง 4 2.1.1 ความหมายของเว็บแอปพลิเคชัน 4 2.1.2 PDCA คือ การวางแผนแก้ปัญหาอย่างยั่งยืน 5 2.1.3 หลักการออกแบบแอพพลิเคชั่น To-do list 7 2.1.4 หลักการออกแบบ UX/UI 8 2.2 งานวิจัยที่เกี่ยวข้อง 8 2.3 กรอบแนวคิดในการศึกษาวิจัย 12 บทที่ 3 วิธีการดำเนินงาน 3.1 โปรแกรมและเว็บไซต์ 3.2 วิธีการดำเนินงาน 3.2.1 สำรวจความต้องการการใช้เว็บแอบพลิเคชัน To-do list 3.2.2 ขั้นตอนการสร้างตัวต้นแบบ 3.2.3 การสร้างเว็บแอบพลิเคชัน To-do list จากชิ้นงานต้นแบบ บทที่ 4 ผลการทดลอง 4.1 ผลจากการสำรวจความต้องการการใช้เว็บแอปพลิเคชัน To-do list 4.2 ผลการออกแบบชิ้นงานต้นแบบ (Prototype) 4.3 ผลการสร้างแอปพลิเคชันจริง 13 13 13 13 13 14 15 15 15 16
ง สารบัญ(ต่อ) หน้า บทที่ 5 สรุป อภิปรายผลและข้อเสนอแนะ 5.1 สรุปและอภิปรายผล 5.2 ข้อเสนอแนะ บรรณนานุกรม ภาคผนวก ภาคผนวก ก โค้ดเว็บแอปพลิเคชันและหน้าต่างการใช้งาน ภาคผนวก ข โปรแกรมในการสร้างเว็บแอปพลิเคชัน ประวัติผู้วิจัย 17 17 17 18 19 20 22 24
จ สารบัญรูป รูปที่ หน้า 2.1 หลักการ PDCA 6 2.2 แผนผังการสร้างเว็บแอปพลิเคชัน 12 3.1 ตัวอย่างการสร้างชิ้นงานต้นแบบ (Prototype) ครั้งที่ 1 13 3.2 ปรับปรุงชิ้นงานต้นแบบ (Prototype) ครั้งที่ 2 14 3.3 นำข้อมูลที่ได้จากชิ้นงานต้นแบบ (Prototype) มาสร้างเว็บแอปพลิเคชันจริง 14 4.1 ผลการออกแบบชิ้นงานต้นแบบ (Prototype) ครั้งที่ 1 โดยการ ร่างภาพลงบนกระดาษ 15 4.2 ผลการออกแบบชิ้นงานต้นแบบ (Prototype) ครั้งที่ 2 โดยการวาดแบบ บนเว็บไซต์ figma 16 4.3 ผลการสร้างเว็บแอปพลิเคชัน To-do list จากชิ้นงานต้นแบบ (Prototype) 16
ฉ สารบัญรูปภาคผนวก รูปที่ หน้า 1 2 ขั้นตอนการเขียนโค้ดเว็บแอปพลิเคชันและหน้าต่างการใช้งาน (ก) โค้ดและหน้าสมัคร/เข้าระบบของเว็บแอปพลิเคชัน To-do list (ข) โค้ดและหน้าต่างหน้าแรกของเว็บแอปพลิเคชัน To-do list (ค) โค้ดและภายในเว็บแอปพลิเคชัน To-do list โปรแกรมในการสร้างเว็บแอปพลิเคชัน (ก) โปรแกรม Canva ใช้ในการตัดต่อภาพ (ข) โปรแกรม Visual Studio ใช้สำหรับการเขียนโค้ด (ค) โปรแกรม figma ใช้ในการออกแบบ 21 21 21 21 23 23 23 23
- 1 - บทที่ 1 บทนำ 1.1 ที่มาและความสำคัญ ในปัจจุบันปัญหาที่เกิดขึ้นจากสังคมดิจิทัลที่ทำให้เกิดสื่อและเนื้อหามากมายที่ทำให้เราไม่ สามารถมีสมาธิในสิ่งที่ทำจึงทำให้ประสิทธิภาพรวมไปถึงการจัดลำดับความสำคัญของสิ่งที่จะต้องทำ ลดลงซึ่งเป็นเรื่องที่สำคัญในยุคที่เทคโนโลยีและสื่อสังคมออนไลน์มีบทบาทสำคัญในชีวิตประจำวัน ของเรา การเล่นเกมออนไลน์หรือการใช้เวลาในสื่อสังคมออนไลน์ในช่วงเวลาที่ควรจะทำงานหรือเรียน การสอนจริงๆ ทำให้เกิดผลกระทบต่อประสิทธิภาพในการทำงานและการเรียนการสอนอย่างไม่พึง ประสงค์ บางครั้งเราอาจพลาดการทำงานหรือการเรียนเนื่องจากความหมกหมางในกิจกรรมออนไลน์ นี้ ทำให้เกิดความไม่เต็มใจและมีการลดลัดในประสิทธิภาพของงานและการเรียนรู้ เพื่อแก้ไขปัญหาดังกล่าว ผู้พัฒนาได้คิดค้นและสร้างเว็บแอปพลิเคชัน "To-do list" ขึ้นมา เพื่อช่วยให้ผู้ใช้งานสามารถจัดการและวางแผนงานต่างๆ ได้อย่างเป็นระเบียบและมีประสิทธิภาพ เว็บ แอปพลิเคชันนี้ถูกสร้างขึ้นบนเว็บไซต์และสามารถเชื่อมต่อกับเซิร์ฟเวอร์หรือฐานข้อมูล ผู้ใช้สามารถ เข้าถึงและใช้งานผ่านบราวเซอร์ที่เชื่อมต่ออินเทอร์เน็ตได้ทุกที่ โดยไม่จำเป็นต้องติดตั้งโปรแกรม เพิ่มเติมในเครื่องผู้ใช้งาน ตัวอย่างเช่น ผู้ใช้งานสามารถสร้างรายการงานที่ต้องทำ กำหนดวันเวลา สิ้นสุดสำหรับแต่ละงาน และเพิ่มคำอธิบายหรือรายละเอียดเพิ่มเติมให้กับแต่ละรายการ ทำให้งานที่ ต้องทำมีลำดับความสำคัญและเป้าหมายที่ชัดเจน เว็บแอปพลิเคชัน To-do list ช่วยให้ผู้ใช้งานสามารถวางแผนและจัดการกิจกรรมต่าง ๆ ได้ตามต้องการ รวมถึงเป็นเครื่องมือในการสร้างความระเบียบเรียบร้อยและเพิ่มประสิทธิภาพในการ ทำงานและการเรียนรู้ อีกทั้งยังช่วยในการลดความหมกหมางในกิจกรรมออนไลน์ที่ไม่เหมาะสม ผู้ใช้งานสามารถกำหนดเวลาในการทำงานและพักผ่อนได้ตามแผนการทำงาน ทำให้สามารถสลับกัน ระหว่างการทำงานและการพักผ่อนเพื่อให้การทำงานและการเรียนรู้เป็นไปอย่างมีประสิทธิภาพและ ยังคงความสมดุลได้อย่างดี ดังนั้น เว็บแอปพลิเคชัน To-do list เป็นเครื่องมือที่มีประโยชน์ในการจัดการเวลาและ กิจกรรมในชีวิตประจำวัน ช่วยในการรักษาความสมดุลและความเป็นระเบียบในการทำงาน 1.2 วัตถุประสงค์ เพื่อศึกษาและสร้างเว็บเเอปพลิเคชัน To-do list ที่สามารถใช้งานได้
- 2 - 1.3 ขอบเขตของการศึกษา 1. เนื้อหา - ศึกษาและสร้างเว็บแอปพลิเคชัน To-do list ที่สามารถใช้งานได้ 2. กลุ่มที่ศึกษา - นักเรียนระดับชั้นมัธยมศึกษาปีที่ 5 ปีการศึกษาปีที่ 2565 จำนวน 30 คน โรงเรียนเสาไห้”วิมลวิทยานุกูล” 3. สถานที่ - โรงเรียนเสาไห้"วิมลวิทยานุกูล" 1.4 นิยามศัพท์เฉพาะ - เว็บไซต์หมายถึง คือสื่อนำเสนอข้อมูลบนเครื่องคอมพิวเตอร์ หรือคือการรวบรวม หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ซึ่งต้องเปิดด้วย โปรแกรมเฉพาะทางที่เรียกว่า Web Browser โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ และ เว็บไซต์นั้นถูกสร้างขึ้นด้วยภาษาทางคอมพิวเตอร์ - แอปพลิเคชั่น หมายถึง โปรแกรมที่อำนวยความสะดวกในด้านต่างๆ ที่ออกแบบมา สำหรับอุปกรณ์เคลื่อนที่ ที่เรารู้จักกัน ซึ่งในแต่ละระบบปฏิบัติการจะมีผู้พัฒนา แอพพลิเคชั่นขึ้นมามากมายเพื่อให้ตรงกับความต้องการของผู้ใช้งาน ซึ่งจะมีให้ดาวน์ โหลดทั้งฟรีและจ่ายเงิน ทั้งในด้านการศึกษา ด้านกรสื่อสารหรือแม้แต่ด้านความ บันเทิงต่างๆ - to do list หมายถึง รายการสิ่งที่ต้องทำทีละขั้นตอนตามที่กำหนด - ภาษาคอมพิวเตอร์ หมายถึง ภาษาทางคอมพิวเตอร์ที่ใช้ในการสร้างเว็บ แอพพลิเคชั่น โดยใช้ภาษา C# ,และ SQL - โค้ดดิ้ง (Coding) หมายถึง เป็นการเขียนคำสั่งให้คอมพิวเตอร์ทำงานด้วยภาษา หรือรหัส (Code) ที่คอมพิวเตอร์เข้าใจ เช่น ภาษา Python, JavaScript และ C - การโค้ดดิ้ง (Coding) ช่วยให้เราสามารถสร้างซอฟต์แวร์คอมพิวเตอร์ รวมทั้งแอป พลิเคชันและเว็บไซต์ต่าง ๆ ได้ เทคโนโลยีมากมายที่เราใช้กันอยู่ในทุกวันนี้ ไม่ว่าจะ เป็นโซเชียลมีเดีย แอปบนสมาร์ทโฟนและแท็บเล็ตต่างก็อาศัยโค้ดทั้งสิ้น - ประสิทธิภาพของเว็บแอพลิเคชั่น คือ คือการวัดประสิทธิภาพของแอพลิเคชั่นว่า สามารถทำงานได้อย่างรวดเร็วและมีประสิทธิภาพสูงหรือไม่ ประสิทธิภาพของแอ พลิเคชั่นมีความสำคัญอย่างมากเนื่องจากมีผลต่อประสิทธิภาพของผู้ใช้และการ ให้บริการผู้ใช้ ชช เช่น ประสิทธิภาพในการโหลดหน้าเว็บที่รวดเร็ว ความสามารถใน การใช้งานได้ง่าย ความเสถียรของระบบ ฯลฯ
- 3 - - ตัวต้นแบบ (Prototype) คือแบบจำลองของผลลัพธ์ที่เราจะสร้างขึ้น โดยทำขึ้น เพื่อประโยชน์หลาย ๆ อย่าง อาจจะสร้างขึ้นเพื่อมาเพื่อเก็บข้อมูลจากผู้ใชงาน หรือ สร้างขึ้นมาเพื่อสะดวกในการสื่อสารกันในทีมอีกขั้นหนึ่ง เพราะเนื่องจากว่ามัน สามารถเล่นได้จริง มีที่เราต้องการเกิดขึ้นจริงนั่นเอง 1.5 ประโยชน์ที่คาดว่าจะได้รับจากโครงการ - ได้แอปพลิเคชันที่ใช้งานได้จริงเพื่อช่วยให้ผู้ใช้งานสามารถจัดการและวางแผนงานต่างๆ ได้ อย่างเป็นระเบียบและมีประสิทธิภาพ
- 4 - บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง การศึกษาโครงงาน เว็บแอปพลิเคชัน To-do list คณะผู้จัดทำได้ศึกษา ค้นคว้า เอกสาร และ งานวิจัยที่เกี่ยวข้อง ดังนี้ 2.1 แนวคิดและทฤษฏีที่เกี่ยวข้อง 2.1.1 ความหมายของเว็บแอปพลิเคชัน 2.1.2 PDCA คือ การวางแผนแก้ปัญหาอย่างยั่งยืน 2.1.3 หลักการออกแบบแอพพลิเคชั่น To-do list 2.1.4 หลักการออกแบบ UX/UI 2.2 งานวิจัยที่เกี่ยวข้อง 2.3 กรอบแนวคิดในการศึกษาวิจัย 2.1 แนวคิดและทฤษฏีที่เกี่ยวข้อง 2.1.1 ความหมายของเว็บแอปพลิเคชัน เว็บแอปพลิเคชัน หรือที่รู้จักกันในชื่อสั้น ๆ ว่า “เว็บแอป (Web App)" เป็นโปรแกรม คอมพิวเตอร์หนึ่งที่ทำหน้าที่เฉพาะ โดยใช้เว็บเบราว์เซอร์เป็นไคลเอนต์ (Client) ซึ่งไคลเอนต์นี้เป็น ระบบหรือแอปพลิเคชันที่สามารถเชื่อมต่อเข้ากับระบบคอมพิวเตอร์อื่นที่เรียกว่าเซิร์ฟเวอร์ได้ แอป พลิเคชันเป็นเหมือนกับกระดานข้อความหรือแบบฟอร์มการติดต่อบนเว็บไซต์และโปรแกรม ประมวลผลคำ เป็นต้น ในปัจจุบันจึงมีการพัฒนาเว็บแอปพลิเคชันควบคู่ไปกับการพัฒนาโปรแกรม เพื่อสอดคล้องต่อการใช้งานในปัจจุบัน นอกจากนี้เว็บแอปพลิเคชันยังช่วยลดความรับผิดชอบของ นักพัฒนาในการสร้างไคลเอนต์สำหรับคอมพิวเตอร์ประเภทใดประเภทหนึ่งหรือระบบปฏิบัติการ เพื่อให้ทุกคนสามารถใช้แอปพลิเคชันพร้อมเข้าถึงอินเทอร์เน็ตได้ เว็บเเอปพลิเคชันมักใช้สคริปต์ ทำงานบนฝั่งเซิร์ฟเวอร์ เช่น ASP, PHP เป็นต้น และสคริปต์ฝั่งไคลเอ็นต์ เช่น HTML, Javascript เป็นต้น เพื่อพัฒนาแอปพลิเคชัน ซึ่งทั้ง 2 ฝั่งจะทำหน้าที่แตกต่างกัน อย่างสคริปต์ฝั่งไคลเอ็นต์จะทำ หน้าที่จัดการกับการนำเสนอข้อมูล ในขณะที่สคริปต์ฝั่งเซิร์ฟเวอร์จะจัดการกับพวกการจัดเก็บข้อมูล เว็บแอปพลิเคชันมีมานานแค่ไหน เว็บแอปพลิเคชัน หรือ Web Application มีมาตั้งแต่ก่อน World Wide Web จะได้รับความนิยม โดยเริ่มพัฒนาเว็บแอปพลิเคชันที่มีความเรียบง่าย ช่วงยุค 2000 ถึง ได้เริ่มพัฒนาเว็บแอปพลิเคชันที่มีความวับซ้อนมากขึ้น และในทุกวันนี้ประชากรส่วนใหญ่ในประเทศ ไทยใช้เว็บแอปพลิเคชันในการทำธุรกรรมออนไลน์ ซึ่งมีความสะดวกและรวดเร็วมากขึ้นกว่าเดิม สรุปแล้ว Web Application นั้นมีข้อดีคือผู้ใช้งานไม่ต้องติดตั้งโปรแกรมหรือแอปฯ ให้ วุ่นวาย เพียงแค่มีอุปกรณ์ที่เชื่อมต่อ Internet และเปิดใช้งาน Web App ผ่าน Browser เว็บแอป พลิเคชันก็พร้อมใช้งานทันที นอกจากนั้นการพัฒนาก็ถือว่าไม่สิ้นเปลืองหากเทียบกับการพัฒนาแอปฯ
- 5 - ในรูปแบบอื่น หากคุณสนใจการใช้งาน Web Application ทาง Advanced iService มีบริการรับ เขียน Web Application (เว็บแอปพลิเคชัน) ที่สามารถสร้างสรรค์ Web Application คุณภาพเยี่ยม ในราคาที่คุ้มค่า 2.1.2 PDCA คือ การวางแผนแก้ปัญหาอย่างยั่งยืน PDCA คืออะไร? PDCA คือแนวคิดซึ่งถูกคิดค้นโดย Dr. Edwards W. Deming เกี่ยวกับ วงจร PDCA ที่เป็นอีกเครื่องมือหนึ่งที่สำคัญสำหรับการวางแผนแก้ปัญหาอย่างยั่งยืน ซึ่งเป็นที่นิยมใช้ เป็นอย่างมากในประเทศญี่ปุ่น ยิ่งเฉพาะบริษัท TOYOTA ที่ถือเป็นองค์กรขนาดใหญ่ระดับโลกยังมี การนำหลักการ PDCA นี้มาใช้ในกระบวนการผลิตรถยนต์ และพัฒนาจนกลายเป็น TOYOTA WAY อย่างที่รู้จักกันในปัจจุบัน ดังนั้นจึงพิสูจน์แล้วว่าหลักการ PDCA สามารถนำมาใช้เพื่อกรปรับปรุงและ พัฒนาระบบการทำงานขององค์กรให้ดีขึ้นได้แม้กระทั่งองค์กรนั้นไม่ได้เกี่ยวข้องกับการผลิตใน อุตสาหกรรม เพราะหลักการ PDCA Plan-Do-Check-Act สามารถนำมาประยุกต์ใช้ได้กับทุกงาน แม้กระทั่งการดำเนินชีวิตประจำวัน PDCA มีหลากหลายหลักการที่ทำให้เราไปถึงความสำเร็จที่เราตั้งใจไว้ ซึ่งถ้าลองวิเคราะห์โดย ใช้หลักการ Plan – Do – Check – Act เป็นกรอบในการวิเคราะห์ อาจแบ่งแยกได้เป็นดังนี้ “การ ตั้งเป้าหมาย ( Goal Setting )“ ถือเป็นจุดเริ่มต้นสำคัญของการลงมือทำในเรื่องใดเรื่องหนึ่ง เพราะ การมีเป้าหมาย หมายถึงการที่เรารู้ว่าเราจะเดินทางไปที่ไหน ยิ่งถ้ารู้ได้ว่าทำไมเราถึงต้องไป และยิ่ง มองเห็นภาพของตัวเราเมื่อไปถึงเป้าหมายนั้นชัดเจนมากเท่าไร ยิ่งเกิดแรงกระตุ้นให้เราอยากออก เดินทางไปสู่เป้าหมายนั้นโดยเร็ว PDCA มีหลากหลายหลักการที่ทำให้เราไปถึงความสำเร็จที่เราตั้งใจไว้ ซึ่งถ้าลองวิเคราะห์โดย ใช้หลักการ Plan – Do – Check – Act เป็นกรอบในการวิเคราะห์ อาจแบ่งแยกได้เป็นดังนี้ “การ ตั้งเป้าหมาย ( Goal Setting )“ ถือเป็นจุดเริ่มต้นสำคัญของการลงมือทำในเรื่องใดเรื่องหนึ่ง เพราะ การมีเป้าหมาย หมายถึงการที่เรารู้ว่าเราจะเดินทางไปที่ไหน ยิ่งถ้ารู้ได้ว่าทำไมเราถึงต้องไป และยิ่ง มองเห็นภาพของตัวเราเมื่อไปถึงเป้าหมายนั้นชัดเจนมากเท่าไร ยิ่งเกิดแรงกระตุ้นให้เราอยากออก เดินทางไปสู่เป้าหมายนั้นโดยเร็ว
- 6 - โดยหลักการ PDCA มีดังรูปที่ 2.1 ดังนี้ รูปที่ 2.1 หลักการ PDCA ที่มา : https://thaiwinner.com/pdca-cycle/ การวางแผนงาน และ กำหนดวิธีการ (Planning) หลังจากเรามีเป้าหมายแล้ว เราต้องนำเป้าหมายนั้นมากำหนดรายละเอียด สิ่งที่ต้องทำโดย เรียงตามลำดับความสำคัญ รายละเอียดขั้นตอน ปัจจัยต่างๆที่ต้องใช้ ระยะเวลาเริ่ม-สิ้นสุด บุคคล หรือทีมงานที่เกี่ยวข้องในแต่ละขั้นตอน และที่สำคัญที่สุดคือ ตัวชี้วัดผล (KPI) เนื่องจากแผนงาน หมายถึง เราจะเดินทางไปสถานที่นั้นด้วยวิธีไหน ไปถึงเมื่อไหร่ ดังนั้น ตัวชี้วัดจึงเป็นตัวที่จะคอยบอก ว่าวิธีการที่เราเลือกใช้นั้นถูกต้องหรือไม่ เร็ว-ช้าอย่างไร ทรัพยากรที่ใช้ไปเป็นไปตามแผนหรือเกินกว่า ที่กำหนดไว้ เพื่อที่จะได้ปรับแผนหรือวิธีได้อย่างทันท่วงที วางแผน(Plan) เริ่มต้นการวางแผนจะต้องมีเป้าหมายที่ชัดเจนเสียก่อน โดยขั้นตอนนี้ต้องกำหนดให้ ครอบคลุมทั้งกระบวนการตั้งแต่เริ่มไปจนถึงสุดสิ้นสุดว่า มีปัญหาอะไรที่จะต้องแก้ไข ใครเป็น ผู้รับผิดชอบที่เกี่ยวข้อง การลงมือปฏิบัติ (Do) ขั้นตอนนี้คือการลงมือปฏิบัติตามแผนงานและวิธีการที่เรากำหนดไว้อย่างมีวินัย ทักษะการ บริหารต่างๆจะถูกหยิบมาใช้ในระยะการลงมือปฏิบัตินี้ เช่น การบริหารเวลาให้ได้ตามแผน การ ประชุมเพื่อตรวจสอบความคืบหน้า การมอบหมายงานเพื่อแบ่งเบาภาระ เป็นต้น ในเรื่องที่ นอกเหนือจากการทำงาน ไม่ว่าจะเป็นการพัฒนาตัวเอง การออกกำลังกาย หรือการบริหารการเงิน ส่วนบุคคล ย่อมต้องใช้วินัยและการบริหารด้านต่างๆด้วยเช่นกัน
- 7 - การตรวจสอบ (Check) หลังจากเราเริ่มลงมือปฏิบัติไปได้สักระยะ ต้องเริ่มทำการตรวจสอบความคืบหน้าของสิ่งที่เรา ได้ลงมือปฏิบัติไปนั้นว่าเป็นไปตามแผนงานหรือไม่ ซึ่งสิ่งที่จะบ่งบอกได้ก็คือตัวชี้วัดที่เรากำหนดไว้ นั่นเอง ถ้าจุดที่เราตรวจสอบได้ผลลัพธ์ตามตัวชี้วัดที่เราตั้งไว้หรือดีกว่าแสดงว่าวิธีการที่เราเลือกใช้นั้น ยังคงถูกต้อง แต่ถ้าตรวจสอบออกมาแล้วผลปรากฏว่าต่ำกว่าตัวชี้วัดที่ตั้ง ถือเป็นสัญญาณเตือนว่ามี ความผิดปกติบางอย่างเกี่ยวกับแผนงานหรือวิธีการที่เรากำหนดไว้ในตอนแรก การปรับปรุง (Act / Action) ขั้นตอนนี้คือการปรับปรุงหรือปรับเปลี่ยนวิธีการหรือทรัพยากรบางอย่างเพื่อทำให้ผลลัพธ์ กลับมาอยู่ในแผนงานหรือเส้นทางสู่เป้าหมายตามระยะเวลาที่กำหนดไว้ในครั้งแรก ซึ่งกระบวนการ ปรับปรุงเริ่มจากการวิเคราะห์หาสาเหตุที่ทำให้ผลลัพธ์ไม่เป็นไปตามที่เราวางแผนหรือกำหนดไว้ เกิดจากองค์ประกอบหรือปัจจัยภายใน/ภายนอกใดบ้าง แล้วจึงมากำหนดมาตรการแก้ไข ปรับปรุง ต่อไป P-D-C-A อย่างต่อเนื่อง หลังจากเรากำหนดมาตรการแก้ไขแล้วจึงนำมาปรับเปลี่ยนแผนงานให้สอดคล้องกับวิธีการ และทรัพยากรที่กำหนดขึ้นมาใหม่โดยยังคงคำนึงถึงการกำหนดตัวชี้วัดที่เหมาะสม แล้วจึงเริ่มลงมือ ปฏิบัติ ตรวจสอบ ปรับปรุงแก้ไข ตามวงจร P-D-C-A อย่างต่อเนื่องจนบรรลุเป้าหมายที่ตั้งไว้ 2.1.3 หลักการออกแบบแอปพลิเคชั่น To-do list เป็นหน้าบทความเกี่ยวกับการออกแบบแอปพลิเคชั่นสำหรับการจัดการงาน To-do List ของ ผู้เขียนเองเพื่อใช้งานในชีวิตประจำวัน บทความนี้เป็นส่วนหนึ่งของหลักสูตรการฝึกอบรม UX/UI Design และมีเนื้อหาที่อธิบายถึงกระบวนการออกแบบ และการใช้เทคนิคต่าง ๆ ในการสร้าง To-do List App ที่เหมาะสมและใช้งานได้ดีกับผู้ใช้งานจริง ในบทความนี้ผู้เขียนได้แบ่งออกเป็นหลายส่วน ตั้งแต่ขั้นตอนการวางแผน การวิเคราะห์ตลาด การออกแบบ Wireframe และตัวต้นแบบตัวอย่างการใช้งานของแอพพลิเคชั่น รวมถึงผลการใช้งาน และประสิทธิภาพของแอพพลิเคชั่นที่ผู้เขียนออกแบบขึ้น โดยมุ่งเน้นที่ความเป็นมาตรฐานในด้าน UX/UI Design ซึ่งเป็นสิ่งสำคัญในการสร้างแอพพลิเคชั่นที่ใช้งานได้ดีและเป็นประโยชน์กับผู้ใช้งาน จริง ด้วยเนื้อหาที่มีคุณภาพและเป็นประโยชน์ บทความนี้จึงเป็นที่นิยมอ่านและแชร์กันอย่าง แพร่หลายในวงการ UX/UI Design และสามารถนำไปปรับใช้ได้กับการออกแบบแอพพลิเคชั่นสำหรับ งาน To-do List ของผู้ใช้งานด้วย เป็นไปได้ด้วยการนำแนวคิดและขั้นตอนการออกแบบที่ได้ถูกสร้างขึ้นใช้งานได้จริง มาปรับ ใช้กับการออกแบบแอพพลิเคชั่นสำหรับงาน To-do List ของผู้ใช้งานเอง โดยสามารถนำไปปรับแต่ง และปรับใช้ได้ตามความต้องการของผู้ใช้งาน
- 8 - การออกแบบแอพพลิเคชั่นสำหรับงาน To-do List จะต้องให้ความสำคัญกับประสิทธิภาพ และความสะดวกสบายในการใช้งาน โดยสามารถนำแนวคิดและเทคนิคต่างๆ ที่ได้รับจากบทความนี้ มาปรับใช้ให้เหมาะสมกับผู้ใช้งานเพื่อเพิ่มประสิทธิภาพในการใช้งาน อีกทั้งยังสามารถนำแนวคิดใน การวางแผนการออกแบบ การวิเคราะห์ตลาด และการสร้างตัวต้นแบบมาใช้ในการออกแบบ แอพพลิเคชั่น To-do List ของผู้ใช้งานเอง นอกจากนี้ยังสามารถนำเอกสารและสื่อต่างๆ ที่เกี่ยวข้องกับการออกแบบแอพพลิเคชั่น เช่น การวางแผนการออกแบบ UX/UI Design และการสร้างตัวต้นแบบเพื่อใช้ในการอบรมและสอนการ ออกแบบแอพพลิเคชั่นให้กับผู้ที่สนใจการออกแบบแอพพลิเคชั่นและต้องการพัฒนาทักษะในด้านนี้ได้ อีกด้วย 2.1.4 หลักการออกแบบ UX/UI นำเสนอกรณีศึกษาการออกแบบแอปพลิเคชั่น To-Do List ในแง่ของ UX/UI Design ซึ่งมี การออกแบบให้มีความสวยงาม สะดวกในการใช้งาน และมีประสิทธิภาพในการใช้งาน ในการนำไปปรับใช้จากเว็บไซต์นี้ เราสามารถนำแนวคิดและเทคนิคต่างๆ ในการออกแบบ UX/UI Design ของแอพพลิเคชั่น To-Do List มาปรับใช้ให้เหมาะสมกับผู้ใช้งานของเรา โดยสามารถ เลือกใช้สีและตัวอักษรที่เหมาะสมกับแบรนด์ของเรา และนำเสนอข้อมูลในแต่ละหน้าอย่างเข้ากันได้ โดยมีการแบ่งหน้าจอเป็นส่วนๆ ซึ่งทำให้ผู้ใช้งานสามารถใช้งานได้อย่างง่ายดายและไม่ซับซ้อน นอกจากนี้ เรายังสามารถนำการวางแผนการออกแบบ UX/UI Design และการสร้าง Wireframe และ Prototype ของแอพพลิเคชั่น To-Do List ที่มีอยู่ในเว็บไซต์นี้มาใช้เป็นแนวทางใน การออกแบบแอพพลิเคชั่น To-Do List ของเรา โดยเราสามารถปรับแต่งหรือเพิ่มเติมตามความ ต้องการของผู้ใช้งานเองได้ด้วยการใช้เทคนิคและวิธีการต่างๆที่ได้รับจากเว็บไซต์นี้ 2.2 งานวิจัยที่เกี่ยวข้อง จากการศึกษาเอกสารและงานวิจัยที่เกี่ยวข้อง พบว่า ญาณิศา บัวเผื่อน. (2557). ได้ทำการวิจัยเรื่องการเรียนการสอนบนเว็บรายวิชาสถิติทั่วไป สำหรับนักศึกษาระดับปริญญาตรีมหาวิทยาลัยราชมงคลธัญบุรี มีวัตถุประสงค์เพื่อ 1) สร้างและพัฒนาการเรียนการสอนบนเว็บรายวิชาสถิติทั่วไปสำหรับนักศึกษาระดับ ปริญญาตรีมหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี 2) เปรียบเทียบผลสัมฤทธิ์ทางการเรียนก่อนและหลังใช้พัฒนาการเรียนการสอนบนเว็บ รายวิชาสถิติทั่วไปสำหรับนักศึกษาระดับปริญญาตรีมหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี 3) ศึกษาความพึงพอใจของนักศึกษาที่มีต่อการเรียนการสอนบนเว็บรายวิชาสถิติทั่วไป สำหรับนักศึกษาระดับปริญญาตรีมหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรีกลุ่มตัวอย่างที่ใช้ในการวิจัย ครั้งนี้ ได้แก่ นักศึกษาระดับปริญญาตรีมหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรีที่ลงทะเบียนเรียน
- 9 - รายวิชาสถิติทั่วไปในภาคการศึกษาที่ 3 ปีการศึกษา 2557 จำนวน 44 คนด้วยวิธีการสุ่มกลุ่มตัวอย่าง แบบอย่างง่ายเครื่องมือที่ใช้ทดลองในการวิจัยประกอบไปด้วยแบบทดสอบวัดผลการเรียนรู้และ แบบสอบถามความพึงพอใจโดยสถิติที่ใช้ในการในการทดสอบสมมติฐาน ได้แก่ t-test Dependent ผลการวิจัยพบว่า 1) ผลจากการสร้างและพัฒนาการเรียนการสอนบนเว็บรายวิชาสถิติทั่วไปสำหรับนักศึกษา ระดับปริญญาตรีมหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรีมีประสิทธิภาพเท่ากับ 85.37 / 82,00 2) ผลการเรียนรู้หลังเรียนสูงกว่าก่อนเรียนอย่างมีนัยสำคัญทางสถิติที่ระดับ 0.05 3) ผลความพึงพอใจของนักศึกษาที่มีต่อพัฒนาการเรียนการสอนบนเว็บรายวิชาสถิติทั่วไป สําหรับนักศึกษาระดับปริญญาตรีมหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรีพบว่านักศึกษามีความพึง พอใจอยู่ในระดับมาก ลัดดาวรรณ ศรีฉิมและบัญชา สำรวยรื่น. (2559). การพัฒนาบทเรียนคอมพิวเตอร์ผ่านเว็บ ผ่านโปรแกรม Google Site ตามแนวทฤษฎีสร้างสรรค์ความรู้ เป็นรูปแบบหนึ่งในการจัดการเรียน การสอนที่กระตุ้นให้เกิดกระบวนการเรียนรู้อย่างมีเป้าหมายและมีประสิทธิภาพ โดยการวิจัยครั้งนี้มี วัตถุประสงค์เพื่อ 1) สร้างและหาประสิทธิภาพของบทเรียนคอมพิวเตอร์ผ่านเว็บ ด้วยโปรแกรม Google Site ตามแนวทฤษฎีสร้างสรรค์ความรู้ เรื่อง หลักการทำโครงงานคอมพิวเตอร์ 2) เปรียบเทียบผลสัมฤทธิ์ทางการเรียนของผู้เรียนหลังการเรียนรู้จากบทเรียนคอมพิวเตอร์ ผ่านเว็บกับเกณฑ์ร้อยละ 70 3) ศึกษาความพึงพอใจต่อการจัดการเรียนรู้โดยใช้บทเรียนคอมพิวเตอร์ผ่านเว็บของนักเรียน กลุ่มตัวอย่างที่ใช้ในการวิจัย ได้แก่ นักเรียนชั้นมัธยมศึกษาปีที่ 3 โรงเรียนนครไทย อำเภอนครไทย จังหวัดพิษณุโลก จำนวน 40 คน ที่กำลังศึกษาในหัวข้อหลักการทำโครงงานคอมพิวเตอร์ในภาคเรียน ที่ 2 ปีการศึกษา 2557 โดยวิธีการเลือกแบบเจาะจงเครื่องมือที่ใช้ในการวิจัย ได้แก่ บทเรียน คอมพิวเตอร์ผ่านเว็บ ด้วยโปรแกรม Google Site ตามแนวทฤษฎีสร้างสรรค์ความรู้เรื่อง หลักการทำ โครงงานคอมพิวเตอร์ จำนวน 6 บทเรียน แผนการจัดการเรียนรู้แบบประเมินผลงานนักเรียน แบบทดสอบวัดผลสัมฤทธิ์ทางการเรียนจำนวน 30 ข้อและแบบประเมินความพึงพอใจต่อการจัดการ เรียนรู้โดยใช้บทเรียนคอมพิวเตอร์ผ่านเว็บสถิติที่ใช้ในการวิเคราะห์ข้อมูล ได้แก่ ค่าเฉลี่ย (x) ค่าเบี่ยงเบนมาตรฐาน (S.D.) และการทดสอบสมมติฐาน โดยใช้สถิติทดสอบที กรณีกลุ่มตัวอย่างเดียว (t-test for one sample) ผลการวิจัยพบว่า 1) บทเรียนคอมพิวเตอร์ผ่านเว็บ ด้วยโปรแกรม Google Site ตามแนวทฤษฎีสร้างสรรค์ ความรู้สำหรับชั้นมัธยมศึกษาปีที่ 3 มีประสิทธิภาพ เท่ากับ 86.13/87.83 2) นักเรียนมีผลสัมฤทธิ์ทางการเรียนหลังเรียนสูงกว่าเกณฑ์ร้อยละ 70 อย่างมีนับสำคัญทาง สถิติที่ระดับ 0.05
- 10 - 3) นักเรียนที่เรียนโดยใช้บทเรียนคอมพิวเตอร์ผ่านเว็บด้วยโปรแกรม Google Site ตามแนว ทฤษฎีสร้างสรรค์ความรู้มีความพึงพอใจต่อการจัดการเรียนรู้โดยใช้บทเรียนคอมพิวเตอร์ผ่านเว็บ อยู่ในระดับมากที่สุด ศิริพล แสนบุญสงและคณะ. (2563). ได้ทำการวิจัยเรื่องการพัฒนาเว็บไซตสําเร็จรูปเพื่อการ เรียนรูเรื่อง หลักการทํางานของระบบคอมพิวเตอรสําหรับนักเรียนชั้นมัธยมศึกษาปที่ 2 โรงเรียน เทศบาลทาเรือประชานุกูล มีวัตถุประสงค์เพื่อ 1) พัฒนาเว็บไซต์สำเร็จรูปเพื่อการเรียนรู้ หลักการทำงานของระบบคอมพิวเตอร์สำหรับ นักเรียนชั้นมัธยมศึกษาปีที่ 2 โรงเรียนเทศบาลท่าเรือประชานุกูล 2) เปรียบเทียบผลสัมฤทธิ์ทางการเรียนของของนักเรียนก่อนและหลังเรียนด้วยเว็บไซต์ สำเร็จรูปเพื่อการเรียนรู้ที่พัฒนาขึ้น 3) เพื่อศึกษาความพึงพอใจของนักเรียนต่อการเรียนด้วยเว็บไซต์สำเร็จรูปเพื่อการเรียนรู้ ที่พัฒนาขึ้น กลุ่มเป้าหมายที่ใช้ในการวิจัย คือ นักเรียนชั้นมัธยมศึกษาปีที่ 2 โรงเรียนเทศบาลท่าเรือ ประชานุกูล จังหวัดพระนครศรีอยุธยา ภาคเรียนที่ 2 ปีการศึกษา 2562 จํานวน 20 คน โดยการใช้ วิธีการเลือกแบบเจาะจงเครื่องมือที่ใช้ในการวิจัยประกอบด้วย 1) แผนการจัดการเรียนรู้ 2) เว็บไซต์สำเร็จรูปเพื่อการเรียนรู้ 3) แบบทดสอบวัดผลสัมฤทธิ์ทางการเรียน 4) แบบสอบถามความพึงพอใจสถิติในการวิเคราะห์ข้อมูล ได้แก่ ค่าเฉลี่ย ค่าความเบี่ยงเบน มาตรฐาน และค่าทดสอบที่ ผลการวิจัยพบว่า 1) เว็บไซต์สำเร็จรูปเพื่อการเรียนรู้ที่พัฒนาขึ้นมีคุณภาพในภาพรวมอยู่ในระดับมากที่สุด มีค่าเฉลี่ยเท่ากับ 4.51 ส่วนเบี่ยงเบนมาตรฐานเท่ากับ 0.59 2) นักเรียนที่เรียนด้วยเว็บไซต์สำเร็จรูปเพื่อการเรียนรู้ที่พัฒนาขึ้นมีผลสัมฤทธิ์ทางการเรียน หลังเรียนสูงกว่าก่อนเรียนอย่างมีนัยสำคัญทางสถิติที่ระดับ 0.05 3) นักเรียนมีความพึงพอใจต่อการเรียนด้วยเว็บไซต์สำเร็จรูปเพื่อการเรียนรู้ภาพรวมอยู่ใน ระดับมาก มีค่าเฉลี่ยเท่ากับ 4.42 ส่วนเบี่ยงเบนมาตรฐานเท่ากับ 0.75 Margaret Bueno et al. (2565). ได้ศึกษาเกี่ยวกับการศึกษาแบบ New Normal ในช่วงที่มี การระบาดใหญ่โรงเรียน ทุกแห่งรวมทั้งสถาบันการศึกษาขั้นพื้นฐานของภาครัฐต่างไม่แน่ใจว่าควรใช้ รูปแบบการเรียนรู้ทางไกลแบบใดเพื่อบรรลุวิสัยทัศน์และให้การศึกษาที่มีคุณภาพแก่ทุกคน การเพิ่มขึ้นของเซิร์ฟเวอร์อินเทอร์เน็ตที่หลากหลายไม่ได้รับประกันว่าผู้เรียนทุกคนสามารถเข้าร่วมชั้น เรียนออนไลน์แบบเรียลไทม์ได้ในทำนองเดียวกันความสนใจและการมีส่วนร่วมของผู้เรียนดูเหมือนต่ำ เนื่องจากปัจจัยหลายอย่างที่อยู่นอกเหนือการควบคุมของครูสถานการณ์นี้ต้องการสื่อการสอน ที่ยืดหยุ่นและมีความเกี่ยวข้องมากขึ้นซึ่งนักเรียนสามารถใช้ได้ทุกที่และทุกเวลากรณีศึกษานี้ มีวัตถุประสงค์เพื่อสำรวจประสิทธิภาพและคุณลักษณะที่น่าพึงพอใจของเครื่องมือการสอนออนไลน์
- 11 - สำหรับแคลคูลัสพื้นฐานที่สร้างขึ้นโดยใช้แอปพลิเคชันบนเว็บ Google Sites และ Wordwall.net ซึ่งจะช่วยให้เรียนรู้บูรณาการขั้นพื้นฐานอย่างสนุกสนานระหว่างนักเรียน STEM ชั้นมัธยมศึกษาปีที่ 5 จาก Pamantasan ng Lungsod ng Valenzuela เนื่องจากข้อจำกัดในการกักกันการทดสอบการใช้ งานจึงทำในรูปแบบออนไลน์และผู้เข้าร่วมทำสำเร็จแบบไม่พร้อมกัน เพื่อประเมินประสบการณ์ของ ผู้ใช้ผู้เข้าร่วมตอบเครื่องมือประเมิน ซึ่งเปิดเผยว่าไซต์ช่วยให้พวกเขาบรรลุวัตถุประสงค์การเรียนรู้ และไม่มีปัญหาในการเข้าถึงผู้เข้าร่วมที่ได้รับการคัดเลือก แนะนำให้แก้ไขเล็กน้อยในแง่ของความเข้า กันได้กับอุปกรณ์ทุกประเภทผ่านการซักถามแนะนำให้ทำการวิจัยเพิ่มเติมเพื่อปรับปรุงเลย์เอาต์และ คุณสมบัติของไซต์ที่จะรับประกันความสำเร็จของผลลัพธ์ การเรียนรู้ที่คาดหวังการโต้ตอบระหว่าง ผู้เรียนและความเป็นไปได้ในทุกรูปแบบการเรียนทางไกล Muhammad Iqbal et al. (2018). ได้ ศึกษานี้มีวัตถุประสงค์เพื่ออธิบายการสร้างใบงานของนักเรียนโดยใช้ Google Form ปัญหาใน การศึกษานี้ คือขั้นตอนในการสร้างใบงานของนักเรียนโดยใช้ Google From และโครงสร้างของใบ งานที่ทำวิธีการศึกษานี้ใช้ประเภทเชิงพรรณนา เชิงคุณภาพ หัวข้อวิจัยคือผู้สอนที่ใช้ Google Form เป็นสื่อการเรียนรู้ ผู้วิจัยได้ข้อมูลจากการ สังเกต สัมภาษณ์เชิงลึก และทบทวนแหล่งข้อมูลต่างๆของ เอกสาร ผลการศึกษาแสดงให้เห็นถึงขั้นตอนในการจัดทำใบงานของนักเรียนที่มีขั้นตอนการ เตรียมการออกแบบและการดำเนินการใบงานบางรูปแบบ คือบรรยาย โมเดล ภาพและเสียง และลิงก์
- 12 - 2.3 กรอบแนวคิดในการศึกษาวิจัย มีแผนผังการสร้างเว็บแอพพลิเคชั่นดังรูปที่ 2.2 รูปที่ 2.2 แผนผังการสร้างเว็บแอพพลิเคชั่น
- 13 - บทที่ 3 วิธีการดำเนินงาน 3.1 โปรแกรมและเว็บไซต์ 1. โปรแกรม Canva ใช้ในการตัดต่อภาพ 2. โปรแกรม Visual Studio ใช้สำหรับเขียน Code 3. โปรแกรม figma ใช้ในการออกแบบ 3.2 วิธีการดำเนินงาน สำหรับวิธีการดำเนินงานทางผู้จัดทำได้แบ่งเป็น 3 ส่วน โดยมีขั้นตอนการดำเนินการดังนี้ 3.2.1 สำรวจความต้องการการใช้เว็บแอปพลิเคชัน To-do list โดยในส่วนแรกทางผู้จัดทำการสำรวจความต้องการของกลุ่มเป้าหมายถึงความต้องการ ใช้แอปพลิเคชัน To-do list ที่มีความเหมาะสมกับผู้ใช้มากที่สุดโดยมีขั้นตอน ดังนี้ 1. สร้างคำถามเพื่อเก็บข้อมูลต่อการใช้งานเว็บแอปพลิเคชัน To-do list 2. นำคำถามลงในแบบฟอร์มเพื่อสำรวจและรวบรวมข้อมูลจากกลุ่มที่เป้าหมายคือนักเรียน ระดับชั้นมัธยมศึกษาปีที่ 5 ปีการศึกษาปีที่ 2565 จำนวน 30 คน โรงเรียนเสาไห้”วิมลวิทยานุกูล” ผ่านการสำรวจและการสัมภาษณ์, สอบถามเกี่ยวกับความต้องการ, ความชอบและความคาดหวังต่อ เว็บแอปพลิเคชัน To-do list 3. วิเคราะห์ข้อมูลเพื่อหาความต้องการของกลุ่มเป้าหมายที่ต้องการใช้เว็บแอพพลิเคชัน To-do list 3.2.2 ขั้นตอนการสร้างตัวต้นแบบ 1. นำข้อมูลที่ได้จากการวิเคราะห์แบบสอบถามจากกลุ่มเป้าหมายคือนักเรียนระดับชั้น มัธยมศึกษาปีที่ 5 ปีการศึกษาปีที่ 2565 จำนวน 30 คน โรงเรียนเสาไห้”วิมลวิทยานุกูล”มาเป็นข้อมูล ในการใช้สร้างชิ้นงานต้นแบบ ดังรูปที่ 3.1 รูปที่ 3.1 ตัวอย่างการสร้างชิ้นงานต้นแบบ (Prototype) ครั้งที่ 1
- 14 - 2. นำชิ้นงานต้นแบบ (Prototype) ครั้งที่ 1 จากรูป 3.1 ไปสอบถามเพื่อให้ได้ความคิดเห็น และข้อเสนอแนะที่มีประโยชน์มาปรับปรุงชิ้นงานสำหรับสร้างเว็บแอปพลิเคชัน To-do list 3. นำข้อมูลที่ได้จากการนำชิ้นงานต้นแบบ (Prototype) ครั้งที่ 1 สอบถามกลุ่มเป้าหมาย มาปรับปรุงชิ้นงานต้นแบบ (Prototype) ครั้งที่ 2 โดยทำแบบร่างตัวต้นแบบในโปรแกรม figma ซึ่งเป็นโปรแกรมที่ใช้ในการออกแบบตัวต้นแบบและจำลองฟังก์ชันการทำงานต่าง ๆ ดังรูปที่ 3.2 รูปที่ 3.2 ปรับปรุงชิ้นงานต้นแบบ (Prototype) ครั้งที่ 2 3.2.3 การสร้างเว็บแอปพลิเคชัน To-do list จากชิ้นงานต้นแบบ (Prototype) 1. นำข้อมูลที่ได้จากชิ้นงานต้นแบบ (Prototype) ครั้งที่ 2 มาทำการสร้างเว็บแอปพลิเคชัน จริงด้วยการเขียนโปรแกรม ผ่านโปรแกรม Visual Studio เพื่อใช้ในการเขียนโค้ดดังรูปที่ 3.3 รูปที่ 3.3 นำข้อมูลที่ได้จากชิ้นงานต้นแบบ (Prototype) มาสร้างแอปพลิเคชันจริง
- 15 - บทที่ 4 ผลการทดลอง จากการศึกษาและสร้างเว็บแอปพลิเคชัน To-do list สามารถแบ่งผลการทดลองได้ดังนี้ 4.1. ผลจากการสำรวจความต้องการการใช้เว็บแอปพลิเคชัน To-do list จากผลการสำรวจความต้องการการใช้เว็บแอปพลิเคชัน To-do list มีข้อมูลดังนี้ 1. จากผู้ที่ตอบแบบ พบว่าร้อยละ 88.2 ไม่เคยใช้แอปพลิเคชัน To-do list เพื่อการจดบันทึก และการบริหารการทำงาน ส่วนร้อยละ 11.8 ของผู้ตอบแบบสอบถามเคยใช้แอปพลิเคชัน To-do list เพื่อการจดบันทึกและการบริหารการทำงาน 2. พบผู้ที่หลงลืมสิ่งที่ต้องทำเป็นประจำคิดเป็นร้อยละ 56 ของผู้ตอบแบบสอบถาม พบผู้ที่ หลงลืมสิ่งที่ต้องทำบ่อยครั้งคิดเป็นร้อยละ 24 และพบผู้ที่หลงลืมสิ่งที่ต้องทำเป็นบางครั้งคิดเป็น ร้อยละ 20 ของผู้ตอบแบบสอบถาม 4.2 ผลการออกแบบชิ้นงานต้นแบบ (Prototype) 1. จากการรวบรวมข้อมูลจากกลุ่มที่เป้าหมายคือนักเรียนระดับชั้นมัธยมศึกษาปีที่ 5 ปี การศึกษาปีที่ 2565 จำนวน 30 คน โรงเรียนเสาไห้”วิมลวิทยานุกูล” ได้ข้อมูลสำหรับสร้างชิ้นงาน ต้นแบบ (Prototype) ครั้งที่1 ดังรูปที่ 4.1 รูปที่ 4.1 ผลการออกแบบชิ้นงานต้นแบบ (Prototype) ครั้งที่ 1 โดยการร่างภาพลงบนกระดาษ 2. จากการรวบรวมข้อมูลจากกลุ่มที่เป้าหมายโดยนำชิ้นงานต้นแบบ (Prototype) ครั้งที่ 1 ไปสอบถามเพื่อให้ได้ความคิดเห็นและข้อเสนอแนะที่มีประโยชน์มาปรับปรุงชิ้นงานต้นแบบ (Prototype) ครั้งที่ 2 สำหรับสร้างเว็บแอปพลิเคชัน To-do list โดยทำแบบร่างตัวต้นแบบใน โปรแกรม figma ดังรูปที่ 4.2
- 16 - รูปที่ 4.2 ผลการออกแบบชิ้นงานต้นแบบ (Prototype) ครั้งที่ 2 โดยการวาดแบบบนเว็บไซต์ figma 4.3 ผลการสร้างเว็บแอปพลิเคชันจริง 1. นำข้อมูลที่ได้จากตัวต้นแบบ (Prototype) ครั้งที่ 2 มาทำการสร้างเว็บแอปพลิเคชัน To-do list จริงด้วยการเขียนโปรแกรม Visual Studio ดังรูปที่ 4.3 เริ่มจากการเขียนโค้ดให้หน้าต่างการใช้งานตรงกับตัวต้นแบบจากนั้นนำมาเขียนโค้ดฟังก์ชัน การทำงานที่เราได้กำหนดไว้ประกอบไปด้วย (1).ระบบการสมัครเข้าใช้งานเว็บแอปพลิเคชัน To-do list (2).การเพิ่มและลบข้อความสิ่งที่เราต้องการ (3).ปฏิทินการแจ้งเตือนเพื่อที่จะสามารถจัดตารางการทำงานได้ รูปที่ 4.3 ผลการสร้างเว็บแอปพลิเคชัน To-do list จากชิ้นงานต้นแบบ (Prototype)
- 17 - บทที่ 5 สรุป อภิปรายผลและข้อเสนอแนะ 5.1 สรุปและอภิปรายผล การศึกษาและสร้างเว็บแอปพลิเคชัน To-do list ช่วยให้ผู้ใช้งานสามารถจัดการและวางแผน งานต่าง ๆ ได้อย่างเป็นระเบียบและมีประสิทธิภาพ โดยสามารถสรุปขั้นตอนการสร้างได้ดังนี้ ขั้นสำรวจข้อมูล หาข้อมูลในสิ่งที่ผู้ใช้งานต้องการเพื่อนำข้อมูลมาออกแบบตัวต้นแบบ (Prototype) ครั้งที่1 แล้วนำไปสอบถามความคิดเห็นผู้ใช้งานเพื่อนำข้อมูลที่ได้มาปรับปรุงเป็นตัวต้นแบบ (Prototype) ครั้งที่ 2 โดยทำแบบร่างตัวต้นแบบในโปรแกรม figma เพื่อให้เห็นรูปลักษณ์พื้นฐาน เนื่องจากการทำลงบนโปรแกรม figma สามารถทำให้เราเห็นถึงฟังก์ชันการทำงานได้อย่างเสมือนจริง เมื่อได้ต้นแบบหน้าต่างการใช้งานที่ต้องการแล้วเราจึงนำไปเขียนโค้ดในโปรแกรม Visual Studio และเขียนโค้ดฟังก์ชันการทำงานที่เราต้องการให้มีในเว็บแอปพลิเคชัน To-do list และนำไปทดลอง เพื่อหาข้อบกพร่องมาแก้ไขตามหลัก PDCA 5.2 ข้อเสนอแนะ 1. ควรออกแบบรูปแบบเว็บแอปพลิเคชัน To-do list ให้ใช้งานง่าย กระชับ และมี ประสิทธิภาพ เพื่อให้ผู้ใช้งานสามารถเพิ่มรายการทำงานและจัดการรายการที่มีอยู่ได้โดยง่าย 2. พัฒนาความสามารถเพิ่มเติม เช่น การแบ่งหน้าตาแบบเป็นหมวดหมู่, การเปิดใช้งานแจ้ง เตือนผ่านอีเมลหรือแอปพลิเคชันมือถือ 3. ทดสอบเพื่อตรวจสอบความถูกต้องและประสิทธิภาพของแอปพลิเคชัน และทำการ ปรับปรุงตามความต้องการของผู้ใช้งาน
- 18 - บรรณานุกรม Application แอพพลิเคชั่น คืออะไร. [ออนไลน์]. ค้นวันที่ 24 กันยายน 2565. แหล่งที่มา : https://www.mangoconsultant.com/th/news-knowledge/knowledge/274- application%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%9E%E0%B8%A5% E0%B8%B4%E0%B9%80%E0%B8%84%E0%B8%8A%E0%B8%B1%E0%B9%88% E0%B8%99%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0 %E0%B9%84%E0%B8%A3?. ความหมายและประเภทของแอพพลิเคชั่น. [ออนไลน์]. ค้นวันที่ 24 กันยายน 2565. แหล่งที่มา : https://sites.google.com/site/psupattar475/khwam-hmay-laea-prapheth-khxngxaeph-phli-khechan? เว็บไซต์ (Website) คืออะไร?. [ออนไลน์]. ค้นวันที่ 24 กันยายน 2565. แหล่งที่มา : https://www.webmaster.or.th/website? Web application คืออะไร? ต่างจากเว็บไซต์ทั่วไปอย่างไร?. [ออนไลน์]. ค้นวันที่ 24 กันยายน 2565. แหล่งที่มา : https://1stcraft.com/website-application-vs-general-website/? Coding คืออะไร ความสำคัญและเทคนิคการสอน โค้ดดิ้ง (Coding)?. [ออนไลน์]. ค้นวันที่ 24 กันยายน 2565. แหล่งที่มา : https://www.twinkl.co.th/teaching-wiki/khod-dingcoding? ภาษาคอมพิวเตอร์คืออะไร. [ออนไลน์]. ค้นวันที่ 24 กันยายน 2565. แหล่งที่มา : https://sites.google.com/a/chiangdao.ac.th/programming2/bi-khwam-ru/phasakhxmplhiwtexr-khux-xari? Mini Game อีกหนึ่งความสนุกสีสันภายในเกม. [ออนไลน์]. ค้นวันที่ 24 กันยายน 2565. แหล่งที่มา : https://playpost.gg/know-more-about-mini-games/?
- 19 - ภาคผนวก
- 20 - ภาคผนวก ก ขั้นตอนการเขียนโค้ดเว็บแอปพลิเคชันและหน้าต่างการใช้งาน
- 21 - (ก) โค้ดและหน้าสมัคร/เข้าระบบของเว็บแอปพลิเคชัน To-do list (ข) โค้ดและหน้าต่างหน้าแรกของเว็บแอปพลิเคชัน To-do list (ค) โค้ดและภายในเว็บแอปพลิเคชัน To-do list รูปที่ 1 ขั้นตอนการเขียนโค้ดเว็บแอปพลิเคชันและหน้าต่างการใช้งาน
- 22 - ภาคผนวก ข โปรแกรมในการสร้างเว็บแอปพลิเคชัน
- 23 - (ก) โปรแกรม Canva ใช้ในการตัดต่อภาพ (ข) โปรแกรม Visual Studio ใช้ สำหรับการเขียนโค้ด (ค) โปรแกรม figma ใช้ในการออกแบบ รูปที่ 2 โปรแกรมในการสร้างเว็บแอปพลิเคชัน
- 24 - ประวัติผู้วิจัย ชื่อ-สกุล นายกนกศักดิ์ วงษ์สอน วัน เดือน ปีเกิด 19 สิงหาคม พ.ศ. 2548 ประวัติการศึกษา ระดับชั้นมัธยมศึกษา โรงเรียนเสาไห้ “วิมลวิทยานุกูล” ชื่อ-สกุล นายภัทราวุธ บุญมี วัน เดือน ปีเกิด 20 กรกฎาคม พ.ศ. 2548 ประวัติการศึกษา ระดับชั้นมัธยมศึกษา โรงเรียนเสาไห้ “วิมลวิทยานุกูล” ชื่อ-สกุล นายบุญพักตร์ บุญภักดี วัน เดือน ปีเกิด 03 พฤศจิกายน พ.ศ. 2548 ประวัติการศึกษา ระดับชั้นมัธยมศึกษา โรงเรียนเสาไห้ “วิมลวิทยานุกูล”