คอร์สอบรม Angular / MEAN Stack พัฒนาเว็บและ API ด้วย MongoDB Express.js Angular 17 และ Node.js

สอนการใช้ MEAN Stack (MongoDB, Express.js, Angular และ Node.js) เพื่อสร้างเว็บและ API แบบ Monorepo ด้วย Nx

สามารถเลือกการเรียนแบบใดแบบหนึ่ง คือ
รอบสอนสดออนไลน์
8,950 ฿
(วันอบรม 15 - 16, 21 - 23 ก.พ. 2567)
วิดีโอบันทึกการสอน
6,950 ฿
รายละเอียด
ความคิดเห็น

รายละเอียดคอร์ส

MEAN Stack เป็นหนึ่งในการรวมของเทคโนโลยีชื่อดังที่ได้รับความนิยมในการพัฒนาทั้งเว็บและ API โดยใช้ภาษาเดียวคือ JavaScript / TypeScript นักพัฒนาจึงสามารถสร้างสรรค์ผลงานได้อย่างรวดเร็ว

คอร์สอบรมนี้จัดทำขึ้นเพื่อสอนการใช้ภาษา TypeScript ในการพัฒนาเว็บแอพพลิเคชั่นด้วย Angular 17 เพื่อเชื่อมต่อการทำงานไปยัง RESTful API ที่ถูกพัฒนาด้วย Express.js นอกจากนี้ผู้เรียนยังจะได้รับการอบรมการสร้างโปรเจคแบบ monorepo ด้วย Nx และขั้นตอนการทำ Deploy ด้วย Docker เป็นต้น

ส่วนของ Front-End ผู้เรียนจะได้เรียนรู้การใช้งาน TypeScript กับ Angular โดยเนื้อหาจะครอบคลุมถึง Component-Based Design, การใช้งาน NgModules เพื่อแบ่งแยกฟีเจอร์ต่าง ๆ ออกจากกันแบบ Feature Modules, หลักการของ Dependency Injection และ Services, การใช้งาน Binding, Pipes และ Directives ประเภทต่าง ๆ, การจัด CSS ด้วย Angular Material และ Tailwind CSS การจัดการเส้นทางด้วยระบบ Routing, การทำงานกับฟอร์มแบบ Reactive Forms และการตรวจสอบข้อมูลในฟอร์ม, การใช้งาน Signals และ RxJS การเชื่อมต่อ API Server ด้วย HttpClient Module, การจัดการ Authentication และ Authorization ผ่าน Route Guards และการปรับปรุงประสิทธิภาพของแอพพลิเคชั่น เช่น การทำ Lazy Loading Feature Modules

ส่วนของ Back-End ผู้เรียนจะได้เรียนรู้การใช้ TypeScript เพื่อสร้าง RESTful API ผ่าน Express.js บน Node พร้อมทั้งเรียนรู้ Node Ecosystems กับทั้งหัวข้ออื่นที่สำคัญ เช่น การจัดการ Routes, Controllers, Services, Serializers และ Models ตามสถาปัตยกรรม MVC, การตรวจสอบ Payload ผ่าน class-validator และ class-transformer, การทำงานกับฐานข้อมูล MongoDB ผ่าน Mongoose, การอัพโหลดไฟล์, การยืนยันตัวตน การตรวจสอบสิทธิ์ ผ่าน JWT (Authentication, Authorization, JWT) เป็นต้น

เนื้อหาบทเรียน

คอร์สนี้เป็นหลักสูตรอบรม 5 วัน ประกอบด้วยเนื้อหาตามวันดังต่อไปนี้

วันที่: 1
Unit
1
ทบทวนการใช้งาน JavaScript / TypeScript ยุคใหม่
เพื่อให้การเรียน MEAN Stack เป็นไปอย่างราบลื่น บทเรียนนี้จะทำการทบทวนการใช้งาน Node.js พร้อมทั้งไวยากรณ์ของ JavaScript / TypeScript สมัยใหม่
การประกาศตัวแปรด้วย let และ const
การใช้งาน Template Literals
ทบทวนการใช้งานออบเจ็กต์และอาร์เรย์
Destructuring Assignment
Optional Chaining
การกระจายข้อมูลด้วย Spread Operator
Arrow Functions
การใช้งาน map และ filter กับอาร์เรย์
Short-Circuit Evaluation
การจัดการโมดูลด้วย ES Module
ชนิดข้อมูลพื้นฐานใน TypeScript
Type และ Interface
Readonly และ Optional Properties
ฟังก์ชันและการจัดการชนิดข้อมูล
พื้นฐานการใช้งานคลาสและออบเจ็กต์
Generic Types
Utility Types
Unit
2
Monorepo ด้วย Nx
เพื่อให้การใช้งาน MEAN Stack เป็นไปอย่างราบลื่น เราจะเริ่มต้นเรียนรู้การสร้างโปรเจคแบบ Monorepo ด้วย Nx เพื่อสร้างกลุ่มการทำงานของโค้ดไว้ภายใต้ Repo เดียวกัน
Monorepo ด้วย Nx
การใช้งาน Nx Console
การสร้างโปรเจค Angular ด้วย Nx
การสร้างโปรเจค Express.js ด้วย Nx
การจัดการโปรเจครวมด้วย Nx
วันที่: 2
Unit
3
Components, Templates, Directives และ Pipes
เพื่อให้เราสามารถสร้าง Front-End บน Angular ได้ จึงต้องทำความเข้าใจหลักการพื้นฐานของส่วนประกอบต่าง ๆ เหล่านี้ก่อนอันได้แก่ Components, Templates, Directives และ Pipes
Components, Template และ Data Binding
Standalone Components
View Encapsulation
Component Lifecycle
Parent-Child Communication
Slot และ Content Projection
Property, Attribute, Class, Event และ Two-way Bindings
Template และ Structural Directive
ngFor, ngIf และ ngSwitch
Control Flow รูปแบบใหม่ด้วย @if, @for และ @switch
Built-in Pipes
Unit
4
Angular Material และ Tailwind CSS
เพื่อให้แอปพลิเคชันของเรามีการแสดงผลที่สวยงาม การตกแต่งสไตล์จึงเป็นสิ่งสำคัญ ในที่นี้เราจะแนะนำการใช้งาน Angular Material และ Tailwind CSS เพื่อรังสรรค์การใช้งาน CSS โดยง่าย
Angular Material
Theming Angular Material
Built-in Angular Material Components
Tailwind CSS
Tailwind Utility Classes
Unit
5
Dependency Injection และระบบ Modules
การเขียนโค้ดหลายสิ่งในไฟล์เดียวหรือในกลุ่มของไฟล์เดียวโดยไม่แบ่งแยกย่อมทำให้โค้ดนั้นบำรุงรักษาได้โดยยาก ในหัวข้อนี้จึงกล่าวถึงการแบ่งแยกโค้ดออกไปเป็นชุด ๆ ในระบบ Modules
Angular modularity ด้วย NgModules
Sharing NgModules
Feature Modules
Dependency Injection ใน Angular
Services
วันที่: 3
Unit
6
Routing และ Navigation
แอปพลิเคชันโดยทั่วไปต้องสามารถเปลี่ยนไปมาระหว่างหน้าเพจได้ บทเรียนนี้จึงกล่าวถึงการใช้งาน Router Modules เพื่อสร้างความสามารถดังกล่าวให้เกิดขึ้น
Router Modules
Routes
Routing และ Navigation
Query Parameters และ Link Parameters
Unit
7
การสร้าง API ด้วย Express.js
บทเรียนนี้ผู้เรียนจะได้ใช้งาน Node.js และ Express.js เพื่อสร้างส่วนของ API ขึ้นมาตามหลักการของ RESTful API
Node.js และ Express.js
การออกแบบและพัฒนา RESTful API
สถาปัตยกรรม Model-View-Controller
Express.js Routing
Services Layer
Versioning
Middleware
Unit
8
การเชื่อมต่อฐานข้อมูล MongoDB
ฐานข้อมูลเป็นสิ่งสำคัญเพื่อใช้จัดเก็บข้อมูลของ API อย่างถาวร Mongo DB หนึ่งในฐานข้อมูลยอดนิยมเป็นตัวเลือกที่เรานำเสนอควบคู่กับการใช้งานในคอร์สนี้
MongoDB และ Mongoose ODM
Typegoose
Models และ Documents
CRUD Operations
Embedded Documents Relationship
Serialization
วันที่: 4
Unit
9
RxJS และ Angular Signals
บทเรียนนี้ผู้เรียนจะได้เข้าใจถึงการใช้ Signals ในการจัดการ State และใช้ RxJS ในการจัดการ Event ที่เกิดขึ้นใน Angular
Angular Signals
RxJS และ Observables
RxJS Operators
Subject และ BehaviorSubject
RxJS Error Handling
RxJS Retry-ability
Unit
10
การร้องขอข้อมูลด้วย HTTPClient
เพื่อให้ Angular ซึ่งเป็นฝั่ง Front-End สามารถเข้าถึงข้อมูลจาก API ได้ บทเรียนนี้จึงจะกล่าวถึงการใช้งาน HTTPClient Module ของ Angular เพื่อเข้าถึงข้อมูลจาก API
HTTPClient Module
การดึงข้อมูลจาก API ด้วย Angular
การจัดการข้อผิดพลาดจาก API
Unit
11
การจัดการฟอร์มและการอัพโหลดไฟล์
การรับข้อมูลผ่านฟอร์มเป็นอีกหนึ่งความสามารถที่เว็บต้องมี บทเรียนนี้จึงจะกล่าวถึงการทำงานกับฟอร์ม การอัพโหลดไฟล์ผ่านฟอร์ม และการตรวจสอบข้อมูลในฟอร์มทั้งในส่วนของ Angular และ Express
การจัดการฟอร์ม
Body Parser
Data Transfer Object (DTO)
Payload Transformation และ Validation ด้วย class-validator และ class-transformer
File Upload และ Multipart Form Data
Angular Reactive Forms
Angular Form Validation
วันที่: 5
Unit
12
Authentication และ Authorization
แอปพลิเคชันโดยทั่วไปย่อมต้องมีระบบสมาขิกพร้อมการจำกัดสิทธิ์ในการเข้าถึงหน้าเพจต่าง ๆ เฉพาะสมาชิกที่มีสิทธิ์เข้าถึงได้เท่านั้น กระบวนการดังกล่าวนี้จะเกิดขึ้นได้เมื่อเรามีการทำระบบ Authentication และ Authorization
User Management: Register, Login, Logout
กระบวนการ Authentication และ Authorization
JSON Web Token (JWT)
Access Token และ Refresh Token
Refresh Token Rotation
Passport.js
Auth Route Guards
Role-Based Access Control (RBAC)
Attribute-Based Access Control (ABAC)
Unit
13
Deployment
เมื่อการพัฒนาโปรเจคเสร็จสิ้นก็ถึงเวลาการทดสอบโค้ดบน Production กันแล้ว หัวข้อนี้ผู้เรียนจะได้เรียนรู้การส่งมอบโค้ดสู่ Production ด้วยการใช้ Docker
Nx Container
การตั้งค่า Nginx
การแก้ไขการตั้งค่า Dockerfile
ทดสอบการ Deploy ด้วย Docker Compose
Deployment

ตัวอย่าง Workshop

คอร์สของเรานอกจากจะสอนทฤษฎีและตัวอย่างการใช้งานทั่วไปแล้ว ยังมี Workshop เป็นระบบจัดการวันลาออนไลน์ ที่มีทั้งส่วนแสดงผลสำหรับผู้ใช้งานทั่วไปและส่วนจัดการสำหรับ Admin

Articles App

โดยระบบนี้ผู้เรียนจะได้ทราบถึงการออกแบบและใช้คลาสต่าง ๆ ของ Tailwind CSS และการจัดสไตล์ด้วย Angular Material ที่สนับสนุนการทำงานแบบ Responsive สามารถเปิดเว็บเพื่อชมได้จากทั้งเดสก์ทอปหรือมือถือ โดยหน้าจอไม่เสียเลย์เอาต์

ระบบ Authentication เช่น การสมัครสมาชิก การเข้าสู่ระบบ และการออกจากระบบ ถูกรวมเข้าเป็นส่วนหนึ่งของ Workshop นี้เช่นกัน

Auth

โดยระบบจัดการวันลาออนไลน์นี้จะมีส่วนสำหรับ Admin เพื่อเข้าจัดการวันลาตามสิทธิ์ที่ตนมี ผู้เรียนจะได้เรียนรู้การทำ Authorization เพื่อจัดการสิทธิ์และตรวจสอบสิทธิ์สำหรับการเข้าถึง API และหน้าเพจต่าง ๆ ได้อย่างถูกต้อง

Auth

การทำงานกับฟอร์มก็เป็นส่วนสำคัญ Workshop นี้ได้แสดงถึงการสร้างฟอร์ม การอัพโหลดไฟล์พร้อมแสดงผลตัวอย่างรูปภาพที่อัพโหลด การตรวจสอบข้อมูลในฟอร์ม และการส่งข้อมูลในฟอร์มทั้งแบบ JSON และ Form Data

Form Form

ขอใบเสนอราคา

หากต้องการขอใบเสนอราคา ใบแจ้งหนี้ หนังสือชี้ชวนการเข้าอบรม และเอกสารอื่น ๆ รบกวนคุณลูกค้าติดต่อ เพจ Babel Coder หรือทางอีเมล์ babelcoder@gmail.com ได้ครับ

จุดประสงค์การเรียนรู้

  • ผู้เรียนสามารถออกแบบ Client-Server ตามสถาปัตยกรรมของ RESTful API
  • ผู้เรียนสามารถสร้างแอพพลิเคชันผ่าน Express.js ได้
  • ผู้เรียนเข้าใจการทำงานกับฐานข้อมูล MongoDB ผ่าน Mongoose
  • ผู้เรียนสามารถจัดการ Authentication และ Authorization ได้อย่างมีประสิทธิภาพ
  • ผู้เรียนเข้าใจการออกแบบเว็บด้วยหลักการ Component-Based Design
  • ผู้เรียนเข้าใจการสร้างและใช้งาน Component ด้วย Angular
  • ผู้เรียนสามารถสร้างและใช้งานเว็บแอพพลิเคชันด้วย Angular ได้อย่างมีประสิทธิภาพ
  • ผู้เรียนเข้าใจการใช้งาน Angular เพื่อเชื่อมต่อ RESTful API
  • ผู้เรียนเข้าใจหลักการทดสอบ Front-End และ Back-End ในเบื้องต้น
  • ผู้เรียนเข้าใจหลักการ Build และ Deploy Front-End และ Back-End ผ่าน Docker

คอร์สนี้เหมาะกับใคร

  • ผู้เรียนที่ต้องการศึกษาวิธีสร้างโปรเจคได้ไวด้วยโค้ดชุดเดียวแต่ได้ทั้ง Front-End และ Back-End
  • ผู้เรียนที่มีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว โดยในคอร์สจะมีการทบทวน JavaScript และ TypeScript สมัยใหม่ที่จำเป็นต่อการใช้งาน Next.js และ tRPC
  • ผู้เรียนที่ไม่เคยเขียน MEAN Stack มาก่อน และต้องการสร้างเว็บด้วย MEAN Stack
  • ผู้เรียนที่เคยเขียน MEAN Stack อยู่ก่อนแล้ว แต่ต้องการอัพเดทความรู้ MEAN Stack สมัยใหม่
  • ผู้เรียนที่ต้องการอัพเดทเทรนด์การใช้ Angular ให้เป็นปัจจุบันตามปี 2023 - 2024
  • ผู้เรียนที่ต้องการศึกษาการทำงานทั้งระบบตั้งแต่ Front-End, Back-End การทำงานของ Authentication และ Authorization โดยใช้โค้ดชุดเดียวกัน

ผู้สอน

Nuttavut Thongjor

นักพัฒนาซอฟต์แวร์ประสบการณ์กว่า 10 ปี ผู้ก่อตั้ง Babel Coder วิทยากรอบรมการพัฒนาซอฟต์แวร์และผู้ให้คำปรึกษาในบริษัทชั้นนำ

คำถามพบบ่อย

คำถาม: จำเป็นต้องมีพื้นฐานอะไรบ้าง
คำตอบ: ผู้เรียนจำเป็นต้องมีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว

คำถาม: ระยะเวลาศึกษาของหลักสูตรนี้
คำตอบ: หลักสูตรนี้เป็นหลักสูตร 5 วัน เวลาสอนต่อวันคือ 6 ชั่วโมง (ตลอดหลักสูตรรวม 30 ชั่วโมง) เวลา 10.00 - 17.00 น.

คำถาม: รูปแบบการอบรมเป็นอย่างไร
คำตอบ: หลักสูตรนี้จำหน่ายสองรูปแบบ คือ แบบหลักสูตรอบรมออนไลน์สอนสดผ่านเว็บ (แพคเกจนี้รวมบันทึกการสอนย้อนหลังแล้ว) และแบบวิดีโอบันทึกการสอน โดยหลักสูตรนี้จะสอนเน้นทั้งทฤษฎีและปฏิบัติจริงผ่าน Workshop

คำถาม: สามารถขอใบเสนอราคา ใบแจ้งหนี้ หนังสือชี้ชวนการเข้าอบรมได้อย่างไร
คำตอบ: รบกวนคุณลูกค้าติดต่อ เพจ Babel Coder หรือทางอีเมล์ babelcoder@gmail.com เพื่อขอเอกสารต่าง ๆ ครับ

สอบถามเพิ่มเติมโปรดติดต่อ เพจ Babel Coder

เว็บไซต์นี้มีการจัดเก็บข้อมูล

เราจัดเก็บข้อมูลเพื่อเพิ่มประสิทธิภาพและประสบการณ์ที่ดีในการใช้งานเว็บไซต์ เราสามารถนำเสนอสิ่งที่คุณสนใจเป็นพิเศษเมื่อคุณกด "ยอมรับทั้งหมด" ทั้งนี้คุณสามารถเลือกตั้งค่าความยินยอมในการใช้งานผ่าน "การตั้งค่า" หากคุณไม่ปรับเปลี่ยนการตั้งค่าเราเข้าใจว่าคุณให้ความยินยอมในการจัดเก็บข้อมูลทั้งหมดแล้ว อ่านนโยบายความเป็นส่วนตัว