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

Advanced React Native with Expo

หลักสูตร Advanced React Native with Expo เป็นการอบรมขั้นสูงสำหรับสร้างแอปมือถือระดับใช้งานจริง ทั้งวางสถาปัตยกรรม จัดการ State ด้วย Zustand และ TanStack Query ทำงานแบบ Offline-first ยืนยันตัวตน Push Notifications, Testing และออกเวอร์ชันด้วย EAS เหมาะกับ Mobile Developer และ Tech Lead ที่มีพื้นฐานแล้ว

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

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

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

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

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

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

แอป React Native ที่ใช้งานในธุรกิจจริงต้องรับมือมากกว่าการแสดงหน้าจอ ทั้งข้อมูลจาก API ที่ต้อง Cache และทำงานตอนออฟไลน์ ระบบยืนยันตัวตนที่ปลอดภัย Animation ที่ลื่นไหล การแจ้งเตือน การทดสอบ และการออกเวอร์ชันใหม่โดยไม่สะดุด เมื่อแอปโตขึ้นโดยไม่มีโครงสร้างที่ดี โค้ดจะดูแลยาก แอปช้าลง และทีมแก้บั๊กซ้ำไปมา

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ระดับสูงต่อจาก Basic React Native with Expo และ Intermediate React Native ใช้ Expo SDK 57 และ React Native 0.86 บน New Architecture พาผู้เรียนวางสถาปัตยกรรมแอป แยก Global State กับ Server State ด้วย Zustand, Redux Toolkit และ TanStack Query ทำ Offline-first, GraphQL, ระบบยืนยันตัวตน, Animation ด้วย Reanimated, Push Notifications, Testing และนำแอปขึ้น Store ด้วย EAS ผ่านโปรเจกต์ร้านค้า AuraMarket (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Advanced)

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

วางโครงสร้างโปรเจกต์ React Native ขนาดใหญ่ด้วย TypeScript ให้ขยายและดูแลได้ง่าย
แยกและจัดการ Global State กับ Server State ด้วย Zustand, Redux Toolkit และ TanStack Query
วัดและปรับประสิทธิภาพแอปด้วย Profiler, React Compiler และรายการที่ Render ได้เร็ว
เชื่อม GraphQL และข้อมูลเรียลไทม์ และออกแบบแอปแบบ Offline-first
ทำระบบยืนยันตัวตนด้วย OAuth, JWT, Secure Store และ Biometric อย่างปลอดภัย
สร้าง Animation และ Gesture ที่ลื่นไหลด้วย Reanimated และ Gesture Handler
ส่ง Push Notifications และเขียน Unit Test กับ E2E Test ให้แอป
Build, Submit และอัปเดตแอปด้วย EAS พร้อมติดตามข้อผิดพลาดหลังเผยแพร่

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

นักพัฒนาที่ผ่านหลักสูตร React Native ระดับพื้นฐานและขั้นกลาง หรือมีประสบการณ์เทียบเท่า
Mobile Developer และ Software Engineer ที่พัฒนาแอประดับองค์กร
Tech Lead หรือ Senior Developer ที่ต้องวางสถาปัตยกรรมและแนวปฏิบัติของทีม
ผู้ประกอบการสายเทคที่ดูแลแอปธุรกิจที่ซับซ้อนขึ้นด้วยตัวเอง

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

ผ่านหลักสูตร React Native ระดับพื้นฐานและขั้นกลาง หรือเคยพัฒนาแอปด้วย React Native และ Expo มาแล้ว
เข้าใจ TypeScript, async/await, React Hooks และ Context API
เคยทำงานกับ REST API, การยืนยันตัวตน และฐานข้อมูลเบื้องต้น
ใช้ Git, npm และ Command Line ได้ และมีมือถือ Android หรือ iPhone สำหรับทดสอบ

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่มาแทนหลักสูตร Advanced React Native with Expo รุ่นเดิม เป็นระดับสูงสุดต่อจาก Basic React Native with Expo และ Intermediate React Native เนื้อหาเขียนใหม่ให้ตรงกับ Expo SDK 57 และ React Native 0.86 อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ

Workshop ตลอดหลักสูตร ระดับ Advanced เหมาะกับนักพัฒนาที่สร้างแอป React Native มาแล้วและต้องการยกระดับสู่แอปองค์กร ผู้เรียนจะสร้างโปรเจกต์ร้านค้า AuraMarket ต่อเนื่องตั้งแต่วางสถาปัตยกรรม จัดการ State ทำ Offline-first ระบบยืนยันตัวตน Animation, Push Notifications, Testing จนถึงออกเวอร์ชันด้วย EAS พร้อมรับ Lab Guide และซอร์สโค้ดกลับไปใช้งานต่อ

Day 1 สถาปัตยกรรม, State และ Performance

Section 1: Lab: วางสถาปัตยกรรมโปรเจกต์ขนาดใหญ่

โครงสร้างโฟลเดอร์แบบ Feature-based ร่วมกับ Expo Router
แยกชั้น UI, Hooks, Services และ Repository ตามหลัก Clean Architecture
TypeScript แบบ strict, Path Alias, ESLint และ Prettier
ตั้งค่า app.config.ts และ Environment Variables แยก Development, Preview และ Production
Lab: วางโครงโปรเจกต์ร้านค้า AuraMarket

Section 2: Lab: Global State ด้วย Zustand และ Redux Toolkit

แยก Local State, Global State และ Server State ให้ถูกที่
Zustand: สร้าง Store, Selector และ Middleware สำหรับ Persist
Redux Toolkit: Store, Slice และ Redux DevTools สำหรับทีมขนาดใหญ่
เกณฑ์เลือกใช้แต่ละแบบและการย้ายจาก Context ที่โตเกินไป
Lab: ตะกร้าสินค้าและค่าตั้งค่าที่จำไว้หลังปิดแอป

Section 3: Lab: Server State ด้วย TanStack Query

Query Key, Cache, staleTime และการ Refetch อัตโนมัติ
Mutation พร้อม Optimistic Update และการย้อนกลับเมื่อผิดพลาด
Infinite Query สำหรับรายการที่โหลดทีละหน้า
Interceptor สำหรับ Token, Retry และการจัดการ Error แบบรวมศูนย์
Lab: หน้ารายการสินค้าพร้อมค้นหาและตัวกรอง

Section 4: Lab: วัดและปรับประสิทธิภาพแอป

ใช้ React Native DevTools และ Profiler หาจุดที่ Render เกินจำเป็น
React Compiler กับการลดการใช้ memo, useMemo และ useCallback ด้วยมือ
รายการยาวด้วย FlatList ที่ตั้งค่าถูกต้องและ FlashList
รูปภาพด้วย expo-image พร้อม Cache และขนาดที่เหมาะสม
ตรวจขนาด Bundle ด้วย Expo Atlas และ Lazy Loading

Section 5: Workshop: เริ่มโปรเจกต์ AuraMarket

เชื่อม API ตัวอย่างและสร้างชั้น Repository
หน้าแค็ตตาล็อกที่ใช้ TanStack Query และ Zustand ร่วมกัน
วัดประสิทธิภาพก่อนและหลังปรับ
Workshop: รีวิวโครงสร้างโค้ดร่วมกัน

Day 2 ข้อมูลขั้นสูง, Security และ Animation

Section 6: Lab: GraphQL และข้อมูลเรียลไทม์

GraphQL ด้วย Apollo Client: Query, Mutation และ Normalized Cache
สร้าง Type จาก Schema ด้วย GraphQL Code Generator
Subscription ผ่าน WebSocket สำหรับข้อมูลเรียลไทม์
เลือกระหว่าง REST กับ GraphQL ให้เหมาะกับงาน
Lab: สถานะคำสั่งซื้อที่อัปเดตทันที

Section 7: Lab: แอป Offline-first ด้วย SQLite

เก็บข้อมูลในเครื่องด้วย expo-sqlite และ Migration
Persist Cache ของ TanStack Query เพื่อเปิดแอปได้ทันที
ตรวจสถานะเครือข่ายและคิวรายการที่รอส่ง
จัดการข้อมูลชนกันและแสดงสถานะการซิงก์
Lab: ตะกร้าและรายการโปรดที่ใช้ได้ตอนออฟไลน์

Section 8: Lab: Authentication และ Security

ล็อกอินด้วย OAuth และ Social Login ผ่าน expo-auth-session
จัดการ JWT แบบ Access Token และ Refresh Token อย่างปลอดภัย
เก็บ Token ด้วย expo-secure-store และใช้ร่วมกับ Protected Routes
ยืนยันตัวตนด้วยลายนิ้วมือหรือใบหน้าผ่าน expo-local-authentication
เช็กลิสต์ความปลอดภัย: ความลับใน Bundle, HTTPS และ Deep Link

Section 9: Lab: Animation และ Gesture ด้วย Reanimated

Shared Value, Animated Style และการทำงานบน UI Thread
Layout Animation สำหรับรายการที่เพิ่มหรือลบ
Gesture Handler: ลาก ปัด และ Pinch
Theme, Dark Mode และ Animation ที่เคารพการตั้งค่าลดการเคลื่อนไหว
Lab: การ์ดสินค้าปัดเพื่อบันทึกพร้อม Bottom Sheet

Section 10: Workshop: ฟีเจอร์หลักของ AuraMarket

ระบบสมาชิกพร้อม Biometric
แค็ตตาล็อกที่กรองขั้นสูงและทำงานออฟไลน์ได้
ตะกร้าที่จำสถานะและซิงก์กับ Server
Workshop: ทดสอบบนมือถือจริงด้วย Development Build

Day 3 Production: แจ้งเตือน, Testing และ Release

Section 11: Lab: Push Notifications ด้วย expo-notifications

ตั้งค่า FCM สำหรับ Android และ APNs สำหรับ iOS ผ่าน EAS
ขอสิทธิ์ รับ Push Token และส่งผ่าน Expo Push Service หรือ FCM โดยตรง
Local Notification และการตั้งเวลาแจ้งเตือน
เปิดหน้าที่เกี่ยวข้องเมื่อแตะการแจ้งเตือนด้วย Expo Router
Lab: แจ้งเตือนเมื่อสถานะคำสั่งซื้อเปลี่ยน

Section 12: Lab: Background Task และ Native Module

สถานะแอปด้วย AppState และงานเบื้องหลังด้วย expo-background-task
ข้อจำกัดของงานเบื้องหลังบน Android และ iOS
Config Plugin สำหรับปรับโปรเจกต์ Native โดยไม่แก้มือ
สร้าง Native Module อย่างง่ายด้วย Expo Modules API
Lab: ซิงก์ข้อมูลเบื้องหลังเป็นระยะ

Section 13: Lab: Testing และ Quality

Unit Test ด้วย Jest และ jest-expo
ทดสอบ Component และ Hook ด้วย React Native Testing Library
Mock API และ Native Module ในการทดสอบ
E2E Test ด้วย Maestro และภาพรวม Detox เป็นทางเลือก
Lab: ชุดทดสอบสำหรับขั้นตอนสั่งซื้อ

Section 14: Release และ Monitoring ด้วย EAS

EAS Build Profile และ Environment Variables บน EAS
ส่งแอปขึ้น Store ด้วย EAS Submit และเตรียมหน้า Store
อัปเดตแบบ Over-the-Air ด้วย EAS Update, Channel และ Rollout
ทำ CI/CD ด้วย EAS Workflows
ติดตาม Crash และประสิทธิภาพด้วย Sentry

Section 15: Workshop: Capstone แอป AuraMarket พร้อมใช้งาน

เพิ่มแชตกับร้านค้าแบบเรียลไทม์และการแจ้งเตือน
รันชุดทดสอบและแก้ปัญหาประสิทธิภาพที่พบ
Build รุ่น Preview และส่งอัปเดตผ่าน EAS Update
นำเสนอผลงาน รีวิวโค้ด และวางแผนพัฒนาต่อ

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

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

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

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

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

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

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

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

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

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

Redux Toolkit กับ Zustand ต่างกันอย่างไร ควรเลือกใช้ตอนไหน

Redux Toolkit มีโครงสร้างชัดเจนด้วย Store, Slice และ Action มีเครื่องมือดีบักที่ดี จึงเหมาะกับแอปขนาดใหญ่ที่หลายคนพัฒนาร่วมกัน ส่วน Zustand เขียนสั้นกว่า สร้าง Store ด้วยฟังก์ชันเดียวโดยไม่ต้องครอบ Provider เหมาะกับแอปขนาดกลางหรือ State ที่ไม่ซับซ้อน ทั้งสองแบบควรใช้กับ Global State เท่านั้น ส่วนข้อมูลจาก API ให้ใช้ TanStack Query ดูแล Cache และการโหลดใหม่ และเก็บ State ที่ใช้เฉพาะหน้าจอไว้ในคอมโพเนนต์

TanStack Query ช่วยอะไรในแอป React Native

TanStack Query ดูแลข้อมูลที่มาจาก Server ให้ทั้งการ Cache การโหลดใหม่เมื่อข้อมูลเก่า การลองใหม่เมื่อผิดพลาด และสถานะโหลดหรือ Error โดยไม่ต้องเขียน useEffect กับ State เองทุกหน้าจอ รองรับ Mutation พร้อม Optimistic Update ที่แสดงผลทันทีแล้วย้อนกลับถ้าล้มเหลว Infinite Query สำหรับรายการยาว และ Persist Cache ลงเครื่องเพื่อให้เปิดแอปแล้วเห็นข้อมูลทันทีแม้ยังออฟไลน์

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

เก็บข้อมูลที่ผู้ใช้ต้องเห็นไว้ในเครื่องด้วย expo-sqlite หรือ Persist Cache แล้วแสดงข้อมูลจากเครื่องก่อนเสมอ จากนั้นค่อยดึงข้อมูลใหม่จาก Server มาอัปเดต เมื่อผู้ใช้แก้ข้อมูลระหว่างออฟไลน์ให้เก็บรายการเปลี่ยนแปลงไว้ในคิว แล้วส่งขึ้น Server เมื่อเชื่อมต่อได้อีกครั้ง พร้อมกำหนดวิธีจัดการข้อมูลชนกัน และแสดงสถานะการซิงก์ให้ผู้ใช้รู้

EAS Update คืออะไร ต่างจากการส่งแอปขึ้น Store อย่างไร

EAS Update ใช้ส่งการแก้ไขส่วน JavaScript และไฟล์ภาพไปยังแอปที่ติดตั้งอยู่แล้วแบบ Over-the-Air โดยไม่ต้องรอการตรวจของ Store เหมาะกับการแก้บั๊กหรือปรับข้อความเล็กน้อย กำหนดได้ว่าจะส่งให้ Channel ไหนและทยอยปล่อยเป็นสัดส่วน ส่วนการเปลี่ยนโค้ด Native เช่น เพิ่ม Library ที่มีโค้ด Native หรือเปลี่ยนสิทธิ์ของแอป ยังต้อง Build ใหม่ด้วย EAS Build แล้วส่งขึ้น Store ผ่าน EAS Submit ตามปกติ

หลักสูตร Advanced React Native with Expo เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักพัฒนาที่ผ่านหลักสูตร React Native ระดับพื้นฐานและขั้นกลาง หรือมีประสบการณ์เทียบเท่า Mobile Developer และ Software Engineer ที่พัฒนาแอประดับองค์กร และ Tech Lead ที่ต้องวางสถาปัตยกรรมของทีม ควรเข้าใจ TypeScript, async/await, React Hooks และ Context API เคยทำงานกับ REST API และการยืนยันตัวตน และคุ้นเคยกับ Git, npm และ Command Line

เรียนจบหลักสูตร Advanced React Native with Expo แล้วทำอะไรได้บ้าง

วางโครงสร้างแอปที่ขยายได้ จัดการ State ด้วย Zustand, Redux Toolkit และ TanStack Query เชื่อม GraphQL ทำแอปแบบ Offline-first ทำระบบยืนยันตัวตนด้วย OAuth, JWT และ Biometric สร้าง Animation ด้วย Reanimated ส่ง Push Notifications เขียนเทสต์ด้วย Jest และ Maestro และออกเวอร์ชันด้วย EAS Build, Submit และ Update พร้อมติดตามข้อผิดพลาดด้วย Sentry ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้