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

.NET 10 Web API with Angular

หลักสูตร .NET 10 Web API with Angular เป็นการอบรมพัฒนาเว็บแอปแบบ Full Stack โดยสร้าง Web API ด้วย ASP.NET Core เชื่อมฐานข้อมูลผ่าน Entity Framework Core และสร้างหน้าจอด้วย Angular และ Angular Material เหมาะกับนักพัฒนาที่มีพื้นฐาน C# จบแล้วสร้างระบบจัดการข้อมูลแบบ Full Stack ที่ Deploy ด้วย Docker ได้

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

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

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

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

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

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

เว็บแอปยุคใหม่นิยมแยกส่วนหน้าบ้านกับหลังบ้านออกจากกัน ฝั่งหลังบ้านเปิดบริการเป็น Web API ส่วนหน้าบ้านเป็น Single Page Application ที่เรียก API นั้น ASP.NET Core บน .NET 10 (LTS) เป็นตัวเลือกที่แข็งแรงสำหรับงาน API ขององค์กร ทำงานได้ทั้ง Windows, macOS และ Linux ส่วน Angular 22 มีโครงสร้างชัดเจนเหมาะกับระบบที่มีหลายหน้าจอและหลายทีม และใช้ Signals กับ Standalone Component เป็นแนวทางหลัก

หลักสูตรนี้พาสร้างเว็บแอปแบบ Full Stack ครบวงจรภายใน 3 วัน เริ่มจากสร้าง Web API ด้วย ASP.NET Core 10 พร้อมเอกสาร OpenAPI เชื่อมฐานข้อมูลด้วย Entity Framework Core 10 โดยใช้ SQL Server 2025 เป็นหลัก และลองสลับไปใช้ PostgreSQL และ MongoDB จากนั้นสร้างหน้าจอด้วย Angular 22 และ Angular Material ทั้ง Routing ฟอร์ม และหน้า CRUD ที่เรียก API จริง ปิดท้ายด้วยการป้องกันระบบด้วย JWT การเขียน Test และการ Deploy ด้วย Docker (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Intermediate)

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

ติดตั้ง .NET 10 SDK, Node.js, Angular CLI และฐานข้อมูลผ่าน Docker ได้
สร้าง Web API ด้วย ASP.NET Core 10 พร้อม Validation และเอกสาร OpenAPI ได้
ใช้ Entity Framework Core 10 แบบ Code-First กับ SQL Server 2025 ได้
เข้าใจการเปลี่ยนฐานข้อมูลเป็น PostgreSQL หรือ MongoDB ผ่าน Provider ของ EF Core
สร้างหน้าจอด้วย Angular 22 ทั้ง Component, Signals, Routing และฟอร์ม
เชื่อม Angular กับ Web API และทำหน้า CRUD ด้วย Angular Material ได้
ป้องกัน API ด้วย JWT และเรียกใช้จาก Angular อย่างปลอดภัย
เขียน Test เบื้องต้นและ Deploy ทั้งระบบด้วย Docker Compose ได้

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

นักพัฒนาที่ต้องการสร้างเว็บแอปแบบ Full Stack ด้วย .NET และ Angular
นักพัฒนา C# ที่ต้องการเปลี่ยนจาก ASP.NET แบบเดิมมาเป็น Web API กับ SPA
นักพัฒนา Frontend ที่ต้องการเข้าใจการสร้าง API ฝั่ง .NET
ผู้ที่ดูแลระบบเดิมบน .NET Core รุ่นก่อนและต้องการอัปเดตเป็น .NET 10

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

เขียนภาษา C# เบื้องต้นได้ เข้าใจ Class, Method และ Collection
มีพื้นฐาน HTML, CSS และ JavaScript เบื้องต้น
เข้าใจคำสั่ง SQL เบื้องต้น เช่น SELECT, INSERT, UPDATE และ DELETE
โน้ตบุ๊ก Windows, macOS หรือ Linux แรม 16 GB ขึ้นไป พร้อมสิทธิ์ติดตั้งโปรแกรมและ Docker Desktop

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร .NET Core 8 with Angular ซึ่งเดิมสอน .NET 8 กับ Angular 16 เนื้อหาเปลี่ยนเป็น .NET 10 (LTS) และ Angular 22 ทั้งหมด อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Intermediate วันแรกสร้าง Web API ด้วย ASP.NET Core 10 พร้อม Validation และเอกสาร OpenAPI และเชื่อม SQL Server 2025 ด้วย EF Core 10

วันที่สองจัดโครงสร้าง API ด้วย Service และ DTO ลองใช้ PostgreSQL และ MongoDB แล้วเริ่มสร้างหน้าจอด้วย Angular 22, Angular Material และ Signal Forms วันที่สามเชื่อม Angular กับ API ทำหน้า CRUD ป้องกันระบบด้วย JWT เขียน Test และ Deploy ด้วย Docker Compose ปิดท้ายด้วย Workshop ระบบจัดการสินค้า หลักสูตรนี้เป็นฉบับกระชับ 3 วัน ส่วนฉบับ 5 วันคือหลักสูตร .NET 10 with Angular เครื่องมือทั้งหมดใช้ได้ฟรีบน Windows, macOS และ Linux

Day 1 เริ่มต้น ASP.NET Core 10 Web API

Section 1: Lab: เตรียมเครื่องมือทั้ง Windows และ macOS

ภาพรวมสถาปัตยกรรม Angular คู่กับ ASP.NET Core Web API
ติดตั้ง .NET 10 SDK, Node.js รุ่น LTS และ Angular CLI 22
VS Code พร้อม C# Dev Kit และ Extension สำหรับ Angular
รัน SQL Server 2025, PostgreSQL และ MongoDB ด้วย Docker Desktop
Lab: ตรวจความพร้อมของเครื่องและเก็บโปรเจกต์ไว้บน Git

Section 2: C# 14 ที่ใช้ในงาน Web API

Record, Nullable Reference Types และ Pattern Matching
async และ await กับงานที่ต้องรอฐานข้อมูล
LINQ ที่ใช้บ่อยกับข้อมูลชุด
Dependency Injection และ Interface ใน .NET
Lab: Console App จัดการรายการสินค้าเพื่อทบทวนก่อนสร้าง API

Section 3: Lab: สร้าง ASP.NET Core 10 Web API

dotnet new webapi และโครงสร้างโปรเจกต์ .NET 10
Program.cs, Middleware และ Configuration ตาม Environment
Controller กับ Minimal API และเลือกใช้ให้เหมาะกับงาน
เอกสาร OpenAPI ในตัว และทดสอบผ่าน Swagger UI หรือ Scalar
Lab: API แรกและทดสอบด้วยไฟล์ .http

Section 4: Lab: Controller, Routing และ Validation

Attribute Routing และ Route Parameter
HTTP Method: GET, POST, PUT และ DELETE
Return Type แบบ ActionResult และ Status Code ที่ถูกต้อง
Validation ด้วย Data Annotations และส่ง Error ด้วย ProblemDetails
Lab: API ข้อมูลสินค้าครบทุก Method แบบเก็บข้อมูลในหน่วยความจำ

Section 5: Lab: EF Core 10 กับ SQL Server 2025

ORM คืออะไร และ DbContext กับ DbSet
Code-First, Migration และ dotnet ef
ความสัมพันธ์แบบ One to Many ระหว่างหมวดหมู่และสินค้า
CRUD แบบ async และการเขียน Query ด้วย LINQ
Lab: ย้าย API สินค้ามาเก็บข้อมูลใน SQL Server 2025

Day 2 หลายฐานข้อมูลและเริ่มต้น Angular 22

Section 6: Lab: Service Layer, DTO และการแบ่งหน้า

แยก Business Logic ไปไว้ใน Service และลงทะเบียนผ่าน DI
รับส่งข้อมูลด้วย DTO แทน Entity
ค้นหา เรียงลำดับ และแบ่งหน้าข้อมูล
Logging และจัดการ Error กลาง
Lab: API สินค้าที่ค้นหาและแบ่งหน้าได้

Section 7: Lab: ใช้ EF Core กับ PostgreSQL และ MongoDB

Provider ของ EF Core และการเลือกแพ็กเกจให้ตรงรุ่น
เปลี่ยนไปใช้ PostgreSQL ด้วย Npgsql และ Migration ชุดใหม่
ใช้ MongoDB ผ่าน MongoDB EF Core Provider และข้อจำกัดที่ต่างจากฐานข้อมูลเชิงสัมพันธ์
แนวทางใช้ MySQL และการตรวจรุ่น Provider ที่รองรับ
Lab: สลับฐานข้อมูลของ API ด้วย Connection String และ Configuration

Section 8: Lab: เริ่มต้น Angular 22

สร้างโปรเจกต์ด้วย ng new และโครงสร้างไฟล์
Standalone Component และ Template Syntax
signal(), computed() และ Change Detection แบบ Zoneless
Control Flow ด้วย @if, @for และ @switch
Lab: หน้ารายการสินค้าจากข้อมูลจำลอง

Section 9: Lab: Routing และ Layout ด้วย Angular Material

ติดตั้ง Angular Material ด้วย ng add และเลือก Theme
Layout ด้วย Toolbar, Sidenav และเมนู
กำหนด Route, RouterLink และ Lazy Loading
รับ Route Parameter ผ่าน Component Input
Lab: โครงหน้าระบบหลังบ้านพร้อมเมนูทุกหน้า

Section 10: Lab: ฟอร์มด้วย Signal Forms

สร้างฟอร์มจาก Signal Model ด้วย form()
Validation ที่มีมาให้และการเขียนกฎตรวจเอง
ใช้ Form Field ของ Angular Material กับ Signal Forms
เทียบกับ Reactive Forms ที่ยังพบในระบบเดิม
Lab: ฟอร์มเพิ่มและแก้ไขสินค้าพร้อม Validation

Day 3 เชื่อมต่อ Full Stack ความปลอดภัย และ Deploy

Section 11: Lab: เรียก API ด้วย HttpClient และ httpResource

ตั้งค่า provideHttpClient และ Environment ของแต่ละสภาพแวดล้อม
เขียน Service เรียก API ด้วย HttpClient
ดึงข้อมูลแบบ Reactive ด้วย httpResource พร้อมสถานะโหลดและ Error
เปิด CORS ฝั่ง ASP.NET Core ให้ Angular เรียกได้
Lab: แสดงรายการสินค้าจาก API จริง

Section 12: Lab: หน้า CRUD ด้วย Angular Material

ตารางข้อมูลพร้อมเรียงลำดับ ค้นหา และแบ่งหน้าจาก API
Dialog สำหรับเพิ่มและแก้ไขข้อมูล
ยืนยันก่อนลบและแจ้งผลด้วย Snackbar
แบ่ง Component และส่งข้อมูลด้วย input() และ output()
Lab: หน้าจัดการสินค้าและหมวดหมู่ครบวงจร

Section 13: Lab: ป้องกันระบบด้วย JWT

Authentication และ Authorization สำหรับ SPA
ออกและตรวจ JWT ด้วย JWT Bearer Authentication
กำหนดสิทธิ์ด้วย Role และ Policy
Functional Interceptor แนบ Token และ Route Guard ฝั่ง Angular
Lab: หน้า Login และล็อกหน้าจัดการข้อมูลตามสิทธิ์

Section 14: Test และ Deploy ด้วย Docker

Unit Test ฝั่ง .NET ด้วย xUnit
ทดสอบ Component และ Service ของ Angular ด้วย Vitest
Build Angular สำหรับ Production และสร้าง Container Image ของ API
รวม Angular, API และฐานข้อมูลด้วย Docker Compose
Lab: รันทั้งระบบด้วยคำสั่งเดียว

Section 15: Workshop: ระบบจัดการสินค้าแบบ Full Stack

ออกแบบ API และหน้าจอจากโจทย์ธุรกิจ
Workshop: ระบบจัดการสินค้า หมวดหมู่ และผู้ใช้ ครบตั้งแต่ฐานข้อมูลถึงหน้าจอ
Checklist ความปลอดภัยก่อนขึ้นระบบจริง
นำเสนอผลงานและแนวทางต่อยอด

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

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

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

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

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

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

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

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

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

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

Code-First Migration ใน Entity Framework Core ทำงานอย่างไร

แบบ Code-First คือเขียน Model เป็นคลาส C# และสร้าง DbContext ที่มี DbSet ของแต่ละ Model ก่อน แล้วให้ EF Core สร้างตารางตามโค้ด ขั้นตอนคือติดตั้งแพ็กเกจ Provider ของฐานข้อมูลที่ใช้ให้ตรงกับ EF Core 10 และเครื่องมือ dotnet-ef จากนั้นสั่ง dotnet ef migrations add ตามด้วยชื่อ เพื่อสร้างไฟล์ Migration ที่บันทึกการเปลี่ยนแปลง แล้วสั่ง dotnet ef database update เพื่อปรับฐานข้อมูลจริง เมื่อแก้ Model ภายหลังก็ทำซ้ำสองคำสั่งนี้

สร้าง Web API ด้วย ASP.NET Core 10 ต้องเริ่มจากอะไร

เริ่มจากสร้างโปรเจกต์ด้วยคำสั่ง dotnet new webapi แล้วเลือกใช้ Controller หรือ Minimal API ตามลักษณะงาน สร้าง Model ของข้อมูล เขียน Controller ที่ติด [ApiController] และ [Route] กำหนดเมธอดด้วย [HttpGet] [HttpPost] [HttpPut] และ [HttpDelete] ให้แต่ละ Action คืนค่าเป็น ActionResult และเขียนแบบ async เมื่อเรียกฐานข้อมูล ย้ายงานหลักไปไว้ใน Service ที่ลงทะเบียนผ่าน Dependency Injection ส่วนการทดสอบใช้เอกสาร OpenAPI ในตัวของ ASP.NET Core ร่วมกับ Swagger UI หรือ Scalar หรือไฟล์ .http

Angular เรียกข้อมูลจาก Web API ได้อย่างไร

Angular ใช้ HttpClient ในการเรียก API โดยเปิดใช้ด้วย provideHttpClient ในไฟล์ตั้งค่าแอป จากนั้นสร้าง Service ด้วย ng generate service แล้ว inject HttpClient เขียนเมธอดอย่าง getAll create update และ delete สำหรับการดึงข้อมูลมาแสดง Angular 22 มี httpResource ที่เป็น Stable แล้ว ให้ผลลัพธ์เป็น Signal พร้อมสถานะกำลังโหลดและ Error และโหลดใหม่เองเมื่อค่าที่อ้างถึงเปลี่ยน ส่วนฝั่ง ASP.NET Core ต้องเปิด CORS ให้โดเมนของ Angular ระหว่างพัฒนาด้วย

หลักสูตร .NET 10 Web API with Angular เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักพัฒนาที่ต้องการสร้างเว็บแอปแบบ Full Stack โดยใช้ ASP.NET Core เป็นหลังบ้านและ Angular เป็นหน้าบ้าน นักพัฒนา C# ที่ต้องการเปลี่ยนจาก ASP.NET แบบเดิม และผู้ที่ดูแลระบบบน .NET Core รุ่นก่อน ควรเขียน C# เบื้องต้นได้ มีพื้นฐาน HTML, CSS, JavaScript และ SQL เบื้องต้น และใช้โน้ตบุ๊กที่ติดตั้ง Docker Desktop ได้

เรียนจบหลักสูตร .NET 10 Web API with Angular แล้วทำอะไรได้บ้าง

สร้าง Web API ด้วย ASP.NET Core 10 พร้อม Validation และเอกสาร OpenAPI เชื่อมฐานข้อมูลด้วย EF Core 10 กับ SQL Server 2025 และเข้าใจการเปลี่ยนไปใช้ PostgreSQL หรือ MongoDB สร้างหน้าจอด้วย Angular 22 และ Angular Material ทั้งเมนู ฟอร์ม Routing และหน้า CRUD ที่เรียก API จริง ป้องกันระบบด้วย JWT เขียน Test เบื้องต้น และ Deploy ทั้งระบบด้วย Docker Compose ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

หลักสูตร .NET 10 Web API with Angular ใช้โปรแกรมอะไรบ้าง

ใช้ .NET 10 SDK, Node.js รุ่น LTS, Angular CLI 22 และ VS Code พร้อม C# Dev Kit ได้ทั้ง Windows, macOS และ Linux ฐานข้อมูล SQL Server 2025, PostgreSQL และ MongoDB รันผ่าน Docker Desktop จึงไม่ต้องติดตั้งลงเครื่องโดยตรง และใช้ Git เก็บโปรเจกต์ เครื่องมือทั้งหมดใช้ได้ฟรี ควรใช้โน้ตบุ๊กแรม 16 GB ขึ้นไปเพื่อให้รันฐานข้อมูลหลายตัวได้ลื่น