Cross-Platform Mobile Apps with Ionic and Capacitor

Section 1: ภาพรวมแอป Cross Platform ด้วย Ionic และ Capacitor

• แอป Native, Cross Platform และ Hybrid ต่างกันอย่างไร และเลือกใช้แบบไหนเมื่อไร
• Ionic Framework คือชุด UI Components ส่วน Capacitor คือ Native Runtime ที่มาแทน Cordova
• สถาปัตยกรรมของแอป: Web App ที่รันใน WebView และเรียก Native API ผ่าน Plugin
• จุดเด่นและข้อจำกัดของแนวทางนี้ เช่น งานกราฟิกหนักและฟีเจอร์ที่ผูกกับระบบปฏิบัติการ
• ภาพรวมเวอร์ชันปัจจุบัน: Ionic 9, Capacitor 8 และ Angular ที่รองรับ

Section 2: Lab: ติดตั้งเครื่องมือบน Windows และ macOS

• ติดตั้ง Node.js รุ่น LTS, Git และ VS Code พร้อม Ionic Extension
• ติดตั้ง Android Studio ซึ่งมี JDK มาในตัว ตั้งค่า Android SDK และสร้าง Emulator
• ติดตั้ง Xcode และ iOS Simulator บน macOS สำหรับผู้ที่ทำแอป iOS
• ติดตั้ง Ionic CLI และตรวจความพร้อมของเครื่องด้วยคำสั่ง ionic info
• เปิดโหมดนักพัฒนาและ USB Debugging บนมือถือ Android เพื่อเชื่อมกับเครื่อง

Section 3: Lab: TypeScript และ Angular แบบ Standalone สำหรับ Ionic

• TypeScript ที่ต้องใช้: Type, Interface, Class, Generics และ async/await
• Angular Component แบบ Standalone, Template และ Data Binding
• Signals, computed และ Control Flow แบบ @if และ @for ใน Template
• Service และ Dependency Injection ด้วยฟังก์ชัน inject
• Lab: สร้าง Component แสดงรายการสินค้าพร้อมตัวกรอง

Section 4: Lab: โปรเจกต์ Ionic แรกและการกำหนด Theme

• สร้างโปรเจกต์ด้วย ionic start แบบ Angular Standalone พร้อม Capacitor
• อธิบายโครงสร้างโปรเจกต์ทีละส่วน: src/app, assets, theme และ capacitor.config.ts
• รันด้วย ionic serve และพรีวิวหน้าตาแบบ iOS และ Android ในเบราว์เซอร์
• ปรับสีและฟอนต์ด้วย CSS Variables รองรับ Dark Mode และฟอนต์ภาษาไทย
• Lab: ปรับแอปตั้งต้นให้เป็นแอปของตัวเอง

Section 5: Lab: ออกแบบหน้าจอด้วย Ionic Components

• Layout หลัก: ion-header, ion-content, ion-grid และ ion-card
• รายการข้อมูลด้วย ion-list, ion-item, Avatar, Badge และ Sliding Item
• ปุ่ม ไอคอนจาก Ionicons และการลงทะเบียนไอคอนแบบ Standalone
• Overlay ที่ใช้บ่อย: Alert, Toast, Action Sheet, Modal และ Loading
• Lab: สร้างหน้ารายการร้านค้าพร้อมรายละเอียดแบบ Modal

Section 6: Lab: Navigation และการส่งข้อมูลระหว่างหน้า

• สร้าง Page ด้วย Ionic CLI และกำหนด Route ด้วย Angular Router
• ion-router-outlet และ NavController: navigateForward, navigateBack และ navigateRoot
• แอปแบบ Tabs และ Side Menu และการเลือกใช้ให้เหมาะกับงาน
• ส่งข้อมูลด้วย Route Parameter และรับค่าผ่าน Component Input
• Page Lifecycle ของ Ionic เช่น ionViewWillEnter และการใช้งานจริง

Section 7: Lab: ฟอร์มและการตรวจสอบข้อมูล

• ส่วนประกอบฟอร์มของ Ionic: ion-input, ion-select, ion-toggle และ ion-datetime
• Reactive Forms พร้อม Validators และข้อความแจ้งข้อผิดพลาด
• รู้จัก Signal Forms แนวทางใหม่ของ Angular และเมื่อไรควรใช้
• จัดการแป้นพิมพ์บนมือถือและประสบการณ์กรอกข้อมูลที่ดี
• Lab: ฟอร์มลงทะเบียนสมาชิกพร้อมตรวจสอบข้อมูลก่อนส่ง

Section 8: Workshop: แอป Master Detail และ Git

• ออกแบบแอปรายการสินค้าแบบ Master Detail จากสิ่งที่เรียนมา
• แยก Service สำหรับจัดการข้อมูลและใช้ Signals เก็บ State ของแอป
• เพิ่ม ค้นหา แก้ไข และลบรายการพร้อม Toast ยืนยันผล
• ใช้ Git ใน VS Code: init, commit, push ขึ้น GitHub และ clone กลับมาติดตั้งใหม่
• Workshop: ทำแอปให้สมบูรณ์และทดสอบบนเบราว์เซอร์

Section 9: Lab: รับส่งข้อมูลกับ REST API

• หลักการ RESTful API และรูปแบบข้อมูล JSON
• เตรียม REST API ตัวอย่างที่ต่อกับฐานข้อมูล MySQL และทดสอบด้วย Postman หรือ Bruno
• เรียก API ด้วย Angular HttpClient และ Observable ของ RxJS
• ดึงข้อมูลแบบ Reactive ด้วย httpResource และแสดงสถานะโหลดและข้อผิดพลาด
• เพิ่ม แก้ไข และลบข้อมูลผ่าน API พร้อม Interceptor สำหรับแนบ Token

Section 10: Lab: แสดงข้อมูลจำนวนมากอย่างลื่นไหล

• แสดงรายการจาก API พร้อม Skeleton Text ระหว่างโหลด
• Pull to Refresh ด้วย ion-refresher
• Infinite Scroll สำหรับโหลดข้อมูลทีละหน้า
• Virtual Scroll ด้วย Angular CDK สำหรับรายการยาวมาก
• Lab: หน้ารายการข่าวที่โหลดเพิ่มและรีเฟรชได้

Section 11: Lab: เก็บข้อมูลในเครื่อง

• เลือกวิธีเก็บข้อมูลให้เหมาะกับงาน: Preferences, Ionic Storage และ SQLite
• เก็บค่าตั้งค่าและ Token ด้วย Capacitor Preferences
• เก็บข้อมูลแบบตารางด้วย SQLite ผ่าน Capacitor Plugin: แสดง เพิ่ม ลบ แก้ไข
• แนวทางทำงานแบบ Offline แล้วซิงก์กับ Server ภายหลัง
• Lab: แอปจดบันทึกที่ข้อมูลยังอยู่หลังปิดแอป

Section 12: Lab: รันแอปบนมือถือจริงด้วย Capacitor

• เพิ่มแพลตฟอร์มด้วย npx cap add android และ ios แล้วซิงก์ด้วย npx cap sync
• รันบน Emulator, Simulator และมือถือจริงด้วย npx cap run
• Live Reload บนเครื่องจริงเพื่อดูผลการแก้โค้ดทันที
• Debug แอปบนมือถือด้วย Chrome DevTools และ Safari Web Inspector
• Lab: ติดตั้งแอป Master Detail ลงมือถือของผู้เรียน

Section 13: Lab: Capacitor Plugins สำหรับกล้องและไฟล์

• หลักการทำงานของ Capacitor Plugin และการขอ Runtime Permission
• ถ่ายภาพและเลือกภาพจาก Gallery ด้วย Camera Plugin
• บันทึกและอ่านไฟล์ในเครื่องด้วย Filesystem Plugin
• อัปโหลดภาพที่ถ่ายขึ้น Server ผ่าน REST API
• Lab: หน้าโปรไฟล์ที่เปลี่ยนรูปจากกล้องได้

Section 14: Lab: Native Features ที่แอปธุรกิจใช้บ่อย

• อ่านตำแหน่งปัจจุบันด้วย Geolocation Plugin
• สแกน Barcode และ QR Code ผ่าน Capacitor Plugin
• เปิดหน้าเว็บในแอปด้วย Browser Plugin และแชร์ข้อมูลด้วย Share Plugin
• แจ้งเตือนในเครื่องด้วย Local Notifications และภาพรวม Push Notifications
• Lab: แอปเช็กอินด้วย QR Code พร้อมบันทึกตำแหน่ง

Section 15: Lab: ปรับแต่งรายละเอียดของแอป

• สร้างไอคอนและ Splash Screen ทุกขนาดด้วย Capacitor Assets
• เปลี่ยนชื่อแอป App ID และเลขเวอร์ชันใน capacitor.config.ts และโปรเจกต์ Native
• ล็อกการแสดงผลแนวตั้งหรือแนวนอน และปรับ Status Bar
• ลดขนาดรูปภาพและไฟล์ก่อน Build เพื่อให้แอปเล็กและเร็ว

Section 16: Build และนำแอปขึ้น Store

• Build เว็บแอปแบบ Production แล้วซิงก์เข้าโปรเจกต์ Native
• สร้าง Android App Bundle ที่ลงลายเซ็นใน Android Studio และขั้นตอนบน Google Play Console
• Archive แอป iOS ใน Xcode และส่งผ่าน App Store Connect เพื่อรอการตรวจ
• เตรียมรายละเอียดหน้า Store ภาพหน้าจอ และนโยบายความเป็นส่วนตัว
• แนวทางอัปเดตเวอร์ชันและอัปเกรด Ionic กับ Capacitor ในอนาคต

Section 17: Workshop: แอปสมบูรณ์จากต้นจนจบ

• เลือกโจทย์จาก Template ที่เตรียมไว้: แอปอ่านข่าว แอปร้านค้า หรือแอปแกลเลอรีภาพ
• รวมหน้าจอ Navigation, REST API, การเก็บข้อมูลในเครื่อง และ Capacitor Plugins
• ทดสอบบนมือถือจริง แก้บั๊ก และใส่ไอคอนกับ Splash Screen
• Build ไฟล์สำหรับติดตั้ง นำเสนอผลงาน และรีวิวร่วมกัน