พัฒนาเว็บไซต์ · WDC-58

MEVN Stack

หลักสูตร MEVN Stack เป็นการอบรมพัฒนาเว็บแอปแบบ Full Stack ด้วย MongoDB, Express 5, Vue 3 และ Node.js 24 ตั้งแต่ออกแบบข้อมูล REST API และ Frontend ด้วย Vue Router กับ Pinia จนถึงระบบ Login และการ Deploy เหมาะกับนักพัฒนาและ IT Manager ที่มีพื้นฐาน JavaScript จบแล้วพัฒนาเว็บแอป Full Stack ได้เอง

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 9,900 บาท / ท่าน 11,000 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา30 ชั่วโมง · 5 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

MEVN Stack คือชุดเทคโนโลยีสำหรับพัฒนาเว็บแอปแบบ Full Stack ด้วย JavaScript ภาษาเดียว ประกอบด้วย MongoDB ฐานข้อมูล NoSQL ที่เก็บข้อมูลเป็นเอกสาร Express เฟรมเวิร์กสำหรับสร้าง REST API บน Node.js และ Vue.js เฟรมเวิร์ก Frontend ที่เรียนรู้ง่ายและได้รับความนิยมสูง ทุกส่วนพัฒนาต่อเนื่อง เช่น Express 5 ที่จัดการ Error ของ async ให้อัตโนมัติ และ Vue 3 ที่ใช้ script setup เป็นแนวทางหลัก นักพัฒนาจึงควรเรียนตามแนวทางปัจจุบันเพื่อสร้างระบบที่ดูแลต่อได้ง่าย

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ที่เริ่มจาก JavaScript สมัยใหม่และ Node.js 24 สร้าง REST API ด้วย Express 5, MongoDB และ Mongoose 9 แล้วสร้าง Frontend ด้วย Vue 3.5, Vue Router 5 และ Pinia 4 ต่อด้วยระบบ Login ด้วย JWT ความปลอดภัย และการทดสอบ API ปิดท้ายด้วย Workshop ระบบ Full Stack ตั้งแต่ออกแบบจนถึง Deploy ด้วย Docker และ MongoDB Atlas (อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง ระดับ Intermediate)

สิ่งที่คุณจะได้รับ

เข้าใจโครงสร้าง MEVN Stack และเตรียมสภาพแวดล้อมการพัฒนาด้วย Node.js 24 LTS ได้
ใช้ MongoDB และ Mongoose 9 ออกแบบข้อมูลและทำ CRUD ได้
สร้าง RESTful API ด้วย Express 5 พร้อมตรวจข้อมูลและจัดการ Error ได้
สร้าง Frontend ด้วย Vue 3.5, Vue Router 5 และ Pinia 4 ที่เชื่อมกับ REST API ได้
ทำระบบยืนยันตัวตนด้วย JWT และกำหนดสิทธิ์ผู้ใช้อย่างปลอดภัยได้
พัฒนาและ Deploy เว็บแอปแบบ Full Stack ด้วย MEVN Stack ได้ด้วยตนเอง

หลักสูตรนี้เหมาะสำหรับ

ผู้ที่ต้องการพัฒนาเว็บแอปพลิเคชันด้วย JavaScript และ MEVN Stack
นักพัฒนา Frontend ที่ต้องการต่อยอดไปทำ Backend และฐานข้อมูล
นักพัฒนาที่ใช้ MEVN รุ่นเก่าและต้องการปรับเป็นแนวทางปัจจุบัน
IT Manager และหัวหน้าทีมที่ต้องการเข้าใจการพัฒนาแบบ Full Stack

พื้นฐานของผู้เข้าอบรม

มีพื้นฐาน HTML, CSS และ JavaScript มาบ้าง
เคยใช้ CSS Framework เช่น Bootstrap หรือ Tailwind CSS มาบ้างจะช่วยให้เรียนได้เร็วขึ้น
เข้าใจหลักการของ API และการใช้ฐานข้อมูลเบื้องต้น

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร MEVN Stack 2025 เนื้อหาอัปเดตเป็น Node.js 24 LTS, Express 5, Mongoose 9, Vue 3.5, Vue Router 5 และ Pinia 4 อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Intermediate ผู้เรียนจะได้ใช้ MongoDB ออกแบบข้อมูล สร้าง REST API ด้วย Express 5 สร้าง Frontend ด้วย Vue 3 ทำระบบ Login ด้วย JWT ทดสอบ API ด้วย Vitest แล้วพัฒนาระบบ Full Stack ใน Workshop จนถึง Deploy ด้วย Docker และ MongoDB Atlas พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ

Day 1 เริ่มต้น MEVN, JavaScript และ Node.js

Section 1: Lab: รู้จัก MEVN Stack และเตรียมเครื่องมือ

MEVN Stack ทำงานร่วมกันอย่างไร และ Single Page Application คืออะไร
ติดตั้ง Node.js 24 LTS, npm, VS Code และ Git
รัน MongoDB 8 ด้วย Docker หรือสร้าง Cluster ฟรีบน MongoDB Atlas
สร้างโปรเจกต์ Vue ด้วย npm create vue@latest และทดสอบรัน
Lab: โครงโปรเจกต์ที่แยก client และ server

Section 2: Lab: JavaScript สมัยใหม่สำหรับ Full Stack

let, const, Arrow Function, Destructuring และ Spread
Array Method ที่ใช้บ่อยกับข้อมูลจาก API
ES Modules (import และ export) เทียบกับ CommonJS (require)
Promise, async/await และการจัดการ Error
Lab: ฟังก์ชันแปลงและสรุปข้อมูลคำสั่งซื้อ

Section 3: Lab: Node.js 24 พื้นฐาน

Single Thread, Event Loop และงาน Asynchronous
REPL, node:fs/promises, node:path และ EventEmitter
สร้าง HTTP Server ด้วยโมดูล node:http
อ่านค่าคอนฟิกด้วย --env-file และรีสตาร์ตอัตโนมัติด้วย --watch
Lab: Server อ่านไฟล์ JSON และตอบกลับเป็น API

Section 4: Lab: Git และ GitHub สำหรับโปรเจกต์

git init, add, commit และ .gitignore สำหรับโปรเจกต์ Node.js
Branch และการรวมงาน
เพิ่ม Remote และ push ขึ้น GitHub
clone โปรเจกต์และติดตั้ง Dependency ใหม่
Lab: นำโครงโปรเจกต์ขึ้น GitHub ของผู้เรียน

Day 2 MongoDB, Mongoose และ Express 5

Section 5: Lab: MongoDB พื้นฐาน

Document, Collection และการออกแบบข้อมูลแบบ NoSQL
CRUD ด้วย mongosh และ MongoDB Compass
Query, Projection, Sort และ Index
Aggregation Pipeline เบื้องต้นสำหรับรายงาน
Lab: ฐานข้อมูลสินค้าและคำสั่งซื้อพร้อมรายงานยอดขาย

Section 6: Lab: Express 5

สร้าง Server ด้วย Express 5 และโครงสร้างโฟลเดอร์
Routing, Express Router และรูปแบบ Path ที่เปลี่ยนใน Express 5
Middleware, express.json และไฟล์ Static
Error Middleware และการส่ง Error จาก async อัตโนมัติ
Lab: API สินค้าแบบแยก Router และ Controller

Section 7: Lab: Mongoose 9

เชื่อมต่อ MongoDB และจัดการการเชื่อมต่อ
Schema, Model, timestamps และ Validation ใน Schema
CRUD ด้วย Model และ Query Helper
ความสัมพันธ์ด้วย ref และ populate
Lab: Model สินค้า หมวดหมู่ และผู้ใช้

Section 8: Lab: RESTful API ที่ถูกแนวทาง

ออกแบบ Endpoint และรหัสสถานะ HTTP ที่ถูกต้อง
ตรวจข้อมูลขาเข้าด้วย Zod และรูปแบบ Error ที่สม่ำเสมอ
Pagination, การค้นหา และการเรียงลำดับ
ตั้งค่า CORS ให้ Vue เรียกใช้ได้
Lab: ทดสอบทุก Endpoint ด้วย VS Code REST Client

Day 3 Frontend ด้วย Vue 3.5

Section 9: Lab: เริ่มต้น Vue 3.5

Single File Component และ script setup
Template Syntax, Attribute Binding และ Class กับ Style Binding
Conditional Rendering และ List Rendering
Event Handling และฟอร์มด้วย v-model
Lab: หน้ารายการสินค้าที่กรองและค้นหาได้

Section 10: Lab: Reactivity และ Component

ref, reactive, computed และ watch
Component, props และ emits
v-model บน Component ด้วย defineModel และ Slot
จัด UI ด้วย Tailwind CSS หรือ Bootstrap
Lab: ชุด Component การ์ดสินค้า ตะกร้า และฟอร์ม

Section 11: Lab: Vue Router 5

กำหนด Route, RouterLink และ RouterView
Dynamic Route, Nested Route และ Query
Navigation Guard และการโหลดหน้าแบบ Lazy
ภาพรวม File-based Routing ที่มากับ Vue Router 5
Lab: แอปหลายหน้า รายการ รายละเอียด และหน้าแก้ไข

Section 12: Lab: Pinia 4 และ Composables

สร้าง Store แบบ Setup ด้วย state, getters และ actions
แชร์ข้อมูลระหว่างหน้าโดยไม่ส่ง props หลายชั้น
เขียน Composable สำหรับเรียก API และสถานะการโหลด
ตรวจ State ด้วย Vue DevTools
Lab: Store ตะกร้าสินค้าและผู้ใช้

Day 4 เชื่อม Frontend กับ API และความปลอดภัย

Section 13: Lab: เชื่อม Vue กับ REST API

เรียก API ด้วย fetch หรือ Axios และตั้ง Proxy ใน Vite
แสดงสถานะโหลด ข้อมูลว่าง และ Error
ฟอร์มเพิ่ม แก้ไข และลบข้อมูลผ่าน API
อัปโหลดรูปภาพจาก Vue ไปยัง Express
Lab: หน้าจัดการสินค้าครบ CRUD

Section 14: Lab: Authentication ด้วย JWT

สมัครสมาชิกและเข้ารหัสรหัสผ่านด้วย bcrypt
Login และออก JSON Web Token พร้อมเวลาหมดอายุ
Middleware ตรวจ Token ในฝั่ง Express
เก็บ Token ใน httpOnly Cookie หรือ Header แบบ Bearer และข้อดีข้อเสีย
Lab: API สมัครสมาชิก Login และข้อมูลส่วนตัว

Section 15: Lab: จัดการ Session และสิทธิ์ใน Vue

Auth Store ด้วย Pinia และการตรวจสถานะเมื่อเปิดแอป
Route Guard สำหรับหน้าที่ต้อง Login
สิทธิ์ตามบทบาท เช่น admin และ user ทั้งฝั่ง API และหน้าเว็บ
จัดการ Token หมดอายุและออกจากระบบ
Lab: หน้าผู้ดูแลระบบที่เข้าได้เฉพาะ admin

Section 16: Lab: ความปลอดภัยและการทดสอบ API

Helmet, Rate Limit และการจำกัดขนาดคำขอ
เก็บค่าลับในไฟล์ .env และไม่ส่งรายละเอียด Error ให้ผู้ใช้
บันทึก Log ของคำขอและ Error
ทดสอบ API ด้วย Vitest และ Supertest
Lab: ชุดทดสอบ Login และ CRUD สินค้า

Day 5 Workshop ระบบ Full Stack และ Deploy

Section 17: Workshop: ออกแบบระบบ

เก็บความต้องการของระบบจองห้องประชุมหรือร้านค้า
ออกแบบ Collection และความสัมพันธ์ของข้อมูล
เขียนรายการ Endpoint และรูปแบบข้อมูล
วางหน้าจอและ Flow การใช้งานของ Vue
แบ่งงานเป็น Branch ใน Git

Section 18: Workshop: พัฒนา Backend และ Frontend

สร้าง Model, Router และ Controller ตามที่ออกแบบ
สร้างหน้าจอ Vue พร้อม Router และ Pinia
เชื่อม CRUD และ Login เข้ากับ API
ตรวจข้อมูลทั้งสองฝั่งและแสดง Error ที่อ่านง่าย
ทดสอบการใช้งานครบทั้ง Flow

Section 19: Lab: เตรียมระบบสำหรับ Production

Build Vue สำหรับ Production และตั้งค่า URL ของ API
แยกค่าคอนฟิกตามสภาพแวดล้อมด้วย Environment Variables
เขียน Dockerfile และ Docker Compose สำหรับ API
ย้ายฐานข้อมูลไป MongoDB Atlas และตั้งค่าการเข้าถึง
Lab: รันทั้งระบบด้วย Docker บนเครื่อง

Section 20: Workshop: Deploy และนำเสนอผลงาน

Deploy API และ Frontend ขึ้น Render หรือ VPS
ตั้งค่า CORS, HTTPS และ Domain ให้ถูกต้อง
แก้ปัญหาที่พบบ่อยจากการ Deploy
ตรวจ Checklist ความปลอดภัยก่อนเปิดใช้งาน
นำเสนอผลงานและแนวทางต่อยอด

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

MEVN Stack ประกอบด้วยอะไรบ้าง แต่ละส่วนทำหน้าที่อะไร

MEVN ย่อมาจาก MongoDB, Express, Vue.js และ Node.js โดย MongoDB เป็นฐานข้อมูล NoSQL ที่เก็บข้อมูลเป็นเอกสารรูปแบบคล้าย JSON ส่วน Node.js คือสภาพแวดล้อมที่รัน JavaScript ฝั่งเซิร์ฟเวอร์ Express เป็นเฟรมเวิร์กบน Node.js สำหรับสร้าง REST API และ Vue.js ใช้สร้างหน้าเว็บแบบ Single Page Application ที่เรียก API นั้น โดยมี Vue Router จัดการหน้า และ Pinia จัดการข้อมูลกลางของแอป ทั้งระบบจึงเขียนด้วย JavaScript ภาษาเดียว

JWT คืออะไร ใช้ยืนยันตัวตนในเว็บแอปอย่างไร

JWT (JSON Web Token) คือโทเค็นที่บรรจุข้อมูลผู้ใช้และเวลาหมดอายุ พร้อมลายเซ็นที่เซิร์ฟเวอร์สร้างจากคีย์ลับ เมื่อล็อกอินสำเร็จ เซิร์ฟเวอร์ออก JWT ให้ แล้วฝั่ง Vue ส่งโทเค็นกลับมาทุกครั้งที่เรียก API ผ่าน httpOnly Cookie หรือ Header Authorization แบบ Bearer และ Middleware ใน Express ตรวจลายเซ็นกับเวลาหมดอายุก่อนอนุญาต ไม่ควรใส่ข้อมูลลับในโทเค็นเพราะส่วนข้อมูลถอดอ่านได้ และควรกำหนดอายุโทเค็นให้สั้นพอเหมาะ

สร้าง REST API ด้วย Express และ MongoDB มีขั้นตอนอย่างไร

เริ่มจากสร้างโปรเจกต์ด้วย npm init ติดตั้ง Express 5 และ Mongoose จากนั้นกำหนด Schema และ Model ของแต่ละ Collection สร้าง Router แยกตามทรัพยากร และเขียน Controller สำหรับ GET, POST, PUT และ DELETE ใส่ Middleware อย่าง express.json() ตรวจข้อมูลขาเข้าด้วย Zod และตั้งค่า CORS ให้ฝั่ง Vue เรียกได้ ใน Express 5 ฟังก์ชัน async ที่เกิด Error จะถูกส่งไปยัง Error Middleware อัตโนมัติ แล้วส่งรหัสสถานะ HTTP ให้ถูกต้องและทดสอบแต่ละ Endpoint ก่อนเชื่อมกับหน้าเว็บ

หลักสูตร MEVN Stack เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้ที่ต้องการพัฒนาเว็บด้วย JavaScript และ MEVN Stack นักพัฒนา Frontend ที่อยากต่อยอดไปทำ Backend นักพัฒนาที่ใช้ MEVN รุ่นเก่าและอยากปรับเป็นแนวทางปัจจุบัน และ IT Manager ควรมีพื้นฐาน HTML, CSS และ JavaScript เข้าใจหลักการของ API และมีพื้นฐานการใช้ฐานข้อมูล ถ้าเคยใช้ CSS Framework อย่าง Bootstrap หรือ Tailwind CSS มาบ้างจะเรียนได้เร็วขึ้น

เรียนจบหลักสูตร MEVN Stack แล้วทำอะไรได้บ้าง

ออกแบบข้อมูลและทำ CRUD ใน MongoDB ด้วย Mongoose 9 สร้าง REST API ด้วย Express 5 พร้อมตรวจข้อมูลด้วย Zod สร้างหน้าเว็บด้วย Vue 3.5 ทั้ง Component, Vue Router 5 และ Pinia 4 เชื่อมหน้าเว็บกับ API ทำระบบ Login ด้วย JWT และกำหนดสิทธิ์ผู้ใช้ ทดสอบ API ด้วย Vitest ใช้ Git และ Deploy ระบบ Full Stack ด้วย Docker และ MongoDB Atlas ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

เรียน MEVN Stack ต้องใช้โปรแกรมอะไรบ้าง

ใช้ Node.js 24 LTS และ npm สร้างโปรเจกต์ Vue ด้วยคำสั่ง npm create vue@latest ซึ่งใช้ Vite ใช้ฐานข้อมูล MongoDB บน Docker หรือ MongoDB Atlas แบบใช้ฟรี คู่กับ MongoDB Compass เขียนโค้ดด้วย Visual Studio Code ใช้ Git กับบัญชี GitHub ทำ Version Control และใช้ Docker Desktop กับบัญชี Render แบบใช้ฟรีหรือ VPS ของผู้เรียนสำหรับ Deploy ซึ่งติดตั้งและทดสอบร่วมกันในช่วงแรกของการอบรม