หน่วยกิต 3(30-45-60)
| รายการ | รายละเอียด |
|---|---|
| หลักสูตร | วิศวกรรมศาสตรบัณฑิต |
| สาขาวิชา | วิศวกรรมปัญญาประดิษฐ์และนวัตกรรมดิจิทัล (หลักสูตรใหม่ พ.ศ. 2567) |
| รหัสรายวิชา | 04-522-306 |
| ชื่อรายวิชา | การพัฒนาเว็บแอปพลิเคชัน |
| ชื่อภาษาอังกฤษ | Web Application Development |
| หน่วยกิต | 3(30-45-60) |
| วิชาบังคับก่อน | ไม่มี |
กระบวนทัศน์การโปรแกรมเว็บ เฟรมเวิร์กการโปรแกรมเว็บ เทคโนโลยีการออกแบบเว็บ ประกอบด้วย ภาษามาร์คอัพไฮเปอร์เท็กซ์ (HTML) แผ่นแบบต่อเรียง (CSS) JavaScript และการออกเว็บสมัยใหม่ เทคโนโลยีการโปรแกรมบนเว็บ การพัฒนาแอปพลิเคชัน WebSocket และการใช้ Linux สำหรับการพัฒนาเว็บแอปพลิเคชัน
Web programming paradigms; web programming frameworks; web design technology: HyperText Markup Language (HTML), Cascading Style Sheet (CSS), JavaScript, and modern web design; web programming technology; web application development; web socket; Linux utilization for web application development.
เมื่อเรียนจบรายวิชา ผู้เรียนสามารถ
| สัปดาห์ | หัวข้อบทเรียน | กิจกรรมการเรียนการสอน (5 ชม.) | ศึกษาค้นคว้านอกเวลา (4 ชม.) | บทเรียน/สไลด์ |
|---|---|---|---|---|
| 1 | แนะนำรายวิชาและสถาปัตยกรรมเว็บแอปพลิเคชันสมัยใหม่ | แนะนำรายวิชา, OBE, CLO, PLO, Web Architecture, Client-Server, HTTP/HTTPS | ศึกษา Web Architecture และสรุปเปรียบเทียบ Traditional Web กับ SPA | บทเรียน / สไลด์ |
| 2 | HTML5 และ CSS3 สำหรับ Responsive Web Design | บรรยาย HTML5, CSS3, Semantic HTML และ Workshop Responsive Design | ฝึกสร้าง Responsive Web Page | บทเรียน / สไลด์ |
| 3 | JavaScript ES6+ และ Front-end Framework | JavaScript Modern, DOM, Module และ Angular Framework | ศึกษา Angular Components และทำแบบฝึกหัด | บทเรียน / สไลด์ |
| 4 | Angular Components และ Routing | Components, Services, Routing, Bootstrap, Forms | พัฒนาเว็บไซต์หลายหน้า | บทเรียน / สไลด์ |
| 5 | REST API และการเชื่อมต่อ Front-end | HTTP Client, JSON, REST API Integration | ทดลองเชื่อม API สาธารณะ | บทเรียน / สไลด์ |
| 6 | Back-end Development และฐานข้อมูล | Node.js / Express หรือ Node-RED, CRUD API, PostgreSQL | ฝึกสร้าง REST API และเชื่อมฐานข้อมูล | Back-end, Database / สไลด์ Back-end, สไลด์ Database |
| 7 | Authentication และ Security | JWT Authentication, Authorization, Password Hashing, CORS | พัฒนาระบบ Login | บทเรียน / สไลด์ |
| 8 | พัฒนา Full Stack Web Application | เชื่อม Angular กับ Back-end และ Database | ปรับปรุงระบบ Full Stack | บทเรียน / สไลด์ |
| 9 | WebSocket และ Real-time Application | หลักการ Real-time, WebSocket, Notification | พัฒนา Chat หรือ Dashboard แบบ Real-time | บทเรียน / สไลด์ |
| 10 | AI API และ Machine Learning Integration | การเชื่อมต่อ OpenAI API, Gemini API หรือ AI Service | ทดลองสร้าง AI Feature ในเว็บ | บทเรียน / สไลด์ |
| 11 | Linux และ Git สำหรับนักพัฒนา | Linux Command, Git, GitHub Workflow | ฝึก Git Workflow และ Branch | บทเรียน / สไลด์ |
| 12 | Docker และ Deployment | Docker, Docker Compose, Containerization และ Deploy | Deploy ระบบบน Docker | บทเรียน / สไลด์ |
| 13 | Software Testing และ Performance Optimization | Unit Test, API Test, Debugging และ Optimization | ปรับปรุงคุณภาพระบบ | บทเรียน / สไลด์ |
| 14 | พัฒนาโครงงานเว็บแอปพลิเคชัน | Project-based Learning, Code Review, ปรึกษาโครงงาน | พัฒนาและทดสอบโครงงาน | บทเรียน / สไลด์ |
| 15 | นำเสนอและสาธิตโครงงาน | นำเสนอผลงาน สาธิตระบบ และอภิปรายผล | จัดทำรายงานฉบับสมบูรณ์ | บทเรียน / สไลด์ |
ดูรายละเอียดเกณฑ์ประเมินตามหัวข้อรายสัปดาห์ได้ที่ เกณฑ์ประเมินรายสัปดาห์
ผู้เรียนพัฒนา Full Stack Web Application จำนวน 1 ระบบ โดยมีองค์ประกอบอย่างน้อยดังนี้