การพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End | Software Development with Front-End Technology : 1-4-3

รหัสวิชา
Course Code
31901-2004
ทฤษฎี-ปฏิบัติ-หน่วยกิต
Theory-Practice-Credits
1-4-3
ชื่อวิชา
Course Name
การพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
Software Development with Front-End Technology
ผลลัพธ์การเรียนรู้ระดับรายวิชา
Learning outcomes at the course level

พัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End เพื่อออกแบบส่วนติดต่อผู้ใช้ตามหลักการ ด้วยความละเอียด รอบคอบ รับผิดชอบ การสื่อสารและการทำงานเป็นทีม

=============================================================
ประยุกต์ใช้หลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End เพื่อออกแบบส่วนติดต่อผู้ใช้

จุดประสงค์การเรียนรู้ เพื่อให้
Objective To

1. เข้าใจการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
2. มีทักษะในการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
3. มีเจตคติและกิจนิสัยที่ดีในการปฏิบัติงานด้วยความละเอียดรอบคอบ รับผิดชอบ การสื่อสาร
การคิดเชิงนวัตกรรมและการทำงานเป็นทีม
4. มีความสามารถประยุกต์ใช้หลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End ในงานอาชีพ

=============================================================
1. เข้าใจการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
2. พัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
3. มีเจตคติและกิจนิสัยที่ดีในการปฏิบัติงานด้วยความละเอียดรอบคอบ รับผิดชอบ การสื่อสารการคิดเชิงนวัตกรรมและการทำงานเป็นทีม
4. ประยุกต์ใช้หลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End ในงานอาชีพ

สมรรถนะการเรียนรู้
Performance

1. ประมวลความรู้เกี่ยวกับหลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End ตามหลักการ
2. พัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End ตามหลักการและกระบวนการ
3. ทดสอบและแก้ไขข้อผิดพลาดของซอฟต์แวร์ ตามหลักการและกระบวนการ
4. จัดทำคู่มือการใช้งานตามหลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
5. ประยุกต์ใช้หลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End ในงานอาชีพ

=========================================================
1. แสดงความรู้เกี่ยวกับหลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
2. พัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
3. ทดสอบและแก้ไขข้อผิดพลาดของซอฟต์แวร์
4. จัดทำคู่มือการใช้งานตามหลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End

คำอธิบายรายวิชา
Description

ศึกษาและปฏิบัติเกี่ยวกับหลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End ความหมาย ความสำคัญ ประโยชน์ของการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End เลือกใช้ภาษาและเทคโนโลยีสมัยใหม่ในการพัฒนา (Vue/React/Angular/ฯลฯ ) การทำงานร่วนกันเป็นทีม(Version Control System)
ดำเนินการพัฒนาโปรแกรมแบบ Integration ตกแต่งเอกสารด้วย UI Component Library/CSS Framework เขียนโปรแกรมเชื่อมต่อ RESTful API/Web Services เขียนโปรแกรมติดต่อฐานข้อมูลแบบ SQL/NoSQL การทำ Authentication ในรูปแบบ JSON Web Token/Session หาจุดผิดพลาด ตามบันทึกข้อผิดพลาด แก้ไขข้อผิดพลาดของโปรแกรม ทดสอบการแก้ไขข้อผิดพลาดของโปรแกรม อ่าน Functional/Program Specification/UML เขียนโปรแกรมตาม Functional/Program Specification/ UML ออกแบบการทดสอบ Integration Test ดำเนินการทดสอบโปรแกรมแบบ Integration Test จัดทำรายงาน ศึกษาการใช้งาน โปรแกรมที่พัฒนาขึ้น จัดทำคู่มือการใช้งานโปรแกรม ตรวจสอบความถูกต้องของคู่มือการใช้งานโปรแกรม
การส่งมอบซอฟต์แวร์เพื่อให้สามารถใช้งานได


======================================================
ข้อมูลก่อนประกาศใช้
ศึกษาและปฏิบัติเกี่ยวกับหลักการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End ความหมาย ความสำคัญ ประโยชน์ ของการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End เลือกใช้ภาษาและเทคโนโลยี ในการพัฒนา เช่น Vue, React, Angular เป็นต้น การทำงานร่วนกันเป็นทีม ติดตั้งเครื่องมือในการพัฒนาออกแบบและพัฒนาซอฟต์แวร์ตามการออกแบบ ให้รองรับการทำงานแบบ Responsive Web Design การจัดการหน้าจอ(State Management) การจัดการ Components การจัดการ Event ตกแต่งเอกสารด้วย CSS Framework การจัดการ Router เขียนโปรแกรมเชื่อมต่อ RESTful API/Web Services เขียนโปรแกรมติดต่อฐานข้อมูลแบบ SQL หรือแบบ NoSQL เขียนโปรแกรมรับ-ส่งข้อมูลรูปแบบ HTML, XML, JSON หรือ format อื่น ๆ ระบบความปลอดภัย Validation ,JSON Web Token การส่งออกซอฟต์แวร์เพื่อให้สามารถอัพโหลดขึ้นเซิร์ฟเวอร์ได้ (Deployment build)

จัดทำคู่มือการใช้งานโปรแกรม(บรรยายการทำงานของโปรแกรม บรรยายการใช้งานโปรแกรม บรรยายข้อจำกัดการใช้งานโปรแกรม สร้างคู่มือการใช้งานโปรแกรม รวบรวมฟังก์ชันการทำงานของโปรแกรมสร้างแบบตรวจสอบความถูกต้องของคู่มือการใช้งานโปรแกรม ตรวจสอบแบบตรวจสอบความถูกต้องของคู่มือการใช้งานโปรแกรม ตรวจสอบคู่มือการใช้งานโปรแกรมตามแบบฟอร์มที่กำหนด) (**frontend/backend**)

ทดสอบโปรแกรมแบบ Integration Test(กำหนด/ตรวจสอบเงื่อนไข Entry Criteria , วิเคราะห์ SRS (ในมุมของIntegration) , จัดทำ/ปรับปรุง Test Case ทั้ง Functional/non-Functional (ในมุมของ Integration Test ให้สอดคล้อง SRS version) , จัดทำ checklist (ในมุมของIntegration) , จัดทำ test plan (ในมุมของIntegration) define exit criteria/) , จัดทำ test strategy , ดำเนินการ verify Software/SRS version , ทดสอบ Component/Unit Integration , ทดสอบ System/Service Integration , บันทึกผลการทดสอบแต่ละ Test Case , ระบุระดับของ Defect , วิเคราะห์และสรุปผลการทดสอบ Integration Test (Defect/Severity/rework) , รายงานและนำเสนอผลการทดสอบ Execution Test (ประเมิน exit criteria) (**frontend/backend**)

แก้ไขข้อผิดพลาด (ระบุตำแหน่งจุดที่มีข้อผิดพลาด อธิบายสาเหตุของข้อผิดพลาดที่เกิดขึ้น อธิบายผลกระทบจากข้อผิดพลาดที่เกิดขึ้นกับโปรแกรมย่อย เสนอหรือแนะนำวิธีการแก้ไขข้อผิดพลาดในแต่ละจุด รวจสอบจุดอ่อนหรือช่องโหว่ของโปรแกรม แก้ไขจุดผิดพลาดตามที่มีการระบุตำแหน่งไว้แล้ว อธิบายวิธีการแก้ไขข้อผิดพลาดที่เกิดขึ้น แก้ไขจุดอ่อนหรือช่องโหว่ของโปรแกรม กำหนดแผนการทดสอบโปรแกรมย่อยหลังรับการแก้ไขจุดผิดพลาดแล้ว แผนการทดสอบโปรแกรมย่อยต้องเป็นไปตามลำดับการทำงานของโปรแกรม แผนการทดสอบโปรแกรมย่อยต้องคำนึงถึงความมั่นคงปลอดภัยโดยการเลือกวิธีป้องกัน) (**frontend/backend**)

อ้างอิงมาตรฐาน
Reference

มาตรฐานอาชีพ สถาบันคุณวุฒิวิชาชีพ อาชีพ นักพัฒนาระบบ ระดับ 4

===============================================
1. มาตรฐาน สถาบันคุณวุฒิวิชาชีพ รหัส ICT-TGWL-008B สาขาวิชาชีพอุตสาหกรรมดิจิทัล สาขาซอฟต์แวร์และการประยุกต์ อาชีพนักพัฒนาระบบ ระดับ 4

หน่วยสมรรถนะ
Unit Of Criteria (UOC)

1.แก้ไขข้อผิดพลาด
2.ดำเนินการพัฒนาโปรแกรมแบบ Integration
3.ทดสอบโปรแกรมแบบ Integration Test
4.จัดทำคู่มือการใช้งานโปรแกรม

หน่วยสมรรถนะย่อย
Elements Of Criteria (EOC)

1.1. หาจุดผิดพลาด ตามบันทึกข้อผิดพลาด
1.2. แก้ไขข้อผิดพลาดของโปรแกรม
1.3. ทดสอบการแก้ไขข้อผิดพลาดของโปรแกรม
2.1.อ่าน Functional/ Program Specification/ UML
2.2.เขียนโปรแกรมตาม Functional/ Program Specification/ UML
3.1 ออกแบบการทดสอบ Integration Test
3.2 ดำเนินการทดสอบ Integration Test
3.3 จัดทำรายงาน
4.1 ศึกษาการใช้งานโปรแกรมที่พัฒนาขึ้น
4.2 จัดทำคู่มือการใช้งานโปรแกรม
4.3 ตรวจสอบความถูกต้องของคู่มือการใช้งานโปรแกรม

เกณฑ์ในการปฏิบัติงาน
Performance Criteria (PC)

1.1.1 ระบุตำแหน่งจุดที่มีข้อผิดพลาด
1.1.2 อธิบายสาเหตุของข้อผิดพลาดที่เกิดขึ้น
1.1.3 อธิบายผลกระทบจากข้อผิดพลาดที่เกิดขึ้นกับโปรแกรมย่อย
1.1.4 เสนอหรือแนะนำวิธีการแก้ไขข้อผิดพลาดในแต่ละจุด
1.1.5 ตรวจสอบจุดอ่อนหรือช่องโหว่ของโปรแกรม
1.2.1 แก้ไขจุดผิดพลาดตามที่มีการระบุตำแหน่งไว้แล้ว
1.2.2 อธิบายวิธีการแก้ไขข้อผิดพลาดที่เกิดขึ้น
1.2.3 แก้ไขจุดอ่อนหรือช่องโหว่ของโปรแกรม
1.3.1 กำหนดแผนการทดสอบโปรแกรมย่อยหลังรับการแก้ไขจุดผิดพลาดแล้ว
1.3.2 แผนการทดสอบโปรแกรมย่อยต้องเป็นไปตามลำดับการทำงานของโปรแกรม
1.3.3 แผนการทดสอบโปรแกรมย่อยต้องคำนึงถึงความมั่นคงปลอดภัยโดยการเลือกวิธีป้องกัน

2.1.1 เขียน Pseudo code / Flowchart/ UML (เข้าใจลำดับ) ในระดับ Integration System
2.1.2 บอกผลลัพธ์ของ Functional/ Program Specification (เข้าใจผลลัพธ์) ในระดับ Integration System
2.2.1 แยกโมดูลย่อยตามพฤติกรรมการทำงาน ในระดับ Integration System
2.2.2 เขียนโปรแกรมตาม Functional/ Program Specification/ UMLในระดับ Integration System
2.2.3 ตรวจสอบผลลัพธ์ของโปรแกรมตามที่กำหนดใน Functional/ Program Specification/ UML

3.1.1. กำหนด/ตรวจสอบเงื่อนไข Entry Criteria
3.1.2. วิเคราะห์ SRS (ในมุมของIntegration)
3.1.3. จัดทำ/ปรับปรุง Test Case ทั้ง Functional/non-Functional (ในมุมของ Integration Test ให้สอดคล้อง SRS version)
3.1.4. จัดทำ checklist (ในมุมของIntegration)
3.1.5. จัดทำ test plan (ในมุมของIntegration) define exit criteria/)
3.1.6. จัดทำ test strategy
3.2.1. ดำเนินการ verify Software/SRS version
3.2.2. ทดสอบ Component/Unit Integration
3.2.3. ทดสอบ System/Service Integration
3.2.4. บันทึกผลการทดสอบแต่ละ Test Case
3.2.5. ระบุระดับของ Defect
3.3.1. วิเคราะห์และสรุปผลการทดสอบ Integration Test (Defect/Severity/rework)
3.3.2. รายงานและนำเสนอผลการทดสอบ Execution Test (ประเมิน exit criteria)

4.1.1 บรรยายการทำงานของโปรแกรม
4.1.2 บรรยายการใช้งานโปรแกรม
4.1.3 บรรยายข้อจำกัดการใช้งานโปรแกรม
4.2.1 สร้างคู่มือการใช้งานโปรแกรม
4.2.2 รวบรวมฟังก์ชันการทำงานของโปรแกรม
4.3.1 สร้างแบบตรวจสอบความถูกต้องของคู่มือการใช้งานโปรแกรม
4.3.2 ตรวจสอบแบบตรวจสอบความถูกต้องของคู่มือการใช้งานโปรแกรม
4.3.3 ตรวจสอบคู่มือการใช้งานโปรแกรมตามแบบฟอร์มที่กำหนด

การออกแบบหน่วยการเรียนรู้
Learning Unit Design

1. บทนำ
อธิบายความหมายและความสำคัญของการพัฒนาซอฟต์แวร์ด้วยเทคโนโลยี Front-End
ยกตัวอย่างเว็บไซต์และแอปพลิเคชันที่ใช้เทคโนโลยี Front-End
แนะนำเทคโนโลยี Front-End ยอดนิยม เช่น HTML, CSS, JavaScript, Vue.js, React.js, Angular

2. พื้นฐานการพัฒนาเว็บ
โครงสร้างพื้นฐานของเว็บ (HTTP, TCP/IP)
ภาษา HTML สำหรับสร้างโครงสร้างเว็บ
ภาษา CSS สำหรับตกแต่งหน้าเว็บ
ภาษา JavaScript สำหรับเพิ่มปฏิสัมพันธ์ให้กับเว็บ

3. JavaScript Framework
แนะนำ JavaScript Framework ยอดนิยม เช่น Vue.js, React.js, Angular
เปรียบเทียบข้อดีข้อเสียของ JavaScript Framework แต่ละตัว
ฝึกเขียนโปรแกรมด้วย JavaScript Framework ที่เลือก

4. การจัดการ State และ Routing
อธิบายแนวคิด State Management
เทคนิคการจัดการ State เช่น Vuex, Redux, MobX
อธิบายแนวคิด Routing
ตัวอย่าง Router Library เช่น Vue Router, React Router, Angular Router

5. การเชื่อมต่อ API
อธิบาย RESTful API
เขียนโปรแกรมเชื่อมต่อ API ด้วย JavaScript
ฝึกสร้าง API ง่ายๆ ด้วย Node.js หรือ Python

6. การจัดการฐานข้อมูล
อธิบายระบบฐานข้อมูลแบบ SQL และ NoSQL
เขียนโปรแกรมติดต่อฐานข้อมูล SQL ด้วย JavaScript (เช่น MySQL, PostgreSQL)
เขียนโปรแกรมติดต่อฐานข้อมูล NoSQL ด้วย JavaScript (เช่น MongoDB)

7. การรับ-ส่งข้อมูล
รูปแบบข้อมูล JSON, XML
เขียนโปรแกรมรับ-ส่งข้อมูล JSON และ XML ด้วย JavaScript

8. ความปลอดภัย
แนวทางปฏิบัติที่ดีที่สุดสำหรับความปลอดภัย Front-End
การป้องกัน XSS, CSRF, SQL Injection
การรับรองความถูกต้องและการอนุญาต

9. การ Deployment
วิธีการ Deployment เว็บไซต์และแอปพลิเคชัน Front-End
เครื่องมือ Deployment เช่น Netlify, Vercel, AWS Amplify

10. การทดสอบ
หลักการทดสอบซอฟต์แวร์
เทคนิคการทดสอบ Front-End
เครื่องมือทดสอบ Front-End เช่น Mocha, Jest, Cypress

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

12. กรณีศึกษา
วิเคราะห์และออกแบบเว็บไซต์หรือแอปพลิเคชัน Front-End
พัฒนาเว็บไซต์หรือแอปพลิเคชัน Front-End
ทดสอบและแก้ไขข้อผิดพลาด
เขียนคู่มือการใช้งาน
นำเสนอผลงาน

แนวทางการสอน
Teaching Guidelines

เน้นการเรียนรู้แบบ Active Learning โดยให้นักเรียนมีส่วนร่วมในกิจกรรมต่างๆ เช่น การฝึกปฏิบัติ การอภิปราย การนำเสนอ
ใช้กรณีศึกษาและตัวอย่างจากโลกแห่งความเป็นจริง
ส่งเสริมให้นักเรียนคิดวิเคราะห์และแก้ปัญหา
เน้นทักษะการสื่อสารและการทำงานเป็นทีม

เครื่องมือ/แหล่งข้อมูล
Tools Resources

เครื่องมือ
Web browser
Text editor
เครื่องมือออกแบบ UI/UX
JavaScript Framework (Vue.js, React.js, Angular.js)
API
เครื่องมือทดสอบ (Selenium)
เครื่องมือ Deploy

แหล่งข้อมูล
หนังสือ: Getting Started with HTML, CSS, and JavaScript
เว็บไซต์: https://www.w3schools.com/