พัฒนาแอพมือถือ · MBC-13

Advanced Cross-Platform Apps with Ionic and Capacitor

หลักสูตร Advanced Cross-Platform Apps with Ionic and Capacitor เป็นการอบรมขั้นสูงต่อยอดการสร้างแอป Android และ iOS ด้วย Ionic และ Capacitor ทั้ง Firebase, Push Notification, Web API ที่ปลอดภัย และข้อมูลแบบ Offline-first เหมาะกับ Web Developer และ Mobile Developer ที่สร้างแอป Ionic มาแล้ว

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

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

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

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

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

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

เมื่อแอป Ionic เริ่มใช้งานจริง โจทย์จะยากขึ้นทันที ทั้งการล็อกอินหลายช่องทาง ข้อมูลที่ต้องอัปเดตแบบเรียลไทม์ การแจ้งเตือนที่ส่งจากระบบหลังบ้าน การทำงานตอนไม่มีอินเทอร์เน็ต และการเรียกความสามารถของเครื่องที่ลึกกว่ากล้องหรือตำแหน่ง ตัวอย่างจำนวนมากที่พบบนอินเทอร์เน็ตยังเขียนด้วย Cordova, Callback ซ้อนกันหลายชั้น หรือ API ของ Firebase และ FCM รุ่นที่ปิดไปแล้ว จึงนำมาใช้กับโปรเจกต์ปัจจุบันไม่ได้

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ต่อยอดจากหลักสูตร Cross-Platform Mobile Apps with Ionic and Capacitor ใช้ Ionic 9, Capacitor 8 และ Angular 22 แบบ Standalone พาผู้เรียนวางโครงสร้างแอปขนาดใหญ่ เชื่อม Firebase ทั้ง Authentication, Firestore และ Cloud Storage ส่ง Push Notification ผ่าน FCM HTTP v1 API ออกแบบ Web API ที่ปลอดภัย เก็บข้อมูลด้วย SQLite แบบ Offline-first ใช้ Google Maps, Chart และหลายภาษา แล้วรวมทุกอย่างใน Workshop แอปจริงหลายตัว (อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง ระดับ Advanced)

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

วางโครงสร้างแอป Ionic ขนาดใหญ่และเขียนโค้ด async ด้วย async/await, RxJS และ Signals ได้อย่างเป็นระบบ
ทำระบบสมาชิกด้วย Firebase Authentication และจัดการข้อมูลเรียลไทม์บน Firestore พร้อม Security Rules ได้
ส่ง Push Notification ทั้ง Android และ iOS จาก Backend ของตัวเองผ่าน FCM HTTP v1 API ได้
ออกแบบ Web API ที่ปลอดภัยด้วย JWT และเชื่อมกับแอปผ่าน Interceptor ได้
เก็บข้อมูลด้วย SQLite แบบ Offline-first และซิงก์กับ Server เมื่อกลับมาออนไลน์ได้
จัดการรูปภาพและไฟล์ในเครื่อง และอัปโหลดหลายไฟล์ขึ้น Web Service ได้
ใช้ Google Maps, Chart แบบเรียลไทม์ และทำแอปหลายภาษาได้
เรียกใช้ Native API ขั้นสูง เช่น Biometric, Barcode และ Bluetooth Low Energy ผ่าน Capacitor Plugin ได้

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

ผู้ที่ผ่านหลักสูตร Ionic และ Capacitor ระดับพื้นฐานถึงขั้นกลาง หรือมีประสบการณ์เทียบเท่า
Web Developer และ Mobile Developer ที่ดูแลแอป Ionic ในงานจริง
Programmer ที่ต้องเชื่อมแอปมือถือกับ Firebase, Web API และระบบหลังบ้าน
IT Manager และหัวหน้าทีมที่ต้องการแนวทางพัฒนาแอป Hybrid ระดับใช้งานจริง

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

ผ่านหลักสูตร Ionic และ Capacitor ระดับพื้นฐานถึงขั้นกลาง หรือเคยสร้างแอป Ionic ด้วย Angular มาแล้ว
เขียน HTML, CSS, TypeScript และใช้ Angular Router, Service และ HttpClient ได้
ออกแบบและใช้งานฐานข้อมูล เช่น MySQL หรือ SQLite และใช้ Command Line ได้
มีบัญชี Google สำหรับ Firebase และมือถือ Android หรือ iPhone สำหรับทดสอบ (การ Build บน iOS ต้องใช้ Mac ที่ติดตั้ง Xcode)

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่มาแทนหลักสูตร Ionic Framework ขั้นสูงรุ่นเดิม ต่อยอดจากหลักสูตร Cross-Platform Mobile Apps with Ionic and Capacitor เนื้อหาเขียนใหม่ให้ตรงกับ Ionic 9, Capacitor 8 และ Angular 22 แบบ Standalone อบรม 5 วัน วันละ 6 ชั่วโมง รวม 30 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Advanced เหมาะกับผู้ที่สร้างแอป Ionic มาแล้วและต้องการเชื่อม Firebase, Push Notification, Web API ที่ปลอดภัย และข้อมูลออฟไลน์ในงานจริง ผู้เรียนจะได้สร้างแอปอ่านข่าว แอปสแกนสต็อก และระบบ Report พร้อมรับ Lab Guide และซอร์สโค้ดกลับไปใช้งานต่อ

Day 1 โครงสร้างแอปขนาดใหญ่และ Firebase

Section 1: Lab: วางโครงสร้างแอป Ionic ขนาดใหญ่

ทบทวนโปรเจกต์ Ionic 9 แบบ Angular Standalone และสิ่งที่เปลี่ยนจากรุ่นก่อน
แบ่งโฟลเดอร์ตาม Feature, Lazy Loading Route และ Functional Guard
เก็บ State ของแอปด้วย Service ที่ใช้ Signals และแยกค่าตั้งค่าตาม Environment
ตั้งค่า capacitor.config.ts และ Live Reload บนเครื่องจริง
Lab: โครงแอปตั้งต้นที่ใช้ต่อทั้งหลักสูตร

Section 2: Lab: async ขั้นสูงด้วย async/await, RxJS และ Signals

จาก Callback ซ้อนชั้นสู่ Promise และ async/await ที่อ่านง่าย
Operator ของ RxJS ที่ใช้บ่อย: switchMap, mergeMap, debounceTime และ retry
แปลงระหว่าง Observable กับ Signal ด้วย toSignal และ toObservable
งานแบบ Recursive และการทำงานทีละรายการโดยไม่ค้าง พร้อมจัดการ Error
Lab: ค้นหาข้อมูลแบบพิมพ์แล้วค้นทันทีพร้อมยกเลิกคำขอเก่า

Section 3: Lab: ระบบสมาชิกด้วย Firebase Authentication

สร้างโปรเจกต์ Firebase และลงทะเบียนแอป Android, iOS และ Web
ล็อกอินด้วยอีเมล, Google Sign-In และยืนยันเบอร์โทรด้วย OTP ผ่าน Capacitor Plugin
จัดการสถานะล็อกอินด้วย Signals และป้องกันหน้าที่ต้องล็อกอินด้วย Guard
รีเซ็ตรหัสผ่าน ยืนยันอีเมล และออกจากระบบ
Lab: หน้า Login และ Register ที่ใช้งานได้ทั้งบนเว็บและมือถือ

Section 4: Lab: ข้อมูลเรียลไทม์บน Firestore และ Security Rules

เลือกระหว่าง Cloud Firestore กับ Realtime Database ให้เหมาะกับงาน
CRUD และการฟังข้อมูลแบบเรียลไทม์ด้วย onSnapshot
Query, การเรียงลำดับ และการแบ่งหน้าข้อมูล
เขียน Security Rules ให้ผู้ใช้เข้าถึงเฉพาะข้อมูลของตัวเองและตรวจรูปแบบข้อมูล
ทดสอบ Rules ด้วย Firebase Emulator Suite ก่อนขึ้นระบบจริง

Day 2 Cloud Storage, Push Notifications และ Web API

Section 5: Lab: อัปโหลดไฟล์ด้วย Cloud Storage for Firebase

อัปโหลดรูปและไฟล์พร้อมแสดงความคืบหน้า
ดึง Download URL มาแสดงในแอปและบันทึกลิงก์ลง Firestore
Security Rules ของ Storage: จำกัดขนาด ชนิดไฟล์ และเจ้าของไฟล์
แชร์เนื้อหาไปยังแอปอื่นด้วย Share Plugin
Lab: อัลบั้มรูปส่วนตัวที่ซิงก์ข้ามเครื่อง

Section 6: Lab: Push Notifications ด้วย Firebase Cloud Messaging

หลักการทำงานของ FCM และ APNs สำหรับ Android และ iOS
ติดตั้ง Push Notifications Plugin ขอสิทธิ์ และรับ Device Token
สร้าง APNs Authentication Key แล้วตั้งค่าใน Firebase สำหรับ iOS
Notification Channel บน Android และการจัดการเมื่อแอปอยู่เบื้องหน้าและเบื้องหลัง
เปิดหน้าที่เกี่ยวข้องเมื่อผู้ใช้แตะการแจ้งเตือน

Section 7: Lab: ส่ง Push จาก Backend ด้วย FCM HTTP v1 API

สร้าง Service Account และขอ Access Token แบบ OAuth 2.0 ฝั่ง Server
ส่งข้อความด้วย PHP หรือ Node.js ไปยังเครื่องเดียว กลุ่ม และ Topic
ออกแบบ Data Payload และปรับแต่งรูปภาพ เสียง และการแสดงผล
เก็บ Token ใน Database และลบ Token ที่หมดอายุ
Lab: ระบบหลังบ้านส่งแจ้งเตือนคำสั่งซื้อไปยังลูกค้า

Section 8: Lab: ออกแบบ Web API ที่ปลอดภัยสำหรับแอป

ออกแบบ RESTful API ด้วย Node.js หรือ PHP ต่อกับ MySQL
ยืนยันตัวตนด้วย JWT แบบ Access Token และ Refresh Token
แนบ Token ด้วย HTTP Interceptor และต่ออายุ Token อัตโนมัติ
ป้องกันข้อมูลรั่ว: HTTPS, CORS, ตรวจข้อมูลขาเข้า และจำกัดจำนวนคำขอ
ปรับประสิทธิภาพด้วยการแบ่งหน้า การบีบอัด และ Cache

Day 3 Offline Database, ไฟล์ และการอัปโหลด

Section 9: Lab: ฐานข้อมูล Offline ด้วย SQLite

ติดตั้งและตั้งค่า SQLite Plugin ของ Capacitor Community
ตั้งค่าให้ทดสอบฐานข้อมูลบนเว็บเบราว์เซอร์ได้ระหว่างพัฒนา
สร้างตาราง Migration ตามเวอร์ชัน และ Transaction
เขียน CRUD ผ่าน Service ด้วย async/await
Lab: แอปบันทึกงานภาคสนามที่ทำงานได้แม้ไม่มีสัญญาณ

Section 10: Lab: แนวทาง Offline-first และการซิงก์ข้อมูล

ตรวจสถานะเครือข่ายด้วย Network Plugin
เก็บรายการที่แก้ระหว่างออฟไลน์เป็นคิว แล้วส่งขึ้น API เมื่อกลับมาออนไลน์
กำหนดวิธีจัดการข้อมูลชนกันและแสดงสถานะการซิงก์ให้ผู้ใช้เห็น
เปรียบเทียบกับ Offline Persistence ของ Firestore
Lab: ซิงก์งานภาคสนามกับ Web API

Section 11: Lab: จัดการรูปด้วย Camera และ Filesystem

ถ่ายภาพและเลือกหลายภาพจาก Gallery ด้วย Camera Plugin
ย่อ ลดขนาด และหมุนภาพก่อนบันทึก
เก็บไฟล์ในเครื่องด้วย Filesystem Plugin และเก็บ Path ลง SQLite
แสดงภาพจากไฟล์และข้อมูล Base64 และลบไฟล์ที่ไม่ใช้แล้ว
Lab: แนบรูปหลักฐานในงานภาคสนามแบบออฟไลน์

Section 12: Workshop: อัปโหลดหลายไฟล์ขึ้น Web Service

เขียน API รับไฟล์หลายไฟล์และบันทึกข้อมูลลงฐานข้อมูล
อัปโหลดทีละไฟล์และแบบขนาน พร้อมแถบความคืบหน้า
ลองส่งซ้ำเมื่อล้มเหลวและอัปโหลดต่อเมื่อกลับมาออนไลน์
เปิดดูผลลัพธ์ด้วย Browser Plugin
Workshop: ส่งงานภาคสนามพร้อมรูปขึ้นระบบหลังบ้าน

Day 4 แผนที่, Chart, หลายภาษา และ Native API

Section 13: Lab: Google Maps ด้วย Capacitor

ขอ API Key จาก Google Maps Platform และจำกัดการใช้งาน Key
สร้างแผนที่ด้วย Google Maps Plugin ของ Capacitor บนเครื่องจริง
ดึงพิกัดจาก Geolocation และบันทึก lat, lng ลงฐานข้อมูล
แสดง Marker หลายจุดจากฐานข้อมูลพร้อม Icon และข้อมูลของแต่ละจุด
รวมกลุ่ม Marker ด้วย Clustering และ Lab: แผนที่สาขาใกล้ตัว

Section 14: Lab: Chart และ Dashboard แบบเรียลไทม์

สร้าง Chart แบบแท่ง เส้น และโดนัทด้วย Chart.js ใน Standalone Component
สร้าง Directive ของ Angular สำหรับใช้ Chart ซ้ำในหลายหน้า
ดึงข้อมูลจาก API มา Plot และอัปเดตเมื่อข้อมูลเปลี่ยน
อัปเดต Chart แบบเรียลไทม์ผ่าน WebSocket
Lab: Dashboard ยอดขายรายวัน

Section 15: Lab: แอปหลายภาษา (i18n)

เลือกไลบรารีแปลภาษาสำหรับ Angular และติดตั้งในโปรเจกต์
เก็บข้อความแต่ละภาษาในไฟล์ JSON และใช้ใน Template
ออกแบบหน้าเลือกภาษา และจำภาษาที่เลือกด้วย Preferences Plugin
ตั้งภาษาเริ่มต้นตามภาษาของเครื่องเมื่อเปิดแอปครั้งแรก
จัดรูปแบบวันที่ ตัวเลข และสกุลเงินตามภาษา

Section 16: Lab: Native API ขั้นสูงผ่าน Capacitor Plugin

ล็อกอินด้วยลายนิ้วมือหรือใบหน้า (Biometric Authentication)
สแกน Barcode และ QR Code ด้วยกล้อง
เชื่อมต่ออุปกรณ์ Bluetooth Low Energy และอ่านค่า
เล่นเสียงในแอป และติดตั้งโฆษณาด้วย AdMob
เรียกใช้ Cordova Plugin ที่ยังไม่มีรุ่น Capacitor และข้อควรระวัง

Day 5 Workshop แอปใช้งานจริง

Section 17: Workshop: แอปอ่านข่าวเชื่อม Web API

เตรียมฐานข้อมูลและสร้าง Web API ส่งข้อมูลข่าวเป็น JSON
หน้ารายการข่าวด้วย ion-list พร้อม Skeleton, Pull to Refresh และ Infinite Scroll
หน้ารายละเอียดข่าว การแชร์ และการบันทึกข่าวไว้อ่านออฟไลน์
แจ้งเตือนข่าวใหม่ด้วย Push Notification
Build และรันบนเครื่องจริงผ่าน Android Studio และ Xcode

Section 18: Workshop: แอปสแกน Barcode สินค้าในสต็อก

เตรียมฐานข้อมูลสต็อกและ Web API ค้นหาสินค้าจาก Barcode
สแกนรหัสสินค้าแล้วแสดงรายละเอียดและจำนวนคงเหลือ
รับเข้าและเบิกออกพร้อมเก็บรายการไว้ในเครื่องเมื่อออฟไลน์
ซิงก์รายการกับ Server และแสดงผลการซิงก์
ทดสอบบนเครื่องจริงและแก้ปัญหาที่พบ

Section 19: Workshop: ระบบ Report และ Export ข้อมูล

ดึงข้อมูล Report รายสัปดาห์ รายเดือน และรายปีจาก Web API
แสดงกราฟแบบแท่ง เส้น และโดนัทตามช่วงเวลาที่เลือก
Export ข้อมูลเป็น PDF และ CSV แล้วบีบอัดเป็น ZIP
บันทึกไฟล์ลงเครื่องและส่งต่อด้วย Share Plugin

Section 20: Workshop: แจ้งเตือนผ่าน LINE และ QR รับชำระเงิน

ส่งข้อความแจ้งเตือนไปยังกลุ่มและแชตส่วนตัวด้วย LINE Messaging API แทน LINE Notify
สร้าง QR Code สำหรับรับชำระเงินจากยอดในแอป
รวมฟีเจอร์ที่เรียนมาเป็นแอปเดียว และเช็กลิสต์ก่อน Build ขึ้น Store
นำเสนอผลงาน รีวิวร่วมกัน และแนวทางอัปเกรด Capacitor ในอนาคต

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

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

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

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

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

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

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

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

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

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

ส่ง Push Notification ไปยังแอป Android และ iOS ด้วย Firebase Cloud Messaging ทำอย่างไร

สร้างโปรเจกต์ Firebase แล้วลงทะเบียนแอป Android และ iOS ติดตั้ง Push Notifications Plugin ของ Capacitor เพื่อขอสิทธิ์และรับ Device Token แล้วส่ง Token ไปเก็บที่เซิร์ฟเวอร์ ฝั่งเซิร์ฟเวอร์ใช้ Service Account ขอ Access Token แล้วเรียก FCM HTTP v1 API ด้วย PHP หรือ Node.js เพื่อส่งข้อความพร้อม Data Payload สำหรับ iOS ต้องสร้าง APNs Authentication Key แล้วอัปโหลดเข้า Firebase ก่อนจึงจะส่งถึงเครื่องได้

Firebase Security Rules คืออะไร ทำไมต้องตั้ง

Security Rules คือกฎที่ Firebase ใช้ตัดสินว่าใครอ่านหรือเขียนข้อมูลใน Firestore, Realtime Database หรือ Cloud Storage ได้บ้าง เพราะแอปบนมือถือเชื่อมต่อฐานข้อมูลโดยตรง ถ้าเปิดสิทธิ์ทิ้งไว้ใครก็เข้าถึงข้อมูลได้ แนวทางที่นิยมคือให้ต้องล็อกอินด้วย Firebase Authentication ก่อน ให้ผู้ใช้แต่ละคนเข้าถึงเฉพาะข้อมูลของตัวเองโดยเทียบ uid กับเจ้าของข้อมูล ตรวจรูปแบบข้อมูลก่อนบันทึก และทดสอบกฎด้วย Emulator Suite ก่อนใช้งานจริง

ทำให้แอป Ionic ทำงานแบบ Offline-first ด้วย SQLite มีแนวทางอย่างไร

ติดตั้ง SQLite Plugin ของ Capacitor แล้วเปิดฐานข้อมูลในเครื่องเมื่อแอปเริ่มทำงาน สร้างตารางด้วย Migration ตามเวอร์ชัน และเขียน CRUD ผ่าน Service ด้วย async/await แอปจะอ่านและบันทึกข้อมูลในเครื่องก่อนเสมอ รายการที่แก้ระหว่างออฟไลน์ให้เก็บเป็นคิว แล้วส่งขึ้น Web API เมื่อ Network Plugin แจ้งว่ากลับมาออนไลน์ พร้อมกำหนดวิธีจัดการข้อมูลชนกัน ระหว่างพัฒนายังตั้งค่าให้ทดสอบฐานข้อมูลบนเว็บเบราว์เซอร์ได้

ยังใช้ Cordova Plugin ในแอป Ionic รุ่นใหม่ได้ไหม

แอป Ionic รุ่นปัจจุบันใช้ Capacitor เป็น Native Runtime และควรเลือก Capacitor Plugin ก่อนเสมอ ทั้ง Plugin ทางการและของ Capacitor Community ซึ่งครอบคลุมงานส่วนใหญ่ เช่น กล้อง ไฟล์ แผนที่ Push และ SQLite แต่ Capacitor ยังรองรับ Cordova Plugin หลายตัวสำหรับกรณีที่ไม่มีทางเลือกอื่น โดยต้องตรวจความเข้ากันได้และทดสอบบนเครื่องจริงทุกครั้ง หลักสูตรนี้อธิบายวิธีเลือกและข้อควรระวังไว้ด้วย

หลักสูตร Advanced Cross-Platform Apps with Ionic and Capacitor เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับ Web Developer, Mobile Developer และโปรแกรมเมอร์ที่สร้างหรือดูแลแอป Ionic อยู่แล้ว และต้องการเชื่อมแอปกับ Firebase, Web API และระบบหลังบ้าน ควรผ่านหลักสูตร Ionic และ Capacitor ระดับพื้นฐานถึงขั้นกลาง หรือเคยสร้างแอป Ionic ด้วย Angular มาแล้ว เขียน TypeScript และใช้ Router, Service และ HttpClient ได้ ใช้ฐานข้อมูลอย่าง MySQL หรือ SQLite และ Command Line เป็น

เรียนจบหลักสูตร Advanced Cross-Platform Apps with Ionic and Capacitor แล้วทำอะไรได้บ้าง

วางโครงสร้างแอป Ionic ขนาดใหญ่ ทำระบบสมาชิกด้วย Firebase Authentication จัดการข้อมูลเรียลไทม์บน Firestore พร้อม Security Rules ส่ง Push Notification จาก Backend ผ่าน FCM HTTP v1 ออกแบบ Web API ที่ปลอดภัยด้วย JWT เก็บข้อมูลแบบ Offline-first ด้วย SQLite อัปโหลดหลายไฟล์ ใช้ Google Maps, Chart และหลายภาษา และเรียก Native API ขั้นสูงได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้