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

MEAN Stack

หลักสูตร MEAN Stack เป็นการอบรมพัฒนาเว็บแอปแบบ Full Stack ด้วย Angular 22 เป็น Frontend และ Node.js กับ Express 5 เขียน REST API บน MongoDB 9.0 ครอบคลุมฟอร์มและระบบ Login ด้วย JWT เหมาะกับ Developer และ IT Manager ที่มีพื้นฐาน JavaScript และ Angular มาบ้าง จบแล้ว Deploy ระบบ CRUD ขึ้น Production ได้

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

ราคาเริ่มต้น 5,850 บาท / ท่าน 6,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

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

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

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

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

MEAN Stack คือชุดเทคโนโลยีที่ใช้ JavaScript และ TypeScript ตลอดทั้งระบบ ได้แก่ MongoDB สำหรับเก็บข้อมูล Express กับ Node.js สำหรับเขียน API และ Angular สำหรับหน้าเว็บ ทีมจึงใช้ภาษาเดียวกันได้ทั้งฝั่ง Frontend และ Backend แชร์ Model ข้อมูลร่วมกัน และพัฒนาเว็บแอปสำหรับองค์กรได้เร็ว

หลักสูตรนี้พาสร้างระบบ Full Stack ด้วยเวอร์ชันปัจจุบันทั้งชุด เริ่มจากเตรียมเครื่องมือและทบทวนภาษา ต่อด้วย Node.js 24 LTS, Express 5 และ MongoDB 9.0 ผ่าน Mongoose 9 แล้วสร้างหน้าเว็บด้วย Angular 22 ที่ใช้ Standalone Component และ Signals เชื่อมต่อ API ทำฟอร์ม ระบบ Login ด้วย JWT และปิดท้ายด้วยการ Deploy ทั้งระบบขึ้นใช้งานจริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Intermediate)

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

เข้าใจการทำงานร่วมกันของ MongoDB, Express, Angular และ Node.js
เขียน REST API ด้วย Node.js 24 LTS และ Express 5 ได้
ออกแบบข้อมูลและทำ CRUD กับ MongoDB 9.0 ผ่าน Mongoose 9 ได้
สร้างหน้าเว็บด้วย Angular 22 และเชื่อมต่อกับ API ได้
ทำงานร่วมกับ API ภายนอก (3rd Party) และทำระบบ Login ด้วย JWT ได้
Deploy โปรเจกต์ MEAN Stack ขึ้น Production ได้

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

ผู้ที่ต้องการพัฒนาเว็บแอปพลิเคชันแบบ Full Stack ด้วย JavaScript และ TypeScript
Angular Developer ที่ต้องการเขียน Backend และฐานข้อมูลเอง
Developer ที่ดูแลระบบ MEAN Stack รุ่นเดิมและต้องการอัปเดตเวอร์ชัน
IT Manager ที่ต้องการเข้าใจโครงสร้างระบบ Full Stack ของทีม

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

มีพื้นฐานการเขียนเว็บไซต์ HTML และ CSS
เขียน JavaScript ได้ ทั้ง Function, Array, Object และ async กับ await
มีพื้นฐาน Angular มาบ้าง เช่น Component และ Data Binding
เข้าใจหลักการของ Web Service และฐานข้อมูลเบื้องต้น
โน้ตบุ๊กที่ติดตั้ง Node.js รุ่น LTS, VS Code และ Docker Desktop ได้

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร MEAN Stack อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Intermediate ฉบับนี้อัปเดตจาก Angular 18 เป็น Angular 22 ที่ใช้ Standalone Component, Signals และ httpResource ใช้ Node.js 24 LTS, Express 5 และ Mongoose 9 กับ MongoDB 9.0 และใช้ ES Modules แทน CommonJS

โดยยังคงแกนเดิมคือการเตรียมเครื่องมือ พื้นฐาน JavaScript, Node.js, Event Loop, Express, Routing, CRUD, การทำงานกับ API ภายนอก และการ Deploy ฉบับเดิมเชื่อมฐานข้อมูลหลายแบบ ฉบับนี้เน้น MongoDB ตามชื่อ MEAN และเพิ่มระบบ Login ด้วย JWT กับการ Deploy ด้วย Docker ผู้เรียนได้ Lab Guide และซอร์สโค้ดระบบจัดการสินค้า Full Stack กลับไปใช้งานต่อ

Day 1 Node.js, Express 5 และ MongoDB

Section 1: Lab: เตรียมเครื่องมือ MEAN Stack

MEAN Stack ทำงานร่วมกันอย่างไร และสิ่งที่เปลี่ยนในรุ่นปัจจุบัน
ติดตั้ง Node.js 24 LTS, Angular CLI และ Extension ของ VS Code บน Windows และ macOS
รัน MongoDB ด้วย Docker หรือสร้าง Cluster ฟรีบน MongoDB Atlas
Lab: โครงโปรเจกต์ที่แยก client และ server

Section 2: JavaScript และ TypeScript สมัยใหม่

ES Modules, Destructuring, Spread และ Arrow Function
Promise, async/await และการรันงานพร้อมกันด้วย Promise.all
Type และ Interface สำหรับ Model ที่ใช้ร่วมกันทั้งสองฝั่ง
Lab: ฟังก์ชันจัดการข้อมูลสินค้าแบบ Asynchronous

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

Event Loop และ Module ในตัว เช่น node:fs/promises และ node:path
สร้าง HTTP Server ด้วย node:http และจัดการ Request กับ Response
อ่านค่าคอนฟิกด้วย --env-file และรีสตาร์ตอัตโนมัติด้วย --watch
Lab: Server อ่านไฟล์ JSON และตอบกลับเป็น API

Section 4: Lab: REST API ด้วย Express 5

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

Section 5: Lab: MongoDB 9.0 และ Mongoose 9

Document, Collection และการออกแบบข้อมูลแบบ NoSQL ด้วย mongosh
Schema, Model และ Validation ใน Mongoose 9
Middleware แบบ async และความสัมพันธ์ด้วย ref กับ populate
Lab: Model สินค้า หมวดหมู่ และผู้ใช้

Section 6: Lab: CRUD API ที่ถูกแนวทาง

เพิ่ม อ่าน แก้ไข และลบข้อมูลด้วย POST, GET, PUT และ DELETE
ตรวจข้อมูลขาเข้าด้วย Zod และรหัสสถานะ HTTP ที่ถูกต้อง
Pagination, การค้นหา และการตั้งค่า CORS
เรียก API ภายนอก (3rd Party) จากฝั่ง Server อย่างปลอดภัย
Lab: ทดสอบทุก Endpoint ด้วย REST Client หรือ Postman

Day 2 Angular 22, การเชื่อมต่อ และ Deploy

Section 7: Lab: Angular 22 สำหรับ MEAN Stack

สร้างโปรเจกต์ด้วย ng new และโครงสร้างแบบ Standalone
Signals, computed() และ Control Flow (@if, @for)
รับส่งข้อมูลระหว่าง Component ด้วย input() และ output()
Lab: หน้ารายการสินค้าที่ค้นหาและกรองได้

Section 8: Routing และ Service

กำหนด Route ด้วย provideRouter และ Lazy Loading ด้วย loadComponent
รับ Route Parameter และนำทางระหว่างหน้า
แยกตรรกะไว้ใน Service และเรียกใช้ด้วย inject()
Lab: หน้ารายการ หน้ารายละเอียด และหน้าแก้ไขสินค้า

Section 9: Lab: เชื่อม Angular กับ Express API

ตั้งค่า provideHttpClient และ Proxy ของ ng serve
อ่านข้อมูลแบบ Reactive ด้วย httpResource
เพิ่ม แก้ไข และลบข้อมูลด้วย HttpClient
Lab: หน้าจัดการสินค้าครบ CRUD พร้อมสถานะโหลดและ Error

Section 10: Lab: ฟอร์มและ Validation

Reactive Forms ด้วย FormGroup และ Validators
Signal Forms ด้วย form() และ FormField
แสดงข้อความ Error จากฝั่ง Client และจาก API
Lab: ฟอร์มเพิ่มสินค้าพร้อมอัปโหลดรูปภาพ

Section 11: Lab: Authentication ด้วย JWT

สมัครสมาชิกและเข้ารหัสรหัสผ่านด้วย bcrypt
Login, ออก JWT และ Middleware ตรวจ Token ฝั่ง Express
Interceptor แบบฟังก์ชันและ CanActivateFn ฝั่ง Angular
Lab: หน้าผู้ดูแลที่เข้าได้เฉพาะผู้ที่ Login

Section 12: Workshop: Deploy MEAN Stack ขึ้น Production

Build Angular ด้วย ng build และตั้งค่า URL ของ API ตาม Environment
เขียน Dockerfile และ Docker Compose สำหรับ API และหน้าเว็บ
ย้ายฐานข้อมูลไป MongoDB Atlas และตั้งค่าการเข้าถึง
Deploy ขึ้น Render หรือ VPS พร้อม HTTPS
Workshop: ระบบจัดการสินค้า Full Stack ที่ใช้งานได้จริง

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

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

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

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

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

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

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

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

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

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

Event Loop ใน Node.js ทำงานอย่างไร

Node.js รันโค้ด JavaScript บน Thread เดียว เมื่อเจองานที่ต้องรอ เช่น อ่านไฟล์ เรียกฐานข้อมูล หรือเรียก API จะส่งงานนั้นให้ระบบเบื้องหลังทำ แล้วรันโค้ดส่วนอื่นต่อทันที เมื่องานเสร็จ Callback หรือ Promise ที่รอผลจะถูกนำเข้าคิว และ Event Loop จะหยิบมารันเมื่อ Call Stack ว่าง Server จึงรับคำขอพร้อมกันได้จำนวนมาก แต่ควรหลีกเลี่ยงงานคำนวณหนักที่ทำให้ Thread หลักค้าง

Middleware ใน Express คืออะไร ใช้ทำอะไร

Middleware คือฟังก์ชันที่ทำงานระหว่างรับคำขอกับส่งคำตอบ เข้าถึง req, res และ next ได้ ใช้แปลง Body ด้วย express.json บันทึก Log ตรวจ Token ตรวจสิทธิ์ หรือตั้งค่า CORS ก่อนถึง Route จริง ส่วน Error Middleware ที่รับพารามิเตอร์สี่ตัวใช้รวมการจัดการ Error ไว้ที่เดียว ใน Express 5 ถ้าฟังก์ชัน async เกิด Error จะถูกส่งไปที่ Error Middleware ให้อัตโนมัติโดยไม่ต้องเขียน try catch ทุกที่

เขียน REST API ด้วย Express มีขั้นตอนอย่างไร

เริ่มจากออกแบบ Endpoint ตามทรัพยากร เช่น /api/products แล้วสร้างแอป Express 5 ใส่ Middleware อย่าง express.json แยก Route ด้วย Express Router และย้าย Logic ไปไว้ใน Controller เชื่อม MongoDB ด้วย Mongoose ตรวจข้อมูลขาเข้าด้วย Zod ส่งรหัสสถานะ HTTP ให้ถูกต้อง แล้วทดสอบทุก Endpoint ด้วย REST Client หรือ Postman ก่อนให้ Angular เรียกใช้

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

เหมาะกับผู้ที่ต้องการพัฒนาเว็บแอปแบบ Full Stack ด้วย JavaScript และ TypeScript, Angular Developer ที่อยากเขียน Backend เอง ผู้ดูแลระบบ MEAN รุ่นเดิมที่ต้องอัปเดตเวอร์ชัน และ IT Manager ที่อยากเข้าใจโครงสร้างระบบ ควรมีพื้นฐาน HTML, CSS และ JavaScript เคยเขียน Angular มาบ้าง และเข้าใจ Web Service กับฐานข้อมูลเบื้องต้น หลักสูตรมีการทบทวนภาษาให้ในช่วงแรก

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

สร้างระบบ Full Stack ได้ครบทั้งชุด ตั้งแต่ออกแบบข้อมูลใน MongoDB เขียน REST API ด้วย Express 5 ที่ตรวจข้อมูลและจัดการ Error อย่างเป็นระบบ สร้างหน้าเว็บ Angular 22 ที่เชื่อมกับ API ทำฟอร์มและระบบ Login ด้วย JWT ไปจนถึงรันทั้งระบบด้วย Docker และ Deploy ขึ้น Production พร้อมซอร์สโค้ดโปรเจกต์ตัวอย่างไว้ต่อยอดงานจริง

หลักสูตร MEAN Stack ใช้โปรแกรมอะไรบ้าง

ใช้ Node.js 24 LTS, Angular CLI, VS Code และ Docker Desktop บน Windows หรือ macOS ฐานข้อมูลใช้ MongoDB 9.0 บน MongoDB Atlas แผนใช้ฟรี หรือ MongoDB บน Docker พร้อม mongosh และ MongoDB Compass ทดสอบ API ด้วย REST Client ใน VS Code หรือ Postman และ Deploy ผ่าน GitHub ไปยัง Render หรือ VPS ทุกโปรแกรมใช้ได้ฟรี ส่วนบริการคลาวด์ใช้บัญชีของผู้เรียนเอง